@webitel/ui-sdk 0.1.2 → 0.1.3-vue3

package/src/locale/ua/ua.js

@@ -0,0 +1,273 @@
+import {
+  AgentStatus,
+  CallDirection,
+  ChannelState,
+  ChannelType, EngineRoutingSchemaType,
+} 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
+  reusable: {
+    total: 'Всього',
+    ok: 'Ок',
+    save: 'Зберегти',
+    close: 'Закрити',
+    add: 'Додати',
+    cancel: 'Відмінити',
+    import: 'Імпорт',
+    export: 'Експорт',
+    true: 'Так',
+    delete: 'Видалити',
+    search: 'Пошук',
+    open: 'Відкрити',
+    name: 'Ім\'я',
+    expand: 'Розгорнути',
+    collapse: 'Згорнути',
+    generate: 'Згенерувати',
+    lang: {
+      en: 'English',
+      ru: 'Русский',
+      ua: 'Українська',
+    },
+    from: 'Від',
+    to: 'До',
+    tts: 'Text-to-Speech',
+    state: 'Стан',
+    refresh: 'Оновити',
+    retry: 'Повторити',
+    reset: 'Скинути',
+    downloadAll: 'Завантажити все',
+    warning: 'Попередження',
+    doNotSave: 'Не зберігати',
+  },
+  vocabulary: {
+    language: 'Мова',
+    voice: 'Голос',
+    format: 'Формат',
+    text: 'Текст',
+    yes: 'Так',
+    no: 'Ні',
+    description: 'Опис',
+    login: 'Логін',
+    host: 'Хост',
+    time: 'Час',
+    channel: 'Канал',
+    file: 'Файл',
+    logout: 'Вийти',
+    priority: 'Приорітет',
+    variables: 'Змінна | Змінні',
+    type: 'Тип',
+    tag: 'Тег | Теги',
+    output: 'Вихід | Виходи',
+    values: 'Значення | Значення',
+    keys: 'Ключ | Ключі',
+    duration: 'Тривалість',
+    errors: 'Помилка | Помилки',
+  },
+  // date-related texts
+  date: {
+    sec: 'Сек',
+    timezone: 'Часова зона | Часові зони',
+  },
+  // describes Webitel system entities
+  objects: {
+    team: 'Команда | Команди',
+    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.INBOUND_JOB_QUEUE]: 'Вхідна черга завдань',
+        [QueueType.OUTBOUND_JOB_QUEUE]: 'Вихідна черга завдань',
+      },
+    },
+    agent: {
+      status: {
+        [AgentStatus.Online]: 'Онлайн',
+        [AgentStatus.Pause]: 'Пауза',
+        [AgentStatus.Offline]: 'Офлайн',
+        [snakeToCamel(AgentStatus.BreakOut)]: 'Примусова перерва',
+      },
+    },
+    flow: {
+      type: {
+        [EngineRoutingSchemaType.Chat]: 'Чат',
+        [EngineRoutingSchemaType.Voice]: 'Голос',
+        [EngineRoutingSchemaType.Service]: 'Сервіс',
+        [EngineRoutingSchemaType.Processing]: 'Обробка',
+      },
+    },
+  },
+  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]: 'Вхідний | Вхідні',
+      [CallDirection.Outbound]: 'Вихідний | Вихідні',
+    },
+  },
+  // describes Webitel FRONTEND applications + their navs
+  WebitelApplications: {
+    [WebitelApplications.AGENT]: { name: 'Agent Workspace' },
+    [WebitelApplications.AUDIT]: { name: 'Audit' },
+    [WebitelApplications.HISTORY]: { name: 'Call History' },
+    [WebitelApplications.ANALYTICS]: { name: 'Data Visualisation Tool' },
+    [WebitelApplications.SUPERVISOR]: {
+      name: 'Supervisor Workspace',
+      sections: {
+        [SupervisorSections.QUEUES]: 'Черги',
+        [SupervisorSections.AGENTS]: 'Оператори',
+        [SupervisorSections.ACTIVE_CALLS]: 'Активні дзвінки',
+      },
+    },
+    [WebitelApplications.ADMIN]: {
+      name: 'Admin',
+      sections: {
+        [AdminSections.USERS]: 'Користувачі',
+        [AdminSections.LICENSE]: 'Ліцензії',
+        [AdminSections.DEVICES]: 'Пристрої',
+        [AdminSections.FLOW]: 'Схеми',
+        [AdminSections.DIALPLAN]: 'Правила вихідного набору',
+        [AdminSections.GATEWAYS]: 'Шлюзи',
+        [AdminSections.CHATPLAN]: 'Правила маршрутизації текстових повідомлень',
+        [AdminSections.CHAT_GATEWAYS]: 'Текстові шлюзи',
+        [AdminSections.SKILLS]: 'Навички оператора',
+        [AdminSections.BUCKETS]: 'Кошики',
+        [AdminSections.MEDIA]: 'Медіафайли',
+        [AdminSections.BLACKLIST]: 'Cписки обдзвону',
+        [AdminSections.CALENDARS]: 'Календарі',
+        [AdminSections.REGIONS]: 'Розташування',
+        [AdminSections.COMMUNICATIONS]: 'Типи зв\'язку',
+        [AdminSections.PAUSE_CAUSE]: 'Статуси оператора',
+        [AdminSections.AGENTS]: 'Оператори',
+        [AdminSections.TEAMS]: 'Команди',
+        [AdminSections.RESOURCES]: 'Ресурси',
+        [AdminSections.RESOURCE_GROUPS]: 'Групи ресурсів',
+        [AdminSections.QUEUES]: 'Черги',
+        [AdminSections.STORAGE]: 'Сховища',
+        [AdminSections.COGNITIVE_PROFILES]: 'Голосові профілі',
+        [AdminSections.EMAIL_PROFILES]: 'Email профілі',
+        [AdminSections.IMPORT_CSV]: 'Імпорт даних з CSV файлів',
+        [AdminSections.TRIGGERS]: 'Тригери',
+        [AdminSections.ROLES]: 'Ролі',
+        [AdminSections.OBJECTS]: 'Розділи',
+      },
+    },
+  },
+  validation: {
+    required: 'Обов\'язкове поле',
+    numeric: 'Необхідно ввести цифрові значення',
+    email: 'Необхідно ввести адресу електронної пошти',
+    gatewayHostValidator: 'Необхідно ввести IPv4 або FQDN',
+    sipAccountValidator: 'Необхідно ввести SIP-аккаунт',
+    ipValidator: 'Необхідно ввести IPv4',
+    macValidator: 'Необхідно ввести MAC-адрес',
+    minValue: 'Значення повинно бути не менше',
+    maxValue: 'Значення повинно бути не більше',
+    sameAs: 'Неправильний пароль',
+    requiredArrayValue: 'Поле не повинно бути пустим',
+    minLength: 'Кількість символів повинна бути не меншою, ніж',
+    url: 'Необхідно ввести правильну url-адресу',
+  },
+  webitelUI: {
+    searchBar: {
+      placeholder: 'Пошук',
+    },
+    timepicker: {
+      hour: 'Год:',
+      min: 'Хв:',
+      sec: 'Сек:',
+    },
+    datetimepicker: {
+      lastHour: 'Остання година',
+      lastDay: 'Останній день',
+    },
+    pagination: {
+      sizeText: 'Записів на сторінці:',
+      prev: 'Назад',
+      next: 'Вперед',
+    },
+    appNavigator: {
+      title: 'Застосунки Webitel',
+      admin: 'Admin',
+      agent: 'Agent Workspace',
+      supervisor: 'Supervisor Workspace',
+      audit: 'Audit',
+      history: 'Call History',
+      grafana: 'Grafana',
+    },
+    headerActions: {
+      account: 'Аккаунт',
+      docs: 'Документація',
+      settings: 'Налаштування',
+      logout: 'Вийти',
+      buildVersion: 'Версія збірки',
+    },
+    tableActions: {
+      filterReset: 'Скинути фільтри',
+      columnSelect: 'Додати колонки',
+      refreshTable: 'Оновити',
+      expandFilters: 'Розкрити фільтри',
+    },
+    tableColumnSelect: {
+      title: 'Виберіть відображені колонки',
+    },
+    statusSelect: {
+      online: 'Онлайн',
+      pause: 'Пауза',
+      offline: 'Оффлайн',
+      breakOut: 'Примусова перерва',
+    },
+    table: {
+      tableCells: {
+        deleteActionHint: 'Видалити',
+        editActionHint: 'Редагувати',
+      },
+    },
+    errorPages: {
+      goBack: 'Повернутись назад',
+      page403: {
+        title: 'Немає доступу',
+        text: 'Вибачте, у Вас недостатньо прав доступу для перегляду цієї сторінки',
+      },
+      page404: {
+        title: 'Здається, Ви загубились',
+        text: 'Вибачте, ми не можемо знайти те, що Ви шукаєте',
+      },
+    },
+    copyAction: {
+      copy: 'Копіювати',
+      copied: 'Скопійовано!',
+    },
+  },
+};

