From 442c80a7ddb10f54da3023248f35c0d524772664 Mon Sep 17 00:00:00 2001
From: Lera24 <bedulinavalera21@gmail.com>
Date: Fri, 26 Jan 2024 18:53:32 +0200
Subject: [PATCH] feature: add working time in holidays[WTEL-2403]

---
 src/app/locale/en/en.js                       |  3 ++
 src/app/locale/ru/ru.js                       |  3 ++
 src/app/locale/ua/ua.js                       |  3 ++
 .../modules/calendars/api/calendars.js        |  6 +++
 .../opened-calendar-holiday-popup.vue         | 50 ++++++++++++++++++-
 .../components/opened-calendar-holidays.vue   | 14 ++++++
 .../scripts/converDurationWithMinutes.js      | 15 ++++++
 7 files changed, 93 insertions(+), 1 deletion(-)
 create mode 100644 src/modules/lookups/modules/calendars/scripts/converDurationWithMinutes.js

diff --git a/src/app/locale/en/en.js b/src/app/locale/en/en.js
index e9b33fdee..a8d10b8a1 100644
--- 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
index da2d2b630..9f0330e5f 100644
--- 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
index 66c38030d..ab021d0b8 100644
--- 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
index 454b5bad0..92377e8aa 100644
--- 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
index cd61edfb1..4d7684a00 100644
--- 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,6 +151,14 @@ 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() {},
   },
@@ -124,6 +166,12 @@ export default {
 </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
index bd4de6f8c..f13eecb9f 100644
--- 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
new file mode 100644
index 000000000..d32cc5048
--- /dev/null
+++ 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;