@controleonline/ui-default 1.0.264 → 1.0.266

package/src/react/components/table/useDefaultTablePagination.js

@@ -0,0 +1,370 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  getColumnKey,
+  isDateLikeColumn,
+} from '../inputs/defaultInputUtils';
+import {
+  normalizeCollectionItems,
+  resolveDateRangeQuery,
+  resolveFilterQueryValue,
+  resolveHasMore,
+  stableSerialize,
+} from './DefaultTable.utils';
+
+const buildQueryFromState = ({
+  append,
+  columnsForTable,
+  filters,
+  page,
+  pageSizeNumber,
+  requestParams,
+  sort,
+}) => {
+  const query = {
+    ...requestParams,
+    itemsPerPage: pageSizeNumber,
+    page,
+  };
+
+  if (sort?.field && sort?.direction) {
+    query[`order[${sort.field}]`] = sort.direction;
+  }
+
+  Object.entries(filters || {}).forEach(([fieldName, value]) => {
+    if (!fieldName) return;
+
+    const column = columnsForTable.find(item => getColumnKey(item) === fieldName);
+
+    if (isDateLikeColumn(column)) {
+      const dateRange = resolveDateRangeQuery(value);
+      if (dateRange.after) {
+        query[`${fieldName}[after]`] = dateRange.after;
+      }
+      if (dateRange.before) {
+        query[`${fieldName}[before]`] = dateRange.before;
+      }
+      return;
+    }
+
+    const normalizedValue = resolveFilterQueryValue(value);
+    if (Array.isArray(normalizedValue)) {
+      if (normalizedValue.length > 0) {
+        query[fieldName] = normalizedValue;
+      }
+      return;
+    }
+
+    if (normalizedValue !== '') {
+      query[fieldName] = normalizedValue;
+    }
+  });
+
+  if (append) {
+    query.append = true;
+  }
+
+  return query;
+};
+
+const useAutoPageLoader = ({
+  autoMode,
+  autoQuerySignature,
+  buildRequestQuery,
+  endReachedLockRef,
+  pageSizeNumber,
+  resolvedActions,
+  showError,
+  storeName,
+}) => {
+  const [autoHasLoaded, setAutoHasLoaded] = useState(false);
+  const [autoLoading, setAutoLoading] = useState(false);
+  const [autoLoadingMore, setAutoLoadingMore] = useState(false);
+  const [autoLastPageCount, setAutoLastPageCount] = useState(0);
+  const autoRequestIdRef = useRef(0);
+  const autoLoadedQueryKeyRef = useRef('');
+  const autoErroredQueryKeyRef = useRef('');
+  const autoPageRef = useRef(0);
+
+  const loadAutoPage = useCallback(
+    (page, { append = false } = {}) => {
+      if (!autoMode || typeof resolvedActions.getItems !== 'function') {
+        return Promise.resolve([]);
+      }
+
+      const requestId = autoRequestIdRef.current + 1;
+      autoRequestIdRef.current = requestId;
+
+      if (append) {
+        setAutoLoadingMore(true);
+      } else {
+        setAutoLoading(true);
+        setAutoHasLoaded(false);
+        setAutoLastPageCount(0);
+        autoPageRef.current = 0;
+      }
+
+      const query = buildRequestQuery(page, append);
+
+      return Promise.resolve(resolvedActions.getItems(query))
+        .then(response => {
+          if (autoRequestIdRef.current !== requestId) {
+            return response;
+          }
+
+          const pageItems = normalizeCollectionItems(response);
+          autoPageRef.current = page;
+          autoLoadedQueryKeyRef.current = autoQuerySignature;
+          autoErroredQueryKeyRef.current = '';
+          setAutoHasLoaded(true);
+          setAutoLastPageCount(pageItems.length);
+          return pageItems;
+        })
+        .catch(error => {
+          if (autoRequestIdRef.current === requestId) {
+            autoErroredQueryKeyRef.current = autoQuerySignature;
+            showError?.(
+              error?.message || global.t?.t(storeName, 'error', 'load'),
+            );
+          }
+
+          return [];
+        })
+        .finally(() => {
+          if (autoRequestIdRef.current === requestId) {
+            setAutoLoading(false);
+            setAutoLoadingMore(false);
+            endReachedLockRef.current = false;
+          }
+        });
+    },
+    [
+      autoMode,
+      autoQuerySignature,
+      buildRequestQuery,
+      endReachedLockRef,
+      resolvedActions,
+      showError,
+      storeName,
+    ],
+  );
+
+  return {
+    autoErroredQueryKeyRef,
+    autoHasLoaded,
+    autoLastPageCount,
+    autoLoadedQueryKeyRef,
+    autoLoading,
+    autoLoadingMore,
+    autoPageRef,
+    loadAutoPage,
+    pageSizeNumber,
+  };
+};
+
+const useAutoPageEffect = ({
+  autoErroredQueryKeyRef,
+  autoLoadedQueryKeyRef,
+  autoLoading,
+  autoLoadingMore,
+  autoMode,
+  autoQuerySignature,
+  endReachedLockRef,
+  isFocused,
+  loadAutoPage,
+  resolvedActions,
+}) => {
+  useEffect(() => {
+    if (!autoMode || !isFocused) return;
+    if (typeof resolvedActions.getItems !== 'function') return;
+    if (
+      autoLoading ||
+      autoLoadingMore ||
+      autoLoadedQueryKeyRef.current === autoQuerySignature ||
+      autoErroredQueryKeyRef.current === autoQuerySignature
+    ) {
+      return;
+    }
+
+    endReachedLockRef.current = false;
+    loadAutoPage(1, { append: false });
+  }, [
+    autoErroredQueryKeyRef,
+    autoLoadedQueryKeyRef,
+    autoLoading,
+    autoLoadingMore,
+    autoMode,
+    autoQuerySignature,
+    endReachedLockRef,
+    isFocused,
+    loadAutoPage,
+    resolvedActions,
+  ]);
+};
+
+export const useDefaultTablePagination = ({
+  autoMode,
+  columnsForTable,
+  data,
+  filters,
+  hasMore,
+  isFocused,
+  isLoading,
+  onEndReached,
+  pageSize,
+  requestParams,
+  resolvedActions,
+  resolvedSort,
+  resolvedTotalItems,
+  showError,
+  store,
+  storeName,
+}) => {
+  const endReachedLockRef = useRef(false);
+  const previousPaginationStateRef = useRef({
+    dataLength: Array.isArray(data) ? data.length : 0,
+    filtersKey: JSON.stringify(filters || {}),
+    sortDirection: resolvedSort?.direction,
+    sortField: resolvedSort?.field,
+  });
+  const pageSizeNumber = Number(requestParams.itemsPerPage || pageSize || 50) || 50;
+  const buildRequestQuery = useCallback(
+    (page, append = false) =>
+      buildQueryFromState({
+        append,
+        columnsForTable,
+        filters,
+        page,
+        pageSizeNumber,
+        requestParams,
+        sort: resolvedSort,
+      }),
+    [columnsForTable, filters, pageSizeNumber, requestParams, resolvedSort],
+  );
+  const autoQuerySignature = useMemo(
+    () =>
+      stableSerialize({
+        filters,
+        pageSize: pageSizeNumber,
+        requestParams,
+        sort: resolvedSort,
+      }),
+    [filters, pageSizeNumber, requestParams, resolvedSort],
+  );
+  const {
+    autoErroredQueryKeyRef,
+    autoHasLoaded,
+    autoLastPageCount,
+    autoLoadedQueryKeyRef,
+    autoLoading,
+    autoLoadingMore,
+    autoPageRef,
+    loadAutoPage,
+  } = useAutoPageLoader({
+    autoMode,
+    autoQuerySignature,
+    buildRequestQuery,
+    endReachedLockRef,
+    pageSizeNumber,
+    resolvedActions,
+    showError,
+    storeName,
+  });
+
+  useAutoPageEffect({
+    autoErroredQueryKeyRef,
+    autoLoadedQueryKeyRef,
+    autoLoading,
+    autoLoadingMore,
+    autoMode,
+    autoQuerySignature,
+    endReachedLockRef,
+    isFocused,
+    loadAutoPage,
+    resolvedActions,
+  });
+
+  const resolvedIsLoading = autoMode
+    ? (autoLoading || autoLoadingMore)
+    : Boolean(isLoading);
+  const resolvedData = autoMode
+    ? (autoHasLoaded && Array.isArray(store?.getters?.items) ? store.getters.items : [])
+    : (Array.isArray(data) ? data : []);
+  const resolvedHasMore = useMemo(
+    () => {
+      if (autoMode) {
+        if (Number.isFinite(Number(resolvedTotalItems)) && Number(resolvedTotalItems) > 0) {
+          return resolvedData.length < Number(resolvedTotalItems);
+        }
+
+        return autoLastPageCount >= pageSizeNumber && resolvedData.length > 0;
+      }
+
+      return resolveHasMore({
+        hasMore,
+        dataLength: resolvedData.length,
+        totalItems: resolvedTotalItems,
+      });
+    },
+    [autoLastPageCount, autoMode, hasMore, pageSizeNumber, resolvedData.length, resolvedTotalItems],
+  );
+
+  useEffect(() => {
+    const nextPaginationState = {
+      dataLength: resolvedData.length,
+      filtersKey: stableSerialize(filters || {}),
+      sortDirection: resolvedSort?.direction,
+      sortField: resolvedSort?.field,
+    };
+
+    const previousPaginationState = previousPaginationStateRef.current;
+    const didPaginationStateChange =
+      previousPaginationState.dataLength !== nextPaginationState.dataLength ||
+      previousPaginationState.filtersKey !== nextPaginationState.filtersKey ||
+      previousPaginationState.sortDirection !== nextPaginationState.sortDirection ||
+      previousPaginationState.sortField !== nextPaginationState.sortField;
+
+    if (didPaginationStateChange) {
+      endReachedLockRef.current = false;
+      previousPaginationStateRef.current = nextPaginationState;
+    }
+  }, [filters, resolvedData.length, resolvedSort?.direction, resolvedSort?.field]);
+
+  const handleEndReached = useCallback(() => {
+    if (
+      !resolvedHasMore ||
+      resolvedIsLoading ||
+      endReachedLockRef.current === true
+    ) {
+      return;
+    }
+
+    endReachedLockRef.current = true;
+
+    if (autoMode) {
+      const nextPage = autoPageRef.current + 1;
+      loadAutoPage(nextPage, { append: true });
+      return;
+    }
+
+    if (typeof onEndReached === 'function') {
+      onEndReached();
+    }
+  }, [
+    autoMode,
+    autoPageRef,
+    loadAutoPage,
+    onEndReached,
+    resolvedHasMore,
+    resolvedIsLoading,
+  ]);
+
+  return {
+    buildRequestQuery,
+    currentPage: autoPageRef.current,
+    handleEndReached,
+    pageSizeNumber,
+    resolvedData,
+    resolvedHasMore,
+    resolvedIsLoading,
+  };
+};

