From 804652e1e6d7810cdff51fdd4450c1a5e609a7e8 Mon Sep 17 00:00:00 2001
From: Lera24 <bedulinavalera21@gmail.com>
Date: Fri, 27 Sep 2024 15:54:11 +0300
Subject: [PATCH] feature: add pause template page[WTEL-5080]

---
 src/app/locale/en/en.js                       |   5 +
 src/app/locale/ru/ru.js                       |   5 +
 src/app/locale/ua/ua.js                       |   5 +
 .../_internals/NavigationPages.lookup.js      |   5 +
 src/app/router/_internals/RouteNames.enum.js  |   1 +
 src/app/router/router.js                      |   5 +-
 .../agent-pause-cause/api/agentPauseCause.js  |   7 +
 .../pause-templates/api/pauseTemplates.js     | 121 ++++++++++++
 .../opened-pause-template-causes.vue          |  99 ++++++++++
 .../opened-pause-template-general.vue         |  36 ++++
 .../components/opened-pause-template.vue      | 113 ++++++++++++
 .../components/the-pause-templates.vue        | 174 ++++++++++++++++++
 .../PauseTemplatesRouteNames.enum.js          |   6 +
 .../pause-templates/router/pauseTemplates.js  |  42 +++++
 .../store/_internals/headers.js               |  16 ++
 .../pause-templates/store/pause-templates.js  |  42 +++++
 src/modules/lookups/store/lookups.js          |   2 +
 17 files changed, 683 insertions(+), 1 deletion(-)
 create mode 100644 src/modules/lookups/modules/pause-templates/api/pauseTemplates.js
 create mode 100644 src/modules/lookups/modules/pause-templates/components/opened-pause-template-causes.vue
 create mode 100644 src/modules/lookups/modules/pause-templates/components/opened-pause-template-general.vue
 create mode 100644 src/modules/lookups/modules/pause-templates/components/opened-pause-template.vue
 create mode 100644 src/modules/lookups/modules/pause-templates/components/the-pause-templates.vue
 create mode 100644 src/modules/lookups/modules/pause-templates/router/_internals/PauseTemplatesRouteNames.enum.js
 create mode 100644 src/modules/lookups/modules/pause-templates/router/pauseTemplates.js
 create mode 100644 src/modules/lookups/modules/pause-templates/store/_internals/headers.js
 create mode 100644 src/modules/lookups/modules/pause-templates/store/pause-templates.js

diff --git a/src/app/locale/en/en.js b/src/app/locale/en/en.js
index 4731bbeab..d9b127547 100644
--- a/src/app/locale/en/en.js
+++ b/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',
diff --git a/src/app/locale/ru/ru.js b/src/app/locale/ru/ru.js
index 43294ca9a..963a2fcea 100644
--- a/src/app/locale/ru/ru.js
+++ b/src/app/locale/ru/ru.js
@@ -476,6 +476,11 @@ export default {
         shiftTemplates: 'Шаблон смен | Шаблоны смен',
         duration: 'Длительность (чч:мм)',
       },
+      pauseTemplates: {
+        pauseTemplates: 'Шаблоны пауз',
+        pauseReason: 'Причина паузы',
+        duration: 'Длительность (мм)',
+      },
     },
     routing: {
       routing: 'Маршрутизация',
diff --git a/src/app/locale/ua/ua.js b/src/app/locale/ua/ua.js
index 04fa6dafc..23faf1366 100644
--- a/src/app/locale/ua/ua.js
+++ b/src/app/locale/ua/ua.js
@@ -471,6 +471,11 @@ export default {
         shiftTemplates: 'Шаблон змін | Шаблони змін',
         duration: 'Тривалість (гг:хх)',
       },
+      pauseTemplates: {
+        pauseTemplates: 'Шаблони пауз',
+        pauseReason: 'Причина паузи',
+        duration: 'Тривалість (хх)',
+      },
     },
     routing: {
       routing: 'Маршрутизація',
diff --git a/src/app/router/_internals/NavigationPages.lookup.js b/src/app/router/_internals/NavigationPages.lookup.js
index ea3381e56..d92f441cc 100644
--- a/src/app/router/_internals/NavigationPages.lookup.js
+++ b/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',
+      },
     ],
   },
   {
diff --git a/src/app/router/_internals/RouteNames.enum.js b/src/app/router/_internals/RouteNames.enum.js
index cd3e29f5f..33484e672 100644
--- a/src/app/router/_internals/RouteNames.enum.js
+++ b/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',
diff --git a/src/app/router/router.js b/src/app/router/router.js
index bfded31af..a8030d07c 100755
--- a/src/app/router/router.js
+++ b/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-------------
diff --git a/src/modules/lookups/modules/agent-pause-cause/api/agentPauseCause.js b/src/modules/lookups/modules/agent-pause-cause/api/agentPauseCause.js
index 201f61fe5..2860d3764 100644
--- a/src/modules/lookups/modules/agent-pause-cause/api/agentPauseCause.js
+++ b/src/modules/lookups/modules/agent-pause-cause/api/agentPauseCause.js
@@ -115,6 +115,12 @@ const deletePauseCause = async ({ id }) => {
   }
 };
 
