feature: add shift template page[WTEL-5079]

package.json

@@ -19,7 +19,7 @@
     "@vuelidate/validators": "^2.0.4",
     "@vueuse/core": "^11.0.3",
     "@webitel/flow-ui-sdk": "^0.1.14",
-    "@webitel/ui-sdk": "^24.10.15",
+    "@webitel/ui-sdk": "^24.10.20",
     "axios": "^1.7.7",
     "clipboard-copy": "^4.0.1",
     "cron-validator": "^1.3.1",
@@ -40,7 +40,7 @@
     "vue-router": "^4.4.3",
     "vue2-dropzone": "^3.6.0",
     "vuex": "^4.1.0",
-    "webitel-sdk": "^24.8.1"
+    "webitel-sdk": "^24.8.3"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.8.3",

src/app/locale/en/en.js

@@ -466,6 +466,9 @@ export default {
         allowSupervisor: 'Supervisor can change this status',
         allowAgent: 'Agent can change this status',
       },
+      shiftTemplates: {
+        shiftTemplates: 'Shift template | Shift templates',
+      },
     },
     routing: {
       routing: 'Routing',
@@ -535,7 +538,7 @@ export default {
       },
       chatGateways: {
         templates: {
-          templates: 'Templates',
+          templates: 'Template | Templates',
           title: "Workspace member's name",
           close: 'Chat complete message',
           join: 'Agent joining message',

src/app/locale/ru/ru.js

@@ -472,6 +472,9 @@ export default {
         allowSupervisor: 'Супервизор может изменять этот статус',
         allowAgent: 'Оператор может изменять этот статус',
       },
+      shiftTemplates: {
+        shiftTemplates: 'Шаблон смен | Шаблоны смен',
+      },
     },
     routing: {
       routing: 'Маршрутизация',

src/app/locale/ua/ua.js

@@ -467,6 +467,9 @@ export default {
         allowSupervisor: 'Супервізор може змінювати статус',
         allowAgent: 'Оператор може змінювати статус',
       },
+      shiftTemplates: {
+        shiftTemplates: 'Шаблон змін | Шаблони змін',
+      },
     },
     routing: {
       routing: 'Маршрутизація',

src/app/router/_internals/NavigationPages.lookup.js

@@ -101,6 +101,11 @@ const nav = Object.freeze([
         locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.MEDIA}`,
         route: 'media',
       },
+      {
+        value: AdminSections.SHIFT_TEMPLATES,
+        locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.SHIFT_TEMPLATES}`,
+        route: 'shift-templates',
+      },
     ],
   },
   {

src/app/router/_internals/RouteNames.enum.js

@@ -25,6 +25,7 @@ export default Object.freeze({
   COMMUNICATIONS: 'communications',
   PAUSE_CAUSE: 'agent-pause-cause',
   MEDIA: 'media',
+  SHIFT_TEMPLATES: 'shift-templates',
 
   // CONTACT-CENTER
   AGENTS: 'agents',

src/app/router/router.js

@@ -29,6 +29,8 @@ import AgentSkillsRoutes from "../../modules/lookups/modules/agent-skills/router
 import BucketsRoutes from "../../modules/lookups/modules/buckets/router/buckets.js";
 import BlacklistsRoutes from "../../modules/lookups/modules/blacklists/router/blacklists.js";
 import MediaRoutes from "../../modules/lookups/modules/media/router/media.js";
+import ShiftTemplates
+  from '../../modules/lookups/modules/shift-templates/router/shift-templates.js';
 import CalendarsRoutes from "../../modules/lookups/modules/calendars/router/calendars.js";
 import CommunicationsRoutes from "../../modules/lookups/modules/communications/router/communications.js";
 import RegionsRoutes from "../../modules/lookups/modules/regions/router/regions.js";
@@ -107,6 +109,7 @@ const router = createRouter({
         ...CommunicationsRoutes,
         ...RegionsRoutes,
         ...AgentPauseCauseRoutes,
+        ...ShiftTemplates,
         // ----------LOOKUPS END------------
 
         // --------------CONTACT CENTER-------------

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

@@ -24,7 +24,7 @@
               :disabled="disableUserInput"
               :value="minToSec(item.start)"
               format="hh:mm"
-              noLabel
+              no-label
               @input="setItemProp({prop: 'start', index, value: secToMin($event)})"
             />
           </template>
@@ -33,7 +33,7 @@
               :disabled="disableUserInput"
               :value="minToSec(item.end)"
               format="hh:mm"
-              noLabel
+              no-label
               @input="setItemProp({prop: 'end', index, value: secToMin($event)})"
             />
           </template>

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

@@ -24,7 +24,7 @@
               :disabled="disableUserInput"
               :value="minToSec(item.start)"
               format="hh:mm"
-              noLabel
+              no-label
               @input="setItemProp({ prop: 'start', index, value: secToMin($event)})"
             />
           </template>
@@ -33,7 +33,7 @@
               :disabled="disableUserInput"
               :value="minToSec(item.end)"
               format="hh:mm"
-              noLabel
+              no-label
               @input="setItemProp({prop: 'end', index, value: secToMin($event)})"
             />
           </template>
@@ -81,7 +81,4 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.wt-timepicker :deep(.wt-label) {
-  display: none;
-}
 </style>

src/modules/lookups/modules/shift-templates/api/shiftTemplates.js

@@ -0,0 +1,105 @@
+import { getDefaultGetListResponse, getDefaultGetParams } from '@webitel/ui-sdk/src/api/defaults/index.js';
+import applyTransform, {
+  camelToSnake,
+  merge,
+  notify,
+  sanitize,
+  snakeToCamel,
+} from '@webitel/ui-sdk/src/api/transformers/index.js';
+import { ShiftTemplateServiceApiFactory } from 'webitel-sdk';
+
+import instance from '../../../../../app/api/instance';
+import configuration from '../../../../../app/api/openAPIConfig';
+
+const shiftTemplateService = new ShiftTemplateServiceApiFactory(configuration, '', instance);
+
+const getShiftTemplateList = async (params) => {
+  const { search: q, page, size, sort, fields } = applyTransform(params, [
+    merge(getDefaultGetParams()),
+  ]);
+
+  try {
+    const response = await shiftTemplateService.searchShiftTemplate(q, page, size, sort, fields);
+    const { items, next } = applyTransform(response.data, [
+      snakeToCamel(),
+      merge(getDefaultGetListResponse()),
+    ]);
+    return {
+      items,
+      next,
+    };
+  } catch (err) {
+    throw applyTransform(err, [notify]);
+  }
+};
+
+const itemResponseHandler = (item) => {
+  const copy = {
+    ...item.item,
+  };
+
+  copy.times = copy.times.map((time) => ({
+    ...time,
+    duration: time.end - time.start,
+  }), []);
+
+  return copy;
+};
+
+const getShiftTemplate = async ({ itemId: id }) => {
+
+  try {
+    const response = await shiftTemplateService.readShiftTemplate(id);
+    return applyTransform(response.data, [snakeToCamel(), itemResponseHandler]);
+  } catch (err) {
+    throw applyTransform(err, [notify]);
+  }
+};
+
+const fieldsToSend = ['name', 'description', 'times'];
+
+const addShiftTemplate = async ({ itemInstance }) => {
+  const item = applyTransform(itemInstance, [sanitize(fieldsToSend), camelToSnake()]);
+  try {
+    const response = await shiftTemplateService.createShiftTemplate({ item: { ...item } });
+    return applyTransform(response.data, [snakeToCamel(), itemResponseHandler]);
+  } catch (err) {
+    throw applyTransform(err, [notify]);
+  }
+};
+
+const updateShiftTemplate = async ({ itemInstance, itemId: id }) => {
+  const item = applyTransform(itemInstance, [sanitize(fieldsToSend), camelToSnake()]);
+  try {
+    const response = await shiftTemplateService.updateShiftTemplate(id, { item: { ...item }});
+    return applyTransform(response.data, [snakeToCamel()]);
+  } catch (err) {
+    throw applyTransform(err, [notify]);
+  }
+};
+
+const deleteShiftTemplate = async ({ id }) => {
+  try {
+    const response = await shiftTemplateService.deleteShiftTemplate(id);
+    return applyTransform(response.data, []);
+  } catch (err) {
+    throw applyTransform(err, [notify]);
+  }
+};
+
+const getShiftTemplatesLookup = (params) =>
+  getShiftTemplateList({
+    ...params,
+    fields: params.fields || ['id', 'name'],
+  });
+
+const ShiftTemplatesAPI = {
+  getList: getShiftTemplateList,
+  get: getShiftTemplate,
+  add: addShiftTemplate,
+  update: updateShiftTemplate,
+  delete: deleteShiftTemplate,
+  getLookup: getShiftTemplatesLookup,
+}
+
+export default ShiftTemplatesAPI;

src/modules/lookups/modules/shift-templates/components/opened-shift-template-general.vue

@@ -0,0 +1,38 @@
+<template>
+  <section>
+    <header class="content-header">
+      <h3 class="content-title">
+        {{ $t('objects.generalInfo') }}
+      </h3>
+    </header>
+    <div class="object-input-grid object-input-grid__1-col object-input-grid__w50">
+      <wt-input
+        :disabled="disableUserInput"
+        :label="$t('objects.name')"
+        :v="v.itemInstance.name"
+        :value="itemInstance.name"
+        required
+        @input="setItemProp({ prop: 'name', value: $event })"
+      />
+      <wt-textarea
+        :disabled="disableUserInput"
+        :label="$t('objects.description')"
+        :value="itemInstance.description"
+        @input="setItemProp({ prop: 'description', value: $event })"
+      />
+    </div>
+  </section>
+</template>
+
+<script>
+import openedTabComponentMixin from '../../../../../app/mixins/objectPagesMixins/openedObjectTabMixin/openedTabComponentMixin';
+
+export default {
+  name: 'OpenedShiftTemplateGeneral',
+  mixins: [openedTabComponentMixin],
+};
+</script>
+
+<style scoped>
+
+</style>