FileMaster

Edit File: DaysOff.vue

<template>
  <div
    class="am-caedo"
    :style="cssVars"
  >
    <span
      v-if="globalDayOffList.length"
      class="am-caedo__title_emp"
    >
      {{ amLabels.employee_days_off }}
    </span>

<div
      v-if="dayOffList.length || globalDayOffList.length"
      class="am-caedo__heading"
      :class="props.responsiveClass"
    >
      <div class="am-caedo__heading-item am-w-50">
        {{ amLabels.date }}
      </div>
      <div class="am-caedo__heading-item am-w-30">
        {{ amLabels.name }}
      </div>
      <div class="am-caedo__heading-item am-w-20">
        {{ amLabels.days_off_repeat_yearly }}
      </div>
    </div>

<div
      v-for="(dayOff, dayOffIndex) in dayOffList"
      :key="dayOffIndex"
      class="am-caedo__content"
    >
      <div class="am-caedo__content-item">
        <div
          class="am-caedo__content-item__inner am-w-50"
          :class="props.responsiveClass"
        >
          <div
            class="am-caedo__content-item__label"
            :class="props.responsiveClass"
          >
            {{ amLabels.date }}
          </div>
          {{ datesDisplay(dayOff) }}
        </div>

<div
          class="am-caedo__content-item__inner am-w-30"
          :class="props.responsiveClass"
        >
          <div
            class="am-caedo__content-item__label"
            :class="props.responsiveClass"
          >
            {{ amLabels.name }}
          </div>
          {{ dayOff.name }}
        </div>

<div
          class="am-caedo__content-item__inner am-w-20"
          :class="props.responsiveClass"
        >
          <div
            class="am-caedo__content-item__label"
            :class="props.responsiveClass"
          >
            {{ amLabels.days_off_repeat_yearly }}
          </div>
          {{ dayOff.repeat ? amLabels.yes : amLabels.no }}
        </div>

<div
        v-if="editedDayOff.index === dayOffIndex"
        class="am-caedo__wrapper"
      >
        <el-form
          :ref="el => setFormRef(el, dayOffIndex)"
          class="am-caedo__form"
          :rules="rules"
          :model="dayOffFormData"
          label-position="top"
        >
          <el-form-item
            :label="`${amLabels.date}:`"
            :prop="'range'"
          >
            <AmDatePicker
              v-model="dayOffFormData.range"
              type="daterange"
              :popper-class="'am-cap__datepicker-popper'"
              :format="momentDateFormat()"
              :placeholder="amLabels.select_date"
              :lang="localLanguage"
            />
          </el-form-item>

<el-form-item
            :label="`${amLabels.name}:`"
            :prop="'name'"
          >
            <AmInput
              v-model="dayOffFormData.name"
            />
          </el-form-item>

<el-form-item
            :prop="'repeat'"
          >
            <AmCheckbox
              v-model="dayOffFormData.repeat"
              :label="amLabels.days_off_repeat_yearly"
            >
            </AmCheckbox>
          </el-form-item>
        </el-form>

<div class="am-caedo__footer">
          <AmButton
            category="secondary"
            :size="'small'"
            type="plain"
            @click="cancelEditDayOff(dayOffIndex)"
          >
            {{ amLabels.cancel }}
          </AmButton>

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

<div v-if="editedDayOff.index === null" :class="dayOffList.length === 0 && globalDayOffList.length === 0 ? 'add-btn' : ''">
      <AmButton
        :size="'small'"
        @click="addDayOff()"
      >
        {{ amLabels.add_day_off }}
      </AmButton>
    </div>

<span
      v-if="globalDayOffList.length"
      class="am-caedo__title_global"
    >
      {{ amLabels.company_days_off }}
    </span>

<div
      v-if="globalDayOffList.length"
      class="am-caedo__heading"
      :class="props.responsiveClass"
    >
      <div class="am-caedo__heading-item am-w-50">
        {{ amLabels.date }}
      </div>
      <div class="am-caedo__heading-item am-w-30">
        {{ amLabels.name }}
      </div>
      <div class="am-caedo__heading-item am-w-20">
        {{ amLabels.days_off_repeat_yearly }}
      </div>
    </div>

<div
      v-for="(dayOff, dayOffIndex) in globalDayOffList"
      :key="dayOffIndex"
      class="am-caedo__content"
    >
      <div class="am-caedo__content-item">
        <div
          class="am-caedo__content-item__inner am-w-50"
          :class="props.responsiveClass"
        >
          <div
            class="am-caedo__content-item__label"
            :class="props.responsiveClass"
          >
            {{ amLabels.date }}
          </div>
          {{ datesDisplay(dayOff) }}
        </div>

// * 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 AmDatePicker from "../../../../../_components/datePicker/AmDatePicker.vue";
import DotsPopup from "../../../../Parts/DotsPopup.vue";
import AmButton from "../../../../../_components/button/AmButton.vue";
import AmInput from "../../../../../_components/input/AmInput.vue";
import AmCheckbox from "../../../../../_components/checkbox/AmCheckbox.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')

// * Settings
const amSettings = inject('settings')

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

let globalDayOffList = ref([])

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

