@webitel/ui-sdk 0.9.55 → 0.9.59

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "0.9.55",
+  "version": "0.9.59",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",

package/src/components/organisms/wt-player/wt-player.vue

@@ -2,13 +2,17 @@
   <aside class="wt-player">
     <audio
       id="wt-player__player"
+      ref="audio"
       :src="src"
       :autoplay="autoplay"
       controls
       v-on="listeners"
     ></audio>
+
+    <!-- The "wt-icon-btn" component is append in to "audio" element by "setCloseIcon" method-->
     <wt-icon-btn
       class="wt-player__close-icon"
+      ref="close-icon"
       icon="close"
       @click="$emit('close')"
     ></wt-icon-btn>
@@ -38,6 +42,7 @@ export default {
   data: () => ({
     player: null,
   }),
+
   watch: {
     src() {
       this.setupDownload();
@@ -46,9 +51,11 @@ export default {
       this.setupDownload();
     },
   },
+
   mounted() {
     this.setupPlayer();
   },
+
   computed: {
     listeners() {
       return {
@@ -56,6 +63,7 @@ export default {
       };
     },
   },
+
   methods: {
     setupPlayer() {
       const baseURL = this.$baseURL || process.env.BASE_URL;
@@ -73,6 +81,7 @@ export default {
           active: this.loop,
         },
       });
+      this.appendCloseIcon();
     },
     setupDownload() {
       if (!this.download) this.setupPlayer();
@@ -82,6 +91,13 @@ export default {
         this.player.download = this.download(this.src);
       }
     },
+    appendCloseIcon() {
+      const plyrControls = this.$refs.audio.plyr?.elements?.controls;
+      const closeIcon = this.$refs['close-icon'].$el;
+      if (plyrControls) {
+        plyrControls.append(closeIcon);
+      }
+    },
   },
 };
 </script>
@@ -93,16 +109,15 @@ export default {
   @extend %typo-body-md;
   position: sticky;
   bottom: 60px;
-  display: flex;
-  box-shadow: var(--box-shadow);
-  border-radius: var(--border-radius);
 
   .plyr {
-    flex-grow: 1;
+    border-radius: var(--border-radius);
+    box-shadow: var(--box-shadow);
   }
 
   &__close-icon {
-    margin: var(--player-close-icon-spacing) var(--player-close-icon-spacing) 0 0;
+    transform: translate(var(--player-close-icon-transform-translate-x),
+      var(--player-close-icon-transform-translate-y));
   }
 
   .plyr__control:hover, {

package/src/css/components/molecules/wt-datepicker/_variables.scss

@@ -11,10 +11,10 @@
   --datepicker-width: calc(
           7 * var(--datepicker-cell-size)
           + 2 * var(--datepicker-calendar-padding)
-          + 2px
+          + 8px
           + 7 * 2 * var(--datepicker-cell-margin)); // 7 cells * 2 sides
 
   --datepicker-selected-cell-text-color: var(--main-primary-color);
   --datepicker-selected-cell-bg-color: var(--main-accent-color);
   --datepicker-cell--hover-color: #F9F9F9;
-}
+}

package/src/css/components/molecules/wt-datepicker/datepicker-calendar.scss

@@ -53,7 +53,9 @@
     @extend %typo-body-lg;
     width: var(--datepicker-cell-size);
     height: var(--datepicker-cell-size);
+    margin: 1px;
     padding: 0;
+    border: none;
     line-height: var(--datepicker-cell-size);
     transition: var(--transition);
 