package/src/react/components/table/useDefaultTableSorting.js

@@ -0,0 +1,126 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  getSortField,
+  isSortableColumn,
+  normalizeSortText,
+  resolveDefaultSort,
+  resolveSortComparable,
+  sanitizeStoredSortPreference,
+  stableSerialize,
+} from './DefaultTable.utils';
+import {
+  persistTableSortPreference,
+  resolveStoredTableSortPreference,
+} from '../../utils/tableVisibleColumnsPreferences';
+
+export const useDefaultTableSortState = ({
+  autoMode,
+  columnsForTable,
+  onSortChange,
+  sort,
+  tablePreferenceScope,
+}) => {
+  const defaultSortSeed = useMemo(
+    () => resolveDefaultSort(columnsForTable),
+    [columnsForTable],
+  );
+  const storedSortSeed = useMemo(
+    () =>
+      sanitizeStoredSortPreference({
+        columns: columnsForTable,
+        fallbackSort: sort || defaultSortSeed || null,
+        sort: resolveStoredTableSortPreference(tablePreferenceScope),
+      }),
+    [columnsForTable, defaultSortSeed, sort, tablePreferenceScope],
+  );
+  const storedSortSeedSignature = useMemo(
+    () => stableSerialize(storedSortSeed),
+    [storedSortSeed],
+  );
+  const [autoSort, setAutoSort] = useState(() => storedSortSeed);
+  const appliedSortSeedSignatureRef = useRef(storedSortSeedSignature);
+  const resolvedSort = autoMode ? autoSort : sort;
+
+  useEffect(() => {
+    if (!autoMode) return;
+    if (appliedSortSeedSignatureRef.current === storedSortSeedSignature) return;
+
+    appliedSortSeedSignatureRef.current = storedSortSeedSignature;
+    setAutoSort(prev =>
+      stableSerialize(prev) === storedSortSeedSignature
+        ? prev
+        : storedSortSeed,
+    );
+  }, [autoMode, storedSortSeed, storedSortSeedSignature]);
+
+  const requestSort = useCallback(column => {
+    if (!isSortableColumn(column)) return;
+
+    const fieldName = getSortField(column);
+    const nextDirection =
+      resolvedSort?.field === fieldName && resolvedSort?.direction === 'asc'
+        ? 'desc'
+        : 'asc';
+    const nextSort = {
+      direction: nextDirection,
+      field: fieldName,
+    };
+
+    persistTableSortPreference(tablePreferenceScope, nextSort);
+
+    if (autoMode) {
+      setAutoSort(nextSort);
+      return;
+    }
+
+    onSortChange?.(nextSort);
+  }, [
+    autoMode,
+    onSortChange,
+    resolvedSort?.direction,
+    resolvedSort?.field,
+    tablePreferenceScope,
+  ]);
+
+  return {
+    requestSort,
+    resolvedSort,
+  };
+};
+
+export const useDefaultTableSortedData = ({
+  resolvedData,
+  resolvedSort,
+  storeName,
+  tableColumns,
+}) =>
+  useMemo(() => {
+    const items = Array.isArray(resolvedData) ? [...resolvedData] : [];
+    const sortField = resolvedSort?.field;
+    const sortDirection = resolvedSort?.direction === 'desc' ? 'desc' : 'asc';
+    const sortColumn = tableColumns.find(column => getSortField(column) === sortField);
+
+    if (!sortField || !sortColumn) return items;
+
+    return items.sort((left, right) => {
+      const leftValue = resolveSortComparable({
+        column: sortColumn,
+        columns: tableColumns,
+        row: left,
+        storeName,
+      });
+      const rightValue = resolveSortComparable({
+        column: sortColumn,
+        columns: tableColumns,
+        row: right,
+        storeName,
+      });
+
+      const comparison =
+        typeof leftValue === 'number' && typeof rightValue === 'number'
+          ? leftValue - rightValue
+          : normalizeSortText(leftValue).localeCompare(normalizeSortText(rightValue));
+
+      return sortDirection === 'desc' ? comparison * -1 : comparison;
+    });
+  }, [resolvedData, resolvedSort?.direction, resolvedSort?.field, storeName, tableColumns]);