package/src/mixins/dataFilterMixins/__tests__/apiFilterMixin.spec.js

@@ -0,0 +1,57 @@
+import { shallowMount } from '@vue/test-utils';
+import { createRouter, createWebHistory } from 'vue-router';
+import apiFilterMixin from '../apiFilterMixin';
+
+const router = new createRouter({
+  history: createWebHistory(),
+  routes: [],
+});
+const team = ['1', '2'];
+
+describe('API filter mixin', () => {
+  let wrapper;
+  const Component = {
+    render() {},
+    mixins: [apiFilterMixin],
+    data: () => ({
+      filterQuery: 'team',
+    }),
+  };
+
+  beforeEach(() => {
+    if (Object.keys(router.currentRoute.value.query).length) router.replace({ query: null });
+  });
+
+  it('Correctly sets value from $route query', async () => {
+    await router.replace({ query: { team } });
+    wrapper = shallowMount(Component, {
+      plugins: [router],
+    });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.value).toEqual(team);
+  });
+
+  it('Sets empty array value if $route query is empty', async () => {
+    wrapper = shallowMount(Component, {
+      localVue,
+      router,
+      data: () => ({
+        filterQuery: 'queue',
+      }),
+    });
+    expect(wrapper.vm.value).toEqual([]);
+  });
+
+  it('Resets value after $route query reset', async () => {
+    await router.replace({ query: { team } });
+    wrapper = shallowMount(Component, {
+      localVue,
+      router,
+    });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.value).toEqual(team);
+    await wrapper.vm.$router.replace({ query: null });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.value).toEqual([]);
+  });
+});

