@webitel/ui-sdk 3.0.4 → 3.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "3.0.4",
+  "version": "3.0.6",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",
@@ -28,6 +28,8 @@
   ],
   "dependencies": {
     "@vue/compat": "^3.2.47",
+    "@vuelidate/core": "^2.0.0",
+    "@vuelidate/validators": "^2.0.0",
     "clipboard-copy": "^4.0.1",
     "core-js": "^3.6.5",
     "csv-stringify": "^5.5.3",
@@ -39,6 +41,7 @@
     "jszip-utils": "^0.1.0",
     "node-polyfill-webpack-plugin": "^1.1.4",
     "plyr": "3.6.2",
+    "sortablejs": "^1.15.0",
     "tiny-emitter": "^2.1.0",
     "vue": "^3.2.47",
     "vue-i18n": "^9.2.2",

package/src/locale/en/en.js

@@ -34,6 +34,7 @@ export default {
     generate: 'Generate',
     lang: {
       en: 'English',
+      es: 'Español',
       ru: 'Русский',
       ua: 'Українська',
     },
@@ -46,6 +47,8 @@ export default {
     downloadAll: 'Download all',
     warning: 'Warning',
     doNotSave: 'Don\'t save',
+    required: 'Required',
+    copy: 'Copy',
   },
   // yak zhe ya zaebalsya povtoriaty odni i ti sami slova!!!!
   vocabulary: {
@@ -280,5 +283,15 @@ export default {
       copy: 'Copy',
       copied: 'Copied to clipboard!',
     },
+    auditForm: {
+      question: 'Criteria',
+      option: 'Option | Options',
+      score: 'Score | Scores',
+      addQuestion: 'Add criteria',
+      type: {
+        options: 'Options',
+        score: 'Score',
+      },
+    },
   },
 };

package/src/locale/es/es.js

@@ -0,0 +1,282 @@
+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 AuditorSections
+    from '../../enums/WebitelApplications/AuditorSections.enum';
+   import { snakeToCamel } from '../../scripts/caseConverters';
+   
+   export default {
+    // describes reusable buttons, actions, default titles, and other ui elements
+    reusable: {
+      total: 'Total',
+      ok: 'Ok',
+      save: 'Guardar',
+      close: 'Cerrar',
+      add: 'Agregar',
+      cancel: 'Cancelar',
+      import: 'Importación',
+      export: 'Exportación',
+      true: 'Sí',
+      delete: 'Eliminar',
+      search: 'Búsqueda',
+      open: 'Abrir',
+      name: 'Nombre',
+      expand: 'Expandir',
+      collapse: 'Reducir',
+      generate: 'Generar',
+      lang: {
+        en: 'English',
+        es: 'Español',
+        ru: 'Русский',
+        ua: 'Українська',
+      },
+      from: 'De',
+      to: 'Hasta',
+      tts: 'Text-to-Speech',
+      state: 'Estado',
+      refresh: 'Actualizar',
+      retry: 'Repetir',
+      reset: 'Reiniciar',
+      downloadAll: 'Descargar todo',
+      warning: 'Aviso',
+      doNotSave: 'No guardar',
+    },
+    vocabulary: {
+      language: 'Idioma',
+      voice: 'Voz',
+      format: 'Formáto',
+      text: 'Texto',
+      yes: 'Sí',
+      no: 'No',
+      description: 'Descripción',
+      login: 'Acceso',
+      host: 'Host',
+      time: 'Tiempo',
+      channel: 'Canal',
+      file: 'Archivo',
+      logout: 'Salir',
+      priority: 'Prioridad',
+      variables: 'Intercambiable | Intercambiables',
+      type: 'Tipo',
+      tag: 'Etiqueta | Etiquetas',
+      output: 'Salida | Salidas',
+      values: 'Valor | Valores',
+      keys: 'Clave | Claves',
+      duration: 'Duración',
+      errors: 'Error | Errores',
+    },
+    // date-related texts
+    date: {
+      sec: 'Seg',
+      timezone: 'Zona horaria | Zonas horarias',
+    },
+    // describes Webitel system entities
+    objects: {
+      team: 'Equipo | Equipos',
+      supervisor: 'Supervisor | Supervisores',
+      auditor: 'Auditor | Auditores',
+      region: 'Región | Regiones',
+      queue: {
+        type: {
+          [QueueType.INBOUND_QUEUE]: 'Cola entrante',
+          [QueueType.OFFLINE_QUEUE]: 'Cola fuera de línea',
+          [QueueType.OUTBOUND_IVR_QUEUE]: 'IVR saliente',
+          [QueueType.PREDICTIVE_DIALER]: 'Marcador predictivo',
+          [QueueType.PROGRESSIVE_DIALER]: 'Marcador progresivo',
+          [QueueType.PREVIEW_DIALER]: 'Vista previa de llamadas',
+          [QueueType.CHAT_INBOUND_QUEUE]: 'Cola de chats',
+          [QueueType.INBOUND_JOB_QUEUE]: 'Cola de tareas entrante',
+          [QueueType.OUTBOUND_JOB_QUEUE]: 'Cola de tareas saliente',
+        },
+      },
+      agent: {
+        status: {
+          [AgentStatus.Online]: 'En línea',
+          [AgentStatus.Pause]: 'Pausa',
+          [AgentStatus.Offline]: 'Desconectado',
+          [snakeToCamel(AgentStatus.BreakOut)]: 'Pausa forzada',
+        },
+      },
+      flow: {
+        type: {
+          [EngineRoutingSchemaType.Chat]: 'Chat',
+          [EngineRoutingSchemaType.Voice]: 'Voz',
+          [EngineRoutingSchemaType.Service]: 'Servicio',
+          [EngineRoutingSchemaType.Processing]: 'Procesamiento',
+        },
+      },
+    },
+    channel: {
+      state: {
+        [ChannelState.Waiting]: 'Espera',
+        [ChannelState.Distribute]: 'Reservado',
+        [ChannelState.Offering]: 'Distribución',
+        [ChannelState.Answered]: 'Respondida',
+        [ChannelState.Active]: 'Activo',
+        [ChannelState.Bridged]: 'Conectado',
+        [ChannelState.Hold]: 'Espera',
+        [ChannelState.Missed]: 'Perdida',
+        [snakeToCamel(ChannelState.WrapTime)]: 'Post-procesamiento',
+        [ChannelState.Processing]: 'Procesamiento',
+        [ChannelState.Transfer]: 'Transferencia',
+      },
+      type: {
+        [ChannelType.Call]: 'Llamada',
+        [ChannelType.Email]: 'Correo electrónico',
+        [ChannelType.Chat]: 'Chat',
+      },
+    },
+    calls: {
+      direction: {
+        [CallDirection.Inbound]: 'Entrante | Entrantes',
+        [CallDirection.Outbound]: 'Saliente | Salientes',
+      },
+    },
+    // describes Webitel FRONTEND applications + their navs
+    WebitelApplications: {
+      [WebitelApplications.AGENT]: { name: 'Agent Workspace' },
+      [WebitelApplications.AUDIT]: {
+        name: 'Audit',
+        section: {
+          [AuditorSections.SCORECARDS]: 'Formularios',
+        },
+      },
+      [WebitelApplications.HISTORY]: { name: 'Call History' },
+      [WebitelApplications.ANALYTICS]: { name: 'Data Visualisation Tool' },
+      [WebitelApplications.SUPERVISOR]: {
+        name: 'Supervisor Workspace',
+        sections: {
+          [SupervisorSections.QUEUES]: 'Colas',
+          [SupervisorSections.AGENTS]: 'Operadores',
+          [SupervisorSections.ACTIVE_CALLS]: 'Llamadas activas',
+        },
+      },
+      [WebitelApplications.ADMIN]: {
+        name: 'Admin',
+        sections: {
+          [AdminSections.USERS]: 'Usuarios',
+          [AdminSections.LICENSE]: 'Licencias',
+          [AdminSections.DEVICES]: 'Dispositivos',
+          [AdminSections.FLOW]: 'Esquemas',
+          [AdminSections.DIALPLAN]: 'Reglas de la marcación saliente',
+          [AdminSections.GATEWAYS]: 'Puertas de enlace',
+          [AdminSections.CHATPLAN]: 'Reglas de enrutamiento de mensajes de texto',
+          [AdminSections.CHAT_GATEWAYS]: 'Puertas de enlace de texto',
+          [AdminSections.SKILLS]: 'Habilidades del operador',
+          [AdminSections.BUCKETS]: 'Cestas',
+          [AdminSections.MEDIA]: 'Archivos multimedia',
+          [AdminSections.BLACKLIST]: 'Listas de llamadas',
+          [AdminSections.CALENDARS]: 'Calendarios',
+          [AdminSections.REGIONS]: 'Ubicación',
+          [AdminSections.COMMUNICATIONS]: 'Tipos de comunicación',
+          [AdminSections.PAUSE_CAUSE]: 'Estados del operador',
+          [AdminSections.AGENTS]: 'Operadores',
+          [AdminSections.TEAMS]: 'Equipos',
+          [AdminSections.RESOURCES]: 'Recursos',
+          [AdminSections.RESOURCE_GROUPS]: 'Grupos de recursos',
+          [AdminSections.QUEUES]: 'Colas',
+          [AdminSections.STORAGE]: 'Almacenamiento',
+          [AdminSections.COGNITIVE_PROFILES]: 'Perfiles de voz',
+          [AdminSections.EMAIL_PROFILES]: 'Perfiles de correo electrónico',
+          [AdminSections.IMPORT_CSV]: 'Importación de datos de archivos CSV',
+          [AdminSections.TRIGGERS]: 'Activadores',
+          [AdminSections.ROLES]: 'Funciones',
+          [AdminSections.OBJECTS]: 'Secciones',
+        },
+      },
+    },
+    validation: {
+      required: 'Campo requerido',
+      numeric: 'Valores numéricos requeridos',
+      email: 'Correo electrónico requerido',
+      gatewayHostValidator: 'IPv4 o FQDN requerido',
+      sipAccountValidator: 'Cuenta SIP requerida',
+      ipValidator: 'IPv4 requerido',
+      macValidator: 'dirección MAC requerida',
+      minValue: 'El valor no debe ser menor que',
+      maxValue: 'El valor no debe ser mayor que',
+      sameAs: 'Contraseña no válida',
+      requiredArrayValue: 'El campo no debe estar vacío',
+      minLength: 'El número de caracteres no debe ser menor que',
+      url: 'Se debe ingresar una URL válida',
+    },
+    webitelUI: {
+      searchBar: {
+        placeholder: 'Búsqueda',
+      },
+      timepicker: {
+        hour: 'Hora:',
+        min: 'Min:',
+        sec: 'Seg:',
+      },
+      datetimepicker: {
+        lastHour: 'Última hora',
+        lastDay: 'Último día',
+      },
+      pagination: {
+        sizeText: 'Registros en la página:',
+        prev: 'Atrás',
+        next: 'Adelante',
+      },
+      appNavigator: {
+        title: 'Aplicaciones de Webitel',
+        admin: 'Admin',
+        agent: 'Agent Workspace',
+        supervisor: 'Supervisor Workspace',
+        audit: 'Audit',
+        history: 'Call History',
+        grafana: 'Grafana',
+      },
+      headerActions: {
+        account: 'Cuenta',
+        docs: 'Documentación',
+        settings: 'Ajustes',
+        logout: 'Salir',
+        buildVersion: 'Versión de compilación',
+      },
+      tableActions: {
+        filterReset: 'Reiniciar filtros',
+        columnSelect: 'Agregar columnas',
+        refreshTable: 'Actualizar',
+        expandFilters: 'Expandir filtros',
+      },
+      tableColumnSelect: {
+        title: 'Seleccione columnas mostradas',
+      },
+      statusSelect: {
+        online: 'En línea',
+        pause: 'Pausa',
+        offline: 'Desconectado',
+        breakOut: 'Pausa forzada',
+      },
+      table: {
+        tableCells: {
+          deleteActionHint: 'Eliminar',
+          editActionHint: 'Editar',
+        },
+      },
+      errorPages: {
+        goBack: 'Regresar',
+        page403: {
+          title: 'Sin acceso',
+          text: 'Lo sentimos, no tiene suficientes derechos de acceso para ver esta página',
+        },
+        page404: {
+          title: 'Parece que se ha perdido',
+          text: 'Lo sentimos, no podemos encontrar lo que está buscando',
+        },
+      },
+      copyAction: {
+        copy: 'Copiar',
+        copied: '¡Copiado!',
+      },
+    },
+   };
+   

package/src/locale/i18n.js

@@ -1,10 +1,12 @@
 import { createI18n } from 'vue-i18n';
 import en from './en/en';
+import en from './es/es';
 import ru from './ru/ru';
 import ua from './ua/ua';
 
 const messages = {
   en,
+  es,
   ru,
   ua,
 };

package/src/locale/ru/ru.js

@@ -33,6 +33,7 @@ export default {
     generate: 'Сгенерировать',
     lang: {
       en: 'English',
+      es: 'Español',
       ru: 'Русский',
       ua: 'Українська',
     },
@@ -45,6 +46,8 @@ export default {
     downloadAll: 'Скачать всё',
     warning: 'Предупреждение',
     doNotSave: 'Не сохранять',
+    required: 'Обязательный',
+    copy: 'Скопировать',
   },
   vocabulary: {
     language: 'Язык',
@@ -276,5 +279,15 @@ export default {
       copy: 'Копировать',
       copied: 'Скопировано!',
     },
+    auditForm: {
+      question: 'Критерий',
+      option: 'Вариант | Варианты',
+      score: 'Бал | Балы',
+      addQuestion: 'Добавить критерий',
+      type: {
+        options: 'Критерии',
+        score: 'Бал',
+      },
+    },
   },
 };

package/src/locale/ua/ua.js

@@ -33,6 +33,7 @@ export default {
     generate: 'Згенерувати',
     lang: {
       en: 'English',
+      es: 'Español',
       ru: 'Русский',
       ua: 'Українська',
     },
@@ -46,6 +47,8 @@ export default {
     downloadAll: 'Завантажити все',
     warning: 'Попередження',
     doNotSave: 'Не зберігати',
+    required: 'Обов\'язковий',
+    copy: 'Скопіювати',
   },
   vocabulary: {
     language: 'Мова',
@@ -276,5 +279,15 @@ export default {
       copy: 'Копіювати',
       copied: 'Скопійовано!',
     },
+    auditForm: {
+      question: 'Критерій',
+      option: 'Варіант | Варіанти',
+      score: 'Бал | Бали',
+      addQuestion: 'Додати критерій',
+      type: {
+        options: 'Критерії',
+        score: 'Бал',
+      },
+    },
   },
 };

package/src/mixins/validationMixin/validationMixin.js

@@ -19,21 +19,21 @@ export default {
     validationText() {
       let validationText = '';
       if (this.isValidation && this.invalid) {
-        if (this.v.required === false) validationText = this.$t('validation.required');
-        else if (this.v.numeric === false) validationText = this.$t('validation.numeric');
-        else if (this.v.email === false) validationText = this.$t('validation.email');
-        else if (this.v.gatewayHostValidator === false) validationText = this.$t('validation.gatewayHostValidator');
-        else if (this.v.ipValidator === false) validationText = this.$t('validation.ipValidator');
-        else if (this.v.macValidator === false) validationText = this.$t('validation.macValidator');
-        else if (this.v.minValue === false) validationText = `${this.$t('validation.minValue')} ${this.v.$params.minValue.min}`;
-        else if (this.v.maxValue === false) validationText = `${this.$t('validation.maxValue')} ${this.v.$params.maxValue.max}`;
-        else if (this.v.sipAccountValidator === false) validationText = this.$t('validation.sipAccountValidator');
-        else if (this.v.minLength === false) validationText = `${this.$t('validation.minLength')} ${this.v.$params.minLength.min}`;
-        else if (this.v.url === false) validationText = `${this.$t('validation.url')}`;
+        if (this.v.required.$invalid) validationText = this.$t('validation.required');
+        else if (this.v.numeric.$invalid) validationText = this.$t('validation.numeric');
+        else if (this.v.email.$invalid) validationText = this.$t('validation.email');
+        else if (this.v.gatewayHostValidator.$invalid) validationText = this.$t('validation.gatewayHostValidator');
+        else if (this.v.ipValidator.$invalid) validationText = this.$t('validation.ipValidator');
+        else if (this.v.macValidator.$invalid) validationText = this.$t('validation.macValidator');
+        else if (this.v.minValue.$invalid) validationText = `${this.$t('validation.minValue')} ${this.v.$params.minValue.min}`;
+        else if (this.v.maxValue.$invalid) validationText = `${this.$t('validation.maxValue')} ${this.v.$params.maxValue.max}`;
+        else if (this.v.sipAccountValidator.$invalid) validationText = this.$t('validation.sipAccountValidator');
+        else if (this.v.minLength.$invalid) validationText = `${this.$t('validation.minLength')} ${this.v.$params.minLength.min}`;
+        else if (this.v.url.$invalid) validationText = `${this.$t('validation.url')}`;
       }
       // eslint-disable-next-line no-restricted-syntax
       for (const { name, text } of this.customValidators) {
-        if (this.v[name] === false) validationText = text;
+        if (this.v[name].$invalid) validationText = text;
       }
       return validationText;
     },

package/src/modules/AuditForm/components/__tests__/audit-form-question-read-wrapper.spec.js

@@ -0,0 +1,14 @@
+import { shallowMount } from '@vue/test-utils';
+import AuditFormQuestionReadWrapper from '../audit-form-question-read-wrapper.vue';
+
+describe('AuditFormQuestionReadWrapper', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(AuditFormQuestionReadWrapper, {
+      props: {
+        question: {},
+        result: {},
+      },
+    });
+    expect(wrapper.isVisible()).toBe(true);
+  });
+});

