@webitel/ui-sdk 0.9.62 → 0.9.66

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "0.9.62",
+  "version": "0.9.66",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",
@@ -8,8 +8,7 @@
     "test:unit": "vue-cli-service test:unit",
     "lint": "vue-cli-service lint --fix",
     "build-lib": "vue-cli-service build --target lib --name ui-sdk ./src/install.js",
-    "build-publish-lib": "npm run test:unit && npm run build-lib && npm publish --access public",
-    "build-publish-lib:testless": "npm run build-lib && npm publish --access public"
+    "build-publish-lib": "npm run test:unit && npm run build-lib && npm publish --access public"
   },
   "main": "./dist/@webitel/ui-sdk.common.js",
   "files": [
@@ -42,7 +41,7 @@
     "vue-observe-visibility": "^1.0.0",
     "vue-router": "^3.2.0",
     "vuejs-datepicker": "^1.6.2",
-    "webitel-sdk": "^0.1.84"
+    "webitel-sdk": "^0.1.91"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.11.4",

package/src/components/atoms/wt-badge/wt-badge.vue

@@ -11,7 +11,7 @@
       color: {
         type: String,
         default: 'main',
-        options: ['main', 'outline', 'accent', 'secondary', 'success', 'danger', 'transfer'],
+        options: ['main', 'outline', 'accent', 'secondary', 'secondary-50', 'success', 'danger', 'transfer'],
         notes: '"main" and "outline" are badge-specific colors',
       },
     },

package/src/css/components/atoms/wt-badge/wt-badge.scss

@@ -22,6 +22,10 @@
     background: var(--secondary-color);
   }
 
+  &--secondary-50-color {
+    background: var(--secondary-color-50);
+  }
+
   &--success-color {
     background: var(--true-color);
   }

package/src/locale/en/en.js

@@ -1,9 +1,14 @@
-import { AgentStatus, CallDirection } from 'webitel-sdk';
+import {
+  AgentStatus,
+  CallDirection,
+  ChannelState,
+  ChannelType,
+} 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';
+import { snakeToCamel } from '../../scripts/caseConverters';
 
 export default {
   // describes reusable buttons, actions, default titles, and other ui elements
@@ -58,6 +63,26 @@ export default {
       },
     },
   },
+  channel: {
+    state: {
+      [ChannelState.Waiting]: 'Waiting',
+      [ChannelState.Distribute]: 'Distribute',
+      [ChannelState.Offering]: 'Offering',
+      [ChannelState.Answered]: 'Answered',
+      [ChannelState.Active]: 'Active',
+      [ChannelState.Bridged]: 'Bridged',
+      [ChannelState.Hold]: 'Hold',
+      [ChannelState.Missed]: 'Missed',
+      [snakeToCamel(ChannelState.WrapTime)]: 'Wrap time',
+      [ChannelState.Processing]: 'Processing',
+      [ChannelState.Transfer]: 'Transfer',
+    },
+    type: {
+      [ChannelType.Call]: 'Call',
+      [ChannelType.Email]: 'Email',
+      [ChannelType.Chat]: 'Chat',
+    },
+  },
   calls: {
     direction: {
       [CallDirection.Inbound]: 'Inbound',
@@ -186,7 +211,7 @@ export default {
         text: 'Sorry, you have not enough privileges to see this page.',
       },
       page404: {
-        title: "Looks like you're lost",
+        title: 'Looks like you\'re lost',
         text: 'Sorry, we can\'t find the page you want.',
       },
     },

package/src/locale/ru/ru.js

@@ -1,4 +1,9 @@
-import { AgentStatus, CallDirection } from 'webitel-sdk';
+import {
+  AgentStatus,
+  CallDirection,
+  ChannelState,
+  ChannelType,
+} from 'webitel-sdk';
 import { QueueType } from 'webitel-sdk/esm2015/enums';
 import AdminSections from '../../enums/WebitelApplications/AdminSections.enum';
 import SupervisorSections from '../../enums/WebitelApplications/SupervisorSections.enum';
@@ -58,6 +63,26 @@ export default {
       },
     },
   },