package/src/mixins/dataFilterMixins/__tests__/enumFilterMixin.spec.js

@@ -0,0 +1,66 @@
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import VueRouter from 'vue-router';
+import enumFilterMixin from '../enumFilterMixin';
+
+const options = [{
+    name: 'Inbound',
+    value: 'inbound',
+  },
+  {
+    name: 'Outbound',
+    value: 'outbound',
+  }];
+
+const localVue = createLocalVue();
+localVue.use(VueRouter);
+const router = new VueRouter();
+
+describe('Enum filter mixin', () => {
+  let wrapper;
+  const Component = {
+    render() {
+    },
+    mixins: [enumFilterMixin],
+    data: () => ({
+      filterQuery: 'type',
+      options,
+    }),
+  };
+
+  beforeEach(() => {
+    if (Object.keys(router.currentRoute.query).length) router.replace({ query: null });
+  });
+
+  it('Correctly sets value from $route query', async () => {
+    await router.replace({ query: { type: [options[0].value] } });
+    wrapper = shallowMount(Component, {
+      localVue,
+      router,
+    });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.value).toEqual([options[0]]);
+  });
+
+  it('Correctly sets single value from $route query', async () => {
+    await router.replace({ query: { type: options[0].value } });
+    wrapper = shallowMount(Component, {
+      localVue,
+      router,
+    });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.value).toEqual(options[0]);
+  });
+
+  it('Resets value after $route query reset', async () => {
+    await router.replace({ query: { type: [options[0].value] } });
+    wrapper = shallowMount(Component, {
+      localVue,
+      router,
+    });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.value).toEqual([options[0]]);
+    await wrapper.vm.$router.replace({ query: null });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.value).toEqual([]);
+  });
+});

