sccoreui 6.4.91 → 6.4.92

package/dist/components/ag-grid/advancedFeature/new-filter/conditions/Conditions.js

@@ -15,6 +15,14 @@ const constants_1 = tslib_1.__importDefault(require("../../../constants"));
 const Conditions = (props) => {
     const { columnName, condition, value, columnsArray, conditionsArray, index, id, updateconditionsArray, removeConditionFromArray, addEmptyCondition, conditionsLength, conditionType, conditionTypes, handleConditionType, filterModelText, validationErrors, validationTouched, } = props;
     const valueError = Boolean(validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors.value) && Boolean(validationTouched === null || validationTouched === void 0 ? void 0 : validationTouched.value);
+    // Filter available conditions based on column data type
+    const filteredConditions = conditionsArray.filter((each) => {
+        var _a;
+        return (_a = constants_1.default.accessBasedOnDataType
+            .find((access) => access.datatype === (columnName === null || columnName === void 0 ? void 0 : columnName.dataType))) === null || _a === void 0 ? void 0 : _a.conditions.includes(each.value);
+    });
+    // Extract numeric value from condition (handles both object and number formats)
+    const conditionValue = typeof condition === 'object' ? condition === null || condition === void 0 ? void 0 : condition.value : condition;
     const onAddCondition = (index) => {
         addEmptyCondition(index);
     };
@@ -196,11 +204,7 @@ const Conditions = (props) => {
     };
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "grid my-1 align-items-center pt-2" }, { children: [index !== 0 ? ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "operator-type filter_dropdown_and col-2 w-7rem mx-4 border-1 border-gray-300 h-44 -mt-2", options: conditionTypes, optionLabel: "label", placeholder: "Select", value: conditionType, disabled: index !== 1, onChange: (event) => handleConditionType(event.target.value) })) : ((0, jsx_runtime_1.jsx)("div", { className: "col-2 w-7rem mx-4" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-9  grid  filter-dropdowns overflow-y-hidden" }, { children: [(0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: `condition-dropdown dropdown-focus-none border-noround-right col-4 pl-3`, options: columnsArray, optionLabel: "name", placeholder: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.elementOnePlaceHolder)
                             ? filterModelText.elementOnePlaceHolder
-                            : "Select", value: columnsArray.find((item) => item.code === columnName.code), onChange: (event) => onUpdateColumnName(event.value), panelClassName: "w-14rem" }), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "condition-type hide-focus border-noround remove-focus border-x-none filter-dropdown-grid col-4", value: condition, options: conditionsArray.filter((each) => {
-                            var _a;
-                            return (_a = constants_1.default.accessBasedOnDataType
-                                .find((access) => access.datatype === (columnName === null || columnName === void 0 ? void 0 : columnName.dataType))) === null || _a === void 0 ? void 0 : _a.conditions.includes(each.value);
-                        }), disabled: columnName === "", optionLabel: "name", placeholder: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.elementTwoPlaceHolder)
+                            : "Select", value: columnsArray.find((item) => item.code === columnName.code), onChange: (event) => onUpdateColumnName(event.value), panelClassName: "w-14rem" }), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: "condition-type hide-focus border-noround remove-focus border-x-none filter-dropdown-grid col-4", value: conditionValue, options: filteredConditions, disabled: columnName === "", optionLabel: "name", optionValue: "value", placeholder: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.elementTwoPlaceHolder)
                             ? filterModelText.elementTwoPlaceHolder
                             : "Select", onChange: (event) => onUpdateCondition(event.value), panelClassName: "w-14rem status_select_field" }), renderDynamicField(columnName, valueError)] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-1 col-1 -mt-2 md:px-2 lg:px-0" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "cursor-pointer conditional_btn", onClick: () => onAddCondition(index) }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "plus-circle", size: 20, color: "text-gray-500" }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `cursor-pointer conditional_btn delete-action ${conditionsLength === 1 ? "p-disabled" : ""}`, onClick: () => onRemoveCondition(id) }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "minus-circle", size: 20, color: "text-gray-500" }) }))] }))] })));
 };

package/dist/components/ag-grid/advancedFeature/new-filter/table-filter.js

@@ -4,42 +4,68 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const button_1 = require("primereact/button");
-const Conditions_1 = tslib_1.__importDefault(require("./conditions/Conditions"));
 const divider_1 = require("primereact/divider");
-const context_provider_1 = require("../../context-provider");
+const dialog_1 = require("primereact/dialog");
 const inputtext_1 = require("primereact/inputtext");