+  channel: {
+    state: {
+      [ChannelState.Waiting]: 'Ожидание',
+      [ChannelState.Distribute]: 'Зарезервирован',
+      [ChannelState.Offering]: 'Распределение',
+      [ChannelState.Answered]: 'Отвечен',
+      [ChannelState.Active]: 'Активный',
+      [ChannelState.Bridged]: 'Соединён',
+      [ChannelState.Hold]: 'Удержание',
+      [ChannelState.Missed]: 'Пропущен',
+      [snakeToCamel(ChannelState.WrapTime)]: 'Постобработка',
+      [ChannelState.Processing]: 'Обработка',
+      [ChannelState.Transfer]: 'Перевод',
+    },
+    type: {
+      [ChannelType.Call]: 'Звонок',
+      [ChannelType.Email]: 'Почта',
+      [ChannelType.Chat]: 'Чат',
+    },
+  },
   calls: {
     direction: {
       [CallDirection.Inbound]: 'Входящий | Входящие',

package/src/locale/ua/ua.js

@@ -1,4 +1,9 @@
-import { AgentStatus, CallDirection } from 'webitel-sdk';
+import {
+  AgentStatus,
+  CallDirection,
+  ChannelState,
+  ChannelType,
+} from 'webitel-sdk';
 import { QueueType } from 'webitel-sdk/esm2015/enums';
 import AdminSections from '../../enums/WebitelApplications/AdminSections.enum';
 import SupervisorSections from '../../enums/WebitelApplications/SupervisorSections.enum';
@@ -58,6 +63,26 @@ export default {
       },
     },
   },
+  channel: {
+    state: {
+      [ChannelState.Waiting]: 'Очікування',
+      [ChannelState.Distribute]: 'Зарезервований',
+      [ChannelState.Offering]: 'Розподіл',
+      [ChannelState.Answered]: 'Прийнятий',
+      [ChannelState.Active]: 'Активний',
+      [ChannelState.Bridged]: 'З\'єднаний',
+      [ChannelState.Hold]: 'Утримання',
+      [ChannelState.Missed]: 'Пропущений',
+      [snakeToCamel(ChannelState.WrapTime)]: 'Постобробка',
+      [ChannelState.Processing]: 'Обробка',
+      [ChannelState.Transfer]: 'Перевід',
+    },
+    type: {
+      [ChannelType.Call]: 'Дзвінок',
+      [ChannelType.Email]: 'Пошта',
+      [ChannelType.Chat]: 'Чат',
+    },
+  },
   calls: {
     direction: {
       [CallDirection.Inbound]: 'Вхідний | Вхідні',

package/src/modules/QueryFilters/api/__tests__/defaults.spec.js

@@ -0,0 +1,18 @@
+import { listResponseHandler } from '../defaults';
+
+describe('filter api Defaults', () => {
+  it('listResponseHandler returns only lookups from response', () => {
+    const response = {
+      items: [
+        { name: 'jest1', id: 1, myField: '1' },
+        { name: 'jest2', id: 2, obj: [] },
+      ],
+      next: true,
+    };
+    const expectedResult = [
+      { name: 'jest1', id: 1 },
+      { name: 'jest2', id: 2 },
+    ];
+    expect(listResponseHandler(response)).toEqual(expectedResult);
+  });
+});

package/src/modules/QueryFilters/api/defaults.js

@@ -0,0 +1,16 @@
+const PAGE = 1;
+const SIZE = 20;
+const FIELDS = ['id', 'name'];
+
+export const defaultParams = {
+  page: PAGE,
+  size: SIZE,
+  fields: FIELDS,
+};
+
+export const listResponseHandler = (response) => (
+  response.items.map((item) => ({
+    name: item.name,
+    id: item.id,
+  }))
+);

package/src/modules/QueryFilters/components/__tests__/abstract-enum-filter.spec.js

@@ -20,9 +20,6 @@ describe('Abstract Enum Filter', () => {
         state: {
           [filterQuery]: filterSchema,
         },
-        getters: {
-          GET_VALUE_FROM_QUERY: () => {},
-        },
       },
     },
   });
@@ -37,10 +34,6 @@ describe('Abstract Enum Filter', () => {
     },
   };
   it('renders a component', () => {
-    console.info(store.getters);
-    console.info(Object.keys(store.getters)[0]);
-    console.info(store.getters);
-    console.info(store.getters[Object.keys(store.getters)[0]]);
     const wrapper = shallowMount(AbstractEnumFilter, mountOptions);
     expect(wrapper.exists()).toBe(true);
   });

