@antscorp/antsomi-ui 1.3.4 → 1.3.5-alpha.2

package/es/types/components/organism/DataTable/constants/common.d.ts

@@ -0,0 +1,13 @@
+declare const DATA_TABLE_PREFIX = "data-table";
+declare const DATA_TABLE_DEFAULT_NAME = "default";
+declare const DEFAULT_COLUMN_WIDTH = 200;
+declare const MIN_COLUMN_WIDTH = 55;
+declare const DEFAULT_ROW_SELECTION_WIDTH = 47;
+declare const DEFAULT_TOGGLE_WIDTH = 55;
+declare const DEFAULT_COLUMN_WIDTHS: number[];
+declare const DEFAULT_CELL_EMPTY = "";
+declare const SORT_MAP: {
+    ascend: string;
+    descend: string;
+};
+export { DATA_TABLE_DEFAULT_NAME, DATA_TABLE_PREFIX, DEFAULT_COLUMN_WIDTH, DEFAULT_ROW_SELECTION_WIDTH, MIN_COLUMN_WIDTH, DEFAULT_COLUMN_WIDTHS, DEFAULT_TOGGLE_WIDTH, DEFAULT_CELL_EMPTY, SORT_MAP, };

package/es/types/components/organism/DataTable/constants/filter.d.ts

@@ -0,0 +1,19 @@
+import { TActionOptions } from '@antscorp/antsomi-ui/es/types';
+export declare const EXCEPTION_OFF_FILTER_CLASS = "exception-off-filter";
+export declare const FILTER_SHOW_MAX = 3;
+export declare const FILTER_ACTION_KEYS: {
+    readonly SAVE: "SAVE";
+    readonly RESET: "RESET";
+    readonly CLOSE: "CLOSE";
+};
+export declare const FILTER_ACTION_OPTIONS: TActionOptions;
+export declare const METRIC_MAP_NUMBER_TYPE: {
+    1: string;
+    2: string;
+    5: string;
+};
+export declare const METRIC_MAP_STRING_TYPE: {
+    string: number;
+    number: number;
+    date: number;
+};

package/es/types/components/organism/DataTable/constants/index.d.ts

@@ -0,0 +1,7 @@
+import { DataTableState } from '../types';
+export declare const dataTableInitialState: DataTableState<any>;
+export * from './pagination';
+export * from './common';
+export * from './theme';
+export * from './toolbar';
+export * from './sample';

package/es/types/components/organism/DataTable/constants/pagination.d.ts

@@ -0,0 +1,6 @@
+declare const PAGE_SIZE_OPTIONS: number[];
+declare const DEFAULT_PAGE_SIZE = 25;
+declare const DEFAULT_PAGE = 1;
+declare const DEFAULT_PAGE_SIZE_OPTIONS: number[];
+declare const DEFAULT_PAGE_SIZE_DEFAULT = 10;
+export { PAGE_SIZE_OPTIONS, DEFAULT_PAGE_SIZE, DEFAULT_PAGE, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PAGE_SIZE_DEFAULT, };

package/es/types/components/organism/DataTable/constants/sample.d.ts

