@webitel/ui-sdk 24.10.81 → 24.10.82

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "24.10.81",
+  "version": "24.10.82",
   "private": false,
   "scripts": {
     "dev": "vite",

package/src/api/clients//321/201ontacts/contactChatMessagesHistory.js

@@ -29,7 +29,7 @@ const getChat = async ({ contactId, chatId }) => {
     const response = await contactChatService.getContactChatHistory(contactId, chatId);
     const { messages, peers } = applyTransform(response.data, [snakeToCamel()]);
     return {
-      items: applyTransform({ messages, peers }, [mergeChatMessagesData]).reverse(),
+      items: applyTransform({ messages, peers }, [mergeChatMessagesData]),
       peers,
     };
   } catch (err) {
@@ -70,7 +70,7 @@ const getAllMessages = async (params) => {
       merge(getDefaultGetListResponse()),
     ]);
     return {
-      items: applyTransform({ messages, peers, chats }, [mergeMessagesData]).reverse(),
+      items: applyTransform({ messages, peers, chats }, [mergeMessagesData]),
       next,
     };
   } catch (err) {

package/src/components/index.js

@@ -42,6 +42,7 @@ 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 WtDualPanel from './wt-dual-panel/wt-dual-panel.vue';
 import WtPagination from './wt-pagination/wt-pagination.vue';
 import WtPlayer from './wt-player/wt-player.vue';
 import WtPopup from './wt-popup/wt-popup.vue';
@@ -115,6 +116,7 @@ const Components = {
   WtErrorPage,
   WtNotificationsBar,
   WtPageWrapper,
+  WtDualPanel,
   WtPagination,
   WtPlayer,
   WtStatusSelect,

package/src/components/wt-dual-panel/__tests__/WtDualPanel.js

@@ -0,0 +1,49 @@
+import { shallowMount } from '@vue/test-utils';
+import WtDualPanel from '../wt-dual-panel.vue';
+
+describe('WtDualPanel', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtDualPanel);
+    expect(wrapper.classes('wt-dual-panel')).toBe(true);
+  });
+
+  it('renders dual panel header via header slot', () => {
+    const content = 'Dual Panel header';
+    const wrapper = shallowMount(WtDualPanel, {
+      slots: { header: content },
+    });
+    expect(wrapper.find('.wt-dual-panel__header').text()).toBe(content);
+  });
+
+  it('renders dual panel actions panel via actions panel slot when actionsPanel prop is true', () => {
+    const content = 'Dual Panel actions panel content';
+    const wrapper = shallowMount(WtDualPanel, {
+      props: { actionsPanel: true },
+      slots: { 'actions-panel': content },
+    });
+    expect(wrapper.find('.wt-dual-panel__actions-panel').text()).toBe(content);
+  });
+
+  it('does not render actions panel when actionsPanel prop is false', () => {
+    const wrapper = shallowMount(WtDualPanel, {
+      props: { actionsPanel: false },
+    });
+    expect(wrapper.find('.wt-dual-panel__actions-panel').exists()).toBe(false);
+  });
+
+  it('renders dual panel side panel via side panel slot', () => {
+    const content = 'Dual Panel side panel';
+    const wrapper = shallowMount(WtDualPanel, {
+      slots: { 'side': content },
+    });
+    expect(wrapper.find('.wt-dual-panel__side-panel').text()).toBe(content);
+  });
+
+  it('renders dual panel main panel via main panel slot', () => {
+    const content = 'Dual Panel main panel';
+    const wrapper = shallowMount(WtDualPanel, {
+      slots: { 'main': content },
+    });
+    expect(wrapper.find('.wt-dual-panel__main-panel').text()).toBe(content);
+  });
+});

package/src/components/wt-dual-panel/_variables.scss

@@ -0,0 +1,12 @@
+:root {
+  --wt-dual-panel-padding: var(--spacing-sm);
+  --wt-dual-panel-section-padding: var(--spacing-sm);
+  --wt-dual-panel-section-gap: var(--spacing-sm);
+
+  --wt-dual-panel-background-color: var(--grey-lighten-5);
+  --wt-dual-panel-content-wrapper-color: var(--content-wrapper-color);
+}
+
+:root.theme--dark {
+  --wt-dual-panel-background-color: var(--grey-darken-4);
+}

package/src/components/wt-dual-panel/wt-dual-panel.vue