package/src/modules/AuditForm/components/__tests__/audit-form-question-write-wrapper.spec.js

@@ -0,0 +1,59 @@
+import { shallowMount } from '@vue/test-utils';
+import {
+  generateQuestionOptionsSchema
+} from '../../schemas/AuditFormQuestionOptionsSchema';
+import AuditFormQuestionWriteWrapper from '../audit-form-question-write-wrapper.vue';
+import { generateQuestionSchema } from '../../schemas/AuditFormQuestionSchema';
+import { generateQuestionScoreSchema } from '../../schemas/AuditFormQuestionScoreSchema';
+
+const v = { question: {} };
+
+describe('AuditFormQuestionWriteWrapper', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(AuditFormQuestionWriteWrapper, {
+      props: {
+        question: {},
+        v,
+      },
+    });
+    expect(wrapper.isVisible()).toBe(true);
+  });
+  it('correctly changes question', () => {
+    const question = generateQuestionSchema();
+    const wrapper = shallowMount(AuditFormQuestionWriteWrapper, {
+      props: {
+        question,
+        v,
+      },
+    });
+    wrapper.findComponent({ name: 'wt-switcher' }).vm.$emit('change', !question.required);
+    expect(wrapper.emitted()['change:question'][0][0].required)
+    .toBe(!question.required);
+  });
+  it('correctly changes question type to Score', () => {
+    const question = {};
+    const wrapper = shallowMount(AuditFormQuestionWriteWrapper, {
+      props: {
+        question,
+        v,
+      },
+    });
+    wrapper.find('.audit-form-question-write-content-question')
+    .findComponent({ name: 'wt-select' }).vm.$emit('input', { value: 'score' });
+    expect(wrapper.emitted()['change:question'][0][0])
+    .toEqual(generateQuestionScoreSchema());
+  });
+  it('correctly changes question type to Options', () => {
+    const question = {};
+    const wrapper = shallowMount(AuditFormQuestionWriteWrapper, {
+      props: {
+        question,
+        v,
+      },
+    });
+    wrapper.find('.audit-form-question-write-content-question')
+    .findComponent({ name: 'wt-select' }).vm.$emit('input', { value: 'options' });
+    expect(wrapper.emitted()['change:question'][0][0])
+    .toEqual(generateQuestionOptionsSchema());
+  });
+});