package/src/modules/QueryFilters/components/__tests__/filter-search.spec.js

@@ -1,44 +1,49 @@
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+import VueRouter from 'vue-router';
 import SearchFilter from '../filter-search.vue';
 import BaseFilterSchema from '../../classes/BaseFilterSchema';
 import baseFilterMixin from '../../mixins/baseFilterMixin/baseFilterMixin';
 
-const namespace = 'jest';
-const filterQuery = 'jest';
-const filterSchema = new BaseFilterSchema();
-const searchValue = 'jest-search';
+const localVue = createLocalVue();
+localVue.use(Vuex);
+localVue.use(VueRouter);
+const router = new VueRouter();
 
 describe('Search Filter', () => {
-  const setValue = jest.fn();
-  const setValueToQuery = jest.fn();
-  const getValueFromQuery = jest.fn(() => searchValue);
+  const namespace = 'jest';
+  const filterQuery = 'jest';
+  const filterSchema = new BaseFilterSchema();
+  const store = new Vuex.Store({
+    modules: {
+      [namespace]: {
+        namespaced: true,
+        state: {
+          [filterQuery]: filterSchema,
+        },
+      },
+    },
+  });
 
   const mountOptions = {
+    localVue,
+    store,
+    router,
     propsData: {
       namespace,
       filterQuery,
     },
-    computed: {
-      filterSchema() { return filterSchema; },
-    },
   };
-
-  jest.spyOn(baseFilterMixin.methods, 'setValue').mockImplementation(setValue);
-  jest.spyOn(baseFilterMixin.methods, 'setValueToQuery').mockImplementation(setValueToQuery);
-  jest.spyOn(baseFilterMixin.methods, 'getValueFromQuery').mockImplementation(getValueFromQuery);
-
-  beforeEach(() => {
-    setValue.mockClear();
-    setValueToQuery.mockClear();
-    getValueFromQuery.mockClear();
-  });
-
   it('renders a component', () => {
     const wrapper = shallowMount(SearchFilter, mountOptions);
     expect(wrapper.exists()).toBe(true);
   });
   it('initial restoreValue() triggers setValue() method', async () => {
+    const search = 'jest';
+    await router.replace({ query: { [filterQuery]: search } });
+    const setValueMock = jest.fn();
+    jest.spyOn(baseFilterMixin.methods, 'setValue').mockImplementationOnce(setValueMock);
     shallowMount(SearchFilter, mountOptions);
-    expect(setValue).toHaveBeenCalledWith({ filter: filterQuery, value: searchValue });
+    expect(setValueMock).toHaveBeenCalledWith({ filter: filterQuery, value: search });
   });
 });

package/src/modules/QueryFilters/components/filter-search.vue

@@ -5,7 +5,7 @@
     @input="setValue({ filter: filterQuery, value: $event })"
     @search="setValueToQuery({ filterQuery, value: $event })"
     :placeholder="$t('reusable.search')"
-  ></wt-search-bar>
+  />
 </template>
 
 <script>

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

@@ -1,48 +1,47 @@
-import { shallowMount } from '@vue/test-utils';
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import VueRouter from 'vue-router';
 import ApiFilterSchema from '../../classes/ApiFilterSchema';
 import apiFilterMixin from '../apiFilterMixin';
 
