@webitel/ui-datalist 1.1.5 → 1.1.7

package/src/modules/headers/createTableHeadersStore.ts

@@ -9,263 +9,290 @@ import { usePersistedStorage } from '../persist/usePersistedStorage';
 import { useTableStoreConfig } from '../types/tableStore.types';
 
 interface TableHeadersStoreBodyParams {
-  rawHeaders: WtTableHeader[];
-  id: string;
+	rawHeaders: WtTableHeader[];
+	id: string;
 }
 
 export const tableHeadersStoreBody = ({
-  rawHeaders,
-  id,
+	rawHeaders,
+	id,
 }: TableHeadersStoreBodyParams) => {
-  const headers = ref<WtTableHeader[]>(rawHeaders);
-  const isReorderingColumn = ref(false);
-
-  const shownHeaders = computed(() => {
-    return headers.value.filter((header) => header.show);
-  });
-
-  const fields = computed(() => {
-    return shownHeaders.value.map((header) => header.field);
-  });
-
-  const sort = computed(() => {
-    const encodeSortQuery = ({ column, order }) =>
-      `${sortToQueryAdapter(order)}${column.field}`;
-
-    const sortedCol = headers.value.find((header) => header.sort);
-
-    return sortedCol
-      ? encodeSortQuery({ column: sortedCol, order: sortedCol.sort })
-      : 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;
-  };
-
-  const updateShownHeaders = (value) => {
-    headers.value = value;
-  };
-
-  const setHeaderOrder = (orderedFields: string[]) => {
-    const arrayFieldOrder = new Map<string, number[]>();
-    headers.value.forEach((header, idx) => {
-      if (!arrayFieldOrder.has(header.field)) {
-        arrayFieldOrder.set(header.field, []);
-      }
-      arrayFieldOrder.get(header.field)!.push(idx);
-    });
-
-    const newOrder = [];
-    for (const field of orderedFields) {
-      const indices = arrayFieldOrder.get(field);
-      if (indices && indices.length) {
-        newOrder.push(indices.shift()!);
-      }
-    }
-
-    const newOrderFiltered = newOrder
-      .map((idx) => headers.value[idx])
-      .filter((header) => header);
-
-    /**
-     * @author @Oleksandr Palonnyi
-     *
-     * [WTEL-8038](https://webitel.atlassian.net/browse/WTEL-8038)
-     *
-     * Additionally, we append the `show: true` property to each item
-     * to ensure that all newly processed elements are visible by default.
-     * */
-    return newOrderFiltered.map((item) => {
-      return {
-        ...item,
-        show: true,
-      };
-    });
-  };
-
-  const updateFields = (fields: string[]) => {
-    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),
-    );
-    const customFieldHeaders = customFields.map((field) => ({
-      show: true,
-      field,
-      shouldBeInitialized: true,
-    }));
-
-    const mergedHeaders = [...newHeaders, ...customFieldHeaders];
-    const orderedFields = fields.filter((field) =>
-      mergedHeaders.some((header) => header.field === field),
-    );
-    const reordered = setHeaderOrder(orderedFields);
-
-    const uniqueMerged = mergedHeaders.filter(
-      (merged) => !reordered.some((r) => r.field === merged.field),
-    );
-
-    updateShownHeaders([...reordered, ...uniqueMerged]);
-  };
-
-  const updateSort = (column) => {
-    const getNextSortOrder = (sort) => {
-      switch (sort) {
-        case SortSymbols.NONE:
-          return SortSymbols.ASC;
-        case SortSymbols.ASC:
-          return SortSymbols.DESC;
-        case SortSymbols.DESC:
-          return SortSymbols.NONE;
-        default:
-          return SortSymbols.ASC;
-      }
-    };
-
-    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,
-        };
-      });
-    };
-
-    const order = getNextSortOrder(column.sort);
-
-    headers.value = changeHeadersSort({
-      headers: headers.value,
-      sortedHeader: column,
-      order,
-    });
-  };
-
-  const setupPersistence = async () => {
-    const { restore: restoreFields } = usePersistedStorage({
-      name: 'fields',
-      value: fields,
-      storages: [PersistedStorageType.LocalStorage, PersistedStorageType.Route],
-      storagePath: id,
-      onStore: (save, { name }) => {
-        const value = fields.value.join(',');
-        return save({ name, value });
-      },
-      onRestore: async (restore, name) => {
-        const value = (await restore(name)) as string;
-        if (value) {
-          return updateFields(value.split(','));
-        }
-      },
-    });
-
-    const { restore: restoreSort } = usePersistedStorage({
-      name: 'sort',
-      value: sort,
-    });
-
-    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);
-    const uniqueHeaders = headers.value.filter(
-      (merged) => !reordered.some((r) => r.field === merged.field),
-    );
-    updateShownHeaders([...reordered, ...uniqueHeaders]);
-
-    nextTick(() => {
-      isReorderingColumn.value = false;
-    });
-  };
-
-  return {
-    headers,
-    shownHeaders,
-    fields,
-    sort,
-    columnWidths,
-    isReorderingColumn,
-
-    updateShownHeaders,
-    updateSort,
-    columnResize,
-    columnReorder,
-
-    setupPersistence,
-    $reset,
-  };
+	const headers = ref<WtTableHeader[]>(rawHeaders);
+	const isReorderingColumn = ref(false);
+
+	const shownHeaders = computed(() => {
+		return headers.value.filter((header) => header.show);
+	});
+
+	const fields = computed(() => {
+		return shownHeaders.value.map((header) => header.field);
+	});
+
+	const sort = computed(() => {
+		const encodeSortQuery = ({ column, order }) =>
+			`${sortToQueryAdapter(order)}${column.field}`;
+
+		const sortedCol = headers.value.find((header) => header.sort);
+
+		return sortedCol
+			? encodeSortQuery({
+					column: sortedCol,
+					order: sortedCol.sort,
+				})
+			: 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;
+	};
+
+	const updateShownHeaders = (value) => {
+		headers.value = value;
+	};
+
+	const setHeaderOrder = (orderedFields: string[]) => {
+		const arrayFieldOrder = new Map<string, number[]>();
+		headers.value.forEach((header, idx) => {
+			if (!arrayFieldOrder.has(header.field)) {
+				arrayFieldOrder.set(header.field, []);
+			}
+			arrayFieldOrder.get(header.field)!.push(idx);
+		});
+
+		const newOrder = [];
+		for (const field of orderedFields) {
+			const indices = arrayFieldOrder.get(field);
+			if (indices && indices.length) {
+				newOrder.push(indices.shift()!);
+			}
+		}
+
+		const newOrderFiltered = newOrder
+			.map((idx) => headers.value[idx])
+			.filter((header) => header);
+
+		/**
+		 * @author @Oleksandr Palonnyi
+		 *
+		 * [WTEL-8038](https://webitel.atlassian.net/browse/WTEL-8038)
+		 *
+		 * Additionally, we append the `show: true` property to each item
+		 * to ensure that all newly processed elements are visible by default.
+		 * */
+		return newOrderFiltered.map((item) => {
+			return {
+				...item,
+				show: true,
+			};
+		});
+	};
+
+	const updateFields = (fields: string[]) => {
+		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),
+		);
+		const customFieldHeaders = customFields.map((field) => ({
+			show: true,
+			field,
+			shouldBeInitialized: true,
+		}));
+
+		const mergedHeaders = [
+			...newHeaders,
+			...customFieldHeaders,
+		];
+		const orderedFields = fields.filter((field) =>
+			mergedHeaders.some((header) => header.field === field),
+		);
+		const reordered = setHeaderOrder(orderedFields);
+
+		const uniqueMerged = mergedHeaders.filter(
+			(merged) => !reordered.some((r) => r.field === merged.field),
+		);
+
+		updateShownHeaders([
+			...reordered,
+			...uniqueMerged,
+		]);
+	};
+
+	const updateSort = (column) => {
+		const getNextSortOrder = (sort) => {
+			switch (sort) {
+				case SortSymbols.NONE:
+					return SortSymbols.ASC;
+				case SortSymbols.ASC:
+					return SortSymbols.DESC;
+				case SortSymbols.DESC:
+					return SortSymbols.NONE;
+				default:
+					return SortSymbols.ASC;
+			}
+		};
+
+		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,
+				};
+			});
+		};
+
+		const order = getNextSortOrder(column.sort);
+
+		headers.value = changeHeadersSort({
+			headers: headers.value,
+			sortedHeader: column,
+			order,
+		});
+	};
+
+	const setupPersistence = async () => {
+		const { restore: restoreFields } = usePersistedStorage({
+			name: 'fields',
+			value: fields,
+			storages: [
+				PersistedStorageType.LocalStorage,
+				PersistedStorageType.Route,
+			],
+			storagePath: id,
+			onStore: (save, { name }) => {
+				const value = fields.value.join(',');
+				return save({
+					name,
+					value,
+				});
+			},
+			onRestore: async (restore, name) => {
+				const value = (await restore(name)) as string;
+				if (value) {
+					return updateFields(value.split(','));
+				}
+			},
+		});
+
+		const { restore: restoreSort } = usePersistedStorage({
+			name: 'sort',
+			value: sort,
+		});
+
+		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);
+		const uniqueHeaders = headers.value.filter(
+			(merged) => !reordered.some((r) => r.field === merged.field),
+		);
+		updateShownHeaders([
+			...reordered,
+			...uniqueHeaders,
+		]);
+
+		nextTick(() => {
+			isReorderingColumn.value = false;
+		});
+	};
+
+	return {
+		headers,
+		shownHeaders,
+		fields,
+		sort,
+		columnWidths,
+		isReorderingColumn,
+
+		updateShownHeaders,
+		updateSort,
+		columnResize,
+		columnReorder,
+
+		setupPersistence,
+		$reset,
+	};
 };
 
 export const createTableHeadersStore = <Entity>(
-  namespace: string,
-  config: useTableStoreConfig<Entity>,
-  { headers: rawHeaders },
+	namespace: string,
+	config: useTableStoreConfig<Entity>,
+	{ headers: rawHeaders },
 ) => {
-  const id = `${namespace}/headers`;
-  return createDatalistStore({
-    storeBody: () => tableHeadersStoreBody({ rawHeaders, id }),
-    namespace: id,
-    config,
-  });
+	const id = `${namespace}/headers`;
+	return createDatalistStore({
+		storeBody: () =>
+			tableHeadersStoreBody({
+				rawHeaders,
+				id,
+			}),
+		namespace: id,
+		config,
+	});
 };