let dayOffFormData = ref({
  range: computed({
    get: () => store.getters['employee/getEmployee'].dayOffList[editedDayOff.index].range,
    set: (val) => {
      store.getters['employee/getEmployee'].dayOffList[editedDayOff.index].range = val
    }
  }),
  name: computed({
    get: () => store.getters['employee/getEmployee'].dayOffList[editedDayOff.index].name,
    set: (val) => {
      store.getters['employee/getEmployee'].dayOffList[editedDayOff.index].name = val
    }
  }),
  repeat: computed({
    get: () => store.getters['employee/getEmployee'].dayOffList[editedDayOff.index].repeat,
    set: (val) => {
      store.getters['employee/getEmployee'].dayOffList[editedDayOff.index].repeat = val
    }
  }),
})

let dayOffFormRef = ref([])

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

function removeDayOff (dayOffIndex) {
  dayOffList.value.splice(dayOffIndex, 1)
}

function editDayOff (dayOffIndex) {
  editedDayOff.index = dayOffIndex

editedDayOff.data = JSON.parse(JSON.stringify(dayOffList.value[dayOffIndex]))
}

function saveDayOff (index) {
  dayOffFormRef.value[index].validate((valid) => {
    if (valid) {
      editedDayOff.index = null

editedDayOff.data = null
    }
  })
}

function cancelEditDayOff (dayOffIndex) {
  if (Object.keys(editedDayOff.data).length === 0) {
    dayOffList.value.pop()
  } else {
    dayOffList.value[dayOffIndex] = editedDayOff.data
  }

editedDayOff.index = null

editedDayOff.data = null
}

function addDayOff () {
  dayOffList.value.push({
    id: null,
    name: '',
    repeat: false,
    range: [],
  })

editedDayOff.index = dayOffList.value.length - 1

editedDayOff.data = {}
}

function datesDisplay (dayOff) {
  let dayFirst = dayOff.range[0] ? (getFrontedFormattedDate(moment(dayOff.range[0]).format('YYYY-MM-DD'))) : ''
  let dayLast = dayOff.range[1] ? (getFrontedFormattedDate(moment(dayOff.range[1]).format('YYYY-MM-DD'))) : ''
  return  `${dayFirst} - ${dayLast}`
}

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

onMounted(() => {
  globalDayOffList.value = amSettings.daysOff.map(
    i => new Object({
      range: [i.startDate, i.endDate],
      name: i.name,
      repeat: i.repeat,
    })
  )
})

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

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

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

&__title_emp {
      margin: 10px;
      padding: 10px;
    }

&__title_global {
      margin: 10px;
      padding: 10px;
      border-top: 1px solid #747775 !important;
    }

// * Heading
    &__heading {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      padding: 4px 24px 4px 16px;
      gap: 8px;
      border-radius: 6px;
      background-color: var(--am-c-caedo-text-op03);

&.am-rw-600 {
        display: none;
      }

&-item {
        display: flex;
        align-items: flex-start;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 20px;
        color: var(--am-c-caedo-text);

&.am-w-50 {
          width: calc(50% - 10px);
        }

&.am-w-30 {
          width: calc(30% - 11px);
        }

&.am-w-20 {
          width: calc(20% - 11px);
        }
      }
    }

// * Content
    &__content {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 8px;
      max-width: 100%;
      width: 100%;

&-item {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        padding: 16px 24px 16px 16px;
        border-radius: 6px;
        background-color: var(--am-c-caedo-text-op03);

&__inner {
          display: block;
          font-size: 14px;
          font-style: normal;
          font-weight: 400;
          line-height: 20px;
          color: var(--am-c-caedo-text);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;

&.am-w-50 {
            width: calc(50% - 10px);

&.am-rw-600 {
              width: 100%;
              white-space: break-spaces;
              overflow: unset;
              text-overflow: unset;
            }
          }

&.am-w-30 {
            width: calc(30% - 11px);
            &.am-rw-600 {
              width: 100%;
              white-space: break-spaces;
              overflow: unset;
              text-overflow: unset;
            }
          }

&.am-w-20 {
            width: calc(20% - 11px);
            &.am-rw-600 {
              width: 100%;
              white-space: break-spaces;
              overflow: unset;
              text-overflow: unset;
            }
          }
        }

&__label {
          display: none;
          align-items: center;
          font-size: 14px;
          font-style: normal;
          font-weight: 500;
          line-height: 20px;
          color: var(--am-c-caedo-text);

&.am-rw-600 {
            display: block;
          }
        }

.am-cc__edit-btn {
          position: absolute;
          top: 50%;
          right: 0;
          transform: translateY(-50%);
          color: var(--am-c-main-text);
        }
      }
    }

// * Wrapper
    &__wrapper {
      display: flex;
      flex-direction: column;
      padding: 16px 24px;
      border-radius: 6px;
      background-color: var(--am-c-caedo-text-op03);
    }

// * Form
    &__form {
      display: flex;
      flex-direction: column;
      gap: 8px;

.el-form-item {
        width: 100%;

&__error {
          color: var(--am-c-error);
          padding: 0;
        }
      }

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

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

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

Back