@webitel/ui-sdk 0.9.32 → 0.9.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "0.9.32",
+  "version": "0.9.36",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",
@@ -40,7 +40,8 @@
     "vue-multiselect": "^2.1.6",
     "vue-observe-visibility": "^1.0.0",
     "vue-router": "^3.2.0",
-    "vuejs-datepicker": "^1.6.2"
+    "vuejs-datepicker": "^1.6.2",
+    "webitel-sdk": "^0.1.84"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.11.4",

package/src/components/atoms/wt-context-menu/wt-context-menu.vue

@@ -8,10 +8,11 @@
       v-for="(option, index) in options"
       :key="index"
     >
+<!--      <a> click.prevent prevents redirect to # -->
       <a
         class="wt-context-menu__option"
         href="#"
-        @click="$emit('click', { option, index })"
+        @click.prevent="$emit('click', { option, index })"
         >
         {{ option.text || option }}
       </a>
@@ -40,6 +41,7 @@ export default {
 .wt-context-menu {
   @extend %typo-body-sm;
   min-width: var(--context-menu-min-width);
+  max-width: var(--context-menu-max-width);
   background-color: var(--context-menu-background-color);
   border-radius: var(--border-radius);
   box-shadow: var(--box-shadow);

package/src/components/molecules/wt-button-select/wt-button-select.vue

@@ -22,7 +22,6 @@
         :class="{'wt-button-select__select-arrow--active': isOpened}"
         v-bind="$attrs"
         icon="arrow-down"
-        size="sm"
       ></wt-icon>
     </wt-button>
 
@@ -60,7 +59,7 @@ export default {
 
   .wt-context-menu {
     position: absolute;
-    top: 100%;
+    top: calc(100% + 1px);
     left: 0;
   }
 }

package/src/css/components/atoms/wt-context-menu/_variables.scss

@@ -1,8 +1,10 @@
 .wt-context-menu {
+  --context-menu-min-width : 160px;
+  --context-menu-max-width : 300px;
+
   --context-menu-option-color--hover: var(--secondary-color);
 
   --context-menu-background-color: var(--main-color);
 
   --context-menu-option-padding: var(--spacing--sm);
-  --context-menu-min-width : 150px;
 }

package/src/css/components/molecules/wt-button-select/_variables.scss

@@ -4,7 +4,7 @@
   Reduce 1px from "spacing--md" for align a difference between arrow size in "wt-button-select__select"
   and line-height of text in "wt-button-select__button"
   */
-  --button-select-icon-button-padding: calc(var(--spacing--md) - 1px);
+  --button-select-icon-button-padding: calc(var(--spacing--sm) - 1px);
 
   --button-select-buttons-gap: 1px;
 

package/src/locale/en/en.js

@@ -1,3 +1,6 @@
+import { AgentStatus, CallDirection } from 'webitel-sdk';
+import { QueueType } from 'webitel-sdk/esm2015/enums';
+import { snakeToCamel } from '../../scripts/caseConverters';
 import AdminSections from '../../enums/WebitelApplications/AdminSections.enum';
 import SupervisorSections from '../../enums/WebitelApplications/SupervisorSections.enum';
 import WebitelApplications from '../../enums/WebitelApplications/WebitelApplications.enum';
@@ -34,6 +37,32 @@ export default {
     supervisor: 'Supervisor | Supervisors',
     auditor: 'Auditor | Auditors',
     region: 'Region | Regions',
+    queue: {
+      type: {
+        [QueueType.INBOUND_QUEUE]: 'Inbound queue',
+        [QueueType.OFFLINE_QUEUE]: 'Offline queue',
+        [QueueType.OUTBOUND_IVR_QUEUE]: 'Outbound IVR queue',
+        [QueueType.PREDICTIVE_DIALER]: 'Predictive dialer',
+        [QueueType.PROGRESSIVE_DIALER]: 'Progressive dialer',
+        [QueueType.PREVIEW_DIALER]: 'Preview dialer',
+        [QueueType.CHAT_INBOUND_QUEUE]: 'Chat queue',
+        [QueueType.TASK_QUEUE]: 'Task queue',
+      },
+    },
+    agent: {
+      status: {
+        [AgentStatus.Online]: 'Online',
+        [AgentStatus.Pause]: 'Pause',
+        [AgentStatus.Offline]: 'Offline',
+        [snakeToCamel(AgentStatus.BreakOut)]: 'Break out',
+      },
+    },
+  },
+  calls: {
+    direction: {
+      [CallDirection.Inbound]: 'Inbound',
+      [CallDirection.Outbound]: 'Outbound',
+    },
   },
   // describes Webitel FRONTEND applications + their navs
   WebitelApplications: {

package/src/locale/ru/ru.js

@@ -1,6 +1,9 @@
+import { AgentStatus, CallDirection } from 'webitel-sdk';
+import { QueueType } from 'webitel-sdk/esm2015/enums';
 import AdminSections from '../../enums/WebitelApplications/AdminSections.enum';
 import SupervisorSections from '../../enums/WebitelApplications/SupervisorSections.enum';
 import WebitelApplications from '../../enums/WebitelApplications/WebitelApplications.enum';
+import { snakeToCamel } from '../../scripts/caseConverters';
 
 export default {
   // describes reusable buttons, actions, default titles, and other ui elements
@@ -34,6 +37,32 @@ export default {
     supervisor: 'Супервизор | Супервизоры',
     auditor: 'Аудитор | Аудиторы',
     region: 'Регион | Регионы',
+    queue: {
+      type: {
+        [QueueType.INBOUND_QUEUE]: 'Входящая очередь',
+        [QueueType.OFFLINE_QUEUE]: 'Оффлайн очередь',
+        [QueueType.OUTBOUND_IVR_QUEUE]: 'Исходящий IVR',
+        [QueueType.PREDICTIVE_DIALER]: 'Предиктивный обзвон',
+        [QueueType.PROGRESSIVE_DIALER]: 'Прогрессивный обзвон',
+        [QueueType.PREVIEW_DIALER]: 'Превью обзвон',
+        [QueueType.CHAT_INBOUND_QUEUE]: 'Очередь чатов',
+        [QueueType.TASK_QUEUE]: 'Очередь задач',
+      },
+    },
+    agent: {
+      status: {
+        [AgentStatus.Online]: 'Онлайн',
+        [AgentStatus.Pause]: 'Пауза',
+        [AgentStatus.Offline]: 'Оффлайн',
+        [snakeToCamel(AgentStatus.BreakOut)]: 'Принудительный перерыв',
+      },
+    },
+  },
+  calls: {
+    direction: {
+      [CallDirection.Inbound]: 'Входящий | Входящие',
+      [CallDirection.Outbound]: 'Исходящий | Исходящие',
+    },
   },
   // describes Webitel FRONTEND applications + their navs
   WebitelApplications: {

package/src/locale/ua/ua.js

@@ -1,6 +1,9 @@
+import { AgentStatus, CallDirection } from 'webitel-sdk';
+import { QueueType } from 'webitel-sdk/esm2015/enums';
 import AdminSections from '../../enums/WebitelApplications/AdminSections.enum';
 import SupervisorSections from '../../enums/WebitelApplications/SupervisorSections.enum';
 import WebitelApplications from '../../enums/WebitelApplications/WebitelApplications.enum';
+import { snakeToCamel } from '../../scripts/caseConverters';
 
 export default {
   // describes reusable buttons, actions, default titles, and other ui elements
@@ -34,6 +37,32 @@ export default {
     supervisor: 'Супервізор | Супервізори',
     auditor: 'Аудитор | Аудитори',
     region: 'Регіон | Регіони',
+    queue: {
+      type: {
+        [QueueType.INBOUND_QUEUE]: 'Вхідна черга',
+        [QueueType.OFFLINE_QUEUE]: 'Оффлайн черга',
+        [QueueType.OUTBOUND_IVR_QUEUE]: 'Вихідний IVR',
+        [QueueType.PREDICTIVE_DIALER]: 'Предиктивний обзвін',
+        [QueueType.PROGRESSIVE_DIALER]: 'Прогресивний обзвін',
+        [QueueType.PREVIEW_DIALER]: 'Прев\'ю обзвін',
+        [QueueType.CHAT_INBOUND_QUEUE]: 'Черга чатів',
+        [QueueType.TASK_QUEUE]: 'Черга задач',
+      },
+    },
+    agent: {
+      status: {
+        [AgentStatus.Online]: 'Онлайн',
+        [AgentStatus.Pause]: 'Пауза',
+        [AgentStatus.Offline]: 'Офлайн',
+        [snakeToCamel(AgentStatus.BreakOut)]: 'Примусова перерва',
+      },
+    },
+  },
+  calls: {
+    direction: {
+      [CallDirection.Inbound]: 'Вхідний | Вхідні',
+      [CallDirection.Outbound]: 'Вихідний | Вихідні',
+    },
   },
   // describes Webitel FRONTEND applications + their navs
   WebitelApplications: {

package/src/modules/QueryFilters/components/abstract-enum-filter.vue

@@ -1,7 +1,7 @@
 <template>
   <wt-select
     :value="filterSchema.value"
-    :options="filterSchema.options"
+    :options="localizedOptions"
     :label="$t(filterSchema.locale.label)"
     :track-by="filterSchema.storedProp"
     :multiple="filterSchema.multiple"

package/src/modules/QueryFilters/mixins/__tests__/enumFilterMixin.spec.js

@@ -45,10 +45,26 @@ describe('Enum filter mixin', () => {
   });
 
   it('Sets empty array value if $route query is empty', async () => {
-    const wrapper = shallowMount(Component, {
+    shallowMount(Component, {
       localVue,
       router,
     });
     expect(setValue).not.toHaveBeenCalled();
   });
+
+  it('Attaches locales to options, if they have "locale" key', async () => {
+    const options = [{
+      locale: 'jest.locale',
+    }];
+    const expectedOptions = [{
+      locale: options[0].locale,
+      name: options[0].locale,
+    }];
+    const wrapper = shallowMount(Component, {
+      localVue,
+      router,
+      data: () => ({ options }),
+    });
+    expect(wrapper.vm.localizedOptions).toEqual(expectedOptions);
+  });
 });

package/src/modules/QueryFilters/mixins/enumFilterMixin.js

@@ -4,7 +4,7 @@ export default {
   mixins: [baseFilterMixin],
   computed: {
     options() {
-      return this.filterSchema.options;
+      return this.filterSchema?.options;
     },
     locale() {
       return this.filterSchema?.locale;
@@ -18,6 +18,13 @@ export default {
     closeOnSelect() {
       return this.filterSchema?.storedProp;
     },
+    localizedOptions() {
+      const optsHaveLocale = this.options.length && this.options[0].locale; // just check 1st el
+      if (optsHaveLocale) {
+        return this.options.map((opt) => ({ ...opt, name: this.$t(opt.locale) }));
+      }
+      return this.options;
+    },
   },
   methods: {
     restoreValue(value) {