@webitel/ui-sdk 0.1.11 → 0.1.112

package/src/locale/ru/ru.js

@@ -1,12 +1,97 @@
+import AdminSections from '../../enums/WebitelApplications/AdminSections.enum';
+import SupervisorSections from '../../enums/WebitelApplications/SupervisorSections.enum';
+import WebitelApplications from '../../enums/WebitelApplications/WebitelApplications.enum';
+
 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: 'Имя',
+    lang: {
+      en: 'English',
+      ru: 'Русский',
+      ua: 'Українська',
+    },
+  },
+  // date-related texts
+  date: {
+    sec: 'Сек',
+  },
+  // describes Webitel system entities
+  objects: {
+    team: 'Команда | Команды',
+    supervisor: 'Супервизор | Супервизоры',
+    auditor: 'Аудитор | Аудиторы',
+    region: 'Регион | Регионы',
+  },
+  // 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.CHAT_GATEWAYS]: 'Текстовые шлюзы',
+        [AdminSections.SKILLS]: 'Навыки оператора',
+        [AdminSections.BUCKETS]: 'Корзины',
+        [AdminSections.MEDIA]: 'Медиафайлы',
+        [AdminSections.BLACKLIST]: 'Cписки обзвона',
+        [AdminSections.CALENDARS]: 'Календари',
+        [AdminSections.COMMUNICATIONS]: 'Типы связи',
+        [AdminSections.REGIONS]: 'Площадки',
+        [AdminSections.PAUSE_CAUSE]: 'Статусы оператора',
+        [AdminSections.AGENTS]: 'Операторы',
+        [AdminSections.TEAMS]: 'Команды',
+        [AdminSections.RESOURCES]: 'Ресурсы',
+        [AdminSections.RESOURCE_GROUPS]: 'Группы ресурсов',
+        [AdminSections.QUEUES]: 'Очереди',
+        [AdminSections.STORAGE]: 'Хранилища',
+        [AdminSections.ROLES]: 'Роли',
+        [AdminSections.OBJECTS]: 'Разделы',
+      },
+    },
   },
   validation: {
     required: 'Обязательное поле',
-    numeric: 'Should be numeric',
-    email: 'Should look like email',
+    numeric: 'Необходимо ввести цифровое значение',
+    email: 'Необходимо ввести адрес электронной почты',
+    gatewayHostValidator: 'Необходимо ввести IPv4 или FQDN',
+    sipAccountValidator: 'Необходимо ввести SIP-аккаунт',
+    ipValidator: 'Необходимо ввести IPv4',
+    macValidator: 'Необходимо ввести MAC-адрес',
+    minValue: 'Значение должно быть не меньше',
+    maxValue: 'Значение должно быть не больше',
+    sameAs: 'Неверный пароль',
+    requiredArrayValue: 'Поле не должно быть пустым',
+    minLength: 'Количество символов не должно быть меньше, чем',
+    url: 'Необходимо ввести корректный url-адрес',
   },
   webitelUI: {
     timepicker: {
@@ -23,5 +108,53 @@ export default {
       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: 'Извините, мы не можем найти то, что вы ищете',
+      },
+    },
   },
 };

package/src/locale/ua/ua.js

@@ -0,0 +1,160 @@
+import AdminSections from '../../enums/WebitelApplications/AdminSections.enum';
+import SupervisorSections from '../../enums/WebitelApplications/SupervisorSections.enum';
+import WebitelApplications from '../../enums/WebitelApplications/WebitelApplications.enum';
+
+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: 'Ім\'я',
+    lang: {
+      en: 'English',
+      ru: 'Русский',
+      ua: 'Українська',
+    },
+  },
+  // date-related texts
+  date: {
+    sec: 'Сек',
+  },
+  // describes Webitel system entities
+  objects: {
+    team: 'Команда | Команди',
+    supervisor: 'Супервізор | Супервізори',
+    auditor: 'Аудитор | Аудитори',
+    region: 'Регіон | Регіони',
+  },
+  // 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.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.ROLES]: 'Ролі',
+        [AdminSections.OBJECTS]: 'Розділи',
+      },
+    },
+  },
+  validation: {
+    required: 'Обов\'язкове поле',
+    numeric: 'Необхідно ввести цифрові значення',
+    email: 'Необхідно ввести адресу електронної пошти',
+    gatewayHostValidator: 'Необхідно ввести IPv4 або FQDN',
+    sipAccountValidator: 'Необхідно ввести SIP-аккаунт',
+    ipValidator: 'Необхідно ввести IPv4',
+    macValidator: 'Необхідно ввести MAC-адрес',
+    minValue: 'Значення повинно бути не менше',
+    maxValue: 'Значення повинно бути не більше',
+    sameAs: 'Неправильний пароль',
+    requiredArrayValue: 'Поле не повинно бути пустим',
+    minLength: 'Кількість символів повинна бути не меншою, ніж',
+    url: 'Необхідно ввести правильну url-адресу',
+  },
+  webitelUI: {
+    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: 'Вибачте, ми не можемо знайти те, що Ви шукаєте',
+      },
+    },
+  },
+};

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

@@ -0,0 +1,57 @@
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import VueRouter from 'vue-router';
+import apiFilterMixin from '../apiFilterMixin';
+
+const localVue = createLocalVue();
+localVue.use(VueRouter);
+const router = new VueRouter();
+const team = ['1', '2'];
+
+describe('API filter mixin', () => {
+  let wrapper;
+  const Component = {
+    render() {},
+    mixins: [apiFilterMixin],
+    data: () => ({
+      filterQuery: 'team',
+    }),
+  };
+
+  beforeEach(() => {
+    if (Object.keys(router.currentRoute.query).length) router.replace({ query: null });
+  });
+
+  it('Correctly sets value from $route query', async () => {
+    await router.replace({ query: { team } });
+    wrapper = shallowMount(Component, {
+      localVue,
+      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];
+    },
+  },
+};