FileMaster

Edit File: SpecialDays.vue

<template>
  <div
    class="am-caesd"
    :style="cssVars"
  >
    <div
      v-for="(specialDay, specialDayIndex) in specialDayList"
      :key="specialDayIndex"
      class="am-caesd__content"
    >
      <div class="am-caesd__item">
        <div class="am-caesd__item-header">
          <template v-if="editedSpecialDay.index !== specialDayIndex">
            <div>
              {{ specialDay.range[0] ? (getFrontedFormattedDate(moment(specialDay.range[0]).format('YYYY-MM-DD'))) : '' }} - {{ specialDay.range[1] ? (getFrontedFormattedDate(moment(specialDay.range[1]).format('YYYY-MM-DD'))) : '' }}
            </div>

<el-form
            v-if="editedSpecialDay.index === specialDayIndex"
            :ref="el => setFormRef(el, specialDayIndex)"
            class="am-caesd__form"
            :rules="rules"
            :model="specialDayFormData"
            label-position="top"
          >
            <el-form-item
              :prop="'range'"
            >
              <AmDatePicker
                v-model="specialDayFormData.range"
                type="daterange"
                size="small"
                :popper-class="'am-cap__datepicker-popper'"
                :prefix-icon="markRaw({
                  components: { IconComponent },
                  template: `<IconComponent icon='calendar'/>`
                })"
                :format="momentDateFormat()"
                :placeholder="amLabels.select_date"
                :lang="localLanguage"
              />
            </el-form-item>
          </el-form>
          <div v-if="periodsErrorDisplay">

</div>
        </div>

<div
          class="am-caesd__item-inner"
          :class="{'am-editable': editedSpecialDay.index === specialDayIndex}"
        >
          <Periods
            :title="amLabels.special_days"
            :enabled="true"
            :index="specialDayIndex"
            :type="'specialDayList'"
            :apply-to-all-days-visible="false"
            :header-visible="editedSpecialDay.index === specialDayIndex"
            :edit-visible="editedSpecialDay.index === specialDayIndex"
            :footer-visible="editedSpecialDay.index === specialDayIndex"
            :error="editedSpecialDay.index === specialDayIndex ? periodsErrorDisplay : ''"
            :responsive-class="props.responsiveClass"
            @add-period="() => {periodsErrorDisplay = ''}"
          />
        </div>
      </div>

<template v-if="editedSpecialDay.index === specialDayIndex">
        <div class="am-caesd__footer">
          <AmButton
            category="secondary"
            type="plain"
            size="small"
            @click="cancelEditSpecialDay(specialDayIndex)"
          >
            {{ amLabels.cancel }}
          </AmButton>

<AmButton
            :size="'small'"
            @click="saveSpecialDay(specialDayIndex)"
          >
            {{ amLabels.save }}
          </AmButton>
        </div>
      </template>
    </div>

<div v-if="editedSpecialDay.index === null" :class="specialDayList.length === 0 ? 'add-btn' : ''">
      <AmButton
        :size="'small'"
        @click="addSpecialDay()"
      >
        {{ amLabels.add_special_day }}
      </AmButton>
    </div>

</div>
</template>

// * Import from Vuex
import { useStore } from "vuex";

import moment from "moment";

// * Composables
import {
  getFrontedFormattedDate,
  momentDateFormat,
} from "../../../../../../assets/js/common/date";
import { useColorTransparency } from "../../../../../../assets/js/common/colorManipulation";

// * Dedicated components
import Periods from "./Periods.vue";
import AmDatePicker from "../../../../../_components/datePicker/AmDatePicker.vue";
import DotsPopup from "../../../../Parts/DotsPopup.vue";
import AmButton from "../../../../../_components/button/AmButton.vue";
import IconComponent from "../../../../../_components/icons/IconComponent.vue";
import EmptyState from "../../parts/EmptyState.vue";

let props = defineProps({
  responsiveClass: {
    type: String,
    default: '',
  }
})

let store = useStore()

// * Labels
let amLabels = inject('amLabels')

// * Language
let localLanguage = inject('localLanguage')

let specialDayList = computed(() => {
  return store.getters['employee/getEmployee'].specialDayList
})

let editedSpecialDay = reactive({
  data: null,
  index: null,
})

