@controleonline/ui-default 1.0.264 → 1.0.266

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

@@ -0,0 +1,205 @@
+import React from 'react';
+import { Text, TouchableOpacity } from 'react-native';
+import Icon from 'react-native-vector-icons/Feather';
+import { useStore } from '@store';
+import DefaultColumnMenu from './DefaultColumnMenu';
+import DefaultDebug from './DefaultDebug';
+import DefaultFiltersModal from './DefaultFiltersModal';
+import DefaultModalButton from './DefaultModalButton';
+import styles from './DefaultTable.styles';
+import { normalizeText } from '../inputs/defaultInputUtils';
+import {
+  persistTableViewModePreference,
+  resolveDefaultTablePreferenceScope,
+} from '../../utils/tableVisibleColumnsPreferences';
+import { shouldIncludeColumn } from './DefaultTable.utils';
+import useDefaultTableTheme from './useDefaultTableTheme';
+
+const DefaultTableControls = ({ storeName }) => {
+  const store = useStore(storeName);
+  const configs = store?.getters?.configs || {};
+  const effectiveViewMode =
+    configs.effectiveViewMode ||
+    configs.viewMode ||
+    configs.initialViewMode ||
+    'table';
+  const tablePreferenceScope =
+    configs.tablePreferenceScope ||
+    resolveDefaultTablePreferenceScope({ storeName });
+  const columns = Array.isArray(store?.getters?.columns) ? store.getters.columns : [];
+  const filters = store?.getters?.filters || {};
+  const hasFilterableColumns = columns.some(
+    column =>
+      configs.showColumnFiltersButton !== false &&
+      shouldIncludeColumn(column) &&
+      column?.filter !== false &&
+      column?.filters !== false,
+  );
+  const tableFiltersVisible = Boolean(configs.tableFiltersVisible);
+  const activeFilterCount = Object.values(filters).filter(value => normalizeText(value) !== '').length;
+  const addConfig = store?.getters?.add;
+  const shouldRenderAddButton =
+    (addConfig === true || configs.add === true) &&
+    (typeof configs.onAdd === 'function' || typeof store?.actions?.save === 'function');
+  const { tableButtonColors } = useDefaultTableTheme();
+  const {
+    backgroundColor,
+    borderColor,
+    iconColor,
+    pressedBackgroundColor,
+    pressedBorderColor,
+    pressedIconColor,
+    textColor,
+  } = tableButtonColors;
+
+  const buttonStyle = [
+    styles.toolbarButton,
+    { borderColor, backgroundColor },
+  ];
+  const pressedStyle = {
+    backgroundColor: pressedBackgroundColor,
+    borderColor: pressedBorderColor,
+  };
+  const updateConfigs = nextConfigs => {
+    if (typeof store?.actions?.setConfigs === 'function') {
+      store.actions.setConfigs(nextConfigs);
+      return;
+    }
+
+    if (store?.getters) {
+      store.getters.configs = nextConfigs;
+    }
+  };
+  const nextViewMode = effectiveViewMode === 'table' ? 'cards' : 'table';
+
+  return (
+    <>
+      <DefaultDebug storeName={storeName} />
+      {hasFilterableColumns && effectiveViewMode === 'table' ? (
+        <TouchableOpacity
+          style={[
+            ...buttonStyle,
+            tableFiltersVisible ? pressedStyle : null,
+          ]}
+          activeOpacity={0.82}
+          onPress={() =>
+            updateConfigs({
+              ...configs,
+              tableFiltersVisible: !tableFiltersVisible,
+            })
+          }
+        >
+          <Icon
+            name="filter"
+            size={14}
+            color={tableFiltersVisible ? pressedIconColor : textColor}
+          />
+          {activeFilterCount > 0 ? (
+            <Text
+              style={[
+                styles.toolbarBadgeText,
+                { color: tableFiltersVisible ? pressedIconColor : textColor },
+              ]}
+            >
+              {activeFilterCount}
+            </Text>
+          ) : null}
+        </TouchableOpacity>
+      ) : null}
+      {hasFilterableColumns && effectiveViewMode === 'cards' ? (
+        <DefaultModalButton
+          renderButton={({ isOpen, open }) => (
+            <TouchableOpacity
+              style={[
+                ...buttonStyle,
+                isOpen ? pressedStyle : null,
+              ]}
+              activeOpacity={0.82}
+              onPress={open}
+            >
+              <Icon
+                name="filter"
+                size={14}
+                color={isOpen ? pressedIconColor : textColor}
+              />
+              {activeFilterCount > 0 ? (
+                <Text
+                  style={[
+                    styles.toolbarBadgeText,
+                    { color: isOpen ? pressedIconColor : textColor },
+                  ]}>
+                  {activeFilterCount}
+                </Text>
+              ) : null}
+            </TouchableOpacity>
+          )}
+        >
+          {({ close, isOpen }) => (
+            <DefaultFiltersModal
+              storeName={storeName}
+              visible={isOpen}
+              onClose={close}
+            />
+          )}
+        </DefaultModalButton>
+      ) : null}
+      <TouchableOpacity
+        style={buttonStyle}
+        activeOpacity={0.82}
+        onPress={() => {
+          const nextConfigs = {
+            ...configs,
+            effectiveViewMode: nextViewMode,
+            viewMode: nextViewMode,
+          };
+
+          persistTableViewModePreference(tablePreferenceScope, nextConfigs.viewMode);
+          updateConfigs(nextConfigs);
+        }}
+      >
+        <Icon
+          name={nextViewMode === 'cards' ? 'grid' : 'list'}
+          size={14}
+          color={textColor}
+        />
+      </TouchableOpacity>
+      <DefaultModalButton
+        renderButton={({ isOpen, toggle }) => (
+          <TouchableOpacity
+            style={[
+              ...buttonStyle,
+              isOpen ? pressedStyle : null,
+            ]}
+            activeOpacity={0.82}
+            onPress={toggle}
+          >
+            <Icon name="columns" size={14} color={isOpen ? pressedIconColor : textColor} />
+          </TouchableOpacity>
+        )}
+      >
+        {({ close, isOpen }) => (
+          <DefaultColumnMenu
+            storeName={storeName}
+            visible={isOpen}
+            onClose={close}
+          />
+        )}
+      </DefaultModalButton>
+      {shouldRenderAddButton ? (
+        <TouchableOpacity
+          style={[
+            styles.toolbarButton,
+            styles.toolbarAddButton,
+            { backgroundColor: backgroundColor, borderColor: backgroundColor },
+          ]}
+          activeOpacity={0.85}
+          onPress={() => configs.onAdd?.()}
+        >
+          <Icon name="plus" size={16} color={textColor} />
+        </TouchableOpacity>
+      ) : null}
+    </>
+  );
+};
+
+export default DefaultTableControls;

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+import StateStore from '@controleonline/ui-common/src/react/components/StateStore';
+import styles from './DefaultTable.styles';
+
+const DefaultTableEmptyState = ({
+  emptyStateLabel,
+  isLoading,
+  isTable = false,
+  tableLayoutStyle = null,
+  tableMutedColor,
+}) => (
+  <View style={[styles.emptyBox, isTable ? tableLayoutStyle : null]}>
+    {isLoading ? (
+      <StateStore compact loading={emptyStateLabel} />
+    ) : (
+      <Text style={[styles.emptyText, { color: tableMutedColor }]}>{emptyStateLabel}</Text>
+    )}
+  </View>
+);
+
+export default DefaultTableEmptyState;

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

