@webitel/ui-sdk 2.0.11 → 2.0.13-2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "2.0.11",
+  "version": "2.0.13-2",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",
@@ -44,7 +44,7 @@
     "vue-observe-visibility": "^1.0.0",
     "vue-router": "^3.2.0",
     "vuejs-datepicker": "^1.6.2",
-    "webitel-sdk": "^0.1.91"
+    "webitel-sdk": "^0.1.130"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.17.0",

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

@@ -32,7 +32,7 @@ export default {
     color: {
       type: String,
       default: 'accent',
-      options: ['accent', 'secondary', 'success', 'danger', 'transfer', 'task'],
+      options: ['accent', 'secondary', 'success', 'danger', 'transfer', 'job'],
     },
     disabled: {
       type: Boolean,
@@ -71,7 +71,7 @@ export default {
       return '';
     },
     loaderColor() {
-      if (['success', 'transfer', 'danger', 'task'].includes(this.color)) return 'main';
+      if (['success', 'transfer', 'danger', 'job'].includes(this.color)) return 'main';
       return 'contrast';
     },
   },
@@ -159,15 +159,15 @@ export default {
     }
   }
 
-  &.task {
+  &.job {
     color: var(--btn-light-font-color);
-    background-color: var(--btn-task-color);
-    border-color: var(--btn-task-color);
+    background-color: var(--btn-job-color);
+    border-color: var(--btn-job-color);
 
     &:hover,
     &:active {
-      background-color: var(--btn-task--hover-color);
-      border-color: var(--btn-task--hover-color);
+      background-color: var(--btn-job--hover-color);
+      border-color: var(--btn-job--hover-color);
     }
   }
 
@@ -242,14 +242,14 @@ export default {
       }
     }
 