let specialDayFormData = ref({
  range: computed({
    get: () => store.getters['employee/getEmployee'].specialDayList[editedSpecialDay.index].range,
    set: (val) => {
      store.getters['employee/getEmployee'].specialDayList[editedSpecialDay.index].range = val
    }
  }),
})

let specialDayFormRef = ref([])

let rules = computed(() => {
  return {
    range: [
      {
        required: true,
        message: amLabels.select_date_warning,
        trigger: ['submit', 'change'],
      }
    ],
  }
})

function removeSpecialDay (specialDayIndex) {
  specialDayList.value.splice(specialDayIndex, 1)
}

function editSpecialDay (specialDayIndex) {
  editedSpecialDay.index = specialDayIndex

editedSpecialDay.data = JSON.parse(JSON.stringify(specialDayList.value[specialDayIndex]))
}

function duplicateSpecialDay (specialDayIndex) {
  let clonedPeriods = []

specialDayList.value[specialDayIndex].periodList.forEach((period) => {
    clonedPeriods.push({
      id: null,
      locationId: null,
      startTime: period.startTime,
      endTime: period.endTime,
      periodLocationList: [...period.periodLocationList],
      periodServiceList: [...period.periodServiceList],
      editing: false,
    })
  })

store.getters['employee/getEmployee'].specialDayList.push({
    id: null,
    range: [],
    periodList: clonedPeriods,
  })

editedSpecialDay.index = specialDayList.value.length - 1

editedSpecialDay.data = {}
}

let periodsErrorDisplay = ref('')

function saveSpecialDay (index) {
  let periodList = store.getters['employee/getEmployee'].specialDayList[index].periodList
  specialDayFormRef.value[index].validate((valid) => {
    if (valid && periodList.length > 0) {
      periodsErrorDisplay.value = ''

editedSpecialDay.index = null

editedSpecialDay.data = null
    } else {
      periodsErrorDisplay.value = 'Please add period to special day'
    }
  })
}

function cancelEditSpecialDay (specialDayIndex) {
  if (Object.keys(editedSpecialDay.data).length === 0) {
    specialDayList.value.pop()
  } else {
    specialDayList.value[specialDayIndex] = editedSpecialDay.data
  }

editedSpecialDay.index = null

editedSpecialDay.data = null

periodsErrorDisplay.value = ''
}

function addSpecialDay () {
  specialDayList.value.push({
    id: null,
    range: [],
    periodList: [],
  })

editedSpecialDay.index = specialDayList.value.length - 1

editedSpecialDay.data = {}
}

function setFormRef (el, index) {
  if (el) {
    specialDayFormRef.value[index] = el;
  } else {
    specialDayFormRef.value.splice(index, 1);
  }
}

// * Colors
let amColors = inject('amColors')

let cssVars = computed(() => {
  return {
    '--am-c-caesd-bgr': amColors.value.colorMainBgr,
    '--am-c-caesd-text': amColors.value.colorMainText,
    '--am-c-caesd-text-op03': useColorTransparency(amColors.value.colorMainText, 0.03),
    '--am-c-caesd-text-op80': useColorTransparency(amColors.value.colorMainText, 0.8),
  }
})
</script>

.add-btn {
      display: flex;
      align-self: center;
    }

&__content {
      display: flex;
      flex-direction: column;
      gap: 8px;
      background-color: var(--am-c-caesd-text-op03);
      border-radius: 8px;
      padding: 16px 24px;
    }

&__item {
      display: flex;
      flex-direction: column;
      gap: 16px;

&-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        color: var(--am-c-main-text);

.am-date-picker-wrapper .el-input__inner{
          width: 100%;
        }
      }

&-inner {
        .am-caeper__content {
          padding: 0;
          background-color: transparent;
        }

&.am-editable {
          .am-caeper__content {
            padding: 16px 24px;
            background-color: var(--am-c-caeper-bgr);
          }
        }
      }
    }

&__footer {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      gap: 16px;
    }

.am-caeper {
      &__footer {
        padding: 8px 0 0;
      }
    }

.el-form-item__error {
      color: var(--am-c-error);
    }
  }
}

.amelia-v2-booking #amelia-container {
  @include am-cabinet-employee-special-days;
}
</style>

Back