@@ -0,0 +1,172 @@
+import React, { useMemo } from 'react';
+import { Text, View } from 'react-native';
+import { useStore } from '@store';
+import { formatStoreColumnLabel } from '@controleonline/ui-common/src/react/utils/storeColumns';
+import { getColumnKey, normalizeText } from '../inputs/defaultInputUtils';
+import {
+  flattenSummaryEntries,
+  formatSummaryValue,
+  getSummaryField,
+  getSummaryOperations,
+  isObject,
+} from './DefaultTable.utils';
+import styles from './DefaultTable.styles';
+import useDefaultTableTheme from './useDefaultTableTheme';
+
+const DefaultTableFooter = ({ storeName }) => {
+  const store = useStore(storeName);
+  const configs = store?.getters?.configs || {};
+  const columns = Array.isArray(store?.getters?.columns) ? store.getters.columns : [];
+  const footerComponent = configs.footerComponent || null;
+  const isCompactView = false;
+  const showTotalItemsInCompactToolbar = configs.showTotalItemsInCompactToolbar === true;
+  const showTotalItemsInFooter = configs.showTotalItemsInFooter !== false;
+  const tableColumns = columns;
+  const { themeColors } = useDefaultTableTheme();
+  const tableFooterBackgroundColor = themeColors.tableFooterBackground;
+  const tableFooterBorderColor = themeColors.tableFooterBorder;
+  const tableFooterTextColor = themeColors.tableFooterText;
+  const toolbarCountBackgroundColor = themeColors.badgeBackground;
+  const toolbarCountTextColor = themeColors.badgeText;
+  const storeTotalItems = store?.getters?.totalItems;
+  const resolvedTotalItems = storeTotalItems;
+  const totalItemsNumber = Number(resolvedTotalItems);
+  const shouldRenderTotalItems =
+    resolvedTotalItems !== null &&
+    resolvedTotalItems !== undefined &&
+    Number.isFinite(totalItemsNumber);
+  const shouldRenderFooterTotalItems =
+    shouldRenderTotalItems &&
+    showTotalItemsInFooter !== false;
+  const shouldRenderCompactToolbarTotalItems =
+    showTotalItemsInCompactToolbar === true &&
+    isCompactView &&
+    shouldRenderTotalItems &&
+    !shouldRenderFooterTotalItems;
+  const resolvedTotalItemsText =
+    shouldRenderTotalItems
+      ? `${totalItemsNumber} ${global.t?.t(storeName, 'label', 'items')}`
+      : '';
+  const configuredSummary = configs.summary;
+  const resolvedSummary = configuredSummary !== undefined
+    ? configuredSummary
+    : store?.getters?.summary;
+  const summaryLabels = isObject(configs.summaryLabels) ? configs.summaryLabels : {};
+  const shouldReadSummary = resolvedSummary !== false && isObject(resolvedSummary);
+  const summaryEntries = useMemo(() => {
+    if (!shouldReadSummary) return [];
+
+    const usedPaths = new Set();
+    const columnEntries = tableColumns.flatMap(column => {
+      const operations = getSummaryOperations(column);
+      if (!operations.length) return [];
+
+      const fieldName = getColumnKey(column);
+      const columnLabel = formatStoreColumnLabel({
+        columns,
+        fieldName,
+        fallbackLabel: column?.label || fieldName,
+        storeName,
+      });
+
+      return operations.map(operation => {
+        const summaryField = getSummaryField(column, operation);
+        const path = [operation, summaryField];
+        const pathKey = path.join('.');
+        const value = resolvedSummary?.[operation]?.[summaryField];
+        if (value === undefined) return null;
+
+        usedPaths.add(pathKey);
+
+        return {
+          key: pathKey,
+            label: operations.length > 1 ? `${columnLabel} ${operation}` : columnLabel,
+          path,
+          value,
+          column,
+        };
+      }).filter(Boolean);
+    });
+
+      const genericEntries = flattenSummaryEntries({
+        summaryLabels,
+        usedPaths,
+        value: resolvedSummary,
+      });
+
+    return [...columnEntries, ...genericEntries].filter(entry =>
+      entry?.value !== undefined &&
+      entry?.value !== null &&
+      normalizeText(entry.value) !== '',
+    );
+  }, [columns, resolvedSummary, shouldReadSummary, storeName, summaryLabels, tableColumns]);
+  const shouldRenderFooterBar =
+    (shouldRenderFooterTotalItems && !shouldRenderCompactToolbarTotalItems) ||
+    summaryEntries.length > 0;
+
+  if (footerComponent) {
+    const footerProps = {
+      columns,
+      resolvedTotalItemsText,
+      shouldRenderCompactToolbarTotalItems,
+      shouldRenderFooterTotalItems,
+      storeName,
+      summaryEntries,
+    };
+
+    return React.isValidElement(footerComponent)
+      ? footerComponent
+      : React.createElement(footerComponent, footerProps);
+  }
+
+  if (!shouldRenderFooterBar) {
+    return null;
+  }
+
+  return (
+    <View style={[styles.footerBar, { backgroundColor: tableFooterBackgroundColor, borderTopColor: tableFooterBorderColor }]}>
+      {summaryEntries.length > 0 ? (
+        <View style={styles.footerSummaryList}>
+          {summaryEntries.map(entry => (
+            <View key={entry.key} style={styles.footerSummaryItem}>
+              <Text style={[styles.footerSummaryLabel, { color: tableFooterTextColor }]} numberOfLines={1}>
+                {entry.label}
+              </Text>
+              <Text
+                style={[
+                  styles.footerSummaryValue,
+                  { color: tableFooterTextColor },
+                ]}
+                numberOfLines={1}
+                adjustsFontSizeToFit
+                minimumFontScale={0.78}
+              >
+                {formatSummaryValue({
+                  column: entry.column,
+                  columns,
+                  path: entry.path,
+                  storeName,
+                  value: entry.value,
+                })}
+              </Text>
+            </View>
+          ))}
+        </View>
+      ) : null}
+      {shouldRenderFooterTotalItems && !shouldRenderCompactToolbarTotalItems ? (
+        <View style={[styles.footerCountPill, { backgroundColor: toolbarCountBackgroundColor }]}>
+          <Text
+            style={[styles.footerCountText, { color: toolbarCountTextColor }]}
+            numberOfLines={1}
+            adjustsFontSizeToFit
+            minimumFontScale={0.82}
+          >
+            {resolvedTotalItemsText}
+          </Text>
+        </View>
+      ) : null}
+    </View>
+  );
+};
+
+export default DefaultTableFooter;

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

