feature: add special time tab in calendars page[WTEL-4099]

src/app/locale/en/en.js

@@ -428,6 +428,7 @@ export default {
         start: 'Start',
         end: 'End',
         workWeek: 'Working week',
+        specialTime: 'Special time',
         holidays: 'Holiday | Holidays',
         date: 'Date',
         repeat: 'Repeat',

src/app/locale/ru/ru.js

@@ -434,6 +434,7 @@ export default {
         start: 'Начало',
         end: 'Конец',
         workWeek: 'Рабочая неделя',
+        specialTime: 'Особенное время',
         holidays: 'Выходной | Выходные',
         date: 'Дата',
         repeat: 'Повторить',

src/app/locale/ua/ua.js

@@ -429,6 +429,7 @@ export default {
         start: 'Початок',
         end: 'Кінець',
         workWeek: 'Робочий тиждень',
+        specialTime: 'Особливий час',
         holidays: 'Вихідний | Вихідні',
         date: 'Дата',
         repeat: 'Повторювати',

src/modules/lookups/modules/calendars/api/calendars.js

@@ -48,6 +48,7 @@ const getCalendar = async ({ itemId: id }) => {
       expires: !!(copy.startAt || copy.endAt),
       accepts: [],
       excepts: [],
+      specials: [],
     };
     // eslint-disable-next-line no-param-reassign
     copy.accepts = copy.accepts.map((accept) => ({
@@ -56,6 +57,14 @@ const getCalendar = async ({ itemId: id }) => {
       start: accept.startTimeOfDay || 0,
       end: accept.endTimeOfDay || 0,
     }));
+    if(copy.specials) {
+      copy.specials = copy.specials.map((special) => ({
+        day: special.day || 0,
+        disabled: special.disabled || false,
+        start: special.startTimeOfDay || 0,
+        end: special.endTimeOfDay || 0,
+      }));
+    }
     if (copy.excepts) {
       // eslint-disable-next-line no-param-reassign
       copy.excepts = copy.excepts.map((except) => ({
@@ -87,6 +96,7 @@ const fieldsToSend = [
   'day',
   'accepts',
   'excepts',
+  'specials',
   'startTimeOfDay',
   'endTimeOfDay',
   'disabled',
@@ -111,6 +121,13 @@ const preRequestHandler = (item) => {
     startTimeOfDay: accept.start,
     endTimeOfDay: accept.end,
   }));
+
+  copy.specials = copy.specials.map((special) => ({
+    day: special.day,
+    disabled: special.disabled,
+    startTimeOfDay: special.start,
+    endTimeOfDay: special.end,
+  }));
   return copy;
 };
 

src/modules/lookups/modules/calendars/components/opened-calendar-special-time.vue

@@ -0,0 +1,106 @@
+<template>
+  <section class="opened-calendar-special-time">
+    <header class="content-header">
+      <h3 class="content-title">
+        {{ $t('objects.lookups.calendars.specialTime') }}
+      </h3>
+    </header>
+
+    <div class="table-wrapper">
+      <div class="table-wrapper__visible-scroll-wrapper">
+        <wt-table
+          :data="dataList"
+          :grid-actions="!disableUserInput"
+          :headers="headers"
+          :selectable="false"
+        >
+          <template #name="{ item, index }">
+            <span v-if="isDayStart(index)">
+              {{ weekDaysList[item.day] }}
+            </span>
+          </template>
+          <template #start="{ item, index }">
+            <wt-timepicker
+              :disabled="disableUserInput"
+              :value="minToSec(item.start)"
+              format="hh:mm"
+              @input="setItemProp({prop: 'start', index, value: secToMin($event)})"
+            />
+          </template>
+          <template #end="{ item, index }">
+            <wt-timepicker
+              :disabled="disableUserInput"
+              :value="minToSec(item.end)"
+              format="hh:mm"
+              @input="setItemProp({prop: 'end', index, value: secToMin($event)})"
+            />
+          </template>
+          <template #state="{ item, index }">
+            <wt-switcher
+              :disabled="disableUserInput"
+              :value="!item.disabled"
+              @change="setItemProp({prop: 'disabled', index, value: !$event})"
+            />
+          </template>
+          <template #actions="{ item, index }">
+            <wt-icon-action
+              v-if="isDayStart(index)"
+              action="add"
+              @click="addRange(item.day)"
+            />
+            <wt-icon-action
+              v-else
+              action="delete"
+              @click="addRange(index)"
+            />
+          </template>
+        </wt-table>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+import { mapActions } from 'vuex';
+import openedTabComponentMixin
+  from '../../../../../app/mixins/objectPagesMixins/openedObjectTabMixin/openedTabComponentMixin';
+import { useWeekDaysData } from '../composables/useWeekDaysData.js';
+
+const namespace = 'lookups/calendars';
+
+export default {
+  name: 'OpenedCalendarSpecialTime',
+  mixins: [openedTabComponentMixin],
+  setup() {
+    const dataName = 'specials';
+    const { dataList, headers, weekDaysList, setItemProp, addRange, removeRange, isDayStart, minToSec, secToMin } = useWeekDaysData(namespace, dataName);
+    return { dataList, headers, weekDaysList, setItemProp, addRange, removeRange, isDayStart, minToSec, secToMin };
+  },
+
+  methods: {
+    ...mapActions(namespace, {
+      initializeSpecials: 'INITIALIZE_SPECIALS',
+    }),
+    initSpecials() {
+      if(!this.dataList.length) this.initializeSpecials();
+    }
+  },
+  mounted() {
+    this.initSpecials();
+  },
+  watch: {
+    dataList: {
+      handler() {
+        this.initSpecials();
+      },
+      deep: true
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.wt-timepicker :deep(.wt-label) {
+  display: none;
+}
+</style>

src/modules/lookups/modules/calendars/components/opened-calendar-work-week.vue

@@ -16,15 +16,15 @@
         >
           <template #name="{ item, index }">
             <span v-if="isDayStart(index)">
-              {{ weekdaysList[item.day] }}
+              {{ weekDaysList[item.day] }}
             </span>
           </template>
           <template #start="{ item, index }">
             <wt-timepicker
               :disabled="disableUserInput"
               :value="minToSec(item.start)"
               format="hh:mm"
-              @input="setItemProp({prop: 'start', index, value: secToMin($event)})"
+              @input="setItemProp({ prop: 'start', index, value: secToMin($event)})"
             />
           </template>
           <template #end="{ item, index }">
@@ -46,12 +46,12 @@
             <wt-icon-action
               v-if="isDayStart(index)"
               action="add"
-              @click="addWorkRange(item.day)"
+              @click="addRange(item.day)"
             />
             <wt-icon-action
               v-else
               action="delete"
-              @click="remove(index)"
+              @click="addRange(index)"
             />
           </template>
         </wt-table>
@@ -61,68 +61,19 @@
 </template>
 
 <script>
-import { mapActions, mapState } from 'vuex';
-import openedTabComponentMixin from '../../../../../app/mixins/objectPagesMixins/openedObjectTabMixin/openedTabComponentMixin';
+import openedTabComponentMixin
+  from '../../../../../app/mixins/objectPagesMixins/openedObjectTabMixin/openedTabComponentMixin';
+import { useWeekDaysData } from '../composables/useWeekDaysData.js';
+
+const namespace = 'lookups/calendars';
+const dataName = 'accepts';
 
 export default {
   name: 'OpenedCalendarWorkWeek',
   mixins: [openedTabComponentMixin],
-  computed: {
-    ...mapState('lookups/calendars', {
-      dataList: (state) => state.itemInstance.accepts,
-    }),
-    weekdaysList() {
-      return [
-        this.$t('objects.lookups.calendars.mon'),
-        this.$t('objects.lookups.calendars.tue'),
-        this.$t('objects.lookups.calendars.wed'),
-        this.$t('objects.lookups.calendars.thu'),
-        this.$t('objects.lookups.calendars.fri'),
-        this.$t('objects.lookups.calendars.sat'),
-        this.$t('objects.lookups.calendars.sun'),
-      ];
-    },
-    headers() {
-      return [
-        {
-          value: 'name',
-          text: this.$t('objects.name'),
-        },
-        {
-          value: 'start',
-          text: this.$t('objects.lookups.calendars.start'),
-        },
-        {
-          value: 'end',
-          text: this.$t('objects.lookups.calendars.end'),
-        },
-        {
-          value: 'state',
-          text: this.$t('reusable.state'),
-        },
-      ];
-    },
-  },
-
-  methods: {
-    ...mapActions('lookups/calendars', {
-      setItemProp: 'SET_ACCEPT_ITEM_PROPERTY',
-      addWorkRange: 'ADD_ACCEPT_ITEM',
-      remove: 'REMOVE_ACCEPT_ITEM',
-    }),
-    isDayStart(index) {
-      if (index === 0) return true;
-      return (
-        this.dataList[index].day !== // this day index is not equal to
-        this.dataList[index - 1].day
-      ); // prev day index
-    },
-    minToSec(min) {
-      return min * 60;
-    },
-    secToMin(sec) {
-      return sec / 60;
-    },
+  setup() {
+    const { dataList, headers, weekDaysList, setItemProp, addRange, removeRange, isDayStart, minToSec, secToMin } = useWeekDaysData(namespace, dataName);
+    return { dataList, headers, weekDaysList, setItemProp, addRange, removeRange, isDayStart, minToSec, secToMin };
   },
 };
 </script>

src/modules/lookups/modules/calendars/components/opened-calendar.vue

@@ -46,10 +46,11 @@ import CalendarRouteNames from '../router/_internals/CalendarRouteNames.enum.js'
 import General from './opened-calendar-general.vue';
 import Holidays from './opened-calendar-holidays.vue';
 import WorkWeek from './opened-calendar-work-week.vue';
+import SpecialTime from './opened-calendar-special-time.vue';
 
 export default {
   name: 'OpenedCalendar',
-  components: { General, WorkWeek, Holidays },
+  components: { General, WorkWeek, Holidays, SpecialTime },
   mixins: [openedObjectMixin],
 
   setup: () => ({
@@ -70,6 +71,12 @@ export default {
           timerangeStartLessThanEnd,
         }),
       },
+      specials: {
+        timerangeNotIntersect,
+        $each: helpers.forEach({
+          timerangeStartLessThanEnd,
+        }),
+      },
     },
   },
 
@@ -79,6 +86,7 @@ export default {
         { value: 'general', text: this.$t('objects.general'), pathName: CalendarRouteNames.GENERAL },
         { value: 'work-week', text: this.$t('objects.lookups.calendars.workWeek'), pathName: CalendarRouteNames.WORKING_WEEK },
         { value: 'holidays', text: this.$tc('objects.lookups.calendars.holidays', 2), pathName: CalendarRouteNames.HOLIDAYS },
+        { value: 'special-time', text: this.$t('objects.lookups.calendars.specialTime'), pathName: CalendarRouteNames.SPECIAL_TIME },
       ];
 
       if (this.id) tabs.push(this.permissionsTab);