@controleonline/ui-default 1.0.269 → 1.0.272

package/src/react/components/files/DefaultFileColumn.utils.js

@@ -0,0 +1,104 @@
+import {extractFileId, resolveDefaultFileUrl} from '@controleonline/ui-common/src/react/utils/fileUrl';
+
+const FILE_INPUT_TYPES = new Set([
+  'document',
+  'documents',
+  'file',
+  'files',
+  'image',
+  'images',
+  'pdf',
+]);
+
+const IMAGE_EXTENSIONS = new Set(['avif', 'bmp', 'gif', 'ico', 'jpeg', 'jpg', 'png', 'svg', 'webp']);
+const PDF_EXTENSIONS = new Set(['pdf']);
+const DOCUMENT_EXTENSIONS = new Set(['doc', 'docx', 'odt', 'rtf', 'xls', 'xlsx', 'ods', 'ppt', 'pptx', 'odp']);
+
+export const normalizeFileColumnText = value => String(value ?? '').trim();
+
+export const normalizeFileColumnType = value =>
+  normalizeFileColumnText(value).replace(/[^a-z0-9]/gi, '').toLowerCase();
+
+export const isFileInputColumn = column =>
+  FILE_INPUT_TYPES.has(normalizeFileColumnType(column?.inputType));
+
+const asArray = value => {
+  if (Array.isArray(value)) return value;
+  if (value === undefined || value === null || value === '') return [];
+  if (typeof value === 'string' && value.includes(',')) {
+    return value
+      .split(',')
+      .map(item => item.trim())
+      .filter(Boolean);
+  }
+
+  return [value];
+};
+
+const pickFilePayload = item =>
+  item && typeof item === 'object' && !Array.isArray(item) && item.file
+    ? item.file
+    : item;
+
+const resolveForcedFileType = column => {
+  const inputType = normalizeFileColumnType(column?.inputType);
+  if (inputType === 'image' || inputType === 'images') return 'image';
+  if (inputType === 'pdf') return 'application';
+  if (inputType === 'document' || inputType === 'documents') return 'document';
+  return normalizeFileColumnText(column?.fileType);
+};
+
+const resolveForcedExtension = column => {
+  const inputType = normalizeFileColumnType(column?.inputType);
+  if (inputType === 'pdf') return 'pdf';
+  return normalizeFileColumnText(column?.extension).toLowerCase();
+};
+
+const resolveKind = ({fileType, extension}) => {
+  const normalizedType = normalizeFileColumnType(fileType);
+  const normalizedExtension = normalizeFileColumnText(extension).replace(/^\./, '').toLowerCase();
+
+  if (normalizedType === 'image' || IMAGE_EXTENSIONS.has(normalizedExtension)) return 'image';
+  if (PDF_EXTENSIONS.has(normalizedExtension)) return 'pdf';
+  if (DOCUMENT_EXTENSIONS.has(normalizedExtension) || normalizedType === 'document') return 'document';
+  if (normalizedType === 'text') return 'text';
+  if (normalizedType === 'audio') return 'audio';
+  if (normalizedType === 'video') return 'video';
+  return 'file';
+};
+
+export const normalizeDefaultFileColumnItems = ({
+  column = {},
+  company = null,
+  row = {},
+  value,
+} = {}) =>
+  asArray(value ?? row?.[column?.key || column?.name]).map((item, index) => {
+    const payload = pickFilePayload(item);
+    const isObject = payload && typeof payload === 'object' && !Array.isArray(payload);
+    const id = extractFileId(payload);
+    const fileType = isObject
+      ? normalizeFileColumnText(payload.fileType) || resolveForcedFileType(column)
+      : resolveForcedFileType(column);
+    const extension = isObject
+      ? normalizeFileColumnText(payload.extension).toLowerCase() || resolveForcedExtension(column)
+      : resolveForcedExtension(column);
+    const url = isObject && typeof payload.url === 'string'
+      ? payload.url
+      : resolveDefaultFileUrl(payload, {company});
+    const driveUrl = isObject && typeof payload.driveUrl === 'string'
+      ? payload.driveUrl
+      : '';
+
+    return {
+      extension,
+      fileName: isObject ? normalizeFileColumnText(payload.fileName) : '',
+      fileType,
+      id,
+      key: `${id || normalizeFileColumnText(payload) || index}`,
+      kind: resolveKind({fileType, extension}),
+      openUrl: driveUrl || url,
+      relationId: item && typeof item === 'object' && !Array.isArray(item) ? extractFileId(item) : null,
+      source: payload,
+    };
+  });