@@ -0,0 +1,388 @@
+export declare const CDP_DATA_TABLE_SAMPLE: {
+    meta: {
+        total: number;
+        totalPerf: {
+            calc_viewable_rate: number;
+            calc_web_ctr: number;
+            events_impression: number;
+            events_viewable: number;
+            calc_click_rate: number;
+            events_click: number;
+            calc_5770548: number;
+            calc_5625216: number;
+            calc_5625215: number;
+            calc_1792083: number;
+            calc_1792082: number;
+            calc_1792087: number;
+            calc_1792085: number;
+            calc_1376300: number;
+            calc_1374678: number;
+        };
+    };
+    entries: {
+        status: number;
+        story_name: string;
+        start_date: string;
+        end_date: null;
+        ctime: string;
+        owner_id: number;
+        c_user_id: string;
+        trigger_type: string;
+        story_id: number;
+        utime: string;
+        u_user_id: string;
+        label_ids: never[];
+        channel_id: number;
+        is_blast_campaign: string;
+        portal_id: number;
+        row_count: number;
+        calc_viewable_rate: number;
+        calc_web_ctr: number;
+        events_impression: number;
+        events_viewable: number;
+        calc_click_rate: number;
+        events_click: number;
+        calc_5770548: number;
+        calc_5625216: number;
+        calc_5625215: number;
+        calc_1792083: number;
+        calc_1792082: number;
+        calc_1792087: number;
+        calc_1792085: number;
+        calc_1376300: number;
+        calc_1374678: number;
+        accepted_actions: {
+            ADD_NODE: boolean;
+            EDIT: boolean;
+            EDIT_STORY_STATUS: boolean;
+            EDIT_STORY_NAME: boolean;
+            EDIT_DESCRIPTION: boolean;
+            EDIT_NODE_NAME: boolean;
+            EDIT_TRIGGER_NODE_EVENT: boolean;
+            EDIT_TRIGGER_EVENT_CONDITIONS: boolean;
+            EDIT_TRIGGER_SCHEDULE_TIME: boolean;
+            EDIT_TRIGGER_TARGET: boolean;
+            EDIT_START_DATE: boolean;
+            EDIT_END_DATE: boolean;
+            EDIT_FREQUENCY_CAPPING: boolean;
+            EDIT_ACTION_NODE: boolean;
+            EDIT_NODE_DESTINATION_TYPE: boolean;
+            EDIT_NODE_DESTINATION_CONTENT: boolean;
+            ADD_VARIANT: boolean;
+            REMOVE_VARIANT: boolean;
+            REMOVE_NODE: boolean;
+            REMOVE_STORY: boolean;
+            CLONE_STORY: boolean;
+        };
+        available_status: number[];
+        channel_name: string;
+        translate_label: string;
+        translate_description: null;
+    }[];
+};
+export declare const METRICS: ({
+    groupId: number;
+    groupName: string;
+    groupNameMultilang: {
+        EN: string;
+        VI: string;
+        JA: string;
+        DEFAULT_LANG: string;
+    };
+    translateLabel: string;
+    type: number;
+    displayOrder: number;
+    properties: ({
+        propertyId: number;
+        propertyCode: number;
+        propertyDisplay: string;
+        propertyDisplayMultilang: {
+            EN: string;
+            VI: string;
+            JA: string;
+            DEFAULT_LANG: string;
+        };
+        objectType: string;
+        dataType: string;
+        status: number;
+        isFilter: number;
+        isSearch: number;
+        isFixed: number;
+        isDefault: number;
+        displayOrder: number;
+        isSort: number;
+        type: number;
+        displayFormat: {
+            type: string;
+            config: {};
+        };
+        rowCount: string;
+        translateLabel: string;
+        groupTranslateLabel: string;
+        properties: ({
+            propertyId: number;
+            propertyCode: number;
+            propertyDisplay: string;
+            propertyDisplayMultilang: {
+                EN: string;
+                VI: string;
+                JA: string;
+                DEFAULT_LANG: string;
+            };
+            objectType: string;
+            dataType: string;
+            status: number;
+            isFilter: number;
+            isSearch: number;
+            isFixed: number;
+            isDefault: number;
+            displayOrder: number;
+            isSort: number;
+            type: number;
+            displayFormat: {
+                type: string;
+                config: {};
+            };
+            rowCount: string;
+            translateLabel: string;
+            groupTranslateLabel: string;
+            properties: {
+                propertyId: number;
+                propertyCode: string;
+                propertyDisplay: string;
+                propertyDisplayMultilang: {
+                    EN: string;
+                    VI: string;
+                    JA: string;
+                    DEFAULT_LANG: string;
+                };
+                objectType: string;
+                dataType: string;
+                status: number;
+                isFilter: number;
+                isSearch: number;
+                isFixed: number;
+                isDefault: number;
+                displayOrder: number;
+                isSort: number;
+                type: number;
+                displayFormat: {
+                    type: string;
+                    config: {};
+                };
+                rowCount: string;
+                translateLabel: string;
+                groupTranslateLabel: string;
+            }[];
+        } | {
+            propertyId: number;
+            propertyCode: string;
+            propertyDisplay: string;
+            propertyDisplayMultilang: {
+                EN: string;
+                VI: string;
+                JA: string;
+                DEFAULT_LANG: string;
+            };
+            objectType: string;
+            dataType: string;
+            status: number;
+            isFilter: number;
+            isSearch: number;
+            isFixed: number;
+            isDefault: number;
+            displayOrder: number;
+            isSort: number;
+            type: number;
+            displayFormat: {
+                type: string;
+                config: {};
+            };
+            rowCount: string;
+            translateLabel: string;
+            groupTranslateLabel: string;
+            properties?: undefined;
+        })[];
+    } | {
+        propertyId: number;
+        propertyCode: string;
+        propertyDisplay: string;
+        propertyDisplayMultilang: {
+            EN: string;
+            VI: string;
+            JA: string;
+            DEFAULT_LANG: string;
+        };
+        objectType: string;
+        dataType: string;
+        status: number;
+        isFilter: number;
+        isSearch: number;
+        isFixed: number;
+        isDefault: number;
+        displayOrder: number;
+        isSort: number;
+        type: number;
+        displayFormat: {
+            type: string;
+            config: {};
+        };
+        rowCount: string;
+        translateLabel: string;
+        groupTranslateLabel: string;
+        properties?: undefined;
+    })[];
+} | {
+    groupId: number;
+    groupName: string;
+    groupNameMultilang: {
+        EN: string;
+        VI: string;
+        JA: string;
+        DEFAULT_LANG: string;
+    };
+    translateLabel: string;
+    type: number;
+    displayOrder: number;
+    properties: ({
+        propertyId: null;
+        propertyCode: string;
+        propertyDisplay: string;
+        propertyDisplayMultilang: {
+            EN: string;
+            VI: string;
+            JA: string;
+            DEFAULT_LANG: string;
+        };
+        fieldNameMultilang: string;
+        objectType: string;
+        dataType: string;
+        type: number;
+        status: number;
+        displayFormat: {
+            type: string;
+            config: {
+                decimalPlace: number;
+                group?: undefined;
+                decimal?: undefined;
+            };
+        };
+        storageType: number;
+        treatAs: number;
+        isFilter: number;
+        isSearch: number;
+        isFixed: number;
+        isDefault: number;
+        isSort: number;
+        displayOrder: number;
+        translateLabel: string;
+        groupTranslateLabel: string;
+    } | {
+        propertyId: null;
+        propertyCode: string;
+        propertyDisplay: string;
+        propertyDisplayMultilang: {
+            EN: string;
+            VI: string;
+            JA: string;
+            DEFAULT_LANG: string;
+        };
+        fieldNameMultilang: string;
+        objectType: string;
+        dataType: string;
+        type: number;
+        status: number;
+        displayFormat: {
+            type: string;
+            config: {
+                group: string;
+                decimal: string;
+                decimalPlace: number;
+            };
+        };
+        storageType: number;
+        treatAs: number;
+        isFilter: number;
+        isSearch: number;
+        isFixed: number;
+        isDefault: number;
+        isSort: number;
+        displayOrder: number;
+        translateLabel: string;
+        groupTranslateLabel: string;
+    })[];
+} | {
+    groupId: number;
+    groupName: string;
+    groupNameMultilang: {
+        EN: string;
+        VI: string;
+        JA: string;
+        DEFAULT_LANG: string;
+    };
+    translateLabel: string;
+    type: number;
+    displayOrder: number;
+    properties: {
+        propertyId: null;
+        propertyCode: string;
+        propertyDisplay: string;
+        propertyDisplayMultilang: {
+            EN: string;
+            DEFAULT_LANG: string;
+        };
+        fieldNameMultilang: string;
+        objectType: string;
+        dataType: string;
+        type: number;
+        status: number;
+        displayFormat: {
+            type: string;
+            config: {};
+        };
+        storageType: number;
+        treatAs: number;
+        isFilter: number;
+        isSearch: number;
+        isFixed: number;
+        isDefault: number;
+        isSort: number;
+        displayOrder: number;
+        translateLabel: string;
+        groupTranslateLabel: string;
+    }[];
+})[];
+export declare const SEARCH_LIST: {
+    entries: ({
+        rowCount: string;
+        portalId: number;
+        storyNameMultilang: {
+            EN: string;
+            DEFAULT_LANG: string;
+            VI?: undefined;
+        };
+        channelId: number;
+        status: number;
+        triggerType: string;
+        latestVersion: string;
+        id: number;
+        name: string;
+    } | {
+        rowCount: string;
+        portalId: number;
+        storyNameMultilang: {
+            VI: string;
+            DEFAULT_LANG: string;
+            EN?: undefined;
+        };
+        channelId: number;
+        status: number;
+        triggerType: string;
+        latestVersion: string;
+        id: number;
+        name: string;
+    })[];
+    meta: {
+        total: number;
+    };
+};

