@webitel/ui-sdk 24.10.46-6 → 24.10.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "24.10.46-6",
+  "version": "24.10.47",
   "private": false,
   "scripts": {
     "dev": "vite",
@@ -120,7 +120,7 @@
     "vue-multiselect": "^3.0.0-beta.3",
     "vue-observe-visibility": "^2.0.0-alpha.1",
     "vue-router": "^4.1.6",
-    "webitel-sdk": "^24.8.1",
+    "webitel-sdk": "^24.8.2",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {

package/src/api/clients/chats/closedChats.js

@@ -0,0 +1,32 @@
+import { AgentChatsServiceApi } from 'webitel-sdk';
+import {
+  getDefaultInstance,
+  getDefaultOpenAPIConfig,
+} from '../../defaults/index.js';
+import applyTransform, {
+  notify,
+  snakeToCamel,
+} from '../../transformers/index.js';
+
+const instance = getDefaultInstance();
+const configuration = getDefaultOpenAPIConfig();
+
+const chatsService = new AgentChatsServiceApi(configuration, '', instance);
+
+const getList = async (params) => {
+  try {
+    const response = await chatsService.getAgentChats();
+    const { items } = applyTransform(response.data, [
+      snakeToCamel(),
+    ]);
+    return items;
+  } catch (err) {
+    throw applyTransform(err, [notify]);
+  }
+};
+
+const ClosedChatsAPI = {
+  getList,
+};
+
+export default ClosedChatsAPI;

package/src/api/clients/index.js

@@ -4,6 +4,7 @@ import calendars from './calendars/calendars.js';
 import chatGateways from './chatGateways/chatGateways.js';
 import communications from './communications/communications.js';
 import configurations from './configurations/configurations.js';
+import closedChats from './chats/closedChats.js'
 import flows from './flows/flow.js';
 import gateways from './gateways/gateways.js';
 import lists from './lists/blacklists.js';
@@ -19,6 +20,7 @@ export {
   calendars,
   chatGateways,
   communications,
+  closedChats,
   flows,
   gateways,
   lists,

package/src/components/index.js

@@ -12,19 +12,23 @@ import WtCopyAction from './wt-copy-action/wt-copy-action.vue';
 import WtDatepicker from './wt-datepicker/wt-datepicker.vue';
 import WtDivider from './wt-divider/wt-divider.vue';
 import WtDummy from './wt-dummy/wt-dummy.vue';
+import WtEmpty from './wt-empty/wt-empty.vue';
 import WtErrorPage from './wt-error-page/wt-error-page.vue';
 import WtExpansionPanel from './wt-expansion-panel/wt-expansion-panel.vue';
-import WtFiltersPanelWrapper from './wt-filters-panel-wrapper/wt-filters-panel-wrapper.vue';
+import WtFiltersPanelWrapper
+  from './wt-filters-panel-wrapper/wt-filters-panel-wrapper.vue';
 import WtHeadlineNav from './wt-headline-nav/wt-headline-nav.vue';
 import WtHeadline from './wt-headline/wt-headline.vue';
 import WtHint from './wt-hint/wt-hint.vue';
 import WtIconAction from './wt-icon-action/wt-icon-action.vue';
 import WtIconBtn from './wt-icon-btn/wt-icon-btn.vue';
 import WtIcon from './wt-icon/wt-icon.vue';
+import WtImage from './wt-image/wt-image.vue';
 import WtIndicator from './wt-indicator/wt-indicator.vue';
 import WtInputInfo from './wt-input-info/wt-input-info.vue';
 import WtInput from './wt-input/wt-input.vue';
-import WtIntersectionObserver from './wt-intersection-observer/wt-intersection-observer.vue';
+import WtIntersectionObserver
+  from './wt-intersection-observer/wt-intersection-observer.vue';
 import WtItemLink from './wt-item-link/wt-item-link.vue';
 import WtLabel from './wt-label/wt-label.vue';
 import WtLoadBar from './wt-load-bar/wt-load-bar.vue';
@@ -32,7 +36,8 @@ import WtLoader from './wt-loader/wt-loader.vue';
 import WtLogo from './wt-logo/wt-logo.vue';
 import WtNavigationBar from './wt-navigation-bar/wt-navigation-bar.vue';
 import WtNotification from './wt-notification/wt-notification.vue';
-import WtNotificationsBar from './wt-notifications-bar/wt-notifications-bar.vue';
+import WtNotificationsBar
+  from './wt-notifications-bar/wt-notifications-bar.vue';
 import WtPageHeader from './wt-page-header/wt-page-header.vue';
 import WtPageWrapper from './wt-page-wrapper/wt-page-wrapper.vue';
 import WtPagination from './wt-pagination/wt-pagination.vue';
@@ -48,7 +53,8 @@ import WtStatusSelect from './wt-status-select/wt-status-select.vue';
 import WtStepper from './wt-stepper/wt-stepper.vue';
 import WtSwitcher from './wt-switcher/wt-switcher.vue';
 import WtTableActions from './wt-table-actions/wt-table-actions.vue';
-import WtTableColumnSelect from './wt-table-column-select/wt-table-column-select.vue';
+import WtTableColumnSelect
+  from './wt-table-column-select/wt-table-column-select.vue';
 import WtTable from './wt-table/wt-table.vue';
 import WtTabs from './wt-tabs/wt-tabs.vue';
 import WtTagsInput from './wt-tags-input/wt-tags-input.vue';
@@ -58,6 +64,8 @@ import WtTimepicker from './wt-timepicker/wt-timepicker.vue';
 import WtTooltip from './wt-tooltip/wt-tooltip.vue';
 
 const Components = {
+  WtImage,
+  WtEmpty,
   WtLogo,
   WtAvatar,
   WtBadge,

package/src/components/wt-action-bar/__tests__/wt-action-bar.spec.js

@@ -0,0 +1,9 @@
+import { mount } from '@vue/test-utils';
+import WtActionBar from '../wt-action-bar.vue';
+
+describe('WtActionBar', () => {
+  it('renders a component', () => {
+    const wrapper = mount(WtActionBar);
+    expect(wrapper.exists()).toBe(true);
+  });
+});

package/src/components/wt-action-bar/wt-action-bar.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="wt-action-bar">
+    <!--    @slot -->
+    <slot name="search-bar" />
+
+    <!--    @slot
+            @scope="{ `action`: IconAction enum string }"
+      -->
+    <slot
+      v-for="action in shownActions"
+      v-bind="{ action }"
+    >
+      <wt-icon-action
+        :action="action"
+        @click="emit(`click:${action}`)"
+      />
+    </slot>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import IconAction from '../../enums/IconAction/IconAction.enum.js';
+import WtIconAction from '../wt-icon-action/wt-icon-action.vue';
+
+const props = defineProps({
+  // options: [`table`, `card`]
+  mode: {
+    type: String,
+    default: 'table',
+    validator: (v) => ['table', 'card'].includes(v),
+  },
+  /**
+   * see IconAction enum
+   */
+  actions: {
+    type: Array,
+    default: () => [],
+    validator: (v) => v.every((action) => Object.values(IconAction).includes(action)),
+  },
+  size: {
+    type: String,
+    default: 'md',
+    validator: (v) => ['xs', 'sm', 'md', 'lg', 'xl'].includes(v),
+  },
+});
+
+const emit = defineEmits(Object.values(IconAction).map((action) => `click:${action}`));
+
+const tableActionsOrder = [
+  IconAction.ADD,
+  IconAction.COLUMNS,
+  IconAction.COPY,
+  IconAction.DOWNLOAD,
+  IconAction.UPLOAD,
+  IconAction.FILTERS,
+  IconAction.DELETE,
+  IconAction.REFRESH,
+];
+
+// TODO
+const cardActionsOrder = tableActionsOrder;
+
+const shownActions = computed(() => {
+  const actionsOrder = props.mode === 'card' ? cardActionsOrder : tableActionsOrder;
+
+  return actionsOrder.filter((action) => props.actions.includes(action));
+});
+</script>
+
+<style lang="scss" scoped>
+.wt-action-bar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-xs);
+}
+</style>

package/src/components/wt-empty/__tests__/wt-empty.spec.js

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

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

@@ -0,0 +1,140 @@
+<template>
+  <section
+    :class="[`wt-empty--${size}`]"
+    class="wt-empty"
+  >
+    <div
+      v-if="image || slots.media"
+      class="wt-empty__media"
+    >
+      <slot name="media">
+        <wt-image
+          :src="image"
+          alt="empty-state"
+        />
+      </slot>
+    </div>
+
+    <h2
+      v-if="headline || slots.headline"
+      class="wt-empty__headline"
+    >
+      <slot name="headline">
+        {{ headline }}
+      </slot>
+    </h2>
+
+    <h3
+      v-if="title || slots.title"
+      class="wt-empty__title"
+    >
+      <slot name="title">
+        {{ title }}
+      </slot>
+    </h3>
+
+    <slot></slot>
+
+    <p
+      v-if="text || slots.text"
+      class="wt-empty__text"
+    >
+      <slot name="text">
+        {{ text }}
+      </slot>
+    </p>
+
+    <div
+      v-if="actionText || slots.actions"
+      class="wt-empty__actions"
+    >
+      <slot
+        name="actions"
+        v-bind="{ onClick }"
+      >
+        <wt-button
+          :color="actionColor"
+          @click="onClick"
+        >
+          {{ actionText }}
+        </wt-button>
+      </slot>
+    </div>
+  </section>
+</template>
+
+<script setup>
+// based on https://vuetifyjs.com/en/components/empty-states/
+
+import { useSlots } from 'vue';
+import WtImage from '../wt-image/wt-image.vue';
+
+const props = defineProps({
+  image: {
+    type: [Object, null],
+  },
+  size: {
+    type: String,
+    default: 'md',
+    validator: (v) => ['xs', 'sm', 'md', 'lg', 'xl'].includes(v),
+  },
+  headline: {
+    type: [String, null],
+    default: '',
+  },
+  title: {
+    type: [String, null],
+    default: '',
+  },
+  text: {
+    type: [String, null],
+    default: '',
+  },
+  actionText: {
+    type: [String, null],
+    default: '',
+  },
+  actionColor: {
+    type: [String, null],
+    default: 'primary',
+  },
+});
+
+const emit = defineEmits([
+  'click:action',
+]);
+
+const slots = useSlots();
+
+const onClick = (params) => {
+  return emit('click:action', params);
+};
+</script>
+
+<style lang="scss" scoped>
+@import '../../../src/css/main.scss';
+
+.wt-empty {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+  gap: var(--spacing-sm);
+
+  &__media {
+  }
+
+  &__headline {
+  }
+
+  &__title {
+  }
+
+  &__text {
+  }
+
+  &__actions {
+  }
+}
+</style>

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

@@ -8,6 +8,7 @@
 
 <script setup>
 import { computed } from 'vue';
+import IconAction from '../../enums/IconAction/IconAction.enum.js';
 import WtAddIconAction from './_internals/wt-add-icon-action.vue';
 import WtDeleteIconAction from './_internals/wt-delete-icon-action.vue';
 import WtDownloadIconAction from './_internals/wt-download-icon-action.vue';
@@ -16,10 +17,20 @@ import WtHistoryIconAction from './_internals/wt-history-icon-action.vue';
 import WtRefreshIconAction from './_internals/wt-refresh-icon-action.vue';
 
 const props = defineProps({
+  /**
+   * available actions: IconAction.DELETE, IconAction.EDIT, IconAction.ADD, IconAction.HISTORY, IconAction.DOWNLOAD, IconAction.REFRESH
+   */
   action: {
     type: String,
     required: true,
-    options: ['delete', 'edit', 'add', 'history', 'download', 'refresh'],
+    validator: (v) => Object.values([
+      IconAction.DELETE,
+      IconAction.EDIT,
+      IconAction.ADD,
+      IconAction.HISTORY,
+      IconAction.DOWNLOAD,
+      IconAction.REFRESH,
+    ]).includes(v),
   },
   disabled: {
     type: Boolean,
@@ -31,19 +42,20 @@ const emit = defineEmits(['click']);
 
 const actionComponent = computed(() => {
   switch (props.action) {
-    case 'edit':
+    case IconAction.EDIT:
       return WtEditIconAction;
-    case 'delete':
+    case IconAction.DELETE:
       return WtDeleteIconAction;
-    case 'add':
+    case IconAction.ADD:
       return WtAddIconAction;
-    case 'history':
+    case IconAction.HISTORY:
       return WtHistoryIconAction;
-    case 'download':
+    case IconAction.DOWNLOAD:
       return WtDownloadIconAction;
-    case 'refresh':
+    case IconAction.REFRESH:
       return WtRefreshIconAction;
     default:
+      console.error(`Unknown action for wt-icon-action component: ${props.action}`);
       return WtEditIconAction;
   }
 });

package/src/components/wt-image/__tests__/wt-image.spec.js

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

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

@@ -0,0 +1,124 @@
+<template>
+  <div
+    :style="{
+    width,
+    height,
+    minWidth,
+    minHeight,
+    maxWidth,
+    maxHeight,
+    }"
+    class="wt-image"
+  >
+    <!--    @slot Replaces `<img>` tag
+            @scope `{ alt, src }`
+     -->
+    <slot v-bind="{ alt, src }">
+      <img
+        :alt="alt"
+        :src="src"
+        class="wt-image__img"
+      >
+    </slot>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const sizeToUnits = {
+  '3xs': '32px',
+  '2xs': '64px',
+  'xs': '92px',
+  'sm': '128px',
+  'md': '192px',
+  'lg': '256px',
+  'xl': '380px',
+  '2xl': '512px',
+  '3xl': '600px',
+};
+
+const props = defineProps({
+  src: {
+    type: [Object, String],
+    required: true,
+  },
+  // все в одну лінію, бо повалиться дока
+  /**
+   *  `'3xs': '32px', '2xs': '64px', 'xs': '92px', 'sm': '128px', 'md': '192px', 'lg': '256px', 'xl': '380px', '2xl': '512px', '3xl': '600px',`
+   */
+  size: {
+    type: String,
+    // default: 'md',
+    // required: true,
+    validator: (v) => ['3xs', '2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'].includes(v),
+  },
+  alt: {
+    type: String,
+    default: 'wt-image',
+  },
+  width: {
+    type: [String, Number],
+  },
+  height: {
+    type: [String, Number],
+  },
+  minWidth: {
+    type: [String, Number],
+  },
+  minHeight: {
+    type: [String, Number],
+  },
+  maxWidth: {
+    type: [String, Number],
+  },
+  maxHeight: {
+    type: [String, Number],
+  },
+  // aspectRatio: {
+  //   type: [String, Number, null],
+  //   default: 1,
+  // },
+});
+
+const emit = defineEmits([]);
+
+const width = computed(() => {
+  const width = props.size ? sizeToUnits[props.size] : props.width;
+
+  // if converted to Number without an error, it has no units in it
+  if (+width) {
+    return `${width}px`;
+  }
+
+  return width;
+});
+
+const height = computed(() => {
+  // if (props.aspectRatio) return null;
+
+  const height = props.size ? sizeToUnits[props.size] : props.height;
+
+  // if converted to Number without an error, it has no units in it
+  if (+height) {
+    return `${height}px`;
+  }
+
+  return height;
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../../src/css/main.scss';
+
+.wt-image {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &__img {
+    max-width: 100%;
+    max-height: 100%;
+  }
+}
+</style>

package/src/enums/IconAction/IconAction.enum.js

@@ -0,0 +1,15 @@
+const IconAction = Object.freeze({
+  REFRESH: 'refresh',
+  ADD: 'add',
+  DELETE: 'delete',
+  FILTERS: 'filters',
+  UPLOAD: 'upload',
+  DOWNLOAD: 'download',
+  EXPORT: 'export',
+  COPY: 'copy',
+  COLUMNS: 'columns',
+  HISTORY: 'history',
+  EDIT: 'edit',
+});
+
+export default IconAction;

package/src/modules/ObjectPermissions/components/permissions-tab.vue

@@ -121,10 +121,16 @@ import RolePopup from '../_internals/components/permissions-tab-role-popup.vue';
 import { AccessMode } from '../_internals/enums/AccessMode.enum.js';
 
 const props = defineProps({
+  /**
+   * Namespace of the parent card store
+   */
   namespace: {
     type: String,
     required: true,
   },
+  /**
+   * Access to the component actions, related to permissions
+   */
   access: {
     type: Object,
     default: () => ({

package/src/modules/TableComponent/composables/useTableEmpty.js

@@ -0,0 +1,20 @@
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+export const useTableEmpty = (emptyState) => {
+  const { t } = useI18n();
+
+  const media = computed(() => {});
+  const headline = computed(() => {});
+  const title = computed(() => {});
+  const text = computed(() => {});
+  const actionText = computed(() => {});
+
+  return {
+    media,
+    headline,
+    title,
+    text,
+    actionText,
+  };
+};

package/src/store/new/modules/tableStoreModule/tableStoreModule.js

@@ -1,4 +1,5 @@
 import FilterEvent from '../../../../modules/Filters/enums/FilterEvent.enum.js';
+import isEmpty from '../../../../scripts/isEmpty.js';
 import {
   queryToSortAdapter,
   sortToQueryAdapter,
@@ -17,7 +18,7 @@ const getters = {
   PARENT_ID: () => null, // override me
 
   // FIXME: maybe move to filters module?
-  FILTERS: (state, getters) => getters['filters/GET_FILTERS'],
+  FILTERS: (state, getters) => () => getters['filters/GET_FILTERS'](),
 
   REQUIRED_FIELDS: () => ['id'], // override me
 
@@ -30,7 +31,33 @@ const getters = {
     return [...new Set([...getters.REQUIRED_FIELDS, ...fields])];
   },
 
-  // main GET_LIST params collector
+  EMPTY_STATE: (state, getters) => {
+    if (state.isLoading) {
+      return { value: false };
+    }
+
+    if (state.error) {
+      return { value: true, cause: 'error' };
+    }
+
+    if (!state.dataList.length) {
+      const filters = getters.FILTERS();
+      const uncheckedFilters = ['page', 'size', 'sort', 'fields'];
+      const filtersApplied = Object.entries(filters).some(
+        ([filterValue, filterName]) =>
+          !isEmpty(filterValue) && !uncheckedFilters.includes(filterName),
+      );
+
+      if (filtersApplied) {
+        return { value: true, cause: 'filters' };
+      }
+
+      return { value: true, cause: 'empty' };
+    }
+
+    return { value: false };
+  },
+
   GET_LIST_PARAMS: (state, getters) => (overrides) => {
     const filters = getters.FILTERS();
     const fields = getters.FIELDS;
@@ -148,7 +175,7 @@ const actions = {
     } finally {
       setTimeout(() => {
         context.commit('SET', { path: 'isLoading', value: false });
-      }, 100);  // why 1s? https://ux.stackexchange.com/a/104782
+      }, 100); // why 1s? https://ux.stackexchange.com/a/104782
     }
   },