feature: add working time in holidays[WTEL-2403]

webitel · Jan 26, 2024 · 442c80a · 442c80a
1 parent e016640
commit 442c80a
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 1 deletion.
diff --git a/src/app/locale/en/en.js b/src/app/locale/en/en.js
@@ -413,6 +413,9 @@ export default {
         fri: 'Friday',
         sat: 'Saturday',
         sun: 'Sunday',
+        workingTime: 'Working time',
+        workStart: 'Working time start',
+        workStop: 'Working time end',
       },
       communications: {
         communications: 'Communication type | Communication types',

diff --git a/src/app/locale/ru/ru.js b/src/app/locale/ru/ru.js
@@ -413,6 +413,9 @@ export default {
         fri: 'Пятница',
         sat: 'Суббота',
         sun: 'Воскресение',
+        workingTime: 'Рабочее время',
+        workStart: 'Начало рабочего времени',
+        workStop: 'Конец рабочего времени',
       },
       communications: {
         communications: 'Тип связи| Типы связи',

diff --git a/src/app/locale/ua/ua.js b/src/app/locale/ua/ua.js
@@ -413,6 +413,9 @@ export default {
         fri: 'П\'ятниця',
         sat: 'Субота',
         sun: 'Неділя',
+        workingTime: 'Робочий час',
+        workStart: 'Початок робочого часу',
+        workStop: 'Кінець робочого часу',
       },
       communications: {
         communications: 'Тип зв\'язку | Типи зв\'язку',

diff --git a/src/modules/lookups/modules/calendars/api/calendars.js b/src/modules/lookups/modules/calendars/api/calendars.js
@@ -82,6 +82,9 @@ const getCalendar = async ({ itemId: id }) => {
         name: except.name || '',
         date: except.date || 0,
         repeat: except.repeat || false,
+        working: except.working || false,
+        workStart: except.workStart || null,
+        workStop: except.workStop || null,
       }));
     }
     return { ...defaultSingleObject, ...copy };
@@ -115,6 +118,9 @@ const fieldsToSend = [
   'disabled',
   'date',
   'repeat',
+  'working',
+  'workStart',
+  'workStop',
 ];
 
 const preRequestHandler = (item) => {

diff --git a/src/modules/lookups/modules/calendars/components/opened-calendar-holiday-popup.vue b/src/modules/lookups/modules/calendars/components/opened-calendar-holiday-popup.vue
@@ -19,6 +19,29 @@
           v-model="itemInstance.date"
           :label="$t('objects.lookups.calendars.date')"
         />
+        <wt-switcher
+          :value="itemInstance.working"
+          :label="$t('objects.lookups.calendars.workingTime')"
+          @change="changeWorkingSwitcher"
+        />
+        <div
+          v-if="itemInstance.working"
+          class="opened-calendar-holiday-popup__warpper">
+          <wt-timepicker
+            format="hh:mm"
+            :label="$t('objects.lookups.calendars.start')"
+            :v="v$.itemInstance.workStart"
+            :value="itemInstance.workStart * 60"
+            @input="updateWorkingTime($event, 'workStart')"
+          ></wt-timepicker>
+          <wt-timepicker
+            format="hh:mm"
+            :label="$t('objects.lookups.calendars.end')"
+            :v="v$.itemInstance.workStop"
+            :value="itemInstance.workStop * 60"
+            @input="updateWorkingTime($event, 'workStop')"
+          ></wt-timepicker>
+        </div>
         <wt-switcher
           v-model="itemInstance.repeat"
           :label="$t('objects.lookups.calendars.repeat')"
@@ -44,7 +67,7 @@
 
 <script>
 import { useVuelidate } from '@vuelidate/core';
-import { required } from '@vuelidate/validators';
+import { maxValue, minValue, numeric, required, requiredIf } from '@vuelidate/validators';
 import getNamespacedState from '@webitel/ui-sdk/src/store/helpers/getNamespacedState';
 import { mapActions, mapState } from 'vuex';
 import nestedObjectMixin from '../../../../../app/mixins/objectPagesMixins/openedObjectMixin/nestedObjectMixin';
@@ -72,6 +95,17 @@ export default {
     itemInstance: {
       name: { required },
       date: { required },
+      workStart: {
+        numeric,
+        minValue: minValue(0),
+        maxValue: maxValue(1440)
+      },
+      workStop: {
+        numeric,
+        required: requiredIf((value, item) => item.workStart),
+        minValue: minValue(0),
+        maxValue: maxValue(1440)
+      },
     },
   },
   created() {
@@ -117,13 +151,27 @@ export default {
       }
       this.close();
     },
+    changeWorkingSwitcher(event) {
+      this.itemInstance.working = event;
+      this.itemInstance.workStart = this.itemInstance.working ? 9 * 60 : null;
+      this.itemInstance.workStop = this.itemInstance.working ? 20 * 60 : null;
+    },
+    updateWorkingTime(event, prop) {
+      this.itemInstance[prop] = event ? event / 60 : null;
+    },
     loadItem() {},
     resetState() {},
   },
 };
 </script>
 
 <style lang="scss" scoped>