package/src/modules/AuditForm/components/__tests__/audit-form-question.spec.js

@@ -0,0 +1,14 @@
+import { shallowMount } from '@vue/test-utils';
+import AuditFormQuestion from '../audit-form-question.vue';
+
+describe('AuditFormQuestion', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(AuditFormQuestion, {
+      props: {
+        question: {},
+        result: {},
+      },
+    });
+    expect(wrapper.isVisible()).toBe(true);
+  });
+});

package/src/modules/AuditForm/components/__tests__/audit-form.spec.js

@@ -0,0 +1,66 @@
+import { shallowMount } from '@vue/test-utils';
+import AuditForm from '../audit-form.vue';
+import { generateQuestionSchema } from '../../schemas/AuditFormQuestionSchema';
+
+import {
+  useDestroyableSortable,
+} from '../../composables/useDestroyableSortable';
+
+jest.mock('../../composables/useDestroyableSortable');
+
+useDestroyableSortable.mockImplementation(() => ({}));
+
+describe('AuditForm', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(AuditForm, {
+      props: {
+        mode: '',
+        questions: [],
+      },
+    });
+    expect(wrapper.isVisible()).toBe(true);
+  });
+  it('add question button triggers update question event', () => {
+    const wrapper = shallowMount(AuditForm, {
+      props: {
+        mode: 'create',
+        questions: [],
+      },
+    });
+    wrapper.findComponent('.audit-form__add-button').vm.$emit('click');
+    expect(wrapper.emitted()['update:questions'][0][0])
+    .toEqual([generateQuestionSchema()]);
+  });
+  it('delete event from child question emits update without passed question', () => {
+    const wrapper = shallowMount(AuditForm, {
+      props: {
+        mode: 'create',
+        questions: [generateQuestionSchema()],
+      },
+    });
+    wrapper.findComponent({ name: 'audit-form-question' }).vm.$emit('delete', { key: 0 });
+    expect(wrapper.emitted()['update:questions'][0][0])
+    .toEqual([]);
+  });
+  it('copy event from child question emits update with duplicated questions', () => {
+    const question = generateQuestionSchema();
+    const wrapper = shallowMount(AuditForm, {
+      props: {
+        mode: 'create',
+        questions: [question],
+      },
+    });
+    wrapper.findComponent({ name: 'audit-form-question' }).vm.$emit('copy', { question, key: 0 });
+    expect(wrapper.emitted()['update:questions'][0][0])
+    .toEqual([question, question]);
+  });
+  it('initializes result depending on passed questions', () => {
+    const wrapper = shallowMount(AuditForm, {
+      props: {
+        mode: 'fill',
+        questions: [generateQuestionSchema(), generateQuestionSchema(), generateQuestionSchema()],
+      },
+    });
+    expect(wrapper.emitted()['update:result'][0][0]).toEqual([null, null, null]);
+  });
+});