+const getPauseCauseLookup = (params) =>
+  getPauseCauseList({
+    ...params,
+    fields: params.fields || ['id', 'name'],
+  });
+
 const AgentPauseCauseAPI = {
   getList: getPauseCauseList,
   get: getPauseCause,
@@ -122,6 +128,7 @@ const AgentPauseCauseAPI = {
   patch: patchPauseCause,
   update: updatePauseCause,
   delete: deletePauseCause,
+  getLookup: getPauseCauseLookup,
 };
 
 export default AgentPauseCauseAPI;
diff --git a/src/modules/lookups/modules/pause-templates/api/pauseTemplates.js b/src/modules/lookups/modules/pause-templates/api/pauseTemplates.js
new file mode 100644
index 000000000..41fc07185
--- /dev/null
+++ b/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;
diff --git a/src/modules/lookups/modules/pause-templates/components/opened-pause-template-causes.vue b/src/modules/lookups/modules/pause-templates/components/opened-pause-template-causes.vue
new file mode 100644
index 000000000..73819f7d4
--- /dev/null
+++ b/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>
diff --git a/src/modules/lookups/modules/pause-templates/components/opened-pause-template-general.vue b/src/modules/lookups/modules/pause-templates/components/opened-pause-template-general.vue
new file mode 100644
index 000000000..ca64dc858
--- /dev/null
+++ b/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>
diff --git a/src/modules/lookups/modules/pause-templates/components/opened-pause-template.vue b/src/modules/lookups/modules/pause-templates/components/opened-pause-template.vue
new file mode 100644
index 000000000..29e906865
--- /dev/null
+++ b/src/modules/lookups/modules/pause-templates/components/opened-pause-template.vue
@@ -0,0 +1,113 @@
+<template>
+  <wt-page-wrapper :actions-panel="false">
+    <template #header>
+      <wt-page-header
+        :hide-primary="!hasSaveActionAccess"
+        :primary-action="save"
+        :primary-disabled="disabledSave"
+        :primary-text="saveText"
+        :secondary-action="close"
+      >
+        <wt-headline-nav :path="path" />
+      </wt-page-header>
+    </template>
+    <template #main>
+      <form
+        class="main-container"
+        @submit.prevent="save"
+      >
+        <wt-tabs
+          :current="currentTab"
+          :tabs="tabs"
+          @change="changeTab"
+        />
+        <component
+          :is="currentTab.value"
+          :namespace="namespace"
+          :v="v$"
+        />
+        <input
+          hidden
+          type="submit"
+        > <!--  submit form on Enter  -->
+      </form>
+    </template>
+  </wt-page-wrapper>
+</template>
+
+<script>
+import { useVuelidate } from '@vuelidate/core';
+import { required, maxLength, helpers, minValue } from '@vuelidate/validators';
+import openedObjectMixin from '../../../../../app/mixins/objectPagesMixins/openedObjectMixin/openedObjectMixin';
+import { requiredArrayValue } from '../../../../../app/utils/validators.js';
+import General from './opened-pause-template-general.vue';
+import Causes from './opened-pause-template-causes.vue';
+import PauseTemplatesRouteNames from '../router/_internals/PauseTemplatesRouteNames.enum.js';
+import RouteNames from '../../../../../app/router/_internals/RouteNames.enum.js';
+
+export default {
+  name: 'OpenedPauseTemplate',
+  components: { General, Causes },
+  mixins: [openedObjectMixin],
+  setup: () => ({
+    v$: useVuelidate(),
+  }),
+  data: () => ({
+    namespace: 'lookups/pauseTemplates',
+    routeName: RouteNames.PAUSE_TEMPLATES,
+  }),
+  validations: {
+    itemInstance: {
+      name: { required, maxLength: maxLength(250) },
+      causes: {
+        requiredArrayValue,
+        $each: helpers.forEach({
+          duration: {
+            required,
+            minValue: minValue(1)
+          }
+        }),
+      }
+    },
+  },
+  computed: {
+    tabs() {
+      const tabs = [
+        {
+          text: this.$t('objects.general'),
+          value: 'general',
+          pathName: PauseTemplatesRouteNames.GENERAL
+        },
+        {
+          text: this.$tc('objects.routing.chatGateways.templates.templates', 1),
+          value: 'causes',
+          pathName: PauseTemplatesRouteNames.CAUSES
+        },
+      ];
+      return tabs;
+    },
+    path() {
+      const baseUrl = '/lookups/pause-templates';
+      return [
+        {
+          name: this.$t('objects.lookups.lookups'),
+        },
+        {
+          name: this.$tc('objects.lookups.pauseTemplates.pauseTemplates', 2),
+          route: baseUrl,
+        },
+        {
+          name: this.id ? this.pathName : this.$t('objects.new'),
+          route: {
+            name: this.currentTab.pathName,
+            query: this.$route.query,
+          },
+        },
+      ];
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>
diff --git a/src/modules/lookups/modules/pause-templates/components/the-pause-templates.vue b/src/modules/lookups/modules/pause-templates/components/the-pause-templates.vue
new file mode 100644
index 000000000..202e13ab8
--- /dev/null
+++ b/src/modules/lookups/modules/pause-templates/components/the-pause-templates.vue
@@ -0,0 +1,174 @@
+<template>
+  <wt-page-wrapper :actions-panel="false">
+    <template #header>
+      <wt-page-header
+        :hide-primary="!hasCreateAccess"
+        :primary-action="create"
+      >
+        <wt-headline-nav :path="path" />
+      </wt-page-header>
+    </template>
+
+    <template #main>
+      <delete-confirmation-popup
+        :shown="isDeleteConfirmationPopup"
+        :delete-count="deleteCount"
+        :callback="deleteCallback"
+        @close="closeDelete"
+      />
+
+      <section class="main-section__wrapper">
+        <header class="content-header">
+          <h3 class="content-title">
+            {{
+              $t(
+                'objects.all',
+                { entity: $tc('objects.routing.chatGateways.templates.templates', 2) },
+              )
+            }}
+          </h3>
+          <div class="content-header__actions-wrap">
+            <wt-search-bar
+              :value="search"
+              debounce
+              @enter="loadList"
+              @input="setSearch"
+              @search="loadList"
+            />
+            <wt-table-actions
+              :icons="['refresh']"
+              @input="tableActionsHandler"
+            >
+              <delete-all-action
+                v-if="hasDeleteAccess"
+                :class="{'hidden': anySelected}"
+                :selected-count="selectedRows.length"
+                @click="askDeleteConfirmation({
+                  deleted: selectedRows,
+                  callback: () => deleteData(selectedRows),
+                })"
+              />
+            </wt-table-actions>
+          </div>
+        </header>
+
+        <wt-loader v-show="!isLoaded" />
+        <wt-dummy
+          v-if="dummy && isLoaded"
+          :show-action="dummy.showAction"
+          :src="dummy.src"
+          :dark-mode="darkMode"
+          :text="dummy.text && $t(dummy.text)"
+          class="dummy-wrapper"
+          @create="create"
+        />
+        <div
+          v-show="dataList.length && isLoaded"
+          class="table-wrapper"
+        >
+          <wt-table
+            :data="dataList"
+            :grid-actions="hasTableActions"
+            :headers="headers"
+            sortable
+            @sort="sort"
+          >
+            <template #name="{ item }">
+              <adm-item-link
+                :id="item.id"
+                :route-name="routeName"
+              >
+                {{ item.name }}
+              </adm-item-link>
+            </template>
+            <template #description="{ item }">
+              {{ item.description }}
+            </template>
+            <template #actions="{ item }">
+              <adm-item-link
+                v-if="hasEditAccess"
+                :id="item.id"
+                :route-name="routeName"
+              >
+                <wt-icon-action action="edit" />
+              </adm-item-link>
+              <wt-icon-action
+                v-if="hasDeleteAccess"
+                action="delete"
+                class="table-action"
+                @click="askDeleteConfirmation({
+                  deleted: [item],
+                  callback: () => deleteData(item),
+                })"
+              />
+            </template>
+          </wt-table>
+          <wt-pagination
+            :next="isNext"
+            :prev="page > 1"
+            :size="size"
+            debounce
+            @change="loadList"
+            @input="setSize"
+            @next="nextPage"
+            @prev="prevPage"
+          />
+        </div>
+      </section>
+    </template>
+  </wt-page-wrapper>
+</template>
+
+<script>
+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 { useDummy } from '../../../../../app/composables/useDummy';
+import tableComponentMixin from '../../../../../app/mixins/objectPagesMixins/objectTableMixin/tableComponentMixin';
+import RouteNames from '../../../../../app/router/_internals/RouteNames.enum';
+
+const namespace = 'lookups/pauseTemplates';
+
+export default {
+  name: 'ThePauseTemplates',
+  components: { DeleteConfirmationPopup },
+  mixins: [tableComponentMixin],
+  setup() {
+    const { dummy } = useDummy({
+      namespace,
+      showAction: true,
+    });
+    const {
+      isVisible: isDeleteConfirmationPopup,
+      deleteCount,
+      deleteCallback,
+      askDeleteConfirmation,
+      closeDelete,
+    } = useDeleteConfirmationPopup();
+    return {
+      dummy,
+      isDeleteConfirmationPopup,
+      deleteCount,
+      deleteCallback,
+      askDeleteConfirmation,
+      closeDelete,
+    };
+  },
+  data: () => ({
+    namespace,
+    routeName: RouteNames.PAUSE_TEMPLATES,
+  }),
+  computed: {
+    path() {
+      return [
+        {
+          name: this.$t('objects.lookups.lookups'),
+        },
+        {
+          name: this.$t('objects.lookups.pauseTemplates.pauseTemplates'),
+          route: '/lookups/pause-templates',
+        },
+      ];
+    },
+  },
+};
+</script>
diff --git a/src/modules/lookups/modules/pause-templates/router/_internals/PauseTemplatesRouteNames.enum.js b/src/modules/lookups/modules/pause-templates/router/_internals/PauseTemplatesRouteNames.enum.js
new file mode 100644
index 000000000..6d8269e9c
--- /dev/null
+++ b/src/modules/lookups/modules/pause-templates/router/_internals/PauseTemplatesRouteNames.enum.js
@@ -0,0 +1,6 @@
+import RouteNames from '../../../../../../app/router/_internals/RouteNames.enum.js';
+
+export default Object.freeze({
+  GENERAL: `${RouteNames.PAUSE_TEMPLATES}-general`,
+  CAUSES: `${RouteNames.PAUSE_TEMPLATES}-causes`,
+});
diff --git a/src/modules/lookups/modules/pause-templates/router/pauseTemplates.js b/src/modules/lookups/modules/pause-templates/router/pauseTemplates.js
new file mode 100644
index 000000000..2995be4ec
--- /dev/null
+++ b/src/modules/lookups/modules/pause-templates/router/pauseTemplates.js
@@ -0,0 +1,42 @@
+import RouteNames from "../../../../../app/router/_internals/RouteNames.enum.js";
+import { checkRouteAccess } from "../../../../../app/router/_internals/guards.js";
+import PauseTemplatesRouteNames
+  from './_internals/PauseTemplatesRouteNames.enum.js';
+
+const PauseTemplates = () => import('../components/the-pause-templates.vue');
+const OpenedPauseTemplate = () => import('../components/opened-pause-template.vue');
+
+const OpenedPauseTemplateGeneral = () => import('../components/opened-pause-template-general.vue');
+const OpenedPauseTemplateCauses = () => import('../components/opened-pause-template-causes.vue');
+
+
+const PauseTemplatesRoutes = [
+  {
+    path: '/lookups/pause-templates',
+    name: RouteNames.PAUSE_TEMPLATES,
+    component: PauseTemplates,
+    beforeEnter: checkRouteAccess,
+  },
+  {
+    path: '/lookups/pause-templates/:id',
+    name: `${RouteNames.PAUSE_TEMPLATES}-card`,
+    redirect: {
+      name: PauseTemplatesRouteNames.GENERAL
+    },
+    component: OpenedPauseTemplate,
+    beforeEnter: checkRouteAccess,
+    children: [
+      {
+        path: 'general',
+        name: PauseTemplatesRouteNames.GENERAL,
+        component: OpenedPauseTemplateGeneral,
+      },
+      {
+        path: 'template',
+        name: PauseTemplatesRouteNames.CAUSES,
+        component: OpenedPauseTemplateCauses,
+      }
+    ],
+  },
+];
+export default PauseTemplatesRoutes;
diff --git a/src/modules/lookups/modules/pause-templates/store/_internals/headers.js b/src/modules/lookups/modules/pause-templates/store/_internals/headers.js
new file mode 100644
index 000000000..ff2ea4fd7
--- /dev/null
+++ b/src/modules/lookups/modules/pause-templates/store/_internals/headers.js
@@ -0,0 +1,16 @@
+import { SortSymbols } from '@webitel/ui-sdk/src/scripts/sortQueryAdapters';
+
+export default [
+  {
+    value: 'name',
+    locale: 'objects.name',
+    field: 'name',
+    sort: SortSymbols.NONE,
+  },
+  {
+    value: 'description',
+    locale: 'objects.description',
+    field: 'description',
+    sort: SortSymbols.NONE,
+  },
+];
diff --git a/src/modules/lookups/modules/pause-templates/store/pause-templates.js b/src/modules/lookups/modules/pause-templates/store/pause-templates.js
new file mode 100644
index 000000000..3c8af6f04
--- /dev/null
+++ b/src/modules/lookups/modules/pause-templates/store/pause-templates.js
@@ -0,0 +1,42 @@
+import ObjectStoreModule from '../../../../../app/store/BaseStoreModules/StoreModules/ObjectStoreModule';
+import PauseTemplatesAPI from '../api/pauseTemplates.js';
+import headers from './_internals/headers';
+
+const resettableState = {
+  itemInstance: {
+    name: '',
+    description: '',
+    causes: [],
+  },
+};
+
+const actions = {
+  ADD_CAUSE: (context) => {
+    const array = [...context.state.itemInstance.causes];
+    array.push({ duration: 0 });
+    context.dispatch('SET_ITEM_PROPERTY', { prop: 'causes', value: array });
+  },
+  SET_CAUSE: (context, { prop, index, value }) => {
+    const array = [...context.state.itemInstance.causes];
+
+    if(prop) {
+      array[index] = { ...array[index], duration: value };
+    } else {
+      array[index] = { ...array[index], name: value.name, id: value.id };
+    }
+
+    context.dispatch('SET_ITEM_PROPERTY', { prop: 'causes', value: array });
+  },
+  REMOVE_CAUSE: (context, index) => {
+    const array = [...context.state.itemInstance.causes];
+    array.splice(index, 1);
+    context.dispatch('SET_ITEM_PROPERTY', { prop: 'causes', value: array });
+  },
+}
+
+const pauseTemplates = new ObjectStoreModule({ resettableState, headers })
+.attachAPIModule(PauseTemplatesAPI)
+.generateAPIActions()
+.getModule({actions});
+
+export default pauseTemplates;
diff --git a/src/modules/lookups/store/lookups.js b/src/modules/lookups/store/lookups.js
index 1edd5820b..6985235ae 100644
--- a/src/modules/lookups/store/lookups.js
+++ b/src/modules/lookups/store/lookups.js
@@ -8,6 +8,7 @@ import media from '../modules/media/store/media';
 import regions from '../modules/regions/store/regions';
 import shiftTemplates
   from '../modules/shift-templates/store/shift-templates.js';
+import pauseTemplates from '../modules/pause-templates/store/pause-templates.js';
 
 const modules = {
   skills,
@@ -19,6 +20,7 @@ const modules = {
   pauseCause,
   media,
   shiftTemplates,
+  pauseTemplates,
 };
 
 export default {