package/src/react/components/filters/CompactFilterSelector.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import {
   Image,
   Modal,
@@ -7,10 +7,11 @@ import {
   TextInput,
   TouchableOpacity,
   TouchableWithoutFeedback,
-  useWindowDimensions,
-  View,
-} from 'react-native';
-import Icon from 'react-native-vector-icons/Feather';
+  useWindowDimensions,
+  View,
+} from 'react-native';
+import { useStore } from '@store';
+import Icon from 'react-native-vector-icons/Feather';
 import {
   formatStoreColumnLabel,
   resolveStoreColumn,
@@ -19,16 +20,16 @@ import {
 import { isValidFeatherIcon } from '../inputs/defaultInputUtils';
 import createStyles from './CompactFilterSelector.styles';
 
-const buildTheme = ({ accentColor, themeColors = {} }) => ({
-  accentColor: accentColor,
-  activeBackgroundColor:
-    themeColors.activeBackgroundColor || `${accentColor}14`,
-  activeIconBackgroundColor:
-    themeColors.activeIconBackgroundColor || `${accentColor}24`,
-  activeChevronColor:
-    themeColors.activeChevronColor ||
-    themeColors.activeIconColor ||
-    accentColor,
+const buildTheme = ({ accentColor, themeColors = {} }) => ({
+  accentColor: accentColor,
+  activeBackgroundColor:
+    themeColors.activeBackgroundColor || (accentColor ? `${accentColor}14` : themeColors.backgroundColor),
+  activeIconBackgroundColor:
+    themeColors.activeIconBackgroundColor || (accentColor ? `${accentColor}24` : themeColors.iconBackgroundColor),
+  activeChevronColor:
+    themeColors.activeChevronColor ||
+    themeColors.activeIconColor ||
+    accentColor,
   activeIconColor: themeColors.activeIconColor || accentColor,
   activeTextColor: themeColors.activeTextColor || accentColor,
   backgroundColor: themeColors.backgroundColor || '#F8FAFC',
@@ -44,10 +45,10 @@ const buildTheme = ({ accentColor, themeColors = {} }) => ({
   modalTitleColor: themeColors.modalTitleColor || '#0F172A',
   optionBackgroundColor: themeColors.optionBackgroundColor || '#F8FAFC',
   optionBorderColor: themeColors.optionBorderColor || '#E2E8F0',
-  optionSelectedTextColor:
-    themeColors.optionSelectedTextColor || accentColor,
-  textColor: themeColors.textColor || '#0F172A',
-});
+  optionSelectedTextColor:
+    themeColors.optionSelectedTextColor || accentColor,
+  textColor: themeColors.textColor || '#0F172A',
+});
 
 const noop = () => {};
 
@@ -82,12 +83,12 @@ const resolveStoreFieldLabel = ({ fallbackLabel = '', field = '', store = '' })
   );
 };
 
-const CompactFilterSelector = ({
-  accentColor = '#2563EB',
-  active = false,
-  children = null,
-  dense = false,
-  disabled = false,
+const CompactFilterSelector = ({
+  accentColor = null,
+  active = false,
+  children = null,
+  dense = false,
+  disabled = false,
   icon = 'sliders',
   label = '',
   labelCaption = '',
@@ -98,18 +99,33 @@ const CompactFilterSelector = ({
   options = [],
   searchable = false,
   selectedKey = '',
-  field = '',
-  store = '',
-  themeColors = {},
-  title = '',
-}) => {
+  field = '',
+  store = '',
+  themeColors = {},
+  title = '',
+}) => {
+  const themeStore = useStore('theme');
   const [visible, setVisible] = useState(false);
   const [searchText, setSearchText] = useState('');
-  const { width: windowWidth } = useWindowDimensions();
-  const resolvedTheme = useMemo(
-    () => buildTheme({ accentColor, themeColors }),
-    [accentColor, themeColors],
-  );
+  const { width: windowWidth } = useWindowDimensions();
+  const themeStoreColors = themeStore?.getters?.colors || {};
+  const resolvedAccentColor =
+    accentColor ||
+    themeColors.primary ||
+    themeColors.accent ||
+    themeStoreColors.primary ||
+    themeStoreColors.accent ||
+    '';
+  const resolvedTheme = useMemo(
+    () => buildTheme({
+      accentColor: resolvedAccentColor,
+      themeColors: {
+        ...themeStoreColors,
+        ...themeColors,
+      },
+    }),
+    [resolvedAccentColor, themeColors, themeStoreColors],
+  );
   const styles = useMemo(
     () => createStyles(resolvedTheme, dense, windowWidth),
     [dense, resolvedTheme, windowWidth],

package/src/react/components/filters/DefaultColumnFilter.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { TextInput, View } from 'react-native';
 import { getAllStores, useStore } from '@store';
 import {
@@ -13,6 +13,7 @@ import {
 import CompactFilterSelector from './CompactFilterSelector';
 import DateShortcutFilter from './DateShortcutFilter';
 import { resolveNextDateFilterValue } from './dateFilterSelection';
+import useDefaultTableTheme from '@controleonline/ui-default/src/react/components/table/useDefaultTableTheme';
 import {
   normalizeCollectionItems,
   resolveColumnListLoadParams,
@@ -25,9 +26,9 @@ import {
   sanitizeTableFiltersPreference,
 } from '../../utils/tableVisibleColumnsPreferences';
 import styles from './DefaultColumnFilter.styles';
-
-const DefaultColumnFilter = ({
-  accentColor = '#2563EB',
+
+const DefaultColumnFilter = ({
+  accentColor = null,
   column,
   filters = {},
   onBeforeOpen = null,
@@ -35,15 +36,22 @@ const DefaultColumnFilter = ({
   getOptionsForColumn = null,
   onChange = null,
   storeName = '',
-  style = null,
+  style = null,
 }) => {
   const store = useStore(storeName);
   const peopleStore = useStore('people');
   const configs = store?.getters?.configs || {};
+  const { resolvedAccentColor } = useDefaultTableTheme(accentColor);
   const [loadedItems, setLoadedItems] = useState([]);
   const [loadedKey, setLoadedKey] = useState('');
   const fieldName = getColumnKey(column);
   const currentCompanyId = peopleStore?.getters?.currentCompany?.id;
+
+  useEffect(() => {
+    setLoadedItems([]);
+    setLoadedKey('');
+  }, [currentCompanyId]);
+
   const requestChange = useCallback(
     (nextFieldName, value) => {
       if (typeof onChange === 'function') {
@@ -65,7 +73,10 @@ const DefaultColumnFilter = ({
       const columns = Array.isArray(store?.getters?.columns) ? store.getters.columns : [];
       const tablePreferenceScope =
         configs.tablePreferenceScope ||
-        resolveDefaultTablePreferenceScope({ storeName });
+        resolveDefaultTablePreferenceScope({
+          companyId: currentCompanyId,
+          storeName,
+        });
       const persistedFilters = sanitizeTableFiltersPreference({
         columns,
         filters: nextFilters,
@@ -81,7 +92,7 @@ const DefaultColumnFilter = ({
 
       configs.onFilterChange?.(nextFilters);
     },
-    [configs, onChange, store, storeName],
+    [configs, currentCompanyId, onChange, store, storeName],
   );
   const resolveOptions = useCallback(
     targetColumn => {
@@ -149,11 +160,11 @@ const DefaultColumnFilter = ({
       loadedKey,
     ],
   );
-
-  if (column?.filter === false || column?.filters === false) {
-    return <View style={style} />;
-  }
-
+
+  if (column?.filter === false || column?.filters === false) {
+    return <View style={style} />;
+  }
+
   if (isDateLikeColumn(column)) {
     const filterValue = filters?.[fieldName] || {};
     return (
@@ -164,7 +175,7 @@ const DefaultColumnFilter = ({
           field={fieldName}
           labelCaption={global.t?.t(storeName, 'label', column?.label || fieldName)}
           value={filterValue.shortcut || 'all'}
-          customRange={filterValue.customRange || { from: '', to: '' }}
+          customRange={filterValue.customRange || { from: '', to: '' }}
           onChange={optionKey =>
             requestChange(
               fieldName,
@@ -175,25 +186,31 @@ const DefaultColumnFilter = ({
             ...(filterValue || {}),
             shortcut: 'custom',
             customRange: range,
-          })}
-        />
-      </View>
-    );
-  }
-
+          })}
+        />
+      </View>
+    );
+  }
+
   if (column?.list) {
-    const rawOptions = loadedItems.length > 0
-      ? mapOptions(column, loadedItems, storeName)
-      : buildOptionsFromColumn(column, resolveOptions, storeName);
+    /*
+     * @agents List options for filters must load only when the modal opens
+     * (onBeforeOpen). Falling back to the shared store items would show
+     * another company's payment types / wallets / categories.
+     */
+    const explicitOptions = resolveOptions(column);
+    const rawOptions = Array.isArray(explicitOptions)
+      ? mapOptions(column, explicitOptions, storeName)
+      : mapOptions(column, loadedItems, storeName);
     const options = [
       { key: '', label: global.t?.t(storeName, 'label', 'select') },
       ...rawOptions,
     ];
-    const selectedKey = normalizeOptionKey(filters?.[fieldName]);
-    const selected = options.find(option => option.key === selectedKey);
-
-    return (
-      <View style={[style, styles.filterCell]}>
+    const selectedKey = normalizeOptionKey(filters?.[fieldName]);
+    const selected = options.find(option => option.key === selectedKey);
+
+    return (
+      <View style={[style, styles.filterCell]}>
         <CompactFilterSelector
           dense
           store={storeName}
@@ -201,7 +218,7 @@ const DefaultColumnFilter = ({
           icon="filter"
           onBeforeOpen={onBeforeOpen || (() => loadListOptions())}
           onSearchChange={onSearchChange || (value => loadListOptions(value))}
-          accentColor={accentColor}
+          accentColor={resolvedAccentColor}
           active={Boolean(selectedKey)}
           label={selected?.label || options[0]?.label || ''}
           options={options}
@@ -211,21 +228,21 @@ const DefaultColumnFilter = ({
             requestChange(fieldName, optionKey);
             return true;
           }}
-        />
-      </View>
-    );
-  }
-
-  return (
-    <View style={[style, styles.filterCell]}>
-      <TextInput
+        />
+      </View>
+    );
+  }
+
+  return (
+    <View style={[style, styles.filterCell]}>
+      <TextInput
         style={styles.filterInput}
         value={normalizeText(filters?.[fieldName])}
         placeholder={global.t?.t(storeName, 'input', column?.label || fieldName)}
         onChangeText={value => requestChange(fieldName, value)}
       />
-    </View>
-  );
-};
-
-export default DefaultColumnFilter;
+    </View>
+  );
+};
+
+export default DefaultColumnFilter;