@@ -0,0 +1,145 @@
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import { useStore } from '@store';
+import DefaultInput from '../inputs/DefaultInput';
+import {
+  formatSaveValue,
+  getColumnKey,
+  isEditableColumn,
+  normalizeId,
+} from '../inputs/defaultInputUtils';
+import { getColumnStyle } from './DefaultTable.utils';
+import styles from './DefaultTable.styles';
+import useDefaultTableTheme from './useDefaultTableTheme';
+
+const STORE_ACTION_META_KEY = '__storeMeta';
+
+const isPlainObject = value =>
+  value !== null && typeof value === 'object' && !Array.isArray(value);
+
+const asStyleArray = style => (Array.isArray(style) ? style : [style]).filter(Boolean);
+
+const buildSavedItemPatch = (column, fieldName, value) => {
+  if (!column?.list || !fieldName || !isPlainObject(value)) {
+    return {};
+  }
+
+  if (isPlainObject(value.object)) {
+    return {
+      [fieldName]: value.object,
+    };
+  }
+
+  if (value.value == null && value.label == null) {
+    return {};
+  }
+
+  const labelField = column?.listSearchParam || column?.searchParam || fieldName;
+
+  return {
+    [fieldName]: {
+      id: value.value,
+      value: value.value,
+      label: value.label,
+      [labelField]: value.label,
+    },
+  };
+};
+
+const DefaultTableInput = ({
+  column: columnProp = null,
+  fieldName = '',
+  options = {},
+  row = {},
+  storeName = '',
+  variant = 'cell',
+}) => {
+  const store = useStore(storeName);
+  const configs = store?.getters?.configs || {};
+  const [isEditing, setIsEditing] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const columns = Array.isArray(store?.getters?.columns) ? store.getters.columns : [];
+  const hasRowPress = false;
+  const { resolvedAccentColor } = useDefaultTableTheme();
+  const column = columnProp || columns.find(item => getColumnKey(item) === fieldName);
+
+  if (!column) return null;
+
+  const resolvedFieldName = getColumnKey(column);
+  const input = (
+    <DefaultInput
+      accentColor={options.accentColor || resolvedAccentColor}
+      column={column}
+      columns={columns}
+      containerStyle={options.containerStyle}
+      displayValue={options.displayValue}
+      editing={isEditing}
+      getOptionsForColumn={configs.getOptionsForColumn}
+      inputStyle={options.inputStyle}
+      label={options.label}
+      numberOfLines={options.numberOfLines}
+      onCancelEditing={() => setIsEditing(false)}
+      onSave={value => {
+        if (typeof store?.actions?.save !== 'function') {
+          setIsEditing(false);
+          return Promise.resolve(null);
+        }
+
+        setIsSaving(true);
+        const savedItemPatch = buildSavedItemPatch(column, resolvedFieldName, value);
+        const storeMeta =
+          Object.keys(savedItemPatch).length > 0
+            ? {
+                [STORE_ACTION_META_KEY]: {
+                  savedItemPatch,
+                },
+              }
+            : {};
+
+        return Promise.resolve(
+          store.actions.save({
+            id: normalizeId(row?.['@id'] || row?.id),
+            [resolvedFieldName]: formatSaveValue(column, value, row),
+            ...storeMeta,
+          }),
+        )
+          .then(savedItem => {
+            configs.onSaved?.(savedItem, row);
+            return savedItem;
+          })
+          .finally(() => {
+          setIsSaving(false);
+          setIsEditing(false);
+        });
+      }}
+      onStartEditing={() => setIsEditing(true)}
+      readTextStyle={options.readTextStyle || options.textStyle}
+      row={row}
+      saving={isSaving}
+      showLabel={options.showLabel}
+      storeName={storeName}
+      variant={options.variant || variant}
+    />
+  );
+
+  if (variant !== 'cell') {
+    return input;
+  }
+
+  const shouldDelegatePress = hasRowPress && !isEditableColumn(column);
+
+  return (
+    <View
+      style={[
+        ...asStyleArray(getColumnStyle(column)),
+        ...asStyleArray(options.cellStyle),
+        isEditing ? styles.editingCell : null,
+      ]}
+      pointerEvents={shouldDelegatePress ? 'none' : 'auto'}
+    >
+      {input}
+    </View>
+  );
+};
+
+export default DefaultTableInput;