-    &.task {
-      color: var(--btn-task-color);
-      border-color: var(--btn-task-color);
+    &.job {
+      color: var(--btn-job-color);
+      border-color: var(--btn-job-color);
 
       &:hover,
       &:active {
-        color: var(--btn-task--hover-color);
-        border-color: var(--btn-task--hover-color);
+        color: var(--btn-job--hover-color);
+        border-color: var(--btn-job--hover-color);
         background-color: transparent;
       }
     }

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

@@ -29,7 +29,7 @@ export default {
     color: {
       type: String,
       default: 'default',
-      options: ['default', 'contrast', 'active', 'accent', 'disabled', 'success', 'danger', 'transfer', 'task', 'hold', 'secondary-50'],
+      options: ['default', 'contrast', 'active', 'accent', 'disabled', 'success', 'danger', 'transfer', 'job', 'hold', 'secondary-50'],
     },
     iconPrefix: {
       type: String,
@@ -97,8 +97,8 @@ svg {
     fill: var(--icon-color-transfer);
   }
 
-  &-task .wt-icon__icon {
-    fill: var(--task-color);
+  &-job .wt-icon__icon {
+    fill: var(--job-color);
   }
 
   &-hold .wt-icon__icon {

package/src/components/molecules/wt-select/wt-select.vue

@@ -23,7 +23,7 @@
       :allow-empty="allowEmpty"
       :disabled="disabled"
       :internal-search="!searchMethod"
-      :label="optionLabel"
+      :label="trackBy ? optionLabel : null"
       :limit="1"
       :limit-text="(count) => `+${count}`"
       :loading="false"

package/src/components/molecules/wt-textarea/wt-textarea.vue

@@ -3,15 +3,17 @@
     class="wt-textarea"
     :class="{
       'wt-textarea--disabled': disabled,
-      }"
+      'wt-textarea--invalid': invalid,
+    }"
   >
     <wt-label
       :for="name"
       :disabled="disabled"
+      :invalid="invalid"
       v-bind="labelProps"
     >
       <!-- @slot Custom input label -->
-      <slot name="label" v-bind="{ label }">{{ label }}</slot>
+      <slot name="label" v-bind="{ label }">{{ requiredLabel }}</slot>
     </wt-label>
     <div class="wt-textarea__wrapper">
       <textarea
@@ -35,12 +37,20 @@
         ></wt-icon-btn>
       </div>
     </div>
+    <wt-input-info
+      v-if="isValidation"
+      :invalid="invalid"
+    >{{ validationText }}
+    </wt-input-info>
   </div>
 </template>
 
 <script>
+  import validationMixin from '../../../mixins/validationMixin/validationMixin';
+
   export default {
     name: 'wt-textarea',
+    mixins: [validationMixin],
     props: {
       /**
        * Current textarea value (`v-model`)
@@ -95,6 +105,10 @@
           keypress: (event) => this.handleKeypress(event),
         };
       },
+
+      requiredLabel() {
+        return this.required ? `${this.label}*` : this.label;
+      },
     },
 
     methods: {
@@ -139,6 +153,11 @@
     .wt-textarea:focus-within & {
       color: var(--form-label--hover-color);
     }
+
+    .wt-textarea--invalid:hover &,
+    .wt-textarea--invalid:focus-within & {
+      color: var(--label--invalid-color);
+    }
   }
 
   .wt-textarea__textarea {
@@ -169,6 +188,12 @@
       background: var(--form-border--disabled-color);
       border-color: var(--form-border--disabled-color);
     }
+
+    .wt-textarea--invalid &,
+    .wt-textarea--invalid:hover & {
+      border-color: var(--false-color);
+      outline: none; // prevent outline overlapping false color
+    }
   }
 
   /* make icons black */

package/src/css/components/atoms/wt-button/_variables.scss

@@ -42,6 +42,6 @@
   --btn-transfer-color: var(--transfer-color);
   --btn-transfer--hover-color: var(--transfer--hover-color);
 
-  --btn-task-color: var(--task-color);
-  --btn-task--hover-color: var(--task--hover-color);
+  --btn-job-color: var(--job-color);
+  --btn-job--hover-color: var(--job--hover-color);
 }

package/src/css/styleguide/colors/_colors.scss

@@ -9,7 +9,7 @@
 
   --_hold-color-hue: 54;
   --_transfer-color-hue: 227;
-  --_task-color-hue: 227;
+  --_job-color-hue: 209;
 
   // DEFAULT STATES OPACITY
   --_opacity--default: 0.8;
@@ -32,7 +32,7 @@
 
   --_hold-color: var(--_hold-color-hue), 80%, 50%;
   --_transfer-color: var(--_transfer-color-hue), 80%, 50%;
-  --_task-color: var(--_task-color-hue), 80%, 50%;
+  --_job-color: var(--_job-color-hue), 96%, 57%;
 
   // MAIN COLORS
   --accent-color: hsla(var(--_accent-color), 1);
@@ -80,8 +80,8 @@
   --transfer-color: hsla(var(--_transfer-color), var(--_opacity--default));
   --transfer--hover-color: hsla(var(--_transfer-color), var(--_opacity--hover));
 
-  --task-color: hsla(var(--_task-color), var(--_opacity--default));
-  --task--hover-color: hsla(var(--_task-color), var(--_opacity--hover));
+  --job-color: hsla(var(--_job-color), var(--_opacity--default));
+  --job--hover-color: hsla(var(--_job-color), var(--_opacity--hover));
 
   // SUBORDINATE COLORS
   --tag-bg-color: var(--accent-secondary-color);

package/src/locale/en/en.js

@@ -28,6 +28,7 @@ export default {
     name: 'Name',
     expand: 'Expand',
     collapse: 'Collapse',
+    generate: 'Generate',
     lang: {
       en: 'English',
       ru: 'Русский',
@@ -35,6 +36,15 @@ export default {
     },
     from: 'From',
     to: 'To',
+    tts: 'Text-to-Speech',
+    state: 'State',
+  },
+  // yak zhe ya zaebalsya povtoriaty odni i ti sami slova!!!!
+  vocabulary: {
+    language: 'Language',
+    voice: 'Voice',
+    format: 'Format',
+    text: 'Text',
   },
   // date-related texts
   date: {
@@ -55,7 +65,8 @@ export default {
         [QueueType.PROGRESSIVE_DIALER]: 'Progressive dialer',
         [QueueType.PREVIEW_DIALER]: 'Preview dialer',
         [QueueType.CHAT_INBOUND_QUEUE]: 'Chat queue',
-        [QueueType.TASK_QUEUE]: 'Task queue',
+        [QueueType.INBOUND_JOB_QUEUE]: 'Inbound job queue',
+        [QueueType.OUTBOUND_JOB_QUEUE]: 'Outbound job queue',
       },
     },
     agent: {

package/src/locale/ru/ru.js

@@ -28,6 +28,7 @@ export default {
     name: 'Имя',
     expand: 'Развернуть',
     collapse: 'Свернуть',
+    generate: 'Сгенерировать',
     lang: {
       en: 'English',
       ru: 'Русский',
@@ -35,6 +36,14 @@ export default {
     },
     from: 'От',
     to: 'До',
+    tts: 'Text-to-Speech',
+    state: 'Состояние',
+  },
+  vocabulary: {
+    language: 'Язык',
+    voice: 'Голос',
+    format: 'Формат',
+    text: 'Текст',
   },
   // date-related texts
   date: {
@@ -55,7 +64,8 @@ export default {
         [QueueType.PROGRESSIVE_DIALER]: 'Прогрессивный обзвон',
         [QueueType.PREVIEW_DIALER]: 'Превью обзвон',
         [QueueType.CHAT_INBOUND_QUEUE]: 'Очередь чатов',
-        [QueueType.TASK_QUEUE]: 'Очередь задач',
+        [QueueType.INBOUND_JOB_QUEUE]: 'Входящая очередь заданий',
+        [QueueType.OUTBOUND_JOB_QUEUE]: 'Исходящая очередь заданий',
       },
     },
     agent: {

package/src/locale/ua/ua.js

@@ -28,6 +28,7 @@ export default {
     name: 'Ім\'я',
     expand: 'Розгорнути',
     collapse: 'Згорнути',
+    generate: 'Згенерувати',
     lang: {
       en: 'English',
       ru: 'Русский',
@@ -35,6 +36,14 @@ export default {
     },
     from: 'Від',
     to: 'До',
+    tts: 'Text-to-Speech',
+    state: 'Стан',
+  },
+  vocabulary: {
+    language: 'Мова',
+    voice: 'Голос',
+    format: 'Формат',
+    text: 'Текст',
   },
   // date-related texts
   date: {
@@ -55,7 +64,8 @@ export default {
         [QueueType.PROGRESSIVE_DIALER]: 'Прогресивний обзвін',
         [QueueType.PREVIEW_DIALER]: 'Прев\'ю обзвін',
         [QueueType.CHAT_INBOUND_QUEUE]: 'Черга чатів',
-        [QueueType.TASK_QUEUE]: 'Черга задач',
+        [QueueType.INBOUND_JOB_QUEUE]: 'Вхідна черга завдань',
+        [QueueType.OUTBOUND_JOB_QUEUE]: 'Вихідна черга завдань',
       },
     },
     agent: {

package/src/modules/Notifications/store/NotificationsStoreModule.js

@@ -1,4 +1,4 @@
-import { ChatActions, CallActions } from 'webitel-sdk';
+import { ChatActions, CallActions, JobState } from 'webitel-sdk';
 import i18n from '../../../locale/i18n';
 import BaseStoreModule from '../../../store/BaseStoreModules/BaseStoreModule';
 import endChatSound from '../assets/audio/end-chat.wav';
@@ -12,6 +12,7 @@ const NOTIFICATION_VISIBLE_INTERVAL = 2000;
 const getNotificationSound = (action) => {
   switch (action) {
     case ChatActions.UserInvite:
+    case JobState.Distribute:
       return new Audio(newChatSound);
     case ChatActions.Message:
       return new Audio(newMessageSound);
@@ -130,7 +131,7 @@ export default class NotificationsStoreModule extends BaseStoreModule {
 
     STOP_SOUND: (context) => {
       const { currentlyPlaying } = context.state;
-      if (currentlyPlaying) currentlyPlaying.pause();
+      if (currentlyPlaying && currentlyPlaying instanceof Audio) currentlyPlaying.pause();
       localStorage.removeItem('wtIsPlaying');
       context.commit('RESET_CURRENTLY_PLAYING');
     },