feature: add pause template page[WTEL-5080]

src/app/locale/en/en.js

@@ -470,6 +470,11 @@ export default {
         shiftTemplates: 'Shift template | Shift templates',
         duration: 'Duration (hh:mm)',
       },
+      pauseTemplates: {
+        pauseTemplates: 'Pause templates',
+        pauseReason: 'Pause reason',
+        duration: 'Duration (mm)',
+      },
     },
     routing: {
       routing: 'Routing',

src/app/locale/ru/ru.js

@@ -476,6 +476,11 @@ export default {
         shiftTemplates: 'Шаблон смен | Шаблоны смен',
         duration: 'Длительность (чч:мм)',
       },
+      pauseTemplates: {
+        pauseTemplates: 'Шаблоны пауз',
+        pauseReason: 'Причина паузы',
+        duration: 'Длительность (мм)',
+      },
     },
     routing: {
       routing: 'Маршрутизация',

src/app/locale/ua/ua.js

@@ -471,6 +471,11 @@ export default {
         shiftTemplates: 'Шаблон змін | Шаблони змін',
         duration: 'Тривалість (гг:хх)',
       },
+      pauseTemplates: {
+        pauseTemplates: 'Шаблони пауз',
+        pauseReason: 'Причина паузи',
+        duration: 'Тривалість (хх)',
+      },
     },
     routing: {
       routing: 'Маршрутизація',

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

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

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

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

src/app/router/router.js

@@ -29,11 +29,13 @@ 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 ShiftTemplatesRoutes from "../../modules/lookups/modules/shift-templates/router/shiftTemplates.js";
+import ShiftTemplatesRoutes
+  from '../../modules/lookups/modules/shift-templates/router/shiftTemplates.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";
 import AgentPauseCauseRoutes from "../../modules/lookups/modules/agent-pause-cause/router/agentPauseCause.js";
+import PauseTemplatesRoutes from "../../modules/lookups/modules/pause-templates/router/pauseTemplates.js";
 
 const ApplicationHub = () => import('../../modules/application-hub/components/application-hub.vue');
 const ModuleWrap = () => import('../../modules/_shared/object-wrap/the-object-wrap.vue');
@@ -109,6 +111,7 @@ const router = createRouter({
         ...RegionsRoutes,
         ...AgentPauseCauseRoutes,
         ...ShiftTemplatesRoutes,
+        ...PauseTemplatesRoutes,
         // ----------LOOKUPS END------------
 
         // --------------CONTACT CENTER-------------

src/modules/lookups/modules/agent-pause-cause/api/agentPauseCause.js

@@ -115,13 +115,20 @@ const deletePauseCause = async ({ id }) => {
   }
 };
 
+const getPauseCauseLookup = (params) =>
+  getPauseCauseList({
+    ...params,
+    fields: params.fields || ['id', 'name'],
+  });
+
 const AgentPauseCauseAPI = {
   getList: getPauseCauseList,
   get: getPauseCause,
   add: addPauseCause,
   patch: patchPauseCause,
   update: updatePauseCause,
   delete: deletePauseCause,
+  getLookup: getPauseCauseLookup,
 };
 
 export default AgentPauseCauseAPI;

src/modules/lookups/modules/pause-templates/api/pauseTemplates.js

@@ -0,0 +1,121 @@
+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 deepCopy from 'deep-copy';
+import { PauseTemplateServiceApiFactory } from 'webitel-sdk';
+
+import instance from '../../../../../app/api/instance';
+import configuration from '../../../../../app/api/openAPIConfig';
+
+const pauseTemplateService = new PauseTemplateServiceApiFactory(configuration, '', instance);
+
+const getPauseTemplateList = async (params) => {
+  const { search: q, page, size, sort, fields } = applyTransform(params, [
+    merge(getDefaultGetParams()),
+  ]);
+
+  try {
+    const response = await pauseTemplateService.searchPauseTemplate(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 obj = {...item.item};
+
+  obj.causes = obj.causes.map((cause) => {
+    return {
+      id: cause.cause?.id,
+      name: cause.cause?.name,
+      duration: cause.duration,
+    };
+  }, []);
+  return obj;
+}
+
+const preRequestHandler = (item) => {
+  const copy = deepCopy(item);
+  copy.causes = copy.causes.map((cause) => {
+    if(!cause.name && !cause.id) return cause;
+    return {
+      cause: {
+        id: cause?.id,
+        name: cause?.name,
+      },
+      duration: cause.duration,
+    };
+  })
+  return copy;
+};
+
+const getPauseTemplate = async ({ itemId: id }) => {
+
+  try {
+    const response = await pauseTemplateService.readPauseTemplate(id);
+    return applyTransform(response.data, [snakeToCamel(), itemResponseHandler]);
+  } catch (err) {
+    throw applyTransform(err, [notify]);
+  }
+};
+
+const fieldsToSend = ['name', 'description', 'causes', 'domainId', 'createdAt', 'createdBy', 'updatedAt', 'updatedBy'];
+
+const addPauseTemplate = async ({ itemInstance }) => {
+  const item = applyTransform(itemInstance, [sanitize(fieldsToSend), camelToSnake(), preRequestHandler]);
+  try {
+    const response = await pauseTemplateService.createPauseTemplate({ item: { ...item } });
+    return applyTransform(response.data, [snakeToCamel(), itemResponseHandler]);
+  } catch (err) {
+    throw applyTransform(err, [notify]);
+  }
+};
+
+const updatePauseTemplate = async ({ itemInstance, itemId: id }) => {
+  const item = applyTransform(itemInstance, [sanitize(fieldsToSend), camelToSnake(), preRequestHandler]);
+  try {
+    const response = await pauseTemplateService.updatePauseTemplate(id, { item: { ...item }});
+    return applyTransform(response.data, [snakeToCamel(), itemResponseHandler]);
+  } catch (err) {
+    throw applyTransform(err, [notify]);
+  }
+};
+
+const deleteShiftTemplate = async ({ id }) => {
+  try {
+    const response = await pauseTemplateService.deletePauseTemplate(id);
+    return applyTransform(response.data, []);
+  } catch (err) {
+    throw applyTransform(err, [notify]);
+  }
+};
+
+const getPauseTemplatesLookup = (params) =>
+  getPauseTemplateList({
+    ...params,
+    fields: params.fields || ['id', 'name'],
+  });
+
+const PauseTemplatesAPI = {
+  getList: getPauseTemplateList,
+  get: getPauseTemplate,
+  add: addPauseTemplate,
+  update: updatePauseTemplate,
+  delete: deleteShiftTemplate,
+  getLookup: getPauseTemplatesLookup,
+}
+
+export default PauseTemplatesAPI;

src/modules/lookups/modules/pause-templates/components/opened-pause-template-causes.vue

@@ -0,0 +1,99 @@
+<template>
+  <section class="opened-pause-template-causes">
+    <header class="content-header">
+      <h3 class="content-title">
+        {{ $tc('objects.routing.chatGateways.templates.templates', 1) }}
+      </h3>
+
+      <div class="content-header__actions-wrap">
+        <wt-icon-btn
+          v-if="!disableUserInput"
+          class="icon-action"
+          icon="plus"
+          @click="addCause"
+        />
+      </div>
+    </header>
+
+    <div class="table-wrapper">
+      <div class="table-wrapper__visible-scroll-wrapper">
+        <wt-table
+          :data="itemInstance.causes"
+          :grid-actions="!disableUserInput"
+          :headers="headers"
+          :selectable="false"
+        >
+          <template #name="{ item, index }">
+            <wt-select
+              :search-method="loadAgentPauseCause"
+              :value="item.name"
+              @input="setCause({ index, value: $event })"
+            />
+          </template>
+          <template #duration="{ item, index }">
+            <wt-input
+              class="opened-pause-template-causes__duration"
+              :disabled="disableUserInput"
+              :value="item.duration"
+              type="number"
+              required
+              @input="setCause({ prop: 'duration', index, value: $event })"
+            />
+          </template>
+          <template #actions="{ item, index }">
+            <wt-icon-action
+              action="delete"
+              @click="removeCause(index)"
+            />
+          </template>
+        </wt-table>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+import { mapActions } from 'vuex';
+import openedTabComponentMixin from '../../../../../app/mixins/objectPagesMixins/openedObjectTabMixin/openedTabComponentMixin';
+import AgentPauseCauseAPI from '../../agent-pause-cause/api/agentPauseCause.js';
+export default {
+  name: 'OpenedPauseTemplateCauses',
+  mixins: [openedTabComponentMixin],
+  computed: {
+    headers() {
+      return [
+        {
+          value: 'name',
+          text: this.$t('objects.lookups.pauseTemplates.pauseReason'),
+        },
+        {
+          value: 'duration',
+          text: this.$t('objects.lookups.pauseTemplates.duration'),
+        },
+      ];
+    },
+  },
+  methods: {
+    ...mapActions({
+      addCause(dispatch, payload) {
+        dispatch(`${this.namespace}/ADD_CAUSE`, payload);
+      },
+      setCause(dispatch, payload) {
+        dispatch(`${this.namespace}/SET_CAUSE`, payload);
+      },
+      removeCause(dispatch, payload) {
+        dispatch(`${this.namespace}/REMOVE_CAUSE`, payload);
+      },
+    }),
+    loadAgentPauseCause(params) {
+      return AgentPauseCauseAPI.getLookup(params);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.opened-pause-template-causes__duration {
+  width: 100%;
+}
+</style>

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

@@ -0,0 +1,36 @@
+<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')"
+        :value="itemInstance.name"
+        :v="v.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: 'OpenedPauseTemplateGeneral',
+  mixins: [openedTabComponentMixin],
+};
+</script>
+
+<style scoped>
+</style>