@webitel/ui-datalist 1.0.78 → 1.0.79

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-datalist",
-  "version": "1.0.78",
+  "version": "1.0.79",
   "description": "Toolkit for building data lists in webitel ui system",
   "scripts": {
     "make-all": "npm version patch --git-tag-version false && ( npm run lint:fix || true) && (npm run build:types || true) && npm run utils:publish",

package/src/modules/headers/createTableHeadersStore.ts

@@ -1,7 +1,7 @@
 import { WtTableHeader } from '@webitel/ui-sdk/components/wt-table/types/WtTable';
 import { sortToQueryAdapter } from '@webitel/ui-sdk/scripts';
 import { SortSymbols } from '@webitel/ui-sdk/scripts/sortQueryAdapters';
-import { computed, ref } from 'vue';
+import { computed, ref, nextTick } from 'vue';
 
 import { createDatalistStore } from '../_shared/createDatalistStore';
 import { PersistedStorageType } from '../persist/PersistedStorage.types';
@@ -18,6 +18,7 @@ export const tableHeadersStoreBody = ({
   id,
 }: TableHeadersStoreBodyParams) => {
   const headers = ref<WtTableHeader[]>(rawHeaders);
+  const isReorderingColumn = ref(false);
 
   const shownHeaders = computed(() => {
     return headers.value.filter((header) => header.show);
@@ -55,23 +56,33 @@ export const tableHeadersStoreBody = ({
     headers.value = value;
   };
 
+  const setHeaderOrder = (orderedFields: string[]) => {
+    const arrayFieldOrder = new Map<string, number>();
+    headers.value.forEach((header, idx) => arrayFieldOrder.set(header.field, idx));
+
+    const newOrder = orderedFields.map(field => arrayFieldOrder.get(field));
+
+    return newOrder.map(idx => headers.value[idx]);
+  };
+
   const updateFields = (fields: string[]) => {
-    const newHeaders = headers.value.map((header: WtTableHeader) => {
-      return {
-        ...header,
-        show: fields.includes(header.field),
-      };
-    });
+    const newHeaders = headers.value.map((header: WtTableHeader) => ({
+      ...header,
+      show: fields.includes(header.field),
+    }));
 
     const customFields = fields.filter((field) => !headers.value.some((header) => header.field === field));
-// debugger
     const customFieldHeaders = customFields.map((field) => ({
       show: true,
       field,
       shouldBeInitialized: true,
     }));
-// debugger
-    updateShownHeaders([...newHeaders, ...customFieldHeaders]);
+
+    const mergedHeaders = [...newHeaders, ...customFieldHeaders];
+    const orderedFields = fields.filter(field => mergedHeaders.some(header => header.field === field));
+    const reordered = setHeaderOrder(orderedFields);
+
+    updateShownHeaders(reordered);
   };
 
   const updateSort = (column) => {
@@ -175,16 +186,14 @@ export const tableHeadersStoreBody = ({
   };
 
   const columnReorder = (orderedFields: string[]) => {
-    const reorderedHeaders = [];
+    isReorderingColumn.value = true;
 
-    orderedFields.forEach(field => {
-      const header = getHeaderByField(field);
-      if (header) {
-        reorderedHeaders.push(header);
-      }
-    });
+    const reordered = setHeaderOrder(orderedFields);
+    updateShownHeaders(reordered);
 
-    updateShownHeaders(reorderedHeaders);
+    nextTick(() => {
+      isReorderingColumn.value = false;
+    });
   };
 
   return {
@@ -193,6 +202,7 @@ export const tableHeadersStoreBody = ({
     fields,
     sort,
     columnWidths,
+    isReorderingColumn,
 
     updateShownHeaders,
     updateSort,

package/src/modules/table/createTableStore.store.ts

@@ -46,7 +46,7 @@ export const tableStoreBody = <Entity extends { id: string; etag?: string }>(
   } = paginationStore;
 
   const headersStore = useHeadersStore();
-  const { headers, shownHeaders, fields, sort, columnWidths } = makeThisToRefs<
+  const { headers, shownHeaders, fields, sort, columnWidths, isReorderingColumn } = makeThisToRefs<
     typeof headersStore
   >(headersStore, storeType);
   const {
@@ -202,6 +202,13 @@ export const tableStoreBody = <Entity extends { id: string; etag?: string }>(
     watch(
       [() => filtersManager.value.getAllValues(), sort, fields, size],
       async () => {
+        /*
+        * @author @Lera24
+        * https://webitel.atlassian.net/browse/WTEL-7597?focusedCommentId=697115
+        * */
+        if (isReorderingColumn.value) {
+          return;
+        }
         loadingAfterFiltersChange = true;
         updatePage(1);
         await loadDataList();

package/types/modules/headers/createTableHeadersStore.d.ts

@@ -10,6 +10,7 @@ export declare const tableHeadersStoreBody: ({ rawHeaders, id, }: TableHeadersSt
     fields: import("vue").ComputedRef<any>;
     sort: import("vue").ComputedRef<string>;
     columnWidths: import("vue").ComputedRef<any>;
+    isReorderingColumn: import("vue").Ref<boolean, boolean>;
     updateShownHeaders: (value: any) => void;
     updateSort: (column: any) => void;
     columnResize: ({ columnName, columnWidth }: {
@@ -28,6 +29,7 @@ export declare const createTableHeadersStore: <Entity>(namespace: string, config
     fields: import("vue").ComputedRef<any>;
     sort: import("vue").ComputedRef<string>;
     columnWidths: import("vue").ComputedRef<any>;
+    isReorderingColumn: import("vue").Ref<boolean, boolean>;
     updateShownHeaders: (value: any) => void;
     updateSort: (column: any) => void;
     columnResize: ({ columnName, columnWidth }: {