@webitel/ui-datalist 1.0.76 → 1.0.78

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-datalist",
-  "version": "1.0.76",
+  "version": "1.0.78",
   "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

@@ -38,6 +38,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;
   };
@@ -129,7 +138,53 @@ 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[]) => {
+    const reorderedHeaders = [];
+
+    orderedFields.forEach(field => {
+      const header = getHeaderByField(field);
+      if (header) {
+        reorderedHeaders.push(header);
+      }
+    });
+
+    updateShownHeaders(reorderedHeaders);
   };
 
   return {
@@ -137,9 +192,12 @@ export const tableHeadersStoreBody = ({
     shownHeaders,
     fields,
     sort,
+    columnWidths,
 
     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 } = makeThisToRefs<
     typeof headersStore
   >(headersStore, storeType);
   const {
     updateSort,
+    columnResize,
+    columnReorder,
     updateShownHeaders,
     setupPersistence: setupHeadersPersistence,
   } = headersStore;
@@ -246,6 +248,7 @@ export const tableStoreBody = <Entity extends { id: string; etag?: string }>(
     shownHeaders,
     fields,
     sort,
+    columnWidths,
     searchMode,
 
     filtersManager,
@@ -267,6 +270,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,15 @@ 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>;
     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 +27,15 @@ 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>;
     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>;