@@ -66,7 +68,6 @@
 
     &.day {
       border-radius: var(--border-radius);
-      margin: 1px;
 
       &.selected {
         @extend %typo-strong-lg;

package/src/css/components/organisms/wt-player/_variables.scss

@@ -2,5 +2,7 @@
   --plyr-color-main: var(--main-accent-color);
   --plyr-audio-control-color: var(--icon-primary-color);
   // --plyr-control-toggle-checked-background: var(--main-primary-color);
-  --player-close-icon-spacing: var(--spacing--xs);
+  --player-close-icon-transform-translate-x: var(--spacing--sm);
+  // "-1 * var" for use the negative value of a variable
+  --player-close-icon-transform-translate-y: calc(-1 * var(--spacing--md));
 }

package/src/locale/ru/ru.js

@@ -74,7 +74,7 @@ export default {
       name: 'Supervisor Workspace',
       sections: {
         [SupervisorSections.QUEUES]: 'Очереди',
-        [SupervisorSections.AGENTS]: 'Агенты',
+        [SupervisorSections.AGENTS]: 'Операторы',
         [SupervisorSections.ACTIVE_CALLS]: 'Активные звонки',
       },
     },

package/src/locale/ua/ua.js

@@ -74,7 +74,7 @@ export default {
       name: 'Supervisor Workspace',
       sections: {
         [SupervisorSections.QUEUES]: 'Черги',
-        [SupervisorSections.AGENTS]: 'Агенти',
+        [SupervisorSections.AGENTS]: 'Оператори',
         [SupervisorSections.ACTIVE_CALLS]: 'Активні дзвінки',
       },
     },

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

@@ -0,0 +1,71 @@
+import { shallowMount } from '@vue/test-utils';
+import BaseFilterSchema from '../../classes/BaseFilterSchema';
+import baseFilterMixin from '../../mixins/baseFilterMixin/baseFilterMixin';
+import FilterPagination from '../filter-pagination.vue';
+
+const pageDefaultValue = 1;
+const page = 2;
+const size = 20;
+
+const pageFilterSchema = new BaseFilterSchema({ value: page, defaultValue: pageDefaultValue });
+const sizeFilterSchema = new BaseFilterSchema({ value: size });
+
+describe('Pagination filter mixin', () => {
+  const setValue = jest.fn();
+  const setValueToQuery = jest.fn();
+  const getValueFromQuery = jest.fn(({ filterQuery }) => (filterQuery === 'page' ? page : size));
+
+  let wrapper;
+
+  jest.spyOn(baseFilterMixin.methods, 'setValue').mockImplementation(setValue);
+  jest.spyOn(baseFilterMixin.methods, 'setValueToQuery').mockImplementation(setValueToQuery);
+  jest.spyOn(baseFilterMixin.methods, 'getValueFromQuery').mockImplementation(getValueFromQuery);
+
+  const computed = {
+    pageFilterSchema() { return pageFilterSchema; },
+    sizeFilterSchema() { return sizeFilterSchema; },
+  };
+
+  beforeEach(() => {
+    setValue.mockClear();
+    setValueToQuery.mockClear();
+    getValueFromQuery.mockClear();
+  });
+
+  it('Correctly sets value from $route query', async () => {
+    wrapper = shallowMount(FilterPagination, {
+      computed,
+    });
+    expect(setValue).toHaveBeenNthCalledWith(1, { filter: 'page', value: page });
+    expect(setValue).toHaveBeenNthCalledWith(2, { filter: 'size', value: size });
+  });
+
+  it('At "prev" page, changes query and emits event', async () => {
+    wrapper = shallowMount(FilterPagination, { computed });
+    wrapper.vm.prev();
+    expect(wrapper.emitted().input).toBeTruthy();
+    expect(setValue).toHaveBeenLastCalledWith({ filter: 'page', value: page - 1 });
+  });
+
+  it('At "next" page, changes query and emits event', async () => {
+    wrapper = shallowMount(FilterPagination, { computed });
+    wrapper.vm.next();
+    expect(wrapper.emitted().input).toBeTruthy();
+    expect(setValue).toHaveBeenLastCalledWith({ filter: 'page', value: page + 1 });
+  });
+
+  it('At "resetPage" method, changes query and emits event', async () => {
+    wrapper = shallowMount(FilterPagination, { computed });
+    wrapper.vm.resetPage();
+    expect(wrapper.emitted().input).toBeTruthy();
+    expect(setValue).toHaveBeenLastCalledWith({ filter: 'page', value: pageDefaultValue });
+  });
+
+  it('At "sizeChange", changes query and emits event', async () => {
+    const newSize = 40;
+    wrapper = shallowMount(FilterPagination, { computed });
+    wrapper.vm.sizeChange(newSize);
+    expect(wrapper.emitted().input).toBeTruthy();
+    expect(setValue).toHaveBeenLastCalledWith({ filter: 'size', value: newSize });
+  });
+});

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

@@ -1,49 +1,44 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import Vuex from 'vuex';
-import VueRouter from 'vue-router';
+import { shallowMount } from '@vue/test-utils';
 import SearchFilter from '../filter-search.vue';
 import BaseFilterSchema from '../../classes/BaseFilterSchema';
 import baseFilterMixin from '../../mixins/baseFilterMixin/baseFilterMixin';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
-localVue.use(VueRouter);
-const router = new VueRouter();
+const namespace = 'jest';
+const filterQuery = 'jest';
+const filterSchema = new BaseFilterSchema();
+const searchValue = 'jest-search';
 
 describe('Search Filter', () => {
-  const namespace = 'jest';
-  const filterQuery = 'jest';
-  const filterSchema = new BaseFilterSchema();
-  const store = new Vuex.Store({
-    modules: {
-      [namespace]: {
-        namespaced: true,
-        state: {
-          [filterQuery]: filterSchema,
-        },
-      },
-    },
-  });
+  const setValue = jest.fn();
+  const setValueToQuery = jest.fn();
+  const getValueFromQuery = jest.fn(() => searchValue);
 
   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(setValueMock).toHaveBeenCalledWith({ filter: filterQuery, value: search });
+    expect(setValue).toHaveBeenCalledWith({ filter: filterQuery, value: searchValue });
   });
 });

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