-// import { OverlayPanel } from "primereact/overlaypanel";
+const Yup = tslib_1.__importStar(require("yup"));
+const Conditions_1 = tslib_1.__importDefault(require("./conditions/Conditions"));
+const context_provider_1 = require("../../context-provider");
 const svg_component_1 = tslib_1.__importDefault(require("../../../../directives/svg-component"));
 const Types_1 = require("../../Types");
 const constants_1 = tslib_1.__importDefault(require("../../constants"));
 const helper_1 = require("../../helper");
 const utilComponents_1 = require("../../utilComponents");
 const FeatureSkeleton_1 = tslib_1.__importDefault(require("../../../skeletons/FeatureSkeleton"));
-const dialog_1 = require("primereact/dialog");
-const Yup = tslib_1.__importStar(require("yup"));
 const form_1 = tslib_1.__importDefault(require("../../../form/form"));
-// import "./TableFilter.module.scss";
+/**
+ * TableFilter Component
+ *
+ * Provides an advanced filtering UI for AG Grid tables. Allows users to:
+ * - Add multiple filter conditions with AND/OR logic
+ * - Filter by different data types (string, number, date, etc.)
+ * - Save filter configurations as named views
+ * - Pre-populate filters from default values
+ */
 const TableFilter = () => {
+    // Context values for filter state management
     const { featureDetails, columnData, conditionType, conditionTypes, globalFilters, setConditionType, setGlobalFilters, setFeatureDetails, callGrid, setViewName, viewName, createView, enableViewCreate, filterModelText, enableAdvancedFilter, gridApi, conditionsToDisplay, } = (0, react_1.useContext)(context_provider_1.FeatureContext);
+    // Form reference for validation
     const formRef = (0, react_1.useRef)(null);
-    // console.log("createView", FeatureContext);
-    // debugger;
+    // Column mapping keys
     const columnId = "field";
-    const columnName = "headerName";
-    // const showFilter = useRef<any>(null);
+    const columnNameKey = "headerName";
+    // Local state
     const [conditionsArray, setConditionsArray] = (0, react_1.useState)([]);
     const [allFieldsFilled, setAllFieldsFilled] = (0, react_1.useState)(false);
-    const [enbleApply, setEnableApply] = (0, react_1.useState)(true);
-    // const [isOverlayOpened, setIsOverlayOpened] = useState<boolean>(false);
+    const [enableApply, setEnableApply] = (0, react_1.useState)(true);
     const [isVisible, setIsVisible] = (0, react_1.useState)(false);
     const [displayInput, setDisplayInput] = (0, react_1.useState)(false);
+    // Check if filter component is disabled
     const isDisabled = (0, helper_1.isComponentDisable)(conditionsToDisplay.displayFilter);
+    // ============================================================================
+    // Condition Type Helpers
+    // ============================================================================
+    /**
+     * Check if condition is IS_KNOWN or IS_UNKNOWN (no value required)
+     */
     const isKnownOrUnknown = (condition) => condition === Types_1.FilteredConditionTypes.IS_KNOWN ||
         condition === Types_1.FilteredConditionTypes.IS_UNKNOWN;
+    /**
+     * Check if condition is a between/range condition
+     */
     const isBetweenCondition = (condition) => condition === Types_1.FilteredConditionTypes.IS_BETWEEN ||
         condition === Types_1.FilteredConditionTypes.IS_NOT_BETWEEN;
+    /**
+     * Check if condition is any of/none of (multi-value)
+     */
     const isAnyOrNoneOf = (condition) => condition === Types_1.FilteredConditionTypes.IS_ANY_OF ||
         condition === Types_1.FilteredConditionTypes.IS_NONE_OF;
+    // ============================================================================
+    // Validation Functions
+    // ============================================================================
+    /**
+     * Validate number values based on condition type
+     */
     const validateNumberValue = (value, condition) => {
         if (isBetweenCondition(condition)) {
             return (Array.isArray(value) &&
@@ -54,6 +80,9 @@ const TableFilter = () => {
         }
         return value !== undefined && value !== null && value !== "";
     };
+    /**
+     * Validate date values based on condition type
+     */
     const validateDateValue = (value, condition) => {
         if (isBetweenCondition(condition)) {
             return (Array.isArray(value) &&
@@ -66,6 +95,9 @@ const TableFilter = () => {
         }
         return Boolean(value);
     };
+    /**
+     * Validate string values based on condition type
+     */
     const validateStringValue = (value, condition) => {
         const allowedStringRegex = /^(?!^$)(?!^\s)(?!.*\s$)(?!.*\s\s)[A-Za-z0-9\s-!@#$%^&*()_+={}\[\]:;"'<>,.?/~`|\\]+$/;
         if (condition === Types_1.FilteredConditionTypes.IS_EQUAL_TO ||
@@ -84,6 +116,9 @@ const TableFilter = () => {
                 typeof item === "string" &&
                 allowedStringRegex.test(item)));
     };
+    /**
+     * Validate filter value based on column data type
+     */
     const validateValueByType = (column, condition, value) => {
         if (isKnownOrUnknown(condition))
             return true;
@@ -114,8 +149,14 @@ const TableFilter = () => {
                 return true;
         }
     };
+    // ============================================================================
+    // Derived Data
+    // ============================================================================
+    /**
+     * Transform column data into format required by filter dropdowns
+     */
     const tableColumns = columnData === null || columnData === void 0 ? void 0 : columnData.filter((eachColumn) => eachColumn === null || eachColumn === void 0 ? void 0 : eachColumn.isFilterable).map((eachColumn) => ({
-        name: eachColumn[columnName],
+        name: eachColumn[columnNameKey],
         code: eachColumn[columnId],
         fieldName: eachColumn.field,
         dataType: eachColumn.dataType,
@@ -124,6 +165,9 @@ const TableFilter = () => {
         fieldKey: eachColumn === null || eachColumn === void 0 ? void 0 : eachColumn.fieldKey,
         attributeType: eachColumn.attributeType ? eachColumn.attributeType : 1,
     }));
+    /**
+     * Default empty condition template
+     */
     const defaultCondition = {
         columnName: "",
         condition: "",
@@ -131,6 +175,9 @@ const TableFilter = () => {
         id: Math.random().toString(),
         isActive: false,
     };
+    /**
+     * Form validation schema using Yup
+     */
     const validationSchema = (0, react_1.useMemo)(() => Yup.object().shape({
         conditions: Yup.array()
             .of(Yup.object().shape({
@@ -146,94 +193,109 @@ const TableFilter = () => {
             .min(1),
         viewName: Yup.string(),
     }), []);
-    // console.log("tableColumns", tableColumns);
+    /**
+     * Form initial values - memoized to prevent unnecessary re-renders
+     */
+    const formInitialValues = (0, react_1.useMemo)(() => ({
+        conditions: conditionsArray,
+        viewName,
+    }), [conditionsArray, viewName]);
+    // ============================================================================
+    // Event Handlers
+    // ============================================================================
+    /**
+     * Apply filter conditions to the grid
+     */
     const applyAdvancedFilter = (array) => {
         const allQueries = array.map((query) => {
             const column = { code: query.columnName };
             const operation = query.condition;
-            let queryToAdd = {
+            return {
                 selectedColumn: column,
                 selectedOperation: operation,
                 value: query.value,
                 logicalOperator: conditionType.id,
             };
-            return queryToAdd;
         });
-        // const requestFilters: any[] = allQueries.map((element: any) => ({
-        //   fieldName: element?.selectedColumn?.code?.code,
-        //   fieldValue: element?.value.toString(),
-        //   conditionalOperator: element?.selectedOperation,
-        //   logicalOperator: element.logicalOperator,
-        //   attributeType: element?.selectedColumn?.code?.attributeType
-        //     ? element?.selectedColumn?.code.attributeType
-        //     : 1,
-        // }));
         setGlobalFilters(array);
         const currentFeature = Object.assign({}, featureDetails);
         currentFeature.filterQueries = allQueries;
         setFeatureDetails(Object.assign(Object.assign({}, featureDetails), { filterQueries: allQueries }));
-        // setConditionsArray(requestFilters);
         callGrid(currentFeature);
         return [];
     };
+    /**
+     * Handle AND/OR condition type change
+     */
     const handleConditionType = (value) => {
         setConditionType(value);
     };
+    /**
+     * Handle filter button click - show dialog or AG Grid advanced filter
+     */
     const onClickFilter = (event) => {
         var _a;
         if (enableAdvancedFilter && gridApi.current) {
             (_a = gridApi.current.api) === null || _a === void 0 ? void 0 : _a.showAdvancedFilterBuilder(event);
         }
         else {
-            // showFilter.current.toggle(event);
             setIsVisible(true);
         }
     };
-    const updateconditionsArray = (conditionObj, conditionIndex, formSetter) => {
+    /**
+     * Update a specific condition in the array
+     */
+    const updateConditionsArray = (conditionObj, conditionIndex, formSetter) => {
         const updatedConditions = conditionsArray.map((eachCondition) => {
             if (eachCondition.id === conditionIndex) {
                 return conditionObj;
             }
-            else {
-                return eachCondition;
-            }
+            return eachCondition;
         });
         setConditionsArray(updatedConditions);
         formSetter === null || formSetter === void 0 ? void 0 : formSetter("conditions", updatedConditions);
     };
+    /**
+     * Add a new empty condition after the specified index
+     */
     const addEmptyCondition = (index, formSetter) => {
-        const updatedconditionsArray = [...conditionsArray];
-        updatedconditionsArray.splice(index + 1, 0, defaultCondition);
-        setConditionsArray(updatedconditionsArray);
-        formSetter === null || formSetter === void 0 ? void 0 : formSetter("conditions", updatedconditionsArray);
+        const updatedConditionsArray = [...conditionsArray];
+        const newCondition = Object.assign(Object.assign({}, defaultCondition), { id: Math.random().toString() });
+        updatedConditionsArray.splice(index + 1, 0, newCondition);
+        setConditionsArray(updatedConditionsArray);
+        formSetter === null || formSetter === void 0 ? void 0 : formSetter("conditions", updatedConditionsArray);
     };
+    /**
+     * Remove a condition from the array by ID
+     */
     const removeConditionFromArray = (conditionIndex, formSetter) => {
-        const updatedconditionsArray = conditionsArray.filter((condition) => condition.id !== conditionIndex);
-        setConditionsArray(updatedconditionsArray);
-        formSetter === null || formSetter === void 0 ? void 0 : formSetter("conditions", updatedconditionsArray);
+        const updatedConditionsArray = conditionsArray.filter((condition) => condition.id !== conditionIndex);
+        setConditionsArray(updatedConditionsArray);
+        formSetter === null || formSetter === void 0 ? void 0 : formSetter("conditions", updatedConditionsArray);
     };
+    /**
+     * Apply current filters and close dialog
+     */
     const onApplyFilter = () => {
-        const arr = conditionsArray.map((condition) => {
-            return Object.assign(Object.assign({}, condition), { isActive: true, logicalOperator: conditionType.id });
-        });
+        const arr = conditionsArray.map((condition) => (Object.assign(Object.assign({}, condition), { isActive: true, logicalOperator: conditionType.id })));
         applyAdvancedFilter(arr);
         setConditionsArray(arr);
         setIsVisible(false);
-        // showFilter.current.toggle(false);
     };
-    const onresetFilter = (formSetter) => {
+    /**
+     * Reset all filters to default state
+     */
+    const onResetFilter = (formSetter) => {
         applyAdvancedFilter([]);
-        setConditionsArray([defaultCondition]);
+        const newDefault = Object.assign(Object.assign({}, defaultCondition), { id: Math.random().toString() });
+        setConditionsArray([newDefault]);
         setViewName("");
-        formSetter === null || formSetter === void 0 ? void 0 : formSetter("conditions", [defaultCondition]);
+        formSetter === null || formSetter === void 0 ? void 0 : formSetter("conditions", [newDefault]);
         formSetter === null || formSetter === void 0 ? void 0 : formSetter("viewName", "");
-        // showFilter.current.toggle(false);
-        // showFilter.current.hide();
-    };
-    const renderCondition = (conditions, key, formSetter, formErrors, formTouched) => {
-        const { columnName, condition, value, id } = conditions;
-        return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "" }, { children: (0, jsx_runtime_1.jsx)(Conditions_1.default, { index: key, setEnableApply: (value) => setEnableApply(value), id: id, columnName: columnName, condition: condition, conditionType: conditionType, conditionTypes: conditionTypes, value: value, columnsArray: tableColumns, conditionsArray: constants_1.default.conditionsList, handleConditionType: handleConditionType, updateconditionsArray: (conditionObj, conditionIndex) => updateconditionsArray(conditionObj, conditionIndex, formSetter), addEmptyCondition: (index) => addEmptyCondition(index, formSetter), removeConditionFromArray: (conditionIndex) => removeConditionFromArray(conditionIndex, formSetter), conditionsLength: conditionsArray.length, filterModelText: filterModelText, validationErrors: formErrors, validationTouched: formTouched }, key) })));
     };
+    /**
+     * Create a saved view from current filter configuration
+     */
     const createViewFromFilters = () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
         var _a;
         yield Promise.all((_a = [formRef]) === null || _a === void 0 ? void 0 : _a.map((form) => {
@@ -245,75 +307,98 @@ const TableFilter = () => {
         if (errors && Object.keys(errors).length > 0) {
             return;
         }
-        const newFilters = conditionsArray.map((condition) => {
-            // Convert value type to string when data comes in object or array form
-            // if (typeof condition.value !== "string")
-            //   condition.value = JSON.stringify(condition.value);
-            return Object.assign(Object.assign({}, condition), { isActive: true, logicalOperator: conditionType.id });
-        });
+        const newFilters = conditionsArray.map((condition) => (Object.assign(Object.assign({}, condition), { isActive: true, logicalOperator: conditionType.id })));
         const viewDetails = {
             viewName: viewName,
             viewFilter: newFilters,
         };
         createView(viewDetails);
-        // showFilter.current.toggle(false);
     });
+    /**
+     * Close filter dialog and reset input state
+     */
     const filterLogoToggle = () => {
-        setIsVisible(false), setDisplayInput(false), setViewName("");
+        setIsVisible(false);
+        setDisplayInput(false);
+        setViewName("");
+    };
+    /**
+     * Render a single filter condition row
+     */
+    const renderCondition = (conditions, key, formSetter, formErrors, formTouched) => {
+        const { columnName, condition, value, id } = conditions;
+        return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "" }, { children: (0, jsx_runtime_1.jsx)(Conditions_1.default, { index: key, setEnableApply: (value) => setEnableApply(value), id: id, columnName: columnName, condition: condition, conditionType: conditionType, conditionTypes: conditionTypes, value: value, columnsArray: tableColumns, conditionsArray: constants_1.default.conditionsList, handleConditionType: handleConditionType, updateconditionsArray: (conditionObj, conditionIndex) => updateConditionsArray(conditionObj, conditionIndex, formSetter), addEmptyCondition: (index) => addEmptyCondition(index, formSetter), removeConditionFromArray: (conditionIndex) => removeConditionFromArray(conditionIndex, formSetter), conditionsLength: conditionsArray.length, filterModelText: filterModelText, validationErrors: formErrors, validationTouched: formTouched }, key) })));
     };
+    // ============================================================================
+    // Effects
+    // ============================================================================
+    /**
+     * Initialize conditionsArray from globalFilters when they change
+     * This handles pre-populating filters from default values
+     */
     (0, react_1.useEffect)(() => {
-        if (conditionsArray.length === 0) {
-            setConditionsArray([defaultCondition]);
+        if (globalFilters.length > 0) {
+            setConditionsArray(globalFilters);
         }
-    });
-    (0, react_1.useEffect)(() => {
-        if (globalFilters.length === 0) {
-            setConditionsArray([defaultCondition]);
+        else if (conditionsArray.length === 0) {
+            setConditionsArray([Object.assign(Object.assign({}, defaultCondition), { id: Math.random().toString() })]);
         }
-        else {
-            setConditionsArray(globalFilters);
+    }, [globalFilters]);
+    /**
+     * Sync conditionsArray when dialog opens
+     */
+    (0, react_1.useEffect)(() => {
+        if (isVisible) {
+            if (globalFilters.length === 0) {
+                setConditionsArray([Object.assign(Object.assign({}, defaultCondition), { id: Math.random().toString() })]);
+            }
+            else {
+                setConditionsArray(globalFilters);
+            }
         }
     }, [isVisible]);
+    /**
+     * Validate all fields and update allFieldsFilled state
+     */
     (0, react_1.useEffect)(() => {
         const isAllFieldsFilled = conditionsArray.every((eachCondition) => {
             if (!(eachCondition === null || eachCondition === void 0 ? void 0 : eachCondition.columnName) || !(eachCondition === null || eachCondition === void 0 ? void 0 : eachCondition.condition))
                 return false;
             return validateValueByType(eachCondition === null || eachCondition === void 0 ? void 0 : eachCondition.columnName, eachCondition === null || eachCondition === void 0 ? void 0 : eachCondition.condition, eachCondition === null || eachCondition === void 0 ? void 0 : eachCondition.value);
         });
-        setAllFieldsFilled(isAllFieldsFilled && enbleApply);
-    }, [conditionsArray, enbleApply]);
-    const formInitialValues = (0, react_1.useMemo)(() => ({
-        conditions: conditionsArray,
-        viewName,
-    }), [conditionsArray, viewName]);
-    return (0, utilComponents_1.skeletonLoding)() ? ((0, jsx_runtime_1.jsx)(FeatureSkeleton_1.default, {})) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `cursor-pointer filter-btn-grid font-semibold hover:bg-primary-25 sc_icon_hover flex align-items-center gap-2 border-round-6 ${isDisabled && "disabled"} ${isVisible ||
-                    (globalFilters === null || globalFilters === void 0 ? void 0 : globalFilters.filter((each) => each.isActive).length) >= 1
-                    ? "bg-primary-50"
-                    : "bg-white"}`, title: "Apply Filters" }, { children: [(0, jsx_runtime_1.jsx)("div", { id: "advancedFilterParent", className: "hidden" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ onClick: (e) => !isDisabled && onClickFilter(e), className: "flex zoom_animate", id: "advance-filter-id" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "filter-lines", size: 18, color: isVisible ||
-                                    (globalFilters === null || globalFilters === void 0 ? void 0 : globalFilters.filter((each) => each.isActive).length) >= 1
-                                    ? "#243DC6"
-                                    : "#667085" }), (globalFilters === null || globalFilters === void 0 ? void 0 : globalFilters.filter((each) => each.isActive).length) >= 1 && ((0, jsx_runtime_1.jsxs)("span", Object.assign({ id: "selected-filters", className: "flex gap-2 align-items-center text-primary-400 pl-2" }, { children: [`${globalFilters === null || globalFilters === void 0 ? void 0 : globalFilters.filter((each) => each.isActive).length} ${(filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.onSelectedFilter)
+        setAllFieldsFilled(isAllFieldsFilled && enableApply);
+    }, [conditionsArray, enableApply]);
+    // ============================================================================
+    // Render
+    // ============================================================================
+    // Show skeleton while loading
+    if ((0, utilComponents_1.skeletonLoding)()) {
+        return (0, jsx_runtime_1.jsx)(FeatureSkeleton_1.default, {});
+    }
+    // Count of active filters for display
+    const activeFilterCount = (globalFilters === null || globalFilters === void 0 ? void 0 : globalFilters.filter((each) => each.isActive).length) || 0;
+    const hasActiveFilters = activeFilterCount >= 1;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `cursor-pointer filter-btn-grid font-semibold hover:bg-primary-25 sc_icon_hover flex align-items-center gap-2 border-round-6 ${isDisabled && "disabled"} ${isVisible || hasActiveFilters ? "bg-primary-50" : "bg-white"}`, title: "Apply Filters" }, { children: [(0, jsx_runtime_1.jsx)("div", { id: "advancedFilterParent", className: "hidden" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ onClick: (e) => !isDisabled && onClickFilter(e), className: "flex zoom_animate", id: "advance-filter-id" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "filter-lines", size: 18, color: isVisible || hasActiveFilters ? "#243DC6" : "#667085" }), hasActiveFilters && ((0, jsx_runtime_1.jsxs)("span", Object.assign({ id: "selected-filters", className: "flex gap-2 align-items-center text-primary-400 pl-2" }, { children: [`${activeFilterCount} ${(filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.onSelectedFilter)
                                         ? filterModelText.onSelectedFilter
                                         : "Selected"}`, (0, jsx_runtime_1.jsx)("span", Object.assign({ onClick: (e) => {
                                             e.preventDefault();
                                             e.stopPropagation();
-                                            onresetFilter();
+                                            onResetFilter();
                                         } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "x-close", size: 18, color: "#243DC6" }) }))] })))] }))] })), (0, jsx_runtime_1.jsx)(form_1.default, Object.assign({ values: formInitialValues, enableReinitialize: true, formRef: formRef, validateOnChange: true, validateOnBlur: false, validateOnMount: true, validations: validationSchema, className: "h-full", onSubmit: () => onApplyFilter() }, { children: ({ handleSubmit, setFieldValue, isValid, values, errors, touched }) => {
                     const conditionsToRender = (values === null || values === void 0 ? void 0 : values.conditions) && values.conditions.length > 0
                         ? values.conditions
                         : conditionsArray;
-                    const isFormReady = isValid && allFieldsFilled && enbleApply;
-                    console.log(conditionsToRender, "conditionsToRender", isFormReady);
-                    return ((0, jsx_runtime_1.jsxs)(dialog_1.Dialog, Object.assign({ visible: isVisible, onHide: () => filterLogoToggle(), className: "modal_filter mt-5 -ml-2" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-4" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-between text-lg font-semibold line-height-3 text-gray-900" }, { children: [(filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.header) ? filterModelText.header : "Filter", " ", (0, jsx_runtime_1.jsx)(button_1.Button, { className: "p-0 h-auto px-1 bg-transparent hover:bg-gray-100", onClick: () => setIsVisible(false), icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "x-close", size: 15, color: "text-gray-600" }) })] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "text-sm text-gray-600" }, { children: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.subHeader)
+                    const isFormReady = isValid && allFieldsFilled && enableApply;
+                    return ((0, jsx_runtime_1.jsxs)(dialog_1.Dialog, Object.assign({ visible: isVisible, onHide: () => filterLogoToggle(), className: "modal_filter mt-5 -ml-2" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-4" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-between text-lg font-semibold line-height-3 text-gray-900" }, { children: [(filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.header) ? filterModelText.header : "Filter", (0, jsx_runtime_1.jsx)(button_1.Button, { className: "p-0 h-auto px-1 bg-transparent hover:bg-gray-100", onClick: () => setIsVisible(false), icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "x-close", size: 15, color: "text-gray-600" }) })] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "text-sm text-gray-600" }, { children: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.subHeader)
                                             ? filterModelText.subHeader
-                                            : "Streamline Your Search With Filters" }))] })), (0, jsx_runtime_1.jsx)(divider_1.Divider, { className: "w-full p-0 m-0" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "p-2" }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "max-h-14rem\toverflow-y-auto overflow-x-hidden flex flex-column gap-1" }, { children: conditionsToRender.map((eachCondition, index) => {
+                                            : "Streamline Your Search With Filters" }))] })), (0, jsx_runtime_1.jsx)(divider_1.Divider, { className: "w-full p-0 m-0" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "p-2" }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "max-h-14rem overflow-y-auto overflow-x-hidden flex flex-column gap-1" }, { children: conditionsToRender.map((eachCondition, index) => {
                                         var _a, _b;
-                                        return ((0, jsx_runtime_1.jsx)("div", { children: renderCondition(eachCondition, index, setFieldValue, (_a = errors === null || errors === void 0 ? void 0 : errors.conditions) === null || _a === void 0 ? void 0 : _a[index], (_b = touched === null || touched === void 0 ? void 0 : touched.conditions) === null || _b === void 0 ? void 0 : _b[index]) }, index));
+                                        return ((0, jsx_runtime_1.jsx)("div", { children: renderCondition(eachCondition, index, setFieldValue, (_a = errors === null || errors === void 0 ? void 0 : errors.conditions) === null || _a === void 0 ? void 0 : _a[index], (_b = touched === null || touched === void 0 ? void 0 : touched.conditions) === null || _b === void 0 ? void 0 : _b[index]) }, eachCondition.id || index));
                                     }) })) })), (0, jsx_runtime_1.jsx)(divider_1.Divider, { className: "w-full p-0 m-0" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-4 flex justify-content-between" }, { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(button_1.Button, { outlined: true, className: "focus:shadow-none font-semibold border-none hover:bg-primary-25 text-primary-400", label: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.resetFilterAction)
                                                 ? filterModelText.resetFilterAction
-                                                : "Reset Filter", onClick: () => onresetFilter(setFieldValue) }) }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: [!displayInput && enableViewCreate && ((0, jsx_runtime_1.jsx)(button_1.Button, { className: "text-base px-2 font-semibold text-primary-400 flex gap-2 p-1 px-4 flex justify-content-center focus:shadow-none mr-3", label: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.createViewAction)
+                                                : "Reset Filter", onClick: () => onResetFilter(setFieldValue) }) }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: [!displayInput && enableViewCreate && ((0, jsx_runtime_1.jsx)(button_1.Button, { className: "text-base px-2 font-semibold text-primary-400 flex gap-2 p-1 px-4 flex justify-content-center focus:shadow-none mr-3", label: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.createViewAction)
                                                     ? filterModelText.createViewAction
-                                                    : "Create view", onClick: () => setDisplayInput(true), disabled: !isFormReady, text: true, iconPos: "left", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "plus", color: "text-primary-400 mr-2" }) })), displayInput && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-input-icon-left p-input-icon-right w-full" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `p-input-suffix` }, { children: [displayInput && ((0, jsx_runtime_1.jsx)(button_1.Button, { onClick: createViewFromFilters, disabled: !viewName.length, className: "p-0 h-auto mr-2", text: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "check", color: "text-gray-500" }) })), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: () => {
+                                                    : "Create view", onClick: () => setDisplayInput(true), disabled: !isFormReady, text: true, iconPos: "left", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "plus", color: "text-primary-400 mr-2" }) })), displayInput && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-input-icon-left p-input-icon-right w-full" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-input-suffix" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { onClick: createViewFromFilters, disabled: !viewName.length, className: "p-0 h-auto mr-2", text: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "check", color: "text-gray-500" }) }), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: () => {
                                                                     setViewName("");
                                                                     setFieldValue("viewName", "");
                                                                 }, className: "p-0 h-auto", disabled: !viewName.length, text: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "x-close", color: "text-gray-500" }) })] })), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { placeholder: (filterModelText === null || filterModelText === void 0 ? void 0 : filterModelText.createViewInputPlaceHolder)

package/dist/components/ag-grid/context-provider.js

@@ -1,13 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FeatureContext = void 0;
+const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const helper_1 = require("./helper");
 const hooks_1 = require("primereact/hooks");
+const constants_1 = tslib_1.__importDefault(require("./constants"));
 exports.FeatureContext = (0, react_1.createContext)(null);
 function MyProvider({ children, value }) {
-    const { featureDetails, setFeatureDetails, gridData, callGrid, totalRecords, initialFeature, defaultFilters, createView, enableViewCreate, filterModelText, sortModelText, recordDetailModelText, sidePanelText, sortOptions, filterConditions, clearFilters, setGridData, gridApi, updateColumnsForGrid, enableManageColumnsCallback, columnToRender, selectedGroup, setSelectedGroup, initialCheckBoxData, intialColumns, setIntialColumns, rowModelType, quickSearch, enableAdvancedFilter, conditionsToDisplay, gridViewFun, gridViewData, setGridViewData, gridView, serverSideSelectRow } = value;
+    const { featureDetails, setFeatureDetails, gridData, callGrid, totalRecords, initialFeature, defaultFilters, defaultSort, createView, enableViewCreate, filterModelText, sortModelText, recordDetailModelText, sidePanelText, sortOptions, filterConditions, clearFilters, setGridData, gridApi, updateColumnsForGrid, enableManageColumnsCallback, columnToRender, selectedGroup, setSelectedGroup, initialCheckBoxData, intialColumns, setIntialColumns, rowModelType, quickSearch, enableAdvancedFilter, conditionsToDisplay, gridViewFun, gridViewData, setGridViewData, gridView, serverSideSelectRow } = value;
     // States for sort
     const [columnData] = (0, react_1.useState)(gridData === null || gridData === void 0 ? void 0 : gridData.columnData);
     const [inputValue, deboucedValue, setInputValue] = (0, hooks_1.useDebounce)("", 500);
@@ -46,18 +48,62 @@ function MyProvider({ children, value }) {
         setInputValue("");
         callGrid(emptyFeatures);
     };
+    /**
+     * Transform and set default filters to globalFilters state
+     * Handles both API output format and internal format:
+     * - API format: { selectedColumn: { code: {...} }, selectedOperation: 1, value, logicalOperator }
+     * - Internal format: { columnName: {...}, condition: {...}, value, logicalOperator }
+     */
     (0, react_1.useEffect)(() => {
         if (defaultFilters.length) {
             const filtersToAdd = defaultFilters.map((filter) => {
-                filter.value = (0, helper_1.parseIfNeeded)(filter.value);
-                return filter;
+                var _a, _b, _c;
+                // Extract column data from either format
+                const columnName = ((_a = filter.selectedColumn) === null || _a === void 0 ? void 0 : _a.code) || filter.columnName;
+                // Extract condition - can be a number or object
+                const conditionValue = (_b = filter.selectedOperation) !== null && _b !== void 0 ? _b : filter.condition;
+                const condition = typeof conditionValue === 'object'
+                    ? conditionValue
+                    : constants_1.default.conditionsList.find((c) => c.value === conditionValue);
+                return {
+                    columnName,
+                    condition,
+                    value: (0, helper_1.parseIfNeeded)(filter.value),
+                    id: filter.id || Math.random().toString(),
+                    isActive: (_c = filter.isActive) !== null && _c !== void 0 ? _c : true,
+                    logicalOperator: filter.logicalOperator,
+                };
             });
             setGlobalFilters(filtersToAdd);
         }
     }, [defaultFilters]);
+    /**
+     * Transform and set default sort to sortValue and sortBy states
+     * Handles API format: { direction: 1|2, propertyName: "fieldName" }
+     * - direction: 1 = ascending, 2 = descending
+     * - propertyName: field name to sort by
+     */
+    (0, react_1.useEffect)(() => {
+        if (defaultSort && defaultSort.propertyName && defaultSort.direction) {
+            // Find matching column from columnData based on propertyName
+            const matchingColumn = columnData === null || columnData === void 0 ? void 0 : columnData.find((col) => col.field === defaultSort.propertyName ||
+                col.fieldKey === defaultSort.propertyName ||
+                col.headerName === defaultSort.propertyName);
+            if (matchingColumn) {
+                setSortValue(matchingColumn);
+                // Find matching sort option based on direction and dataType
+                const matchingSortOption = sortOptions === null || sortOptions === void 0 ? void 0 : sortOptions.find((opt) => opt.sortId === defaultSort.direction &&
+                    opt.dataType === matchingColumn.dataType);
+                if (matchingSortOption) {
+                    setSortBy(matchingSortOption);
+                }
+            }
+        }
+    }, [defaultSort, columnData, sortOptions]);
     // Empty filters and call the grid
     (0, react_1.useEffect)(() => {
-        if (clearFilters) {
+        // Only clear if clearFilters is explicitly true (not just truthy like [])
+        if (clearFilters === true) {
             let currentFeature = featureDetails;
             currentFeature.filterQueries = [];
             setSelectedGroup([]);

package/dist/components/ag-grid/helper.js

@@ -20,10 +20,16 @@ const isComponentDisable = (state) => {
 exports.isComponentDisable = isComponentDisable;
 const applyDefaultFilters = (defaultFilters) => {
     const filters = defaultFilters === null || defaultFilters === void 0 ? void 0 : defaultFilters.map((item) => {
+        var _a, _b;
+        // Handle both input formats:
+        // Format 1 (API output): { selectedColumn: { code: {...} }, selectedOperation: 1, value, logicalOperator }
+        // Format 2 (internal): { columnName: {...}, condition: {...}, value, logicalOperator }
+        const selectedColumn = (item === null || item === void 0 ? void 0 : item.selectedColumn) || { code: item === null || item === void 0 ? void 0 : item.columnName };
+        const selectedOperation = (_a = item === null || item === void 0 ? void 0 : item.selectedOperation) !== null && _a !== void 0 ? _a : (typeof (item === null || item === void 0 ? void 0 : item.condition) === 'object' ? (_b = item === null || item === void 0 ? void 0 : item.condition) === null || _b === void 0 ? void 0 : _b.value : item === null || item === void 0 ? void 0 : item.condition);
         const obj = {
             logicalOperator: item === null || item === void 0 ? void 0 : item.logicalOperator,
-            selectedColumn: item === null || item === void 0 ? void 0 : item.columnName,
-            selectedOperation: item === null || item === void 0 ? void 0 : item.condition,
+            selectedColumn: selectedColumn,
+            selectedOperation: selectedOperation,
             value: item === null || item === void 0 ? void 0 : item.value,
         };
         return obj;