+.opened-calendar-holiday-popup__wrapper {
+  display: flex;
+  gap: var(--spacing-sm);
+  justify-content: space-between;
+}
+
 .popup-input-form {
   display: grid;
   grid-gap: var(--spacing-sm);

diff --git a/src/modules/lookups/modules/calendars/components/opened-calendar-holidays.vue b/src/modules/lookups/modules/calendars/components/opened-calendar-holidays.vue
@@ -60,6 +60,16 @@
         <template #date="{ item }">
           {{ prettifyDate(item.date) }}
         </template>
+        <template #workStart="{ item }">
+          <div v-if="item.workStart">
+            {{ ConverDurationWithMinutes(item.workStart) }}
+          </div>
+        </template>
+        <template #workStop="{ item }">
+          <div v-if="item.workStop">
+            {{ ConverDurationWithMinutes(item.workStop) }}
+          </div>
+        </template>
         <template #repeat="{ item, index }">
           <wt-switcher
             :disabled="disableUserInput"
@@ -98,6 +108,7 @@ import holidayPopup from './opened-calendar-holiday-popup.vue';
 import DeleteConfirmationPopup
   from '@webitel/ui-sdk/src/modules/DeleteConfirmationPopup/components/delete-confirmation-popup.vue';
 import { useDeleteConfirmationPopup } from '@webitel/ui-sdk/src/modules/DeleteConfirmationPopup/composables/useDeleteConfirmationPopup';
+import ConverDurationWithMinutes from '../scripts/converDurationWithMinutes';
 
 export default {
   name: 'OpenedCalendarHolidays',
@@ -152,6 +163,8 @@ export default {
       return [
         { value: 'name', text: this.$t('objects.name') },
         { value: 'date', text: this.$t('objects.lookups.calendars.date') },
+        { value: 'workStart', text: this.$t('objects.lookups.calendars.workStart') },
+        { value: 'workStop', text: this.$t('objects.lookups.calendars.workStop') },
         { value: 'repeat', text: this.$t('objects.lookups.calendars.repeat') },
       ];
     },
@@ -176,6 +189,7 @@ export default {
   },
 
   methods: {
+    ConverDurationWithMinutes,
     ...mapActions({
       dispatchDelete(dispatch, payload) {
         return dispatch(`${this.namespace}/DELETE_EXCEPT_ITEM`, payload);

diff --git a/src/modules/lookups/modules/calendars/scripts/converDurationWithMinutes.js b/src/modules/lookups/modules/calendars/scripts/converDurationWithMinutes.js
@@ -0,0 +1,15 @@
+const convertDurationWithMinutes = (duration) => {
+  if (!duration) return '00:00';
+
+  let hour = `${Math.floor(duration / 60)}`;
+  // eslint-disable-next-line no-mixed-operators
+  let min = `${Math.floor(duration % 60)}`;
+  // eslint-disable-next-line no-mixed-operators
+
+  if (hour.length === 1) hour = `0${hour}`;
+  if (min.length === 1) min = `0${min}`;
+
+  return `${hour}:${min}`;
+};
+
+export default convertDurationWithMinutes;