@webitel/ui-sdk 25.4.86 → 25.5.1

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

@@ -0,0 +1,278 @@
+<template>
+  <p-auto-complete
+    class="w-full"
+    :model-value="selectValue"
+    :suggestions="suggestions"
+    dropdown
+    :multiple="multiple"
+    option-label="name"
+    complete-on-focus
+    v-bind="$attrs"
+    v-on="listeners"
+    @complete="search"
+  />
+</template>
+
+<script setup>
+import { computed, reactive, ref } from 'vue';
+
+import isEmpty from '../../scripts/isEmpty.js';
+
+const props = defineProps({
+  value: {
+    // default: (props) => {
+    //   return props.modelValue;
+    // },
+  },
+
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+
+  options: {
+    type: Array,
+    default: () => [],
+  },
+
+  clearable: {
+    type: Boolean,
+    default: true,
+  },
+  searchMethod: {
+    type: Function,
+  },
+  /*
+   for taggableMixin functionality
+   for more info, see WTEL-3181
+   */
+  allowCustomValues: {
+    type: Boolean,
+    default: false,
+    description: 'See wt-tags-input "taggable" prop.',
+  },
+  // for taggableMixin functionality
+  handleCustomValuesAdditionManually: {
+    type: Boolean,
+    default: false,
+    description: 'See wt-tags-input "manualTagging" prop.',
+  },
+});
+
+const emits = defineEmits([
+  'reset',
+  'search-change',
+  'input', // vue 2
+  'update:modelValue', // vue 3
+  'closed',
+  'custom-value', // fires when allowCustomValues and new customValue is added
+]);
+
+const isOpened = ref(false);
+const isLoading = ref(false);
+const searchHasNext = ref(true);
+const suggestions = ref([]);
+const searchParams = reactive({
+  search: '',
+  page: 1,
+});
+
+const taggable = computed(() => {
+  return props.allowCustomValues;
+});
+
+const manualTagging = computed(() => {
+  return props.handleCustomValuesAdditionManually;
+});
+
+const isApiMode = computed(() => {
+  return !!props.searchMethod;
+});
+
+const optionsWithCustomValues = computed(() => {
+  // https://webitel.atlassian.net/browse/WTEL-3181
+  console.log('props.allowCustomValues', props.allowCustomValues);
+
+  if (!props.allowCustomValues) return selectOptions.value;
+
+  /**
+   custom values could be restored after refresh, so that they could be not included in options prop,
+   so that we should add them to options manually (but filter duplicates, which are already in options)
+
+   i assume it's bad decision and it's better to include custom values to options prop,
+   but current filters logic restores value at filter component, but options value are pre-defined at store state
+   */
+
+  const customValuesToOptions = Array.isArray(props.value)
+    ? props.value
+    : isEmpty(props.value)
+      ? []
+      : [props.value]; //do not add empty values
+  const optionsWithoutValues = selectOptions.value.filter((opt) => {
+    const optKey = props.trackBy ? opt[props.trackBy] : opt;
+    return !customValuesToOptions.some((customValue) => {
+      const customValueKey = props.trackBy
+        ? customValue[props.trackBy]
+        : customValue;
+      return customValueKey === optKey;
+    });
+  });
+  return [...customValuesToOptions, ...optionsWithoutValues];
+});
+
+const fetchOptions = async ({ search, page }) => {
+  if (!isApiMode.value) return [];
+  const { items, next } = await this.searchMethod({ search, page });
+  searchHasNext.value = next;
+  return items;
+};
+
+const search = async (event) => {
+  console.log('event.query', event.query);
+  console.log('event.query', event);
+
+  if (!isApiMode.value) {
+    return suggestions.value = [...props.options];
+  }
+
+  const fetchedOptions = await fetchOptions({
+    search: event.query,
+    page: 1,
+  });
+
+  suggestions.value = [...suggestions.value, ...fetchedOptions];
+};
+</script>
+
+<style lang="scss">
+@use './variables.scss';
+</style>
+
+<style lang="scss" scoped>
+@use './multiselect.scss' as *;
+
+.wt-select {
+  width: 100%;
+  min-width: 0;
+}
+
+/*
+ * @author: Oleksandr Palonnyi
+ *
+ * [WTEL-6814](https://webitel.atlassian.net/browse/WTEL-6814)
+ *
+ * added pointer-events: auto; to have access to multiselect__limit when select is disabled.
+*/
+.multiselect__limit {
+  pointer-events: auto;
+}
+
+:deep(.multiselect) {
+  .multiselect__custom-tag,
+  .multiselect__single-label {
+    // text overflow 3 dots
+    @extend %typo-body-1;
+    display: block;
+    overflow: hidden;
+    max-width: 100%;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}
+
+:deep(.multiselect--active) {
+  .multiselect__tags-wrap,
+  .multiselect__strong {
+    display: none;
+  }
+}
+
+// right padding setup
+
+// default case
+.wt-select {
+  // all is fine
+  :deep(.multiselect) {
+    .multiselect__tags {
+      padding: var(--input-padding) calc(
+        var(--input-padding) + var(--icon-md-size) +
+        var(--select-caret-right-pos)
+      ) var(--input-padding) var(--input-padding);
+    }
+  }
+}
+
+// only chip
+.wt-select.wt-select--multiple:not(.wt-select--clearable) {
+  :deep(.multiselect) {
+    $multiselect-limit-right-pos: calc(
+      var(--select-caret-right-pos)// caret offet from border
+      + var(--icon-md-size)// caret size
+      + var(--input-padding) // caret-to-chip offset
+    );
+
+    .multiselect__tags {
+      padding-right: calc(
+        $multiselect-limit-right-pos + 50px// chip
+        + var(--input-padding) // chip-to-content offset
+      );
+    }
+
+    .multiselect__limit {
+      right: $multiselect-limit-right-pos;
+    }
+  }
+}
+
+// only clearable
+.wt-select.wt-select--clearable:not(.wt-select--multiple) {
+  :deep(.multiselect) {
+    $multiselect-clear-right-pos: calc(
+      var(--select-caret-right-pos)// caret offset from border
+      + var(--icon-md-size)// caret size
+      + var(--input-padding) // caret-to-chip offset
+    );
+
+    .multiselect__tags {
+      padding-right: calc(
+        $multiselect-clear-right-pos + var(--icon-md-size)// clear
+        + var(--input-padding) // clear-to-content offset
+      );
+    }
+
+    .multiselect__clear {
+      right: $multiselect-clear-right-pos;
+    }
+  }
+}
+
+// clearable and chip
+.wt-select.wt-select--multiple.wt-select--clearable {
+  :deep(.multiselect) {
+    $multiselect-clear-right-pos: calc(
+      var(--select-caret-right-pos)// caret offet from border
+      + var(--icon-md-size)// caret size
+      + var(--input-padding) // caret-to-chip offset
+    );
+
+    $multiselect-limit-right-pos: calc(
+      $multiselect-clear-right-pos + /* clear offet from border */var(--icon-md-size)/* clear size */ + var(--input-padding) /* cleat-to-chip offset */
+    );
+
+    .multiselect__tags {
+      padding-right: calc(
+        $multiselect-limit-right-pos + 50px// chip
+        + var(--input-padding) // chip-to-content offset
+      );
+    }
+
+    .multiselect__clear {
+      right: $multiselect-clear-right-pos;
+    }
+
+    .multiselect__limit {
+      right: $multiselect-limit-right-pos;
+    }
+  }
+}
+</style>

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

@@ -149,12 +149,12 @@
         v-if="showIntersectionObserver"
         #afterList
       >
-<!--        @author @Lera24-->
-<!--        [WTEL-6818](https://webitel.atlassian.net/browse/WTEL-6818)-->
-<!--        When changing the page scale, vue-observe-visibility works unstable and does not see the changes. -->
-<!--        The minimum height ensures additional data loading if the search method is used-->
+        <!--        @author @Lera24-->
+        <!--        [WTEL-6818](https://webitel.atlassian.net/browse/WTEL-6818)-->
+        <!--        When changing the page scale, vue-observe-visibility works unstable and does not see the changes. -->
+        <!--        The minimum height ensures additional data loading if the search method is used-->
 
-        <div v-observe-visibility="handleAfterListIntersect" style="height: 1px"/>
+        <div v-observe-visibility="handleAfterListIntersect" style="height: 1px" />
       </template>
     </vue-multiselect>
     <wt-input-info
@@ -224,6 +224,7 @@ export default {
   ],
   data: () => ({
     isOpened: false,
+    items: [],
   }),
   computed: {
     // for taggableMixin
@@ -269,6 +270,10 @@ export default {
       // https://webitel.atlassian.net/browse/WTEL-3181
       this.tag(value);
     },
+    async search(event) {
+      console.log('event.query', event.query);
+      this.items = [...this.optionsWithCustomValues];
+    },
     // for taggableMixin functionality
     async handleCustomValueArrowInput(toggle) {
       // https://webitel.atlassian.net/browse/WTEL-3181

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

@@ -28,7 +28,8 @@
         :disabled="disabled"
         :placeholder="placeholder || label"
         :value="value"
-        rows="1"
+        :rows="rows"
+        :readonly="readonly"
         class="wt-textarea__textarea"
         v-on="listeners"
         @input="autoGrow"
@@ -84,6 +85,14 @@ export default {
     placeholder: {
       type: String,
     },
+    /**
+     * Native textarea disabled attribute
+     */
+    readonly: {
+      type: Boolean,
+      default: false,
+      description: 'Native textarea readonly attribute',
+    },
     /**
      * Native textarea disabled attribute
      */
@@ -99,6 +108,14 @@ export default {
       type: String,
       default: '',
     },
+    /**
+     * Number of rows in textarea
+     */
+    rows: {
+      type: Number,
+      default: 1,
+      description: 'Number of rows for textarea',
+    },
     labelProps: {
       type: Object,
       description: 'Object with props, passed down to wt-label as props',

package/src/components/wt-tree-table-row/wt-tree-table-row.vue

@@ -18,13 +18,6 @@
             :key="treeLine"
             class="wt-tree-table-row__tree-space"
           ></div>
-          <!-- This two empty icons need to create space for nested elements -->
-          <wt-icon-btn
-            v-if="!data[childrenProp] && nestingLevel"
-            :class="{ hidden: !data[childrenProp] }"
-            :icon="collapsed ? 'tree-expand' : 'tree-collapse'"
-            @click="collapsed = !collapsed"
-          />
           <wt-checkbox
             v-if="selectable"
             :selected="isSelectedRow"

package/src/css/main.scss

@@ -17,6 +17,7 @@
 
 html {
   height: 100%;
+  font-size: 12px;
 }
 
 body {

package/src/css/tailwind.css

@@ -0,0 +1 @@
+@import "tailwindcss";

package/src/enums/ButtonColor/ButtonColor.js

@@ -0,0 +1,9 @@
+export const ButtonColor = {
+  PRIMARY: 'primary',
+  SECONDARY: 'secondary',
+  SUCCESS: 'success',
+  ERROR: 'error',
+  TRANSFER: 'transfer',
+  JOB: 'job',
+  INFO: 'info',
+};

package/src/enums/ButtonColor/ButtonColor.ts

@@ -0,0 +1,11 @@
+export const ButtonColor = {
+  PRIMARY: 'primary',
+  SECONDARY: 'secondary',
+  SUCCESS: 'success',
+  ERROR: 'error',
+  TRANSFER: 'transfer',
+  JOB: 'job',
+  INFO: 'info',
+} as const;
+
+export type ButtonColor = (typeof ButtonColor)[keyof typeof ButtonColor];

package/src/enums/ChatGatewayProvider/ChatGatewayProvider.enum.js

@@ -6,6 +6,7 @@ const ChatGatewayProvider = Object.freeze({
   WEBCHAT: 'webchat',
   INFOBIP: 'infobip_whatsapp',
   CUSTOM: 'custom',
+  PORTAL: 'portal',
 });
 
 export default ChatGatewayProvider;

package/src/enums/WebitelApplications/AdminSections.ts

@@ -41,6 +41,7 @@ export const AdminSections = {
   Triggers: 'triggers',
   Users: 'users',
   WorkingConditions: 'working-conditions',
+  QuickReplies: 'quick-replies',
 } as const;
 
 export type AdminSections = (typeof AdminSections)[keyof typeof AdminSections];

package/src/enums/WtObject/WtObject.ts

@@ -58,6 +58,7 @@ export const WtObject = {
   CustomLookup: 'customLookup',
   AuditForm: 'auditForm',
   AuditRating: 'auditRating',
+  QuickReply: 'quickReply',
 } as const;
 
 export type WtObject = (typeof WtObject)[keyof typeof WtObject];

package/src/enums/index.js

@@ -1,6 +1,7 @@
 import AbstractUserStatus from './AbstractUserStatus/AbstractUserStatus.enum.js';
 import AgentStatus from './AgentStatus/AgentStatus.enum.js';
 import ChatGatewayProvider from './ChatGatewayProvider/ChatGatewayProvider.enum.js';
+import { ButtonColor } from './ButtonColor/ButtonColor';
 import { ComponentSize } from './ComponentSize/ComponentSize';
 import { CrudAction } from './CrudAction/CrudAction';
 import IconAction from './IconAction/IconAction.enum.js';
@@ -21,6 +22,7 @@ export {
   AdminSections,
   AgentStatus,
   AuditorSections,
+  ButtonColor,
   ChatGatewayProvider,
   ComponentSize,
   CrmSections,

package/src/enums/index.ts

@@ -1,5 +1,6 @@
 import AbstractUserStatus from './AbstractUserStatus/AbstractUserStatus.enum.js';
 import AgentStatus from './AgentStatus/AgentStatus.enum.js';
+import { ButtonColor } from './ButtonColor/ButtonColor';
 import ChatGatewayProvider from './ChatGatewayProvider/ChatGatewayProvider.enum.js';
 import { ComponentSize } from './ComponentSize/ComponentSize';
 import { CrudAction } from './CrudAction/CrudAction';
@@ -21,6 +22,7 @@ export {
   AdminSections,
   AgentStatus,
   AuditorSections,
+  ButtonColor,
   ChatGatewayProvider,
   ComponentSize,
   CrmSections,

package/src/install.ts

@@ -2,11 +2,13 @@ import 'vue-multiselect/dist/vue-multiselect.css';
 import '@webitel/styleguide/fonts';
 import 'plyr/src/sass/plyr.scss';
 import './css/main.scss';
+import './css/tailwind.css';
 import './assets/icons/sprite/index.js';
 
 import generateInstance from './api/axios/generateInstance.js';
 import Components from './components/index.js'; // init all components
 import Directives from './directives/index.js'; // init all directives
+import initPrimevue from './plugins/primevue/primevue.plugin.js';
 
 export default {
   install(app, { eventBus, router, globals = {} }) {
@@ -21,6 +23,7 @@ export default {
     });
     app.provide('$eventBus', eventBus);
     if (router) app.use(router);
+    initPrimevue(app);
   },
   generateInstance,
 };

package/src/locale/en/en.js

@@ -129,6 +129,7 @@ export default {
     emptyResultSearch: 'Your search yielded no results',
     contact: 'Contact | Contacts',
     column: 'Column | Columns',
+    notification: 'Notification | Notifications',
   },
   // date-related texts
   date: {
@@ -335,6 +336,7 @@ export default {
         [AdminSections.Changelogs]: 'Change log',
         [AdminSections.Configuration]: 'Configuration',
         [AdminSections.GlobalVariables]: 'Global variables',
+        [AdminSections.QuickReplies]: 'Quick replies',
       },
     },
   },

package/src/locale/ru/ru.js

@@ -128,6 +128,7 @@ export default {
     messaging: 'Сообщения',
     emptyResultSearch: 'Поиск не дал результатов',
     contact: 'Контакт | Контакты',
+    notification: 'Уведомление | Уведомления',
   },
   // date-related texts
   date: {
@@ -333,6 +334,7 @@ export default {
         [AdminSections.Changelogs]: 'Журнал изменений',
         [AdminSections.Configuration]: 'Конфигурация',
         [AdminSections.GlobalVariables]: 'Глобальные переменные',
+        [AdminSections.QuickReplies]: 'Быстрые ответы',
       },
     },
   },

package/src/locale/ua/ua.js

@@ -64,7 +64,6 @@ export default {
     state: 'Стан',
     refresh: 'Оновити',
     retry: 'Повторити',
-    reset: 'Скинути',
     downloadAll: 'Завантажити все',
     warning: 'Попередження',
     doNotSave: 'Не зберігати',
@@ -119,6 +118,7 @@ export default {
     values: 'Значення | Значення',
     keys: 'Ключ | Ключі',
     duration: 'Тривалість',
+    reset: 'Скинути',
     errors: 'Помилка | Помилки',
     labels: 'Мітка | Мітки',
     permissions: 'Дозвіл | Дозволи',
@@ -128,6 +128,7 @@ export default {
     messaging: 'Повідомлення',
     emptyResultSearch: 'Пошук не дав результатів',
     contact: 'Контакт | Контакти',
+    notification: 'Сповіщення',
   },
   // date-related texts
   date: {
@@ -333,6 +334,7 @@ export default {
         [AdminSections.Changelogs]: 'Журнал змін',
         [AdminSections.Configuration]: 'Конфігурація',
         [AdminSections.GlobalVariables]: 'Глобальні змінні',
+        [AdminSections.QuickReplies]: 'Швидкі відповіді',
       },
     },
   },

package/src/modules/Userinfo/classes/ApplicationsAccess.js

@@ -121,6 +121,10 @@ const applicationsAccess = (value = true) => ({
       _enabled: value,
       _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSectionsNew.WorkingConditions}`,
     },
+    [AdminSections.QUICK_REPLIES]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSectionsNew.QuickReplies}`,
+    },
     [AdminSections.AGENTS]: {
       _enabled: value,
       _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSectionsNew.Agents}`,

package/src/modules/Userinfo/v2/enums/GlobalActions/GlobalActions.ts

@@ -21,15 +21,18 @@ export type CrudGlobalAction =
  * like downloading files or exporting data
  * */
 export const SpecialGlobalAction = {
-  PlaybackRecordFile: 'playbackRecordFile',
-  ManageUserLicense: 'manageUserLicense',
-  SchemeVariables: 'schemeVariables',
-  SystemSetting: 'systemSetting',
-  ManageUserRoles: 'manageUserRoles',
-  ExportDataGrid: 'exportDataGrid',
-  ViewCdrPhoneNumbers: 'viewCdrPhoneNumbers',
-  ChangeUserPassword: 'changeUserPassword',
-  EavesdropCall: 'eavesdropCall',
+  PlaybackRecordFile: 'playback_record_file',
+  ResetActiveAttempts: 'reset_active_attempts',
+  TimeLimitedRecordFile: 'time_limited_record_file',
+  ManageUserLicense: 'manage_user_license',
+  SchemeVariables: 'scheme_variables',
+  SystemSetting: 'system_setting',
+  ManageUserRoles: 'manage_user_roles',
+  ExportDataGrid: 'export_data_grid',
+  LimitWorkspaceContacts: 'limit_workspace_contacts',
+  ViewCdrPhoneNumbers: 'view_cdr_phone_numbers',
+  ChangeUserPassword: 'change_user_password',
+  EavesdropCall: 'eavesdrop_call',
 } as const;
 
 export type SpecialGlobalAction =

package/src/modules/Userinfo/v2/mappings/mappings.ts

@@ -131,6 +131,7 @@ export const mapWtObjectToUiSection: Record<
     [WtObject.PauseTemplate]: AdminSections.PauseTemplates,
     [WtObject.WorkingCondition]: AdminSections.WorkingConditions,
     [WtObject.Member]: AdminSections.Members,
+    [WtObject.QuickReply]: AdminSections.QuickReplies,
   },
 
   // Auditor sections

package/src/modules/Userinfo/v2/stores/accessStore.ts

@@ -106,6 +106,11 @@ export const createUserAccessStore = ({
       return true;
     };
 
+
+    const hasSpecialGlobalActionAccess = (id: SpecialGlobalAction): boolean => {
+      return !!globalAccess.get(id);
+    };
+
     const initialize = ({
       permissions: rawGlobalAccess,
       scope: rawScopeAccess,
@@ -126,6 +131,7 @@ export const createUserAccessStore = ({
       hasDeleteAccess,
 
       routeAccessGuard,
+      hasSpecialGlobalActionAccess,
     };
   });
 };

package/src/modules/Userinfo/v2/stores/userinfoStore.ts

@@ -19,6 +19,7 @@ export const createUserinfoStore = () => {
       hasDeleteAccess,
       initialize: initializeAccessStore,
       routeAccessGuard,
+      hasSpecialGlobalActionAccess,
     } = accessStore;
 
     const userId = ref();
@@ -46,6 +47,7 @@ export const createUserinfoStore = () => {
       hasDeleteAccess,
 
       routeAccessGuard,
+      hasSpecialGlobalActionAccess,
     };
   });
 

package/src/modules/Userinfo/v2/types/UserAccess.d.ts

@@ -113,6 +113,8 @@ export interface UserAccessStore {
 
   routeAccessGuard: NavigationGuard;
 
+  hasSpecialGlobalActionAccess: (id: SpecialGlobalAction) => boolean;
+
   // hasApplicationVisibility: (app: WtApplication) => boolean;
   // hasSectionVisibility: (section: UiSection) => boolean;
 }

package/src/plugins/primevue/primevue.plugin.js

@@ -0,0 +1,34 @@
+import PAutoComplete from 'primevue/autocomplete';
+import PButton from 'primevue/button';
+import PrimeVue from 'primevue/config';
+import PInputText from 'primevue/inputtext';
+import PPopover from 'primevue/popover';
+import Tooltip from 'primevue/tooltip';
+
+import WebitelTheme from './theme/webitel-theme.js';
+
+const changeComponentCompatMode = (component) => {
+  component.compatConfig = { MODE: 3 };
+
+  return component;
+};
+
+const initPrimevue = (app) => {
+  app.use(PrimeVue, {
+    theme: {
+      preset: WebitelTheme,
+      options: {
+        darkModeSelector: 'theme--dark',
+      },
+    },
+  });
+
+  app.component('PButton', changeComponentCompatMode(PButton));
+  app.component('PAutoComplete', changeComponentCompatMode(PAutoComplete));
+  app.component('PInputText', changeComponentCompatMode(PInputText));
+  app.component('PPopover', changeComponentCompatMode(PPopover));
+
+  app.directive('tooltip', Tooltip);
+};
+
+export default initPrimevue;