@antscorp/antsomi-ui 1.3.5-beta.31 → 1.3.5-beta.310

package/es/components/organism/FilterSetting/index.js

@@ -0,0 +1,431 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+/* eslint-disable @typescript-eslint/no-use-before-define */
+// Libraries
+import React, { memo, useContext, useEffect, useMemo, useState } from 'react';
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+import { cloneDeep, get, keyBy } from 'lodash';
+// Atoms
+import { Button, Icon, Input, Text } from '@antscorp/antsomi-ui/es/components/atoms';
+// Molecules
+import { Modal, SelectV2 as Select, SettingWrapper } from '../../molecules';
+// Common
+import { InputBoolean } from './components/common/InputBoolean';
+import { InputNumberBetween } from './components/common/InputNumberBetween';
+import { InputDateTimeAgo } from './components/common/InputDateTimeAgo';
+import { InputCalendar } from './components/common/InputCalendar';
+import { InputSelectMulti } from './components/common/InputSelectMulti';
+import { InputOrSelect } from './components/common/InputOrSelect';
+import { InputArray } from './components/common/InputArray';
+import { InputNumber } from './components/common/InputNumber';
+import { InputCalendarBetween } from './components/common/InputCalendarBetween';
+import { InputDateTimeBetweenAgo } from './components/common/InputDateTimeBetweenAgo';
+// Queries
+import { useGetListBO, useGetListAttributeBO, } from '@antscorp/antsomi-ui/es/queries/BusinessObject';
+// Styled
+import { FilterSettingWrapper, RowCondition, FilterBlockWrapper } from './styled';
+import { OPERATORS, SEGMENT_IDS } from './constants';
+// Translations
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+// Utils
+import { getInputDefaultValue, getInputType, isInputDateTimeAgo, isInputDateTimeBetweenAgo, validateFilters, } from './utils';
+import { handleError } from '@antscorp/antsomi-ui/es/utils';
+import { buildOptionAttrArchive } from '../../molecules/AddDynamicContent/utils';
+import { checkStatusCollection, isCheckStatusAttr } from '../ContentSources/utils';
+// Services
+import { getListCollectionsBO } from '@antscorp/antsomi-ui/es/services/MediaTemplateDesign/BusinessObject';
+import { FilterContext } from './context';
+// Constants
+import { LABEL_WIDTH } from '../ContentSources/constants';
+// Selectors
+import { useSelectModeView, useSelectServiceAuth } from '../ContentSources/provider';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+const PATH = 'src/components/organism/FilterSetting/index.tsx';
+export const FilterSetting = memo(props => {
+    var _a, _b;
+    // Translations
+    const { t } = i18nInstance;
+    const { filters, boId: itemTypeId, isFormatDateTimeMilliseconds } = props;
+    // Selectors
+    const serviceAuth = useSelectServiceAuth();
+    const { url } = serviceAuth, restAuthInfo = __rest(serviceAuth, ["url"]);
+    const mode = useSelectModeView();
+    const isCDP = mode === 'CDP';
+    // Queries
+    const { data: listBO } = useGetListBO({ url: url }, restAuthInfo);
+    const { data: listAttr } = useGetListAttributeBO({ url: url }, restAuthInfo, {
+        itemTypeIds: [itemTypeId],
+        options: {
+            select(data) {
+                var _a;
+                const { rows = [] } = data || {};
+                return ((_a = rows[0]) === null || _a === void 0 ? void 0 : _a.properties) || [];
+            },
+        },
+    });
+    // Memo
+    const itemTypeName = (_a = listBO === null || listBO === void 0 ? void 0 : listBO.find(({ id }) => id === itemTypeId)) === null || _a === void 0 ? void 0 : _a.name;
+    // Variables
+    const filterContextValue = useMemo(() => ({
+        itemTypeId,
+        itemTypeName,
+        isFormatDateTimeMilliseconds,
+    }), [itemTypeId, itemTypeName, isFormatDateTimeMilliseconds]);
+    // States
+    const [conditions, setConditions] = useState(filters);
+    const [isModalVisible, setIsModalVisible] = useState(false);
+    const [errors, setErrors] = useState({
+        OR: [],
+        isError: false,
+    });
+    const and = {
+        AND: [
+            {
+                operator: null,
+                data_type: null,
+                column: null,
+                condition_type: 'comp_attr',
+                value_type: 'normal',
+                value: null,
+                extend: null,
+            },
+        ],
+    };
+    useEffect(() => {
+        if (isModalVisible) {
+            // Neu filter co OR la [] thì bổ sung thêm object and vào Array của OR để khi mở filter lên sẽ tự động render ra hàng filter có sẵn đầu tiên
+            // Tuy nhien payload vẫn là OR : []
+            if (!filters.OR.length) {
+                setConditions(Object.assign(Object.assign({}, filters), { OR: [and] }));
+            }
+            else {
+                setConditions(filters);
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isModalVisible]);
+    const onChangeFilter = (newFilters) => {
+        try {
+            setConditions(newFilters);
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: onChangeFilter.name,
+                args: {},
+            });
+        }
+    };
+    const onChangeAttr = (item, orIndex, andIndex) => {
+        const newConditions = cloneDeep(conditions);
+        const property = listAttr.find((attr) => attr.itemPropertyName === item.column);
+        if (property) {
+            const { itemPropertyName, dataType } = property;
+            const defaultOperator = OPERATORS[dataType][0].value;
+            const defaultValue = getInputDefaultValue({
+                operator: defaultOperator,
+                dataType,
+                property,
+            });
+            newConditions.OR[orIndex].AND[andIndex] = Object.assign(Object.assign({}, newConditions.OR[orIndex].AND[andIndex]), { column: itemPropertyName, data_type: dataType, operator: defaultOperator, value: defaultValue, extend: [] });
+            onChangeFilter(newConditions);
+            onResetError(orIndex, andIndex);
+        }
+    };
+    const onChangeOperator = (item, orIndex, andIndex) => {
+        const newConditions = cloneDeep(conditions);
+        const property = listAttr.find(attr => attr.itemPropertyName === item.column) || {};
+        if (property) {
+            const defaultValue = getInputDefaultValue({
+                operator: item.operator,
+                dataType: item.data_type,
+                property,
+            });
+            if (isInputDateTimeAgo(item.operator, item.data_type) ||
+                isInputDateTimeBetweenAgo(item.operator, item.data_type)) {
+                newConditions.OR[orIndex].AND[andIndex].operator = item.operator;
+                newConditions.OR[orIndex].AND[andIndex].value = defaultValue.value;
+                newConditions.OR[orIndex].AND[andIndex].time_unit = defaultValue.time_unit;
+            }
+            else {
+                newConditions.OR[orIndex].AND[andIndex].operator = item.operator;
+                newConditions.OR[orIndex].AND[andIndex].value = defaultValue;
+            }
+            onChangeFilter(newConditions);
+            onResetError(orIndex, andIndex);
+        }
+    };
+    const onChangeValue = (value, orIndex, andIndex, key = 'value', key2) => {
+        const newConditions = cloneDeep(conditions);
+        newConditions.OR[orIndex].AND[andIndex] = Object.assign(Object.assign({}, newConditions.OR[orIndex].AND[andIndex]), { [key]: value });
+        if (key2) {
+            newConditions.OR[orIndex].AND[andIndex] = Object.assign(Object.assign({}, newConditions.OR[orIndex].AND[andIndex]), { [key2]: value });
+        }
+        onChangeFilter(newConditions);
+        onResetError(orIndex, andIndex);
+    };
+    const onChangeMultipleValue = (value, orIndex, andIndex) => {
+        const newConditions = cloneDeep(conditions);
+        newConditions.OR[orIndex].AND[andIndex] = Object.assign(Object.assign({}, newConditions.OR[orIndex].AND[andIndex]), value);
+        onChangeFilter(newConditions);
+        onResetError(orIndex, andIndex);
+    };
+    const onResetError = (orIndex, andIndex) => {
+        const newErrors = Object.assign({}, errors);
+        if (newErrors.OR[orIndex] && newErrors.OR[orIndex].AND[andIndex]) {
+            const error = {
+                column: true,
+                operator: true,
+                value: true,
+                extend: true,
+            };
+            newErrors.OR[orIndex].AND[andIndex] = error;
+            setErrors(newErrors);
+        }
+    };
+    const onAddAnd = (orIndex) => {
+        const newConditions = cloneDeep(conditions);
+        newConditions.OR[orIndex].AND.push({
+            value: null,
+            operator: null,
+            data_type: null,
+            condition_type: 'comp_attr',
+            column: null,
+            value_type: 'normal',
+        });
+        onChangeFilter(newConditions);
+    };
+    const onAddOr = () => {
+        const newConditions = cloneDeep(conditions);
+        newConditions.OR.push({
+            AND: [
+                {
+                    value: null,
+                    operator: null,
+                    data_type: null,
+                    // itemTypeId: null,
+                    condition_type: 'comp_attr',
+                    column: null,
+                    value_type: 'normal',
+                },
+            ],
+        });
+        onChangeFilter(newConditions);
+    };
+    const onRemoveCondition = (orIndex, andIndex) => {
+        const newConditions = cloneDeep(conditions);
+        if (newConditions.OR.length === 1 && newConditions.OR[0].AND.length === 1) {
+            onChangeFilter(Object.assign(Object.assign({}, newConditions), { OR: [and] }));
+        }
+        else {
+            if (newConditions.OR[orIndex].AND.length <= 1) {
+                // removeOr
+                newConditions.OR.splice(orIndex, 1);
+            }
+            else {
+                // removeAnd
+                newConditions.OR[orIndex].AND.splice(andIndex, 1);
+            }
+            onChangeFilter(newConditions);
+        }
+    };
+    const showModal = () => {
+        setIsModalVisible(true);
+    };
+    const handleOk = () => {
+        const errs = validateFilters(conditions);
+        if (errs.isError) {
+            setErrors(errs);
+        }
+        else {
+            setIsModalVisible(false);
+            props.onOKChangeFilter && props.onOKChangeFilter(conditions);
+            if (conditions.OR.length === 1) {
+                // xử lý dữ liệu khi vào store khi ấn Apply nếu OR không có filter nào thì sẽ là OR : []
+                if (!conditions.OR[0].AND[0].column) {
+                    const dataFilter = { OR: [] };
+                    setIsModalVisible(false);
+                    props.onOKChangeFilter && props.onOKChangeFilter(dataFilter);
+                }
+                else {
+                    setIsModalVisible(false);
+                    props.onOKChangeFilter && props.onOKChangeFilter(conditions);
+                }
+            }
+            else {
+                setIsModalVisible(false);
+                props.onOKChangeFilter && props.onOKChangeFilter(conditions);
+            }
+        }
+    };
+    const handleCancel = () => {
+        setIsModalVisible(false);
+    };
+    const numberOfFilters = filters.OR.flat()
+        .map(({ AND }) => AND)
+        .flat()
+        .filter(({ column }) => !!column).length;
+    return (React.createElement(FilterContext.Provider, { value: filterContextValue },
+        React.createElement(FilterSettingWrapper, null,
+            React.createElement(SettingWrapper, { containerStyle: isCDP ? { justifyContent: 'flex-start' } : {}, label: `${t(translations.filter.title)} ${numberOfFilters ? `(${numberOfFilters})` : ''}`, labelStyle: {
+                    fontWeight: isCDP ? 'normal' : 'bold',
+                    width: isCDP ? LABEL_WIDTH : 'auto',
+                }, labelColor: isCDP ? (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorText : undefined },
+                React.createElement(Button, { icon: React.createElement(Icon, { type: "icon-ants-edit-2", style: { fontSize: isCDP ? '16px' : '20px', marginLeft: isCDP ? '-5px' : '0px' } }), type: "text", onClick: showModal }),
+                React.createElement(FilterSettingModal, { isModalVisible: isModalVisible, handleOk: handleOk, handleCancel: handleCancel, listAttr: listAttr, listBO: listBO, conditions: conditions, onChangeAttr: onChangeAttr, onChangeOperator: onChangeOperator, onChangeValue: onChangeValue, onChangeMultipleValue: onChangeMultipleValue, onAddAnd: onAddAnd, onAddOr: onAddOr, onRemoveCondition: onRemoveCondition, errors: errors })))));
+});
+export const FilterSettingModal = props => {
+    const { isModalVisible, handleOk, handleCancel, listAttr, conditions, onChangeAttr, onChangeOperator, onChangeValue, onAddAnd, onAddOr, onRemoveCondition, onChangeMultipleValue, errors, listBO, } = props;
+    const { t } = i18nInstance;
+    return (React.createElement(Modal, { destroyOnClose: true, title: t(translations.filter.title).toString(), open: isModalVisible, width: 1200, styles: {
+            body: {
+                maxHeight: '70vh',
+                overflow: 'auto',
+            },
+        }, onOk: handleOk, onCancel: handleCancel, footer: [
+            React.createElement(Button, { key: "submit", type: "primary", onClick: handleOk }, t(translations.apply.title).toString()),
+            React.createElement(Button, { key: "back", onClick: handleCancel }, t(translations.cancel.title).toString()),
+        ] },
+        React.createElement(FilterBlock, { listBO: listBO, listAttr: listAttr, conditions: conditions, onChangeAttr: onChangeAttr, onChangeOperator: onChangeOperator, onChangeValue: onChangeValue, onAddAnd: onAddAnd, onAddOr: onAddOr, onRemoveCondition: onRemoveCondition, onChangeMultipleValue: onChangeMultipleValue, errors: errors })));
+};
+export const FilterBlock = props => {
+    var _a;
+    const { listAttr, conditions, onChangeAttr, onChangeOperator, onChangeValue, onAddAnd, onAddOr, onRemoveCondition, onChangeMultipleValue, listBO, errors, } = props;
+    const { itemTypeId, itemTypeName } = useContext(FilterContext);
+    // Translation
+    const { t } = i18nInstance;
+    const optionsAttr = useMemo(() => listAttr === null || listAttr === void 0 ? void 0 : listAttr.map(attr => ({
+        value: attr.itemPropertyName,
+        label: attr.itemPropertyDisplay,
+        disabled: parseInt(attr.status) === 4,
+        status: parseInt(attr.status),
+    })), [listAttr]);
+    const serviceAuth = useSelectServiceAuth();
+    const [listCollection, setListCollection] = useState([]);
+    useEffect(() => {
+        if (itemTypeId === 1) {
+            getListCollections();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [itemTypeId]);
+    const getListCollections = () => __awaiter(void 0, void 0, void 0, function* () {
+        const { rows } = yield getListCollectionsBO(serviceAuth, itemTypeId);
+        const filters = rows.map((item) => ({
+            value: item.value,
+            id: item.value,
+            label: item.label,
+            disabled: parseInt(item.model.status) === 4,
+            status: parseInt(item.model.status),
+        }));
+        setListCollection(filters);
+    });
+    const mapListAttr = useMemo(() => keyBy(listAttr, 'itemPropertyName'), [listAttr]);
+    const renderInputValue = (item, orIndex, andIndex) => {
+        const { column, value, data_type, operator, value_type, event_metadata = {}, customer_metadata = {}, visitor_metadata = {}, time_unit, extend, } = item;
+        const onChangeValueItem = (val, key = 'value', key2) => {
+            onChangeValue(val, orIndex, andIndex, key, key2);
+        };
+        const onChangeMultipleValueItem = (val) => {
+            onChangeMultipleValue(val, orIndex, andIndex);
+        };
+        const property = listAttr.find(item => item.itemPropertyName === column);
+        const { errorMessage } = checkStatusCollection({
+            listBO,
+            itemTypeId: itemTypeId || 0,
+            listCollection,
+            field: value,
+            checkDisable: true,
+        });
+        const element = getInputType({
+            operator,
+            dataType: data_type,
+            property,
+            resInputBoolean: React.createElement(InputBoolean, { value: value, onChange: onChangeValueItem }),
+            resInputNumberBetween: React.createElement(InputNumberBetween, { value: value, onChange: onChangeValueItem }),
+            resInputCalendarBetween: React.createElement(InputCalendarBetween, { value: value, onChange: onChangeValueItem }),
+            resInputDateTimeBetweenAgo: (React.createElement(InputDateTimeBetweenAgo, { value: value, timeUnit: time_unit, onChange: value => onChangeMultipleValueItem(value) })),
+            resInputDateTimeAgo: (React.createElement(InputDateTimeAgo, { value: value, timeUnit: time_unit, onChangeMultipleValue: value => onChangeMultipleValueItem(Object.assign(Object.assign({}, value), (value.value !== undefined && {
+                    value: String(value.value),
+                }))) })),
+            resInputCalendar: (React.createElement(InputCalendar, { value: value, operator: operator, onChange: onChangeValueItem })),
+            resInputSelectMulti: (React.createElement(InputSelectMulti, { value: value, extend: extend, eventMetadata: event_metadata, customerMetadata: customer_metadata, visitorMetadata: visitor_metadata, valueType: value_type, onChange: onChangeValueItem, onChangeMultipleValue: onChangeMultipleValueItem, itemTypeId: itemTypeId, itemTypeName: itemTypeName, errorMessage: column === SEGMENT_IDS ? errorMessage : '', 
+                // isDisable={isDisableCollection}
+                column: column })),
+            resInputOrSelect: (React.createElement(InputOrSelect, { value: value, onChangeMultipleValue: onChangeMultipleValueItem, eventMetadata: event_metadata, customerMetadata: customer_metadata, visitorMetadata: visitor_metadata, valueType: value_type, dataType: data_type })),
+            resInputArray: React.createElement(InputArray, { value: value, onChange: onChangeValueItem }),
+            resInputNumber: React.createElement(InputNumber, { value: value, onChange: onChangeValueItem }),
+            resDefault: (React.createElement(Input, { value: value, onChange: e => onChangeValueItem(e.target.value), placeholder: t(translations.inputYourValue.title) })),
+        });
+        return element;
+    };
+    return (React.createElement("div", null,
+        conditions.OR.map((or, orIndex) => (React.createElement(React.Fragment, { key: orIndex },
+            orIndex !== 0 ? React.createElement(Text, null, t(translations.or.title).toUpperCase()) : null,
+            React.createElement(FilterBlockWrapper, null, or.AND.map((and, andIndex) => {
+                var _a, _b, _c;
+                const { errorMessage, isDisable } = isCheckStatusAttr(listBO, itemTypeId, optionsAttr, and.column);
+                return (React.createElement("div", { key: `${and.column}-${andIndex}`, style: { padding: 20 } },
+                    React.createElement(RowCondition, null,
+                        React.createElement("div", null,
+                            React.createElement(Select, { showSearch: true, disabled: isDisable, options: buildOptionAttrArchive(optionsAttr, and.column), value: and.column, onChange: value => onChangeAttr(Object.assign(Object.assign({}, and), { column: value }), orIndex, andIndex), placeholder: t(translations.selectAnItem.title).toString(), status: 
+                                // Nếu chỉ có 1 OR và 1 AND thì là không filter nên sẽ ko báo lỗi required
+                                !get(errors, `OR[${orIndex}].AND[${andIndex}].column`, true)
+                                    ? conditions.OR.length === 1 && conditions.OR[0].AND.length === 1
+                                        ? undefined
+                                        : 'error'
+                                    : undefined, errorArchive: errorMessage, errorMsg: t(translations.thisFieldIsRequired.title) })),
+                        React.createElement("div", null, and.column ? (React.createElement(Select, { showSearch: true, options: and.data_type === 'string' &&
+                                ((_a = mapListAttr[and.column]) === null || _a === void 0 ? void 0 : _a.autoSuggestion) === 1
+                                ? OPERATORS.suggestion
+                                : OPERATORS[and.data_type], value: and.operator, onChange: value => onChangeOperator(Object.assign(Object.assign({}, and), { operator: value }), orIndex, andIndex), placeholder: t(translations.selectAnItem.title).toString(), status: !get(errors, `OR[${orIndex}].AND[${andIndex}].operator`, true)
+                                ? 'error'
+                                : undefined, errorMsg: t(translations.thisFieldIsRequired.title) })) : null),
+                        React.createElement("div", null, and.operator ? (React.createElement(React.Fragment, null,
+                            React.createElement("div", { style: { marginTop: 2 } }, renderInputValue(and, orIndex, andIndex)),
+                            !get(errors, `OR[${orIndex}].AND[${andIndex}].value`, true) &&
+                                !get(errors, `OR[${orIndex}].AND[${andIndex}].extend`, true) ? (React.createElement(Text, { color: "#ff4d4f", style: { marginLeft: 8 } }, t(translations.valueFilterEmpty.title).toString())) : null)) : null),
+                        React.createElement("div", null, andIndex === or.AND.length - 1 ? (React.createElement(Button, { onClick: () => onAddAnd(orIndex), type: "default", style: {
+                                marginTop: 4,
+                                borderRadius: '9999px',
+                                borderColor: (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorPrimary,
+                                width: 64,
+                            }, disabled: or.AND.length >= 10 },
+                            "+ ",
+                            t(translations.and.title).toUpperCase())) : null),
+                        React.createElement("div", null, conditions.OR.length && conditions.OR[0].AND.length > 0 ? (
+                        // Khi chỉ có 1 filter. nếu column có giá trị thì sẽ hiện thị nút xóa để xóa tất các giá trị đc chọn ở hàng filter đó
+                        // Sau khi data của filter đó đc xóa đi thì sẽ ẩn đi nút xóa
+                        conditions.OR.length === 1 &&
+                            conditions.OR[0].AND.length === 1 &&
+                            !conditions.OR[0].AND[0].column ? null : (React.createElement(Button, { onClick: () => onRemoveCondition(orIndex, andIndex), type: "text", icon: React.createElement(Icon, { type: "icon-ants-remove-slim", size: 15 }), style: { marginTop: 2, justifySelf: 'flex-end' } }))) : null)),
+                    +((_c = mapListAttr[and.column]) === null || _c === void 0 ? void 0 : _c.status) === 2 ? (React.createElement(Text, { color: "#f3a303", style: { marginLeft: 8 } }, t(translations.attrDisabled.description).toString())) : null));
+            }))))),
+        React.createElement("div", null,
+            React.createElement(Button, { onClick: onAddOr, type: "default", style: {
+                    borderRadius: '9999px',
+                    borderColor: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary,
+                    width: 64,
+                    alignSelf: 'center',
+                }, disabled: conditions.OR.length >= 10 },
+                "+ ",
+                t(translations.or.title).toUpperCase()))));
+};

package/es/components/organism/FilterSetting/styled.d.ts

@@ -0,0 +1,4 @@
+export declare const FilterSettingWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FilterBlockWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RowCondition: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RowSelect: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/organism/FilterSetting/styled.js

@@ -0,0 +1,28 @@
+var _a, _b;
+// Libraries
+import styled from 'styled-components';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const FilterSettingWrapper = styled.div ``;
+export const FilterBlockWrapper = styled.div `
+  margin-bottom: 24px;
+  width: 100%;
+  border: 1px solid ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw3_5};
+  border-radius: 3px;
+  border-left: 4px solid ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.blue7};
+`;
+export const RowCondition = styled.div `
+  display: grid;
+  align-items: flex-end;
+  // 3 first items = 84%;
+  grid-template-columns: 34% 22% 28% 7% auto;
+  grid-column-gap: 20px;
+`;
+export const RowSelect = styled.div `
+  margin-bottom: 8px;
+  margin-top: 8px;
+  display: grid;
+  align-items: center;
+  grid-template-columns: 30% calc(70% - 16px);
+  gap: 8px 16px;
+`;

package/es/components/organism/FilterSetting/utils.d.ts

@@ -0,0 +1,46 @@
+import { Moment } from 'moment';
+import { TFilters, TOperatorValue } from '../../atoms/InputDynamic/types';
+import { TDataType } from '../../molecules/AddDynamicContent';
+type Property = any;
+export declare const getValidMomentDate: (date: Moment) => Moment | null;
+export declare function isInputBoolean(operatorValue: TOperatorValue, dataType: TDataType): boolean;
+export declare function isInputNumberBetween(operatorValue: TOperatorValue, dataType: TDataType): boolean;
+export declare function isInputCalendarBetween(operatorValue: TOperatorValue, dataType: TDataType): boolean;
+export declare function isInputDateTimeAgo(operatorValue: TOperatorValue, dataType: TDataType): boolean;
+export declare function isInputDateTimeBetweenAgo(operatorValue: TOperatorValue, dataType: TDataType): boolean;
+export declare function isInputCalendar(operatorValue: TOperatorValue, dataType: TDataType): boolean;
+export declare function isInputOrSelect(operatorValue: TOperatorValue, dataType?: TDataType, property?: Property): boolean;
+export declare function isInputSelectMulti(operatorValue: TOperatorValue, dataType: TDataType, property: Property): boolean;
+export declare function isOperatorMulti(operatorValue: TOperatorValue): boolean;
+export declare function isOperatorSuggestion(operatorValue: TOperatorValue): boolean;
+export declare function isCheckConditionMultiCheckbox(dataType: TDataType): boolean | undefined;
+export declare function isInputNumber(_operatorValue: TOperatorValue, property: any): boolean;
+export declare function isInputNull(operatorValue: TOperatorValue, dataType: TDataType): boolean;
+export declare const getInputType: ({ operator, dataType, property, resInputBoolean, resInputNumberBetween, resInputCalendarBetween, resInputDateTimeAgo, resInputDateTimeBetweenAgo, resInputCalendar, resInputOrSelect, resInputSelectMulti, resInputArray, resInputNumber, resDefault, }: {
+    operator: any;
+    dataType: any;
+    property?: {} | undefined;
+    resInputBoolean: any;
+    resInputNumberBetween: any;
+    resInputCalendarBetween: any;
+    resInputDateTimeAgo: any;
+    resInputDateTimeBetweenAgo: any;
+    resInputCalendar: any;
+    resInputOrSelect: any;
+    resInputSelectMulti: any;
+    resInputArray: any;
+    resInputNumber: any;
+    resDefault: any;
+}) => any;
+export declare const getInputDefaultValue: ({ operator, dataType, property }: {
+    operator: any;
+    dataType: any;
+    property: any;
+}) => any;
+export declare const validateFilters: (filters: TFilters, validateFirstCondition?: boolean) => any;
+export declare const getScopSuggest: ({ itemTypeId }: {
+    itemTypeId: any;
+}) => 1 | 2 | 3;
+export declare const setValueSelectAll: (treeData: any) => any;
+export declare const checkDuplicateArray: (data: any) => any;
+export {};