package/es/types/components/organism/DataTable/constants/theme.d.ts

@@ -0,0 +1,2 @@
+import { DataTableThemeConfig } from '../types';
+export declare const DATA_TABLE_THEME: DataTableThemeConfig;

package/es/types/components/organism/DataTable/constants/toolbar.d.ts

@@ -0,0 +1,19 @@
+import { TActionOptions } from '@antscorp/antsomi-ui/es/types';
+export declare const TOOLBAR_ACTION_KEYS: {
+    readonly SEARCH: "SEARCH";
+    readonly COLUMN: "COLUMN";
+    readonly EXPLORE: "EXPLORE";
+    readonly EXPORT: "EXPORT";
+    readonly CALENDAR: "CALENDAR";
+    readonly TABLE: "TABLE";
+    readonly COMPARE: "COMPARE";
+    readonly NODE_VIEW: "NODE_VIEW";
+    readonly GRID_VIEW: "GRID_VIEW";
+    readonly MORE: "MORE";
+    readonly GROUP_BY: "GROUP_BY";
+};
+export declare const TOOLBAR_ACTION_OPTIONS: TActionOptions;
+export declare const GRID_VIEW_KEYS: {
+    readonly TABLE: "TABLE";
+    readonly GRID: "GRID";
+};

package/es/types/components/organism/DataTable/contexts/DataTableContext.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { StoreApi } from 'zustand';
+import { DataTableStore } from '../types';
+export declare const DataTableContext: import("react").Context<StoreApi<DataTableStore<any>> | null>;
+export declare function useDataTableContext<T>(selector: (dataTableStore: DataTableStore) => T): T;

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