@@ -0,0 +1,131 @@
+<template>
+  <section class="wt-dual-panel">
+    <div class="wt-dual-panel__header">
+      <slot name="header" />
+    </div>
+    <div
+      v-if="actionsPanel"
+      class="wt-dual-panel__actions-panel"
+    >
+      <slot name="actions-panel" />
+    </div>
+    <div class="wt-dual-panel__content">
+      <div
+        :class="[
+        `wt-dual-panel__side-panel--${sidePanelSize}`
+      ]"
+        class="wt-dual-panel__side-panel"
+      >
+        <wt-icon-action
+          v-if="!disableResize"
+          :action="sidePanelCollapsed ? IconAction.EXPAND : IconAction.COLLAPSE"
+          class="wt-dual-panel__icon-action"
+          size="sm"
+          @click="toggleSidePanel"
+        />
+        <slot name="side-panel" />
+      </div>
+      <div class="wt-dual-panel__main">
+        <slot name="main" />
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { computed, ref, defineEmits } from 'vue';
+import IconAction from '../../enums/IconAction/IconAction.enum.js';
+import { ComponentSize } from '../../enums/index.js';
+
+const props = defineProps({
+  actionsPanel: {
+    type: Boolean,
+    default: true,
+  },
+  disableResize: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['update:size']);
+
+const sidePanelCollapsed = ref(false);
+
+const toggleSidePanel = () => {
+  sidePanelCollapsed.value = !sidePanelCollapsed.value;
+  emit('update:side-panel-size', sidePanelSize.value);
+};
+
+const sidePanelSize = computed(() => (sidePanelCollapsed.value ? ComponentSize.SM : ComponentSize.MD));
+</script>
+
+<style lang="scss">
+@import './variables.scss';
+</style>
+
+<style lang="scss" scoped>
+@import '../../../src/css/main.scss';
+$side-panel-md-width: 320px;
+
+.wt-dual-panel {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  max-width: 100%;
+  height: 100%;
+  padding: var(--wt-dual-panel-padding);
+  background: var(--wt-dual-panel-background-color);
+  gap: var(--wt-dual-panel-section-gap);
+
+  &__header,
+  &__actions-panel,
+  &__main {
+    box-sizing: border-box;
+    padding: var(--wt-dual-panel-section-padding);
+    border-radius: var(--border-radius);
+    background: var(--wt-dual-panel-content-wrapper-color);
+  }
+
+  &__main {
+    flex: 1 1 auto;
+  }
+
+  &__header,  &__actions-panel {
+    flex: 0 0 auto;
+  }
+
+  &__content {
+    display: flex;
+    flex-grow: 1;
+    min-height: 0;
+    gap: var(--spacing-sm);
+  }
+
+  &__side-panel {
+    @extend %wt-scrollbar;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    padding: var(--wt-dual-panel-section-padding);
+    transition: var(--transition);
+    background: var(--wt-dual-panel-content-wrapper-color);
+    will-change: width;
+    gap: var(--wt-dual-panel-section-gap);
+
+    &--md {
+      flex: 0 0 $side-panel-md-width;
+    }
+
+    &--sm {
+      flex: 0 0 min-content;
+    }
+  }
+
+  &__icon-action {
+    width: fit-content;
+    line-height: 0;
+  }
+}
+</style>

package/src/components/wt-icon-action/IActionData.js

@@ -31,6 +31,16 @@ const IActionData = Object.freeze({
     icon: 'refresh',
     hint: 'reusable.refresh',
   },
+  [IconAction.EXPAND]: {
+    value: IconAction.EXPAND,
+    icon: 'expand',
+    hint: 'reusable.expand',
+  },
+  [IconAction.COLLAPSE]: {
+    value: IconAction.COLLAPSE,
+    icon: 'collapse',
+    hint: 'reusable.collapse',
+  },
 });
 
 export { IActionData };

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

@@ -45,6 +45,7 @@
           v-if="gridActions"
           class="wt-table__th__actions"
         >
+          <!--    @slot Table head actions row slot -->
           <slot name="actions-header" />
         </th>
       </tr>
@@ -73,6 +74,10 @@
           :key="headerKey"
           class="wt-table__td"
         >
+          <!--
+           @slot Customize data columns. Recommended for representing nested data structures like object or array, and adding specific elements like select or chip
+           @scope [ { "name": "item", "description": "Data row object" }, { "name": "index", "description": "Data row index" } ]
+           -->
           <slot
             :index="dataKey"
             :item="row"
@@ -86,6 +91,10 @@
           v-if="gridActions"
           class="wt-table__td__actions"
         >
+          <!--
+          @slot Table body actions row slot
+          @scope [ { "name": "item", "description": "Data row object" }, { "name": "index", "description": "Data row index" } ]
+           -->
           <slot
             :index="dataKey"
             :item="row"
@@ -113,6 +122,10 @@
           :key="headerKey"
           class="wt-table__td"
         >
+          <!--
+           @slot Add your custom aggregations for column in table footer. Table footer is rendered conditionally depending on templates with "-footer" name
+           @scope [ { "name": "header", "description": "header object" } ]
+           -->
           <slot
             :header="col"
             :index="headerKey"
