@webitel/ui-sdk 1.0.21 → 1.0.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "1.0.21",
+  "version": "1.0.24",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",

package/src/components/atoms/wt-avatar/__tests__/wt-avatar.spec.js

@@ -0,0 +1,9 @@
+import { shallowMount } from '@vue/test-utils';
+import WtAvatar from '../wt-avatar.vue';
+
+describe('WtAvatar', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtAvatar);
+    expect(wrapper.isVisible()).toBe(true);
+  });
+});

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

@@ -0,0 +1,64 @@
+<template>
+  <div
+    class="wt-avatar"
+    :class="[`wt-avatar--size-${size}`]"
+  >
+    <wt-badge
+      v-if="badge"
+      :color-variable="badgeColorVar"
+    ></wt-badge>
+    <img
+      class="wt-avatar__img"
+      src="../../../assets/components/atoms/wt-avatar/default-avatar.svg"
+      alt="avatar"
+    >
+  </div>
+</template>
+
+<script>
+import AbstractUserStatus from '../../../../../cc-workspaces/src/components/agent-workspace/workspace-section/chat/chat-transfer-container/webitel-ui/enums/AbstractUserStatus.enum';
+
+export default {
+  name: 'wt-avatar',
+  props: {
+    size: {
+      type: String,
+      default: 'md',
+      options: ['md'],
+    },
+    badge: {
+      type: Boolean,
+      default: false,
+    },
+    status: {
+      type: String,
+      options: AbstractUserStatus,
+      default: AbstractUserStatus.OFFLINE,
+    },
+  },
+  computed: {
+    badgeColorVar() {
+      switch (this.status) {
+        case AbstractUserStatus.ACTIVE: return 'online-color';
+        case AbstractUserStatus.DND: return 'dnd-color';
+        case AbstractUserStatus.BUSY: return 'busy-color';
+        case AbstractUserStatus.OFFLINE: return 'offline-color';
+        default: return 'offline-color';
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+  .wt-avatar {
+    position: relative;
+    width: var(--avatar-size);
+    height: var(--avatar-size);
+
+    &__img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+</style>

package/src/components/atoms/wt-badge/__tests__/wt-badge.spec.js

@@ -0,0 +1,9 @@
+import { shallowMount } from '@vue/test-utils';
+import WtBadge from '../wt-badge.vue';
+
+describe('WtBadge', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtBadge);
+    expect(wrapper.isVisible()).toBe(true);
+  });
+});

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

@@ -0,0 +1,39 @@
+<template>
+  <aside
+    class="wt-badge"
+    :class="{ 'wt-badge--outside': outside }"
+    :style="{ background: `var(--${colorVariable})` }"
+  ></aside>
+</template>
+
+<script>
+export default {
+  name: 'wt-badge',
+  props: {
+    colorVariable: {
+      type: String,
+      default: 'false-color',
+      description: 'see all available colors in webitel-ui docs',
+    },
+    outside: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+  .wt-badge {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: var(--wt-badge-size);
+    height: var(--wt-badge-size);
+    border-radius: 50%;
+
+    &--outside {
+      transform: translate(-100%, -100%);
+    }
+  }
+</style>

package/src/components/index.js

@@ -1,4 +1,6 @@
 import Vue from 'vue';
+import WtAvatar from './atoms/wt-avatar/wt-avatar.vue';
+import WtBadge from './atoms/wt-badge/wt-badge.vue';
 import WtIcon from './atoms/wt-icon/wt-icon.vue';
 import WtIndicator from './atoms/wt-indicator/wt-indicator.vue';
 import WtInputInfo from './atoms/wt-input-info/wt-input-info.vue';
@@ -48,6 +50,8 @@ import WtTableActions from './organisms/wt-table-actions/wt-table-actions.vue';
 import WtTableColumnSelect from './organisms/wt-table-column-select/wt-table-column-select.vue';
 
 const Components = {
+  WtAvatar,
+  WtBadge,
   WtIcon,
   WtIndicator,
   WtInputInfo,

package/src/css/components/_components.scss

@@ -1,3 +1,5 @@
+@import 'atoms/wt-avatar/variables';
+@import 'atoms/wt-badge/variables';
 @import 'atoms/wt-chip/variables';
 @import "atoms/wt-button/variables";
 @import "atoms/wt-icon/variables";

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

@@ -0,0 +1,9 @@
+:root {
+  --avatar-size--md: var(--spacing-md);
+  --avatar-size: var(--avatar-size--md);
+
+  --online-color: var(--true-color);
+  --dnd-color: var(--accent-color);
+  --busy-color: var(--false-color);
+  --offline-color: var(--secondary-color);
+}

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

@@ -0,0 +1,3 @@
+:root {
+  --wt-badge-size: var(--spacing-xs);
+}

package/src/enums/WebitelApplications/AdminSections.enum.js

@@ -10,6 +10,7 @@ const AdminSections = Object.freeze({
   FLOW: 'flow',                          // scope: flow
   DIALPLAN: 'dialplan',                  // scope: acr_routing
   GATEWAYS: 'gateways',                  // scope: gateways
+  CHATPLAN: 'chatplan',                  // scope: acr_routing
   CHAT_GATEWAYS: 'chat-gateways',        // scope: chats
 
   // LOOKUPS

package/src/locale/en/en.js

@@ -112,6 +112,7 @@ export default {
         [AdminSections.FLOW]: 'Flow',
         [AdminSections.DIALPLAN]: 'Dialplan',
         [AdminSections.GATEWAYS]: 'Gateways',
+        [AdminSections.CHATPLAN]: 'Chatplan',
         [AdminSections.CHAT_GATEWAYS]: 'Chat gateways',
         [AdminSections.SKILLS]: 'Agent skills',
         [AdminSections.BUCKETS]: 'Buckets',

package/src/locale/ru/ru.js

@@ -112,6 +112,7 @@ export default {
         [AdminSections.FLOW]: 'Схемы звонка',
         [AdminSections.DIALPLAN]: 'Исходящая маршрутизация',
         [AdminSections.GATEWAYS]: 'Шлюзы',
+        [AdminSections.CHATPLAN]: 'Правила маршрутизации текстовых сообщений',
         [AdminSections.CHAT_GATEWAYS]: 'Текстовые шлюзы',
         [AdminSections.SKILLS]: 'Навыки оператора',
         [AdminSections.BUCKETS]: 'Корзины',

package/src/locale/ua/ua.js

@@ -112,6 +112,7 @@ export default {
         [AdminSections.FLOW]: 'Схеми дзвінка',
         [AdminSections.DIALPLAN]: 'Правила вихідного набору',
         [AdminSections.GATEWAYS]: 'Шлюзи',
+        [AdminSections.CHATPLAN]: 'Правила маршрутизації текстових повідомлень',
         [AdminSections.CHAT_GATEWAYS]: 'Текстові шлюзи',
         [AdminSections.SKILLS]: 'Навички оператора',
         [AdminSections.BUCKETS]: 'Кошики',

package/src/modules/QueryFilters/store/QueryFiltersStoreModule.js

@@ -22,9 +22,7 @@ export default class QueryFiltersStoreModule extends BaseStoreModule {
       let newValue = value;
       if (newValue) {
         if (multiple && !Array.isArray(newValue)) newValue = [newValue];
-      } else {
-        newValue = defaultValue;
-      }
+      } else if (newValue === null || newValue === undefined) newValue = defaultValue;
       context.commit('SET_FILTER', { filter, value: newValue });
     },
     RESET_FILTERS: (context) => {

package/src/modules/QueryFilters/store/__tests__/QueryFiltersStoreModule.spec.js

@@ -67,6 +67,12 @@ describe('QueryFiltersStoreModule actions', () => {
     expect(context.commit)
       .toHaveBeenCalledWith('SET_FILTER', { filter: filter.filter, value: [] });
   });
+  it('SET_FILTER: sets "false" value filter', () => {
+    const filter = { filter: valueFilter, value: false };
+    module.actions.SET_FILTER(context, filter);
+    expect(context.commit)
+      .toHaveBeenCalledWith('SET_FILTER', { filter: filter.filter, value: false });
+  });
   it('calls RESET_FILTERS mutation on RESET_FILTERS action call', () => {
     module.actions.RESET_FILTERS(context);
     expect(context.commit).toHaveBeenCalledWith('RESET_FILTERS');

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

@@ -60,6 +60,10 @@ const applicationsAccess = (value = true) => ({
       _enabled: value,
       _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.GATEWAYS}`,
     },
+    [AdminSections.CHATPLAN]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.CHATPLAN}`,
+    },
     [AdminSections.CHAT_GATEWAYS]: {
       _enabled: value,
       _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.CHAT_GATEWAYS}`,