@@ -0,0 +1,3 @@
+export * from './useDataTable';
+export * from './useAddFilterButton';
+export * from './useDataTableListing';

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

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import { FilterMetricItem } from '../types';
+type TState = {
+    openPopover?: boolean;
+    selectedFilterMetric?: FilterMetricItem;
+};
+type OnApplyFilterMetricConditionValue = {
+    filterMetric: FilterMetricItem;
+    value: string;
+    operator: string;
+    existMetricIdx?: number;
+};
+export declare const useAddFilterCondition: () => {
+    filters: import("../types").FilterItem[] | undefined;
+    matchesAny: {
+        list?: import("../../..").MatchesAnyItem[] | undefined;
+        isLoading?: boolean | undefined;
+    } | undefined;
+    setState: import("react").Dispatch<import("react").SetStateAction<TState>>;
+    onSelectFilterMetric: (filterMetric?: FilterMetricItem) => void;
+    onApplyFilterMetricCondition: (values: OnApplyFilterMetricConditionValue) => void;
+    onClickAddFilter: () => void;
+    onChangeFilterCondition: (filterItem: import("../types").FilterItem) => void;
+    onMatchesAnyLoadMore: (metricId?: string | number | undefined) => void;
+    openPopover?: boolean | undefined;
+    selectedFilterMetric?: FilterMetricItem | undefined;
+};
+export {};

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

