@webitel/ui-sdk 23.12.115 → 23.12.117

package/package.json

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

package/src/mixins/dataFilterMixins/__tests__/sortFilterMixin.spec.js

@@ -19,39 +19,46 @@ const headers = [{
   field: 'online',
 }];
 
+const sortedHeaders = [{
+  value: 'queue',
+  show: true,
+  sort: 'asc',
+  field: 'queue',
+}, {
+  value: 'agents',
+  show: true,
+  sort: null,
+  field: 'online',
+}];
+
 describe('Sort filter mixin', () => {
-  let wrapper;
+  const setHeaders = vi.fn();
   const Component = {
     render() {},
     mixins: [sortFilterMixin],
     data: () => ({ headers }),
+    methods: { setHeaders },
   };
 
   beforeEach(async () => {
     await router.replace('/');
-    wrapper = shallowMount(Component, {
-      global: { plugins: [router] },
-    });
   });
 
+
   it('Correctly sets value from $route query', async () => {
     await router.replace({ path: '/', query: { sort: '+queue' } });
-    const queue = wrapper.vm.headers.find((header) => header.value === 'queue');
-    expect(queue.sort).toEqual('asc');
-  });
-
-  it('After "sort" trigger, header column sort value changes properly', async () => {
-    let queue;
-    queue = wrapper.vm.headers.find((header) => header.value === 'queue');
-    await wrapper.vm.sort(queue);
-    queue = wrapper.vm.headers.find((header) => header.value === 'queue');
-    expect(queue.sort).toEqual('asc');
+    const wrapper = shallowMount(Component, {
+      global: { plugins: [router] },
+    });
+    expect(setHeaders).toHaveBeenCalledWith(sortedHeaders);
   });
 
-  it('After "sort" trigger, url query changes properly', async () => {
-    await router.replace({ path: '/', query: { sort: '+queue' } });
+  it('After "sort" trigger, header column sort value changes properly', () => {
+    const wrapper = shallowMount(Component, {
+      global: { plugins: [router] },
+    });
     const queue = wrapper.vm.headers.find((header) => header.value === 'queue');
-    await wrapper.vm.sort(queue);
-    expect(wrapper.vm.$route.query.sort).toEqual('-queue');
+    wrapper.vm.sort(queue);
+    expect(setHeaders).toHaveBeenCalledWith(sortedHeaders);
   });
 });

package/src/mixins/dataFilterMixins/sortFilterMixin.js

@@ -53,11 +53,15 @@ export default {
     },
 
     setValue({ column, order }) {
-      this.headers = this.headers.map((col) => ({
-        ...col,
-        sort: col === column ? order : null,
-      }));
+      const headers = this.headers.map((col) => {
+        const sortFieldValue = col?.sort;
+        return {
+          ...col,
+          sort: col === column ? order : sortFieldValue,
+        }
+      });
       const value = encodeSortQuery({ column, order });
+      this.setHeaders(headers);
       return this.setValueToQuery({
         value,
         filterQuery: this.filterQuery,
@@ -66,10 +70,11 @@ export default {
 
     restoreValue(value) {
       const sortedColumns = decodeSortQuery({ value });
-      this.headers = this.headers.map((header) => ({
+      const headers = this.headers.map((header) => ({
         ...header,
         sort: sortedColumns[header.field] || null,
       }));
+      this.setHeaders(headers);
     },
   },
 };