@antscorp/antsomi-ui 1.3.5-beta.481 → 1.3.5-beta.482

package/es/components/organism/DataTable/components/Filter/FilterItem.js

@@ -17,15 +17,17 @@ import { Icon, Typography } from '@antscorp/antsomi-ui/es/components/atoms';
 // Styled
 import { StyledFilterItem } from './styled';
 // Constants
-import { DATE_TIME_FORMAT, OPERATORS_CODE, OPERATORS_OPTION, } from '@antscorp/antsomi-ui/es/constants';
-const { MATCHES_ANY, MATCHES, NOT_MATCHES, IS } = OPERATORS_CODE;
+import { DATE_TIME_FORMAT, METRIC_TYPE, OPERATORS_CODE, OPERATORS_OPTION, } from '@antscorp/antsomi-ui/es/constants';
+const { MATCHES_ANY, MATCHES, NOT_MATCHES, IS, BETWEEN, AFTER_DATE, BEFORE_DATE, ON } = OPERATORS_CODE;
+const { DATE, DATE_TIME } = METRIC_TYPE;
 const { Text } = Typography;
 export const FilterItem = props => {
-    const { name, operator, value, onClickRemove } = props, restProps = __rest(props, ["name", "operator", "value", "onClickRemove"]);
+    const { name, operator, datatype, value, onClickRemove } = props, restProps = __rest(props, ["name", "operator", "datatype", "value", "onClickRemove"]);
+    console.log('🚀 ~ datatype:', datatype);
     // Memo
     const serializeValue = useMemo(() => {
         // Check type of value is valid date
-        if (dayjs(value).isValid()) {
+        if (dayjs(value).isValid() && [DATE, DATE_TIME].includes(datatype)) {
             return dayjs(value).format(DATE_TIME_FORMAT.FILTER_CONDITION);
         }
         // Check value is an array
@@ -33,7 +35,7 @@ export const FilterItem = props => {
             return value.map(item => item.title || item).join(', ');
         }
         return value;
-    }, [value]);
+    }, [value, datatype]);
     const serializeOperator = useMemo(() => {
         var _a;
         const operatorLabel = ((_a = Object.values(OPERATORS_OPTION).find(({ value }) => value === operator)) === null || _a === void 0 ? void 0 : _a.label) || '';

package/es/components/organism/DataTable/hooks/useDataTableListing/types.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { AxiosRequestConfig } from 'axios';
-import { TServiceAuth } from '@antscorp/antsomi-ui/es/types';
+import { TOperatorKey, TServiceAuth } from '@antscorp/antsomi-ui/es/types';
 import { TEnv } from '@antscorp/antsomi-ui/es/types/config';
 import { FilterItem, TSearchActionButton, TSearchItem, TableProps } from '../../types';
 import { PaginationProps } from '../../components';
@@ -55,6 +55,7 @@ type TSearchProps<TSearchType> = Partial<Pick<TSearchActionButton, 'addFilterInf
     onClickSearchItem?: (record?: Partial<TSearchType>) => void;
     formatData?: (response: any) => Partial<TSearchType>[];
 };
+export type TFormatFilterValue = Partial<Record<TOperatorKey, (value: any) => unknown>>;
 export interface UseDataTableListingProps<TTableType = any, TSearchType = any> {
     name?: string;
     config: TConfig<TTableType>;
@@ -80,6 +81,13 @@ export interface UseDataTableListingProps<TTableType = any, TSearchType = any> {
         matchesAny?: {
             general: TMatchesAnyProps;
         } & Partial<Record<keyof TTableType, TMatchesAnyProps>>;
+        /** Format filter value to call api
+         * Ex: When operator is matches_any then value auto is string array: ["1", "2", "3"]
+         * But sometimes you want to be a string join with , -> '1,2,3'
+         * Then use formatFilterValue: {matches_any(value): value.join(',')}
+         *
+         */
+        formatFilterValue?: TFormatFilterValue;
     };
 }
 export interface DataTableLocalStorage<TTableType = any> {

package/es/components/organism/DataTable/hooks/useDataTableListing/useDataTableListing.js

@@ -78,7 +78,7 @@ export function useDataTableListing(props) {
     const _f = apiListing || {}, { url: listingUrl = '', enabled: enabledApiListing = true } = _f, restOfApiListingRequest = __rest(_f, ["url", "enabled"]);
     const _g = apiSearch || {}, { url: searchUrl = '', enabled: enabledApiSearch = true } = _g, restOfApiSearchRequest = __rest(_g, ["url", "enabled"]);
     const { filters, selectedFilterId, pagination, selectedRowKeys, searchValue, table, sorter, selectedRow, selectedFilterItem, } = state;
-    const { externalFilters, includeDataType = false, matchesAny } = filterProps || {};
+    const { externalFilters, includeDataType = false, matchesAny, formatFilterValue, } = filterProps || {};
     const { sortDirectionKey = 'az', mainColumnKey } = tableProps || {};
     const modifyColumnAuth = Object.assign(Object.assign({}, auth), { url: columnUrl });
     const filterAuth = Object.assign(Object.assign({}, auth), { url: filterUrl });
@@ -151,7 +151,7 @@ export function useDataTableListing(props) {
     const getTableListing = useGetTableListing({
         args: {
             auth: listingAuth,
-            params: Object.assign({ limit: pagination.pageSize, page: pagination.page, filter: JSON.stringify(mapFiltersToApiFilters([...(filters || []), ...(externalFilters || [])], includeDataType)), columns: JSON.stringify(((_c = (_b = modifyColumnsData === null || modifyColumnsData === void 0 ? void 0 : modifyColumnsData.find(modifyColumnItem => modifyColumnItem.modifyColId === modifyColumnSelected)) === null || _b === void 0 ? void 0 : _b.columns) === null || _c === void 0 ? void 0 : _c.map(col => { var _a; return (_a = col.metricCode) === null || _a === void 0 ? void 0 : _a.toUpperCase(); })) || []) }, ((sorter === null || sorter === void 0 ? void 0 : sorter.order) &&
+            params: Object.assign({ limit: pagination.pageSize, page: pagination.page, filter: JSON.stringify(mapFiltersToApiFilters([...(filters || []), ...(externalFilters || [])], includeDataType, formatFilterValue)), columns: JSON.stringify(((_c = (_b = modifyColumnsData === null || modifyColumnsData === void 0 ? void 0 : modifyColumnsData.find(modifyColumnItem => modifyColumnItem.modifyColId === modifyColumnSelected)) === null || _b === void 0 ? void 0 : _b.columns) === null || _c === void 0 ? void 0 : _c.map(col => { var _a; return (_a = col.metricCode) === null || _a === void 0 ? void 0 : _a.toUpperCase(); })) || []) }, ((sorter === null || sorter === void 0 ? void 0 : sorter.order) &&
                 (sorter === null || sorter === void 0 ? void 0 : sorter.columnKey) && {
                 sort: sorter.columnKey.toString(),
                 [sortDirectionKey]: SORT_MAP[sorter.order],

package/es/components/organism/DataTable/utils/filter.d.ts

@@ -3,6 +3,7 @@ import { MenuProps } from 'antd';
 import { FilterItem, FilterMetricItem, TApiFilter } from '../types';
 import { SavedFilter } from '@antscorp/antsomi-ui/es/models/DataTable/SavedFilter';
 import { FilterProps } from '../..';
+import { TFormatFilterValue } from '../hooks/useDataTableListing/types';
 type MenuItem = Required<MenuProps>['items'][number];
 type TSerializeFilterMetricsToMenuItems = {
     filterMetrics: FilterMetricItem[];
@@ -91,5 +92,5 @@ export declare const renderValueField: ({ filterMetric, operator, value, matches
 export declare const getFilterMetricByName: ({ filterMetrics, name, }: TGetFilterMetricByName) => FilterMetricItem | undefined;
 export declare const mapFiltersToRules: (filters: FilterItem[]) => SavedFilter['rules'];
 export declare const mapRulesToFilters: (rules: SavedFilter['rules']) => FilterItem[];
-export declare const mapFiltersToApiFilters: (filters: FilterItem[], includeDataType?: boolean) => TApiFilter;
+export declare const mapFiltersToApiFilters: (filters: FilterItem[], includeDataType?: boolean, formatFilterValue?: TFormatFilterValue) => TApiFilter;
 export {};

package/es/components/organism/DataTable/utils/filter.js

@@ -203,33 +203,38 @@ export const mapRulesToFilters = (rules) => rules.map(({ dataType, metricCode, o
     operator: operatorValue,
     value: filterValue,
 }));
-export const mapFiltersToApiFilters = (filters, includeDataType = false) => {
+export const mapFiltersToApiFilters = (filters, includeDataType = false, formatFilterValue) => {
     const serializedFilters = filters.map(({ column, operator, value, dataType }) => {
         let serializeValue = '';
-        switch (operator) {
-            case MATCHES:
-            case MATCHES_ANY:
-            case NOT_MATCHES: {
-                if (Array.isArray(value)) {
-                    // Check if value is object the return object.key otherwise return this value
-                    serializeValue = value.map(item => (typeof item === 'object' ? item.key || item : item));
+        if (formatFilterValue && formatFilterValue[operator]) {
+            serializeValue = formatFilterValue[operator](value);
+        }
+        else {
+            switch (operator) {
+                case MATCHES:
+                case MATCHES_ANY:
+                case NOT_MATCHES: {
+                    if (Array.isArray(value)) {
+                        // Check if value is object the return object.key otherwise return this value
+                        serializeValue = value.map(item => typeof item === 'object' ? item.key || item : item);
+                    }
+                    break;
                 }
-                break;
-            }
-            /** Date time */
-            case AFTER:
-            case AFTER_DATE:
-            case BEFORE:
-            case ON:
-            case BEFORE_DATE: {
-                if (dayjs(value).isValid()) {
-                    serializeValue = dayjs(value).format(DATE_TIME_FORMAT.FILTER_CONDITION);
+                /** Date time */
+                case AFTER:
+                case AFTER_DATE:
+                case BEFORE:
+                case ON:
+                case BEFORE_DATE: {
+                    if (dayjs(value).isValid()) {
+                        serializeValue = dayjs(value).format(DATE_TIME_FORMAT.FILTER_CONDITION);
+                    }
+                    break;
                 }
-                break;
+                default:
+                    serializeValue = value;
+                    break;
             }
-            default:
-                serializeValue = value;
-                break;
         }
         return {
             [column]: Object.assign({ [operator]: serializeValue }, (includeDataType && { dataType: METRIC_MAP_STRING_TYPE[dataType || 'string'] })),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.481",
+  "version": "1.3.5-beta.482",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",