-const filterQuery = 'team';
+const localVue = createLocalVue();
+localVue.use(VueRouter);
+const router = new VueRouter();
 const team = ['1', '2'];
 const filterSchema = new ApiFilterSchema();
 
 describe('API filter mixin', () => {
   const setValue = jest.fn();
-  const setValueToQuery = jest.fn();
-  const getValueFromQuery = jest.fn(() => team);
-
   const Component = {
     render() {},
     mixins: [apiFilterMixin],
     data: () => ({
-      filterQuery,
+      filterQuery: 'team',
     }),
     computed: {
       filterSchema() { return filterSchema; },
     },
-    methods: {
-      setValue,
-      setValueToQuery,
-      getValueFromQuery,
-    },
+    methods: { setValue },
   };
 
   beforeEach(() => {
     setValue.mockClear();
-    setValueToQuery.mockClear();
-    getValueFromQuery.mockClear();
+    if (Object.keys(router.currentRoute.query).length) router.replace({ query: null });
   });
 
   it('Correctly sets value from $route query', async () => {
+    await router.replace({ query: { team } });
     const wrapper = shallowMount(Component, {
+      localVue,
+      router,
     });
     expect(setValue).toHaveBeenCalledWith({ filter: 'team', value: [{ id: team[0] }, { id: team[1] }] });
   });
 
   it('Sets empty array value if $route query is empty', async () => {
-    getValueFromQuery.mockImplementationOnce(() => []);
     const wrapper = shallowMount(Component, {
-      data: () => ({ filterQuery }),
+      localVue,
+      router,
+      data: () => ({ filterQuery: 'queue' }),
     });
     expect(setValue).not.toHaveBeenCalled();
   });

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

@@ -1,84 +1,69 @@
-import { shallowMount } from '@vue/test-utils';
-import EnumFilterSchema from '../../classes/EnumFilterSchema';
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import VueRouter from 'vue-router';
 import enumFilterMixin from '../enumFilterMixin';
 
-const filterQuery = 'direction';
-const options = [
-  {
+const options = [{
     name: 'Inbound',
     value: 'inbound',
-  }, {
+  },
+  {
     name: 'Outbound',
     value: 'outbound',
-  },
-];
+  }];
 
-const queryValue = options[0].value;
-
-const filterSchema = new EnumFilterSchema({
-  options,
-  storedProp: 'value',
-});
+const localVue = createLocalVue();
+localVue.use(VueRouter);
+const router = new VueRouter();
 
 describe('Enum filter mixin', () => {
   const setValue = jest.fn();
-  const setValueToQuery = jest.fn();
-  const getValueFromQuery = jest.fn(() => queryValue);
-
   const Component = {
     render() {
     },
     mixins: [enumFilterMixin],
     data: () => ({
-      filterQuery,
+      filterQuery: 'direction',
+      storedProp: 'value',
+      options,
     }),
-    computed: {
-      filterSchema() { return filterSchema; },
-    },
-    methods: {
-      setValue,
-      setValueToQuery,
-      getValueFromQuery,
-    },
+    methods: { setValue },
   };
 
   beforeEach(() => {
     setValue.mockClear();
-    setValueToQuery.mockClear();
-    getValueFromQuery.mockClear();
+    if (Object.keys(router.currentRoute.query).length) router.replace({ query: null });
   });
 
   it('Correctly sets value from $route query', async () => {
-    const wrapper = shallowMount(Component, {});
-    expect(setValue)
-      .toHaveBeenCalledWith({ filter: filterQuery, value: options[0] });
+    await router.replace({ query: { direction: options[0].value } });
+    const wrapper = shallowMount(Component, {
+      localVue,
+      router,
+    });
+    await wrapper.vm.$nextTick();
+    expect(setValue).toHaveBeenCalledWith({ filter: 'direction', value: options[0] });
   });
 
   it('Sets empty array value if $route query is empty', async () => {
-    getValueFromQuery.mockImplementationOnce(() => []);
-
-    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 options = [{
+      locale: 'jest.locale',
+    }];
+    const expectedOptions = [{
+      locale: options[0].locale,
+      name: options[0].locale,
+    }];
     const wrapper = shallowMount(Component, {
-      computed: {
-        options() {
-          return options;
-        },
-      },
+      localVue,
+      router,
+      data: () => ({ options }),
     });
     expect(wrapper.vm.localizedOptions).toEqual(expectedOptions);
   });

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

@@ -0,0 +1,86 @@
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import VueRouter from 'vue-router';
+import paginationFilterMixin from '../paginationFilterMixin';
+
+const localVue = createLocalVue();
+localVue.use(VueRouter);
+const router = new VueRouter();
+const page = 2;
+const size = 20;
+
+describe('Pagination filter mixin', () => {
+  const setPage = jest.fn();
+  const setSize = jest.fn();
+  let wrapper;
+  const Component = {
+    render() {},
+    mixins: [paginationFilterMixin],
+    data: () => ({ page, size }),
+    methods: { setPage, setSize },
+  };
+
+  beforeEach(() => {
+    setPage.mockClear();
+    setSize.mockClear();
+    if (Object.keys(router.currentRoute.query).length) router.replace({ query: null });
+  });
+
+  it('Correctly sets value from $route query', async () => {
+    await router.replace({ query: { page, size } });
+    wrapper = shallowMount(Component, {
+      localVue,
+      router,
+    });
+    expect(setPage).toHaveBeenCalledWith(page);
+    expect(setSize).toHaveBeenCalledWith(size);
+  });
+
+  it('At "prev" page, changes query and emits event', async () => {
+    await router.replace({ query: { page, size } });
+    wrapper = shallowMount(Component, {
+      localVue,
+      router,
+    });
+    wrapper._emitted.input = []; // reset emitted events
+    wrapper.vm.prev();
+    expect(wrapper.emitted().input).toBeTruthy();
+    expect(wrapper.vm.$route.query.page).toBe(`${page - 1}`);
+  });
+
+  it('At "next" page, changes query and emits event', async () => {
+    await router.replace({ query: { page, size } });
+    wrapper = shallowMount(Component, {
+      localVue,
+      router,
+    });
+    wrapper._emitted.input = []; // reset emitted events
+    wrapper.vm.next();
+    expect(wrapper.emitted().input).toBeTruthy();
+    expect(wrapper.vm.$route.query.page).toBe(`${page + 1}`);
+  });
+
+  it('At "restPage" method, changes query and emits event', async () => {
+    await router.replace({ query: { page: 100, size } });
+    wrapper = shallowMount(Component, {
+      localVue,
+      router,
+    });
+    wrapper._emitted.input = []; // reset emitted events
+    wrapper.vm.resetPage();
+    expect(wrapper.emitted().input).toBeTruthy();
+    expect(wrapper.vm.$route.query.page).toBe('1');
+  });
+
+  it('At "sizeChange", changes query and emits event', async () => {
+    const newSize = 40;
+    await router.replace({ query: { page, size } });
+    wrapper = shallowMount(Component, {
+      localVue,
+      router,
+    });
+    wrapper._emitted.input = []; // reset emitted events
+    wrapper.vm.sizeChange(newSize);
+    expect(wrapper.emitted().input).toBeTruthy();
+    expect(wrapper.vm.$route.query.size).toBe(`${newSize}`);
+  });
+});

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

@@ -1,6 +1,11 @@
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import VueRouter from 'vue-router';
 import sortFilterMixin from '../sortFilterMixin';
 
+const localVue = createLocalVue();
+localVue.use(VueRouter);
+const router = new VueRouter();
+
 const headers = [{
   value: 'queue',
   show: true,
@@ -25,37 +30,27 @@ const sortedHeaders = [{
   field: 'online',
 }];
 
-const queryValue = '+queue';
-
 describe('Sort filter mixin', () => {
   const setHeaders = jest.fn();
-  const setValueToQuery = jest.fn();
-  const getValueFromQuery = jest.fn(() => queryValue);
-
   const Component = {
     render() {},
     mixins: [sortFilterMixin],
     data: () => ({ headers }),
-    methods: {
-      setHeaders,
-      setValueToQuery,
-      getValueFromQuery,
-    },
+    methods: { setHeaders },
   };
 
   beforeEach(() => {
-    setHeaders.mockClear();
-    setValueToQuery.mockClear();
-    getValueFromQuery.mockClear();
+    router.replace('/');
   });
 
   it('Correctly sets value from $route query', async () => {
-    const wrapper = shallowMount(Component);
+    await router.replace({ path: '/', query: { sort: '+queue' } });
+    const wrapper = shallowMount(Component, { localVue, router });
     expect(setHeaders).toHaveBeenCalledWith(sortedHeaders);
   });
 
   it('After "sort" trigger, header column sort value changes properly', () => {
-    const wrapper = shallowMount(Component);
+    const wrapper = shallowMount(Component, { localVue, router });
     const queue = wrapper.vm.headers.find((header) => header.value === 'queue');
     wrapper.vm.sort(queue);
     expect(setHeaders).toHaveBeenCalledWith(sortedHeaders);