package/src/mixins/dataFilterMixins/__tests__/paginationFilterMixin.spec.js

@@ -0,0 +1,93 @@
+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', () => {
+  let wrapper;
+  const Component = {
+    render() {},
+    mixins: [paginationFilterMixin],
+  };
+
+  beforeEach(() => {
+    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,
+    });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.page).toEqual(page);
+    expect(wrapper.vm.size).toEqual(size);
+  });
+
+  it('Sets initial value if $route query is empty', async () => {
+    wrapper = shallowMount(Component, {
+      localVue,
+      router,
+      data: () => ({
+        filterQuery: 'queue',
+      }),
+    });
+    expect(wrapper.vm.page).toEqual('1');
+    expect(wrapper.vm.size).toEqual('10');
+  });
+
+  it('Resets value after $route query reset', async () => {
+    await router.replace({ query: { page, size } });
+    wrapper = shallowMount(Component, {
+      localVue,
+      router,
+    });
+    await wrapper.vm.$router.replace({ query: null });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.page).toEqual('1');
+    expect(wrapper.vm.size).toEqual('10');
+  });
+
+  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 "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/mixins/dataFilterMixins/__tests__/sortFilterMixin.spec.js

@@ -0,0 +1,60 @@
+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,
+  sort: null,
+  field: 'queue',
+}, {
+  value: 'agents',
+  show: true,
+  sort: null,
+  field: 'online',
+}];
+
+const $t = () => {};
+
+describe('Sort filter mixin', () => {
+  let wrapper;
+  const Component = {
+    render() {},
+    mixins: [sortFilterMixin],
+    data: () => ({ headers }),
+  };
+
+  beforeEach(() => {
+    router.replace('/');
+    wrapper = shallowMount(Component, {
+      localVue,
+      router,
+      mocks: { $t },
+    });
+  });
+
+  it('Correctly sets value from $route query', async () => {
+    await router.replace({ path: '/', query: { sort: '+queue' } });
+    const queue = wrapper.vm.headers.find((header) => header.value === 'queue');
+    expect(queue.sort).toEqual('asc');
+  });
+
+  it('After "sort" trigger, header column sort value changes properly', () => {
+    let queue;
+    queue = wrapper.vm.headers.find((header) => header.value === 'queue');
+    wrapper.vm.sort(queue);
+    queue = wrapper.vm.headers.find((header) => header.value === 'queue');
+    expect(queue.sort).toEqual('asc');
+  });
+
+  it('After "sort" trigger, url query changes properly', async () => {
+    await router.replace({ path: '/', query: { sort: '+queue' } });
+    const queue = wrapper.vm.headers.find((header) => header.value === 'queue');
+    wrapper.vm.sort(queue);
+    expect(wrapper.vm.$route.query.sort).toEqual('-queue');
+  });
+});

package/src/mixins/dataFilterMixins/__tests__/urlControllerMixin.spec.js