@@ -0,0 +1,110 @@
+<template>
+  <wt-pagination
+    :next="isNext"
+    :prev="isPrev"
+    :value="sizeFilterSchema.value"
+    debounce
+    @change="sizeChange"
+    @next="next"
+    @prev="prev"
+  ></wt-pagination>
+</template>
+
+<script>
+import getNamespacedState from '../../../store/helpers/getNamespacedState';
+import baseFilterMixin from '../mixins/baseFilterMixin/baseFilterMixin';
+
+export default {
+  name: 'filter-pagination',
+  mixins: [baseFilterMixin],
+  props: {
+    isNext: {
+      type: Boolean,
+      default: true,
+    },
+    pageFilterQuery: {
+      type: String,
+      default: 'page',
+    },
+    sizeFilterQuery: {
+      type: String,
+      default: 'size',
+    },
+  },
+
+  computed: {
+    pageFilterSchema() {
+      if (!this.$store) throw new Error('Vuex is required for page filter binding');
+      return getNamespacedState(this.$store.state, this.namespace)[this.pageFilterQuery];
+    },
+    sizeFilterSchema() {
+      if (!this.$store) throw new Error('Vuex is required for size filter binding');
+      return getNamespacedState(this.$store.state, this.namespace)[this.sizeFilterQuery];
+    },
+    isPrev() {
+      return this.page > 1;
+    },
+  },
+
+  methods: {
+    restore() {
+      this.restorePage();
+      this.restoreSize();
+    },
+
+    restorePage() {
+      const value = +this.getValueFromQuery({ filterQuery: this.pageFilterQuery });
+      if (value) this.setValue({ filter: this.pageFilterQuery, value });
+    },
+
+    restoreSize() {
+      const value = +this.getValueFromQuery({ filterQuery: this.sizeFilterQuery });
+      if (value) this.setValue({ filter: this.sizeFilterQuery, value });
+    },
+
+    next() {
+      this.$emit('input');
+      const value = this.pageFilterSchema.value + 1;
+      this.setValue({ filter: this.pageFilterQuery, value });
+      this.setValueToQuery({
+        filterQuery: this.pageFilterQuery,
+        value,
+      });
+    },
+
+    prev() {
+      this.$emit('input');
+      const value = this.pageFilterSchema.value - 1;
+      this.setValue({ filter: this.pageFilterQuery, value });
+      this.setValueToQuery({
+        filterQuery: this.pageFilterQuery,
+        value,
+      });
+    },
+
+    resetPage() {
+      this.$emit('input');
+      const value = this.pageFilterSchema.defaultValue;
+      this.setValue({ filter: this.pageFilterQuery, value });
+      this.setValueToQuery({
+        filterQuery: this.pageFilterQuery,
+        value,
+      });
+    },
+
+    sizeChange(value) {
+      this.$emit('input');
+      this.setValue({ filter: this.sizeFilterQuery, value });
+      this.setValueToQuery({
+        filterQuery: this.sizeFilterQuery,
+        value,
+      });
+    },
+  },
+};
+
+</script>
+
+<style scoped>
+
+</style>

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,47 +1,48 @@
-import { createLocalVue, shallowMount } from '@vue/test-utils';
-import VueRouter from 'vue-router';
+import { shallowMount } from '@vue/test-utils';
 import ApiFilterSchema from '../../classes/ApiFilterSchema';
 import apiFilterMixin from '../apiFilterMixin';
 