package/src/modules/pagination/createTablePaginationStore.ts

@@ -5,69 +5,72 @@ import { usePersistedStorage } from '../persist/usePersistedStorage';
 import { useTableStoreConfig } from '../types/tableStore.types';
 
 export const tablePaginationStoreBody = () => {
-  const page = ref(1);
-  const size = ref(10);
-  const next = ref(false);
+	const page = ref(1);
+	const size = ref(10);
+	const next = ref(false);
 
-  const updatePage = (newPage: number) => {
-    page.value = newPage;
-  };
+	const updatePage = (newPage: number) => {
+		page.value = newPage;
+	};
 
-  const updateSize = (newSize: number) => {
-    size.value = newSize;
-  };
+	const updateSize = (newSize: number) => {
+		size.value = newSize;
+	};
 
-  const $reset = () => {
-    page.value = 1;
-    size.value = 10;
-    next.value = false;
-  };
+	const $reset = () => {
+		page.value = 1;
+		size.value = 10;
+		next.value = false;
+	};
 
-  const setupPersistence = () => {
-    const { restore: restorePage } = usePersistedStorage({
-      name: 'page',
-      value: page,
-      onRestore: async (restore, name) => {
-        const value = await restore(name);
-        const numValue = +value;
-        if (numValue) page.value = numValue;
-      },
-    });
+	const setupPersistence = () => {
+		const { restore: restorePage } = usePersistedStorage({
+			name: 'page',
+			value: page,
+			onRestore: async (restore, name) => {
+				const value = await restore(name);
+				const numValue = +value;
+				if (numValue) page.value = numValue;
+			},
+		});
 
-    const { restore: restoreSize } = usePersistedStorage({
-      name: 'size',
-      value: size,
-      onRestore: async (restore, name) => {
-        const value = await restore(name);
-        const numValue = +value;
-        if (numValue) size.value = numValue;
-      },
-    });
+		const { restore: restoreSize } = usePersistedStorage({
+			name: 'size',
+			value: size,
+			onRestore: async (restore, name) => {
+				const value = await restore(name);
+				const numValue = +value;
+				if (numValue) size.value = numValue;
+			},
+		});
 
-    return Promise.allSettled([restorePage(), restoreSize()]);
-  };
+		return Promise.allSettled([
+			restorePage(),
+			restoreSize(),
+		]);
+	};
 
-  return {
-    page,
-    size,
-    next,
+	return {
+		page,
+		size,
+		next,
 
-    updatePage,
-    updateSize,
+		updatePage,
+		updateSize,
 
-    setupPersistence,
-    $reset,
-  };
+		setupPersistence,
+		$reset,
+	};
 };
 
 export const createTablePaginationStore = <Entity>(
-  namespace: string,
-  config: useTableStoreConfig<Entity>,
+	namespace: string,
+	config: useTableStoreConfig<Entity>,
 ) => {
-  const id = `${namespace}/pagination`;
-  return createDatalistStore({
-    storeBody: tablePaginationStoreBody,
-    namespace: id,
-    config,
-  });
+	const id = `${namespace}/pagination`;
+	return createDatalistStore({
+		storeBody: tablePaginationStoreBody,
+		namespace: id,
+		config,
+	});
 };