@@ -0,0 +1,48 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import VueRouter from 'vue-router';
+import _urlControllerMixin from '../_urlControllerMixin/_urlControllerMixin';
+
+const localVue = createLocalVue();
+localVue.use(VueRouter);
+const router = new VueRouter();
+
+const $t = () => {};
+const filterQuery = 'team';
+
+describe('URL Controller mixin Set and Get operations', () => {
+  let wrapper;
+  const Component = {
+    render() {},
+    mixins: [_urlControllerMixin],
+  };
+
+  beforeEach(() => {
+    router.replace('/');
+    wrapper = shallowMount(Component, {
+      localVue,
+      router,
+      mocks: { $t },
+    });
+  });
+
+  it('Array of objects', async () => {
+    const value = [{ name: 'team 1', id: '1' }, { name: 'team 2', id: '2' }];
+    wrapper.vm.setValueToQuery({ filterQuery, value });
+    const queryValue = wrapper.vm.getValueFromQuery({ filterQuery });
+    expect(queryValue).toEqual(['1', '2']);
+  });
+
+  it('Array of values', async () => {
+    const value = ['hello', '1'];
+    wrapper.vm.setValueToQuery({ filterQuery, value });
+    const queryValue = wrapper.vm.getValueFromQuery({ filterQuery });
+    expect(queryValue).toEqual(value);
+  });
+
+  it('String value', async () => {
+    const value = 'hello there';
+    wrapper.vm.setValueToQuery({ filterQuery, value });
+    const queryValue = wrapper.vm.getValueFromQuery({ filterQuery });
+    expect(queryValue).toEqual(value);
+  });
+});

package/src/mixins/dataFilterMixins/_urlControllerMixin/_urlControllerMixin.js

@@ -0,0 +1,37 @@
+import deepEqual from 'deep-equal';
+
+export default {
+  methods: {
+    changeRouteQuery({ filterQuery, value }) {
+      const query = { ...this.$route.query };
+      query[filterQuery] = value;
+      return this.$router.replace({
+        name: this.$router.currentRoute.name,
+        query,
+      });
+    },
+
+    setValueToQuery({ filterQuery, value, storedProp = 'id' }) {
+      let newValue = '';
+      if (Array.isArray(value)) {
+        if (value.length && typeof value[0] !== 'object') {
+          newValue = value;
+        } else {
+          newValue = value.map((item) => item[storedProp]);
+        }
+      } else {
+        newValue = value;
+      }
+      if (!deepEqual(this.$route.query[filterQuery], newValue)) {
+        this.changeRouteQuery({
+          value: newValue,
+          filterQuery,
+        });
+      }
+    },
+
+    getValueFromQuery({ filterQuery }) {
+      return this.$route.query[filterQuery];
+    },
+  },
+};

package/src/mixins/dataFilterMixins/apiFilterMixin.js

@@ -0,0 +1,23 @@
+import baseFilterMixin from './baseFilterMixin/baseFilterMixin';
+
+export default {
+  mixins: [baseFilterMixin],
+
+  data: () => ({
+    value: [],
+    defaultValue: [],
+    trackBy: 'id',
+    storedProp: 'id',
+  }),
+
+  methods: {
+    async restoreValue(idList) {
+      this.value = idList && idList.length
+        ? await this.fetchSelected(idList) : this.defaultValue;
+    },
+
+    async fetchSelected(idList) {
+      return idList;
+    },
+  },
+};

package/src/mixins/dataFilterMixins/baseFilterMixin/baseFilterMixin.js

@@ -0,0 +1,29 @@
+import _urlControllerMixin from '../_urlControllerMixin/_urlControllerMixin';
+
+export default {
+  mixins: [_urlControllerMixin],
+  data: () => ({
+    defaultValue: '',
+  }),
+
+  watch: {
+    '$route.query': {
+      handler(newValue, oldValue) {
+        if (newValue[this.filterQuery] !== oldValue[this.filterQuery]) {
+          this.restore({ filterQuery: this.filterQuery });
+        }
+      },
+    },
+  },
+
+  created() {
+    this.restore({ filterQuery: this.filterQuery });
+  },
+
+  methods: {
+    restore({ filterQuery }) {
+      const value = this.getValueFromQuery({ filterQuery }) || this.defaultValue;
+      this.restoreValue(value);
+    },
+  },
+};