@@ -131,18 +144,30 @@ import getNextSortOrder from './_internals/getSortOrder.js';
 export default {
   name: 'WtTable',
   props: {
+    /**
+     * 'Accepts list of header objects. Draws text depending on "text" property, looks for data values through "value", "show" boolean controls visibility of a column (if undefined, all visible by default). ' Column width is calculated by "width" param. By default, sets minmax(150px, 1fr). '
+     */
     headers: {
       type: Array,
       default: () => [],
     },
+    /**
+     * 'List of data, represented by table. '
+     */
     data: {
       type: Array,
       default: () => [],
     },
+    /**
+     * 'If true, draws sorting arrows and sends sorting events at header click. Draws a sorting arrow by "sort": "asc"/"desc" header value. '
+     */
     sortable: {
       type: Boolean,
       default: false,
     },
+    /**
+     * 'If true, draws row selection checkboxes. Checkbox toggles data object _isSelected property. It's IMPORTANT to set this property before sending data to table. '
+     */
     selectable: {
       type: Boolean,
       default: true,
@@ -151,6 +176,9 @@ export default {
       type: Array,
       // no default! because we need to know if it's passed or not
     },
+    /**
+     * 'If true, reserves space for 3 icon actions in the last column. Accessible by "actions" slot. '
+     */
     gridActions: {
       type: Boolean,
       default: true,

package/src/css/pages/card-page.scss

@@ -1,47 +1,52 @@
 .opened-card {
-    &.wt-page-wrapper {
-      width: 100%;
-    }
+  width: 100%;
+
+  &.wt-page-wrapper,
+  &.wt-dual-panel {
+    width: 100%;
+  }
 
-    &-header {
-      position: relative;
-      display: flex;
-      align-items: center;
-      flex-wrap: wrap;
-      justify-content: space-between;
-      margin: var(--spacing-sm) 0;
+  &-header {
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    margin: var(--spacing-sm) 0;
 
-      &__title {
-        @extend %typo-heading-3;
+    &__title {
+      @extend %typo-heading-3;
 
-        + .hint {
-          top: -2px;
-        }
+      + .hint {
+        top: -2px;
       }
     }
+  }
 
-    &-form {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
+  &-form {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  &-input-grid {
+    display: grid;
+    align-items: flex-start;
+    grid-template-columns: 1fr 1fr;
+    grid-auto-rows: minmax(auto, auto);
+    grid-column-gap: var(--spacing-sm);
+    grid-row-gap: var(--spacing-xs);
+
+    &--1-col {
+      grid-template-columns: 1fr;
     }
-    &-input-grid {
-      display: grid;
-      align-items: flex-start;
-      grid-template-columns: 1fr 1fr;
-      grid-auto-rows: minmax(auto, auto);
-      grid-column-gap: var(--spacing-sm);
-      grid-row-gap: var(--spacing-xs);
-
-      &--1-col {
-        grid-template-columns: 1fr;
-      }
 
-      &--w50 {
-        width: 50%;
-      }
-      &--w100{
-        width: 100%;
-      }
+    &--w50 {
+      width: 50%;
+    }
+
+    &--w100 {
+      width: 100%;
     }
+  }
 }

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

@@ -10,6 +10,8 @@ const IconAction = Object.freeze({
   COLUMNS: 'columns',
   HISTORY: 'history',
   EDIT: 'edit',
+  COLLAPSE: 'collapse',
+  EXPAND: 'expand',
 });
 
 export default IconAction;

package/src/modules/QueryFilters/mixins/sortFilterMixin.js

@@ -28,6 +28,24 @@ const decodeSortQuery = ({ value }) => {
   };
 };
 
+const changeHeadersSort = ({ headers, sortedHeader, order }) => {
+  return headers.map((header) => {
+    if (header.sort === undefined) return header;
+
+    // reset all headers by default
+    let newSort = null;
+
+    if (header.field === sortedHeader.field) {
+      newSort = order;
+    }
+
+    return {
+      ...header,
+      sort: newSort,
+    };
+  });
+};
+
 export default {
   mixins: [baseFilterMixin],
   data: () => ({
@@ -40,21 +58,12 @@ export default {
     },
 
     setValue({ column, order }) {
-      const headers = this.headers.map((header) => {
-        if (header.sort === undefined) return header;
-
-        // reset all headers by default
-        let newSort = null;
-
-        if (header.value === column.value) {
-          newSort = order;
-        }
-
-        return {
-          ...header,
-          sort: newSort,
-        };
+      const headers = changeHeadersSort({
+        headers: this.headers,
+        sortedHeader: column,
+        order,
       });
+
       const value = encodeSortQuery({ column, order });
       this.setHeaders(headers);
       this.setValueToQuery({
@@ -65,6 +74,13 @@ export default {
 
     restoreValue(value) {
       const sortedColumns = decodeSortQuery({ value });
+
+      debugger;
+
+      // const sortedHeader =
+
+      // const headers = changeHeadersSort({ headers: this.headers, sortedHeader: { field: sortedColumns[0] }, order });
+
       const headers = this.headers.map((header) => ({
         ...header,
         sort: sortedColumns[header.field] || null,