@webitel/ui-datalist 1.0.77 → 1.0.79

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-datalist",
-  "version": "1.0.77",
+  "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);
@@ -38,6 +39,15 @@ export const tableHeadersStoreBody = ({
       : null;
   });
 
+  const columnWidths = computed(() => {
+    return headers.value.reduce((acc, header) => {
+      if (header.width) {
+        acc[header.field] = header.width;
+      }
+      return acc;
+    }, {});
+  });
+
   const $reset = () => {
     headers.value = rawHeaders;
   };
@@ -46,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) => {
@@ -129,7 +149,51 @@ export const tableHeadersStoreBody = ({
       value: sort,
     });
 
-    return Promise.allSettled([restoreFields(), restoreSort()]);
+    const { restore: restoreColumnWidths } = usePersistedStorage({
+      name: 'columnWidths',
+      value: columnWidths,
+      storages: [PersistedStorageType.LocalStorage],
+      storagePath: id,
+      onStore: (save, { name }) => {
+        const value = JSON.stringify(columnWidths.value);
+        return save({ name, value });
+      },
+      onRestore: async (restore, name) => {
+        const value = (await restore(name)) as string;
+        if (value) {
+          const parsedWidths = JSON.parse(value);
+          headers.value = headers.value.map((header) => ({
+            ...header,
+            width: parsedWidths[header.field] || header.width,
+          }));
+        }
+      },
+    });
+
+    return Promise.allSettled([restoreFields(), restoreSort(), restoreColumnWidths()]);
+  };
+
+  const getHeaderByField = (field: string) => {
+    return headers.value.find((header) => header.field === field);
+  };
+
+  const columnResize = ({columnName, columnWidth}) => {
+    const column = getHeaderByField(columnName);
+
+    if (column) {
+      column.width = columnWidth;
+    }
+  };
+
+  const columnReorder = (orderedFields: string[]) => {
+    isReorderingColumn.value = true;
+
+    const reordered = setHeaderOrder(orderedFields);
+    updateShownHeaders(reordered);
+
+    nextTick(() => {
+      isReorderingColumn.value = false;
+    });
   };
 
   return {
@@ -137,9 +201,13 @@ export const tableHeadersStoreBody = ({
     shownHeaders,
     fields,
     sort,
+    columnWidths,
+    isReorderingColumn,
 
     updateShownHeaders,
     updateSort,
+    columnResize,
+    columnReorder,
 
     setupPersistence,
     $reset,

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

@@ -46,11 +46,13 @@ export const tableStoreBody = <Entity extends { id: string; etag?: string }>(
   } = paginationStore;
 
   const headersStore = useHeadersStore();
-  const { headers, shownHeaders, fields, sort } = makeThisToRefs<
+  const { headers, shownHeaders, fields, sort, columnWidths, isReorderingColumn } = makeThisToRefs<
     typeof headersStore
   >(headersStore, storeType);
   const {
     updateSort,
+    columnResize,
+    columnReorder,
     updateShownHeaders,
     setupPersistence: setupHeadersPersistence,
   } = headersStore;
@@ -200,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();
@@ -246,6 +255,7 @@ export const tableStoreBody = <Entity extends { id: string; etag?: string }>(
     shownHeaders,
     fields,
     sort,
+    columnWidths,
     searchMode,
 
     filtersManager,
@@ -267,6 +277,8 @@ export const tableStoreBody = <Entity extends { id: string; etag?: string }>(
     updateSize,
 
     updateSort,
+    columnResize,
+    columnReorder,
     updateShownHeaders,
 
     hasFilter,

package/src/modules/types/tableStore.types.ts

@@ -37,6 +37,7 @@ export interface TableStore<Entity> {
   shownHeaders: Ref<[]>;
   fields: Ref<[]>;
   sort: Ref<string>;
+  columnWidths: Ref<[]>;
 
   // filtersStore
   filtersManager: Ref<IFiltersManager>;

package/types/modules/filter-presets/stores/createFilterPresetsStore.d.ts

@@ -14,6 +14,7 @@ export declare const filterPresetsStoreBody: (namespace?: string) => {
     shownHeaders: import("vue").ComputedRef<any>;
     fields: import("vue").ComputedRef<any>;
     sort: import("vue").ComputedRef<string>;
+    columnWidths: import("vue").ComputedRef<any>;
     searchMode: import("vue").Ref<string, string>;
     filtersManager: import("vue").Ref<{
         filters: Map<string, {
@@ -90,6 +91,11 @@ export declare const filterPresetsStoreBody: (namespace?: string) => {
     updatePage: (newPage: number) => void;
     updateSize: (newSize: number) => void;
     updateSort: (column: any) => void;
+    columnResize: ({ columnName, columnWidth }: {
+        columnName: any;
+        columnWidth: any;
+    }) => void;
+    columnReorder: (orderedFields: string[]) => void;
     updateShownHeaders: (value: any) => void;
     hasFilter: any;
     addFilter: any;
@@ -112,6 +118,7 @@ export declare const createFilterPresetsStore: (namespace: string) => () => {
     shownHeaders: import("vue").ComputedRef<any>;
     fields: import("vue").ComputedRef<any>;
     sort: import("vue").ComputedRef<string>;
+    columnWidths: import("vue").ComputedRef<any>;
     searchMode: import("vue").Ref<string, string>;
     filtersManager: import("vue").Ref<{
         filters: Map<string, {
@@ -188,6 +195,11 @@ export declare const createFilterPresetsStore: (namespace: string) => () => {
     updatePage: (newPage: number) => void;
     updateSize: (newSize: number) => void;
     updateSort: (column: any) => void;
+    columnResize: ({ columnName, columnWidth }: {
+        columnName: any;
+        columnWidth: any;
+    }) => void;
+    columnReorder: (orderedFields: string[]) => void;
     updateShownHeaders: (value: any) => void;
     hasFilter: any;
     addFilter: any;

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

@@ -9,9 +9,16 @@ export declare const tableHeadersStoreBody: ({ rawHeaders, id, }: TableHeadersSt
     shownHeaders: import("vue").ComputedRef<any>;
     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;
-    setupPersistence: () => Promise<[PromiseSettledResult<void>, PromiseSettledResult<void>]>;
+    columnResize: ({ columnName, columnWidth }: {
+        columnName: any;
+        columnWidth: any;
+    }) => void;
+    columnReorder: (orderedFields: string[]) => void;
+    setupPersistence: () => Promise<[PromiseSettledResult<void>, PromiseSettledResult<void>, PromiseSettledResult<void>]>;
     $reset: () => void;
 };
 export declare const createTableHeadersStore: <Entity>(namespace: string, config: useTableStoreConfig<Entity>, { headers: rawHeaders }: {
@@ -21,9 +28,16 @@ export declare const createTableHeadersStore: <Entity>(namespace: string, config
     shownHeaders: import("vue").ComputedRef<any>;
     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;
-    setupPersistence: () => Promise<[PromiseSettledResult<void>, PromiseSettledResult<void>]>;
+    columnResize: ({ columnName, columnWidth }: {
+        columnName: any;
+        columnWidth: any;
+    }) => void;
+    columnReorder: (orderedFields: string[]) => void;
+    setupPersistence: () => Promise<[PromiseSettledResult<void>, PromiseSettledResult<void>, PromiseSettledResult<void>]>;
     $reset: () => void;
 }>;
 export {};

package/types/modules/table/createTableStore.store.d.ts

@@ -16,6 +16,7 @@ export declare const tableStoreBody: <Entity extends {
     shownHeaders: import("vue").ComputedRef<any>;
     fields: import("vue").ComputedRef<any>;
     sort: import("vue").ComputedRef<string>;
+    columnWidths: import("vue").ComputedRef<any>;
     searchMode: Ref<string, string>;
     filtersManager: Ref<{
         filters: Map<string, {
@@ -92,6 +93,11 @@ export declare const tableStoreBody: <Entity extends {
     updatePage: (newPage: number) => void;
     updateSize: (newSize: number) => void;
     updateSort: (column: any) => void;
+    columnResize: ({ columnName, columnWidth }: {
+        columnName: any;
+        columnWidth: any;
+    }) => void;
+    columnReorder: (orderedFields: string[]) => void;
     updateShownHeaders: (value: any) => void;
     hasFilter: any;
     addFilter: any;
@@ -114,6 +120,7 @@ export declare const createTableStore: <Entity extends {
     shownHeaders: import("vue").ComputedRef<any>;
     fields: import("vue").ComputedRef<any>;
     sort: import("vue").ComputedRef<string>;
+    columnWidths: import("vue").ComputedRef<any>;
     searchMode: Ref<string, string>;
     filtersManager: Ref<{
         filters: Map<string, {
@@ -190,6 +197,11 @@ export declare const createTableStore: <Entity extends {
     updatePage: (newPage: number) => void;
     updateSize: (newSize: number) => void;
     updateSort: (column: any) => void;
+    columnResize: ({ columnName, columnWidth }: {
+        columnName: any;
+        columnWidth: any;
+    }) => void;
+    columnReorder: (orderedFields: string[]) => void;
     updateShownHeaders: (value: any) => void;
     hasFilter: any;
     addFilter: any;

package/types/modules/types/tableStore.types.d.ts

@@ -27,6 +27,7 @@ export interface TableStore<Entity> {
     shownHeaders: Ref<[]>;
     fields: Ref<[]>;
     sort: Ref<string>;
+    columnWidths: Ref<[]>;
     filtersManager: Ref<IFiltersManager>;
     isFiltersRestoring: Ref<boolean>;
     initialize: () => Promise<void>;