-const localVue = createLocalVue();
-localVue.use(VueRouter);
-const router = new VueRouter();
+const filterQuery = 'team';
 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: 'team',
+      filterQuery,
     }),
     computed: {
       filterSchema() { return filterSchema; },
     },
-    methods: { setValue },
+    methods: {
+      setValue,
+      setValueToQuery,
+      getValueFromQuery,
+    },
   };
 
   beforeEach(() => {
     setValue.mockClear();
-    if (Object.keys(router.currentRoute.query).length) router.replace({ query: null });
+    setValueToQuery.mockClear();
+    getValueFromQuery.mockClear();
   });
 
   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, {
-      localVue,
-      router,
-      data: () => ({ filterQuery: 'queue' }),
+      data: () => ({ filterQuery }),
     });
     expect(setValue).not.toHaveBeenCalled();
   });

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

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

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

@@ -1,11 +1,6 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import VueRouter from 'vue-router';
+import { shallowMount } from '@vue/test-utils';
 import sortFilterMixin from '../sortFilterMixin';
 
-const localVue = createLocalVue();
-localVue.use(VueRouter);
-const router = new VueRouter();
-
 const headers = [{
   value: 'queue',
   show: true,
@@ -30,27 +25,37 @@ 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 },
+    methods: {
+      setHeaders,
+      setValueToQuery,
+      getValueFromQuery,
+    },
   };
 
   beforeEach(() => {
-    router.replace('/');
+    setHeaders.mockClear();
+    setValueToQuery.mockClear();
+    getValueFromQuery.mockClear();
   });
 
   it('Correctly sets value from $route query', async () => {
-    await router.replace({ path: '/', query: { sort: '+queue' } });
-    const wrapper = shallowMount(Component, { localVue, router });
+    const wrapper = shallowMount(Component);
     expect(setHeaders).toHaveBeenCalledWith(sortedHeaders);
   });
 
   it('After "sort" trigger, header column sort value changes properly', () => {
-    const wrapper = shallowMount(Component, { localVue, router });
+    const wrapper = shallowMount(Component);
     const queue = wrapper.vm.headers.find((header) => header.value === 'queue');
     wrapper.vm.sort(queue);
     expect(setHeaders).toHaveBeenCalledWith(sortedHeaders);

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

@@ -1,8 +1,6 @@
-import _urlControllerMixin from '../_urlControllerMixin/_urlControllerMixin';
 import getNamespacedState from '../../../../store/helpers/getNamespacedState';
 
 export default {
-  mixins: [_urlControllerMixin],
   props: {
     namespace: {
       type: String,
@@ -30,5 +28,13 @@ export default {
       if (!this.$store) throw new Error('Vuex is required for default setValue() baseFilterMixin method');
       return this.$store.dispatch(`${this.namespace}/SET_FILTER`, payload);
     },
+    setValueToQuery(payload) {
+      if (!this.$store) throw new Error('Vuex is required for default setValueToQuery() baseFilterMixin method');
+      return this.$store.dispatch(`${this.namespace}/SET_VALUE_TO_QUERY`, payload);
+    },
+    getValueFromQuery(payload) {
+      if (!this.$store) throw new Error('Vuex is required for default getValueFromQuery() baseFilterMixin method');
+      return this.$store.dispatch(`${this.namespace}/GET_VALUE_FROM_QUERY`, payload);
+    },
   },
 };