package/src/react/components/table/useDefaultTableTheme.js

@@ -0,0 +1,52 @@
+import { useMemo } from 'react';
+import { useStore } from '@store';
+
+const useDefaultTableTheme = (accentColor = null) => {
+  const themeStore = useStore('theme');
+  const themeColors = themeStore.getters.colors;
+  const themeTokens = useMemo(
+    () => ({ ...themeColors }),
+    [themeColors],
+  );
+  const palette = themeColors;
+  const resolvedAccentColor = accentColor ?? themeColors.primary;
+
+  return {
+    palette,
+    resolvedAccentColor,
+    themeColors,
+    themeTokens,
+    checkboxBorderColor: themeColors.checkboxBorder,
+    checkboxSelectedMarkColor: themeColors.checkboxSelectedMark,
+    modalColors: {
+      backgroundColor: themeColors.modalBackground,
+      borderColor: themeColors.modalBorder,
+      closeIconColor: themeColors.modalCloseIcon,
+      headerTextColor: themeColors.modalHeaderText,
+      overlayColor: themeColors.modalOverlay,
+      textColor: themeColors.modalText,
+    },
+    tableButtonColors: {
+      backgroundColor: themeColors.buttonBackground,
+      borderColor: themeColors.buttonBorder,
+      iconColor: themeColors.buttonIcon,
+      pressedBackgroundColor: themeColors.buttonPressedBackground,
+      pressedBorderColor: themeColors.buttonPressedBorder,
+      pressedIconColor: themeColors.buttonPressedIcon,
+      textColor: themeColors.buttonText,
+    },
+    tableActionColors: {
+      backgroundColor: themeColors.tableActionBackground,
+      borderColor: themeColors.tableActionBorder,
+      textColor: themeColors.tableActionIcon,
+    },
+    toolbarColors: {
+      backgroundColor: themeColors.toolbarBackground,
+      borderColor: themeColors.toolbarBorder,
+      countBackgroundColor: themeColors.badgeBackground,
+      countTextColor: themeColors.badgeText,
+    },
+  };
+};
+
+export default useDefaultTableTheme;