@@ -0,0 +1,6 @@
+import { DataTableProps } from '../types';
+export declare const useDataTable: <TTableDataType>(props: DataTableProps<TTableDataType>) => {
+    pagination: import("../components").PaginationProps | undefined;
+    toolbar: import("../types").ToolbarProps<[]> | undefined;
+    setPagination: (pagination: Partial<import("../components").PaginationProps>) => void;
+};

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

@@ -0,0 +1,9 @@
+import { AxiosRequestConfig } from 'axios';
+import { TConfig } from './types';
+import { SavedFilterItem } from '../../types';
+export declare const TABLE_LISTING_PREFIX = "table-listing-";
+export declare const COLUMN_API_CONFIG_DEFAULT: AxiosRequestConfig<any>;
+export declare const OBJECT_DEFAULT: TConfig['object'];
+export declare const SAVED_FILTER_DEFAULT: SavedFilterItem[];
+export declare const MODIFY_COLUMN_DISABLE_REMOVE: string[];
+export declare const MODIFY_COLUMN_DISABLE_EDITABLE: string[];

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

@@ -0,0 +1 @@
+export { useDataTableListing } from './useDataTableListing';

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

@@ -0,0 +1,139 @@
+import { ReactNode } from 'react';
+import { AxiosRequestConfig } from 'axios';
+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';
+import { ColumnType } from 'antd/es/table';
+import { SorterResult } from 'antd/es/table/interface';
+import { TGetColumnMetrics, TGetFilterMetricList, TGetModifyColumnList, TGetSavedFilterList, TGetSearchListing, TGetTableListing } from '@antscorp/antsomi-ui/es/queries';
+import { MatchesAnyItem, TRemoveModalProps, TThumbnailButton } from '@antscorp/antsomi-ui/es/components/molecules';
+import { TTemplateItem } from '@antscorp/antsomi-ui/es/components/template';
+export type TApiGlobal = AxiosRequestConfig<any> & {
+    enabled?: boolean;
+};
+type TMatchesAnyParams = (filterItem?: FilterItem) => any | any;
+type TMatchesAnyProps = {
+    /** Format data from response of api */
+    formatData?: (response: any) => MatchesAnyItem[];
+    /** List of matches any instead of api */
+    options?: MatchesAnyItem[];
+    /** Get total from response */
+    total?: (response: any) => number | number;
+};
+export type TConfig<TTableType = any> = {
+    env?: TEnv;
+    auth?: TServiceAuth;
+    api?: {
+        listing?: TApiGlobal;
+        column?: TApiGlobal;
+        filter?: TApiGlobal;
+        search?: TApiGlobal;
+        matchesAny?: {
+            general?: Omit<TApiGlobal, 'params'> & {
+                params?: TMatchesAnyParams;
+            };
+        } & Partial<Record<keyof TTableType, Omit<TApiGlobal, 'params'> & {
+            params?: TMatchesAnyParams;
+        }>>;
+    };
+    object?: {
+        type: number;
+        objectId: number;
+    };
+    /** Disable local storage cache  */
+    disabledCache?: boolean;
+};
+type TGeneralTableColumnType<TTableType> = Omit<ColumnType<TTableType>, 'render'> & {
+    link?: ((record: TTableType) => string) | string;
+    render?: (value: any, record: TTableType, index: number, node: ReactNode) => ReactNode;
+};
+type TToggleColumnType<TTableType> = TGeneralTableColumnType<TTableType> & {
+    value?: ((record: TTableType) => boolean) | boolean;
+    disabled?: ((record: TTableType) => boolean) | boolean;
+    valueKey?: keyof TTableType;
+    onChange?: (checked: boolean, record: TTableType) => void;
+};
+type TTableColumnType<TTableType, K extends keyof TTableType | 'toggle'> = K extends 'toggle' ? TToggleColumnType<TTableType> : TGeneralTableColumnType<TTableType>;
+type TSearchProps<TSearchType> = Partial<Pick<TSearchActionButton, 'addFilterInfo' | 'isClientSearch' | 'isAddFilterFromSearchItem' | 'searchItemProps'>> & {
+    link?: ((record: Partial<TSearchType>) => string) | string;
+    icon?: (record: Partial<TSearchType>) => ReactNode | ReactNode;
+    itemMapKeys: Record<keyof Omit<TSearchItem, 'icon' | 'link'>, keyof TSearchType>;
+    render?: (record: TSearchType, index: number, node: ReactNode) => ReactNode;
+    onClickSearchItem?: (record?: Partial<TSearchType>) => void;
+    formatData?: (response: any) => Partial<TSearchType>[];
+};
+type TGridViewProps<TTableType> = {
+    itemMapKeys: Record<keyof TTemplateItem, keyof TTableType>;
+    name?: (record: TTableType) => ReactNode | ReactNode;
+    thumbnail?: (record: TTableType) => string | string;
+    itemProps?: {
+        removable?: boolean;
+        showButton?: boolean;
+        onRemove?: (record: TTableType) => void;
+        removeModalProps?: TRemoveModalProps;
+        buttonProps?: Omit<TThumbnailButton, 'onClick'> & {
+            onClick: (record: TTableType) => void;
+        };
+    };
+};
+type TGroupByProps<TTableType> = {
+    columnKeys?: (keyof TTableType)[];
+    defaultSelectedKey?: keyof TTableType;
+};
+export type TFormatFilterValue = Partial<Record<TOperatorKey, (value: any) => unknown>>;
+export interface UseDataTableListingProps<TTableType = any, TSearchType = any> {
+    name?: string;
+    config: TConfig<TTableType>;
+    queryOptions?: {
+        getTableListing?: TGetTableListing['options'];
+        getColumnMetricList?: TGetColumnMetrics['options'];
+        getModifyColumnList?: TGetModifyColumnList['options'];
+        getSavedFilterList?: TGetSavedFilterList['options'];
+        getFilterMetricList?: TGetFilterMetricList['options'];
+        getSearchListing?: TGetSearchListing['options'];
+    };
+    table?: Omit<TableProps<TTableType>, 'columns'> & {
+        /** Main key for map ids */
+        mainColumnKey: keyof TTableType;
+        /** Expand column key for show icon expand row */
+        expandColumnKey?: keyof TTableType;
+        /** columns?: Partial<Record<keyof TTableType, ColumnType<TTableType>>>; */
+        columns?: {
+            [K in keyof TTableType | 'toggle']?: TTableColumnType<TTableType, K>;
+        };
+        sortDirectionKey?: string;
+    };
+    search?: TSearchProps<TSearchType>;
+    filter?: {
+        /** Init default filters, this filter will show in UI instead of external filters */
+        defaultFilters?: FilterItem[];
+        externalFilters?: FilterItem[];
+        includeDataType?: boolean;
+        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;
+    };
+    gridView?: TGridViewProps<TTableType>;
+    groupBy?: TGroupByProps<TTableType>;
+}
+export interface DataTableLocalStorage<TTableType = any> {
+    filter?: {
+        selectedFilterId?: string;
+        filters?: FilterItem[];
+    };
+    table?: TableProps<TTableType>;
+    pagination?: PaginationProps;
+    sorter?: SorterResult<TTableType>;
+    groupBy?: {
+        selectedKey?: string;
+    };
+}
+export {};