sccoreui 5.9.83 → 5.9.84

package/dist/App.scss

@@ -530,10 +530,12 @@ div:has(ul.date_filter) .p-datepicker-footer {
 
 .full_form_field {
   // width: 37.125rem;
+  width: 100%;
 }
 
 .form_field {
   // width: 18.063rem;
+  width: 100%;
 }
 
 .PhoneInput {

package/dist/components/ag-grid/advancedFeature/advanced-feature.js

@@ -10,11 +10,12 @@ const remove_items_1 = tslib_1.__importDefault(require("./remove-items"));
 const react_1 = require("react");
 const context_provider_1 = require("../context-provider");
 const table_filter_1 = tslib_1.__importDefault(require("./new-filter/table-filter"));
+const hide_column_1 = tslib_1.__importDefault(require("./hide-column"));
 function AdvancedFeatures({ props }) {
     const { featureDetails } = (0, react_1.useContext)(context_provider_1.FeatureContext);
     const conditionsToDisplay = props === null || props === void 0 ? void 0 : props.conditionsToDisplay;
     const { bulkActionComponent: BulkAction } = props;
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-between py-3 px-4" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: [(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displaySearch) && ((0, jsx_runtime_1.jsx)(global_search_1.default, { searchPlaceHolder: props === null || props === void 0 ? void 0 : props.placeholder })), (conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displayFilter) && (0, jsx_runtime_1.jsx)(table_filter_1.default, {})] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displayRemoveItems) && (0, jsx_runtime_1.jsx)(remove_items_1.default, {}), (conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displayBulkAction) &&
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-between py-3 px-4" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: [(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displaySearch) && ((0, jsx_runtime_1.jsx)(global_search_1.default, { searchPlaceHolder: props === null || props === void 0 ? void 0 : props.placeholder })), (conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displayFilter) && (0, jsx_runtime_1.jsx)(table_filter_1.default, {})] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(hide_column_1.default, {}), (conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displayRemoveItems) && (0, jsx_runtime_1.jsx)(remove_items_1.default, {}), (conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displayBulkAction) &&
                         (props === null || props === void 0 ? void 0 : props.bulkActionComponent) && ((0, jsx_runtime_1.jsx)(BulkAction, { checkBoxSelection: featureDetails.checkBoxSelection })), (conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displayRefresh) && (0, jsx_runtime_1.jsx)(refresh_grid_1.default, {}), (conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displaySort) && (0, jsx_runtime_1.jsx)(custom_sort_1.default, {}), (0, jsx_runtime_1.jsx)(record_detail_1.default, {})] }))] })));
 }
 exports.default = AdvancedFeatures;

package/dist/components/ag-grid/advancedFeature/hide-column.js

@@ -8,37 +8,62 @@ const react_1 = require("react");
 const sidebar_1 = require("primereact/sidebar");
 const inputswitch_1 = require("primereact/inputswitch");
 const inputtext_1 = require("primereact/inputtext");
-const tree_1 = require("primereact/tree");
-const columns = [{ hederName: "Media" }, { hederName: "Product Name" }, { hederName: "Product Code" }, { hederName: "Product Description" }, { hederName: "Price" }, { hederName: "Brand" }];
-const data2 = columns.map((col, idx) => {
-    let object = {
-        key: idx,
-        label: col.hederName,
-    };
-    return object;
-});
+const context_provider_1 = require("../context-provider");
 function HideColumn() {
+    const { gridData, gridApi } = (0, react_1.useContext)(context_provider_1.FeatureContext);
     const [visibleRight, setVisibleRight] = (0, react_1.useState)(false);
     const [checked, setChecked] = (0, react_1.useState)(false);
     const [inpValue, setInpValue] = (0, react_1.useState)("");
-    const [checkedStates, setCheckedStates] = (0, react_1.useState)({});
-    const [nodes, setNodes] = (0, react_1.useState)(data2 || []);
-    const handleSwitchChange = (id, value) => {
-        setCheckedStates((prevState) => (Object.assign(Object.assign({}, prevState), { [id]: value })));
+    const [nodes, setNodes] = (0, react_1.useState)(() => {
+        var _a;
+        const columnsInBar = [];
+        (_a = JSON.parse(JSON.stringify(gridData === null || gridData === void 0 ? void 0 : gridData.columnData))) === null || _a === void 0 ? void 0 : _a.map((column) => {
+            if ((column === null || column === void 0 ? void 0 : column.headerName) && (column === null || column === void 0 ? void 0 : column.field)) {
+                column.checked = !(column === null || column === void 0 ? void 0 : column.hide);
+            }
+            columnsInBar.push(column);
+        });
+        return columnsInBar;
+    });
+    // When radio button is switched
+    const handleSwitchChange = (selectedColumn, value) => {
+        console.log(selectedColumn, value, 'selected column');
+        const updatedColumns = [...nodes];
+        updatedColumns === null || updatedColumns === void 0 ? void 0 : updatedColumns.map((column) => {
+            if ((column === null || column === void 0 ? void 0 : column.id) === (selectedColumn === null || selectedColumn === void 0 ? void 0 : selectedColumn.id)) {
+                column.checked = value;
+            }
+            return column;
+        });
+        setNodes(updatedColumns);
     };
-    // column group functions
-    const nodeTemplate = (node) => {
-        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center w-full border-round block w-full p-3 pr-0 text-primary-400 font-semibold justify-content-between" }, { children: [(0, jsx_runtime_1.jsx)("span", { children: node.label }), (0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: checkedStates[node.id] || false, onChange: (e) => handleSwitchChange(node.id, e.value) })] })));
+    const updateColumns = () => {
+        const columnsToHide = nodes.filter((col) => {
+            return col.hasOwnProperty("checked") && !col.checked;
+        });
+        hideColumns(columnsToHide);
+        setVisibleRight(false);
     };
-    const togglerTemplate = (node) => {
-        if (!node) {
-            return false;
-        }
-        return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex align-items-center" }, { children: (0, jsx_runtime_1.jsx)(button_1.Button, { text: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "drag-and-drop" }) }) })));
+    const hideColumns = (columnsToHide) => {
+        if (!gridApi)
+            return;
+        const columnDefs = gridApi.current.api.getColumnDefs();
+        const updatedColumnDefs = columnDefs.map((colDef) => {
+            const colToHide = columnsToHide.find((col) => col.id === colDef.id);
+            if (colToHide) {
+                colDef.hide = true; // or colDef.hide = !!colToHide.checked; if using checked property
+            }
+            else {
+                colDef.hide = false; // ensure other columns are not hidden
+            }
+            return colDef;
+        });
+        gridApi.current.api.setColumnDefs(updatedColumnDefs);
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { onClick: () => setVisibleRight(true), className: "mr-3", text: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "columns-02" }) }), (0, jsx_runtime_1.jsxs)(sidebar_1.Sidebar, Object.assign({ className: "md:w-6 lg:w-3", visible: visibleRight, position: "right", onHide: () => setVisibleRight(false) }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-between px-4 py-2 border-bottom-1 border-gray-200" }, { children: [(0, jsx_runtime_1.jsx)("h3", { children: "Configure Columns" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { text: true, label: "Discard" }), (0, jsx_runtime_1.jsx)(button_1.Button, { label: "Update", disabled: true })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-4" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "px-3 py-2" }, { children: [(0, jsx_runtime_1.jsxs)("h3", Object.assign({ className: "flex align-items-center justify-content-between my-0" }, { children: ["Apply to all views", (0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: checked, onChange: (e) => setChecked(e.value) })] })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "my-0 text-sm" }, { children: "Apply the chosen column selection to all available views" }))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "py-2" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-input-icon-left p-input-icon-right w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-prefix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "search-md" }) })), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { id: "email", value: inpValue, onChange: (e) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { onClick: () => setVisibleRight(true), className: "mr-3", text: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "columns-02" }) }), (0, jsx_runtime_1.jsxs)(sidebar_1.Sidebar, Object.assign({ className: "md:w-6 lg:w-3", visible: visibleRight, position: "right", onHide: () => setVisibleRight(false) }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-between px-4 py-2 border-bottom-1 border-gray-200" }, { children: [(0, jsx_runtime_1.jsx)("h3", { children: "Configure Columns" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { text: true, label: "Discard" }), (0, jsx_runtime_1.jsx)(button_1.Button, { label: "Update", onClick: () => updateColumns() })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-4" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "px-3 py-2" }, { children: [(0, jsx_runtime_1.jsxs)("h3", Object.assign({ className: "flex align-items-center justify-content-between my-0" }, { children: ["Apply to all views", (0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: checked, onChange: (e) => setChecked(e.value) })] })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "my-0 text-sm" }, { children: "Apply the chosen column selection to all available views" }))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "py-2" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-input-icon-left p-input-icon-right w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-prefix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "search-md" }) })), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { id: "email", value: inpValue, onChange: (e) => {
                                                 setInpValue(e.target.value);
-                                            }, disabled: false, placeholder: "Search by column name", className: "text-lg font-normal text-gray-500 hover:text-gray-900 w-full" })] })) })), (0, jsx_runtime_1.jsxs)("p", Object.assign({ className: "py-2 my-0 text-gray-900 text-lg font-medium border-bottom-1 border-gray-200" }, { children: ["Selected Attributes", " ", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-500 text-sm" }, { children: "(10/15)" }))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "w-full" }, { children: (0, jsx_runtime_1.jsx)(tree_1.Tree, { value: nodes, nodeTemplate: nodeTemplate, dragdropScope: "demo", onDragDrop: (e) => setNodes(e.value), togglerTemplate: togglerTemplate, className: "list-items" }) })), (0, jsx_runtime_1.jsx)("h3", Object.assign({ className: "mt-6 mb-0 pb-2 border-bottom-1 border-gray-200" }, { children: "Unselected Attributes" })), (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: "list-none p-0 px-3" }, { children: (nodes === null || nodes === void 0 ? void 0 : nodes.length) > 0 &&
-                                    nodes.map((listItem) => ((0, jsx_runtime_1.jsxs)("li", Object.assign({ className: "flex align-items-center justify-content-between py-3" }, { children: [(0, jsx_runtime_1.jsx)("span", { children: listItem.label }), (0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: checkedStates[listItem.id] || false, onChange: (e) => handleSwitchChange(listItem.id, e.value) })] }), listItem.id))) }))] }))] }))] }));
+                                            }, disabled: false, placeholder: "Search by column name", className: "text-lg font-normal text-gray-500 hover:text-gray-900 w-full" })] })) })), (0, jsx_runtime_1.jsxs)("p", Object.assign({ className: "py-2 my-0 text-gray-900 text-lg font-medium border-bottom-1 border-gray-200" }, { children: ["Selected Attributes", " ", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-500 text-sm" }, { children: "(10/15)" }))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "w-full" }, { children: (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: "list-none p-0 px-3" }, { children: (nodes === null || nodes === void 0 ? void 0 : nodes.length) > 0 &&
+                                        nodes.map((listItem, idx) => (!(listItem === null || listItem === void 0 ? void 0 : listItem.hide) && (listItem === null || listItem === void 0 ? void 0 : listItem.field) && (listItem === null || listItem === void 0 ? void 0 : listItem.headerName)) && (0, jsx_runtime_1.jsxs)("li", Object.assign({ className: "flex align-items-center justify-content-between py-3" }, { children: [(0, jsx_runtime_1.jsx)("span", { children: listItem.headerName }), (0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: listItem === null || listItem === void 0 ? void 0 : listItem.checked, onChange: (e) => handleSwitchChange(listItem, e.value) })] }), idx)) })) })), (0, jsx_runtime_1.jsx)("h3", Object.assign({ className: "mt-6 mb-0 pb-2 border-bottom-1 border-gray-200" }, { children: "Unselected Attributes" })), (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: "list-none p-0 px-3" }, { children: (nodes === null || nodes === void 0 ? void 0 : nodes.length) > 0 &&
+                                    nodes.map((listItem) => ((listItem === null || listItem === void 0 ? void 0 : listItem.hide) && (listItem === null || listItem === void 0 ? void 0 : listItem.headerName)) && (0, jsx_runtime_1.jsxs)("li", Object.assign({ className: "flex align-items-center justify-content-between py-3" }, { children: [(0, jsx_runtime_1.jsx)("span", { children: listItem.headerName }), (0, jsx_runtime_1.jsx)(inputswitch_1.InputSwitch, { checked: listItem.checked, onChange: (e) => handleSwitchChange(listItem, e.value) })] }), listItem.id)) }))] }))] }))] }));
 }
 exports.default = HideColumn;

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

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const helper_1 = require("./helper");
 exports.FeatureContext = (0, react_1.createContext)(null);
 function MyProvider({ children, value }) {
-    const { featureDetails, setFeatureDetails, gridData, callGrid, totalRecords, initialFeature, defaultFilters, createView, enableViewCreate, filterModelText, sortModelText, recordDetailModelText, sortOptions, filterConditions, clearFilters } = value;
+    const { featureDetails, setFeatureDetails, gridData, callGrid, totalRecords, initialFeature, defaultFilters, createView, enableViewCreate, filterModelText, sortModelText, recordDetailModelText, sortOptions, filterConditions, clearFilters, setGridData, gridApi, } = value;
     // States for sort
     const [columnData] = (0, react_1.useState)(gridData === null || gridData === void 0 ? void 0 : gridData.columnData);
     const [sortValue, setSortValue] = (0, react_1.useState)({});
@@ -85,7 +85,10 @@ function MyProvider({ children, value }) {
             filterModelText,
             sortModelText,
             recordDetailModelText,
-            sortOptions
+            sortOptions,
+            setGridData,
+            gridData,
+            gridApi,
         } }, { children: children })));
 }
 exports.default = MyProvider;

package/dist/components/ag-grid/parent-for-grid.js

@@ -243,15 +243,6 @@ function ParentForGrid(props) {
             callGrid(currentFeature);
         }
     }, [props === null || props === void 0 ? void 0 : props.shouldRefetch]);
-    // Remove all checkbox selection if any feature added
-    // useEffect(() => {
-    //   setCheckBoxSelection({
-    //     allBoxChecked: false,
-    //     isIndeterminate: false,
-    //     includedRecords: [],
-    //     excludedRecords: [],
-    //   });
-    // }, [featureDetails]);
     (0, react_1.useEffect)(() => {
         if (props === null || props === void 0 ? void 0 : props.getCheckedRows) {
             const callBackForCheckedRows = props === null || props === void 0 ? void 0 : props.getCheckedRows;
@@ -273,7 +264,9 @@ function ParentForGrid(props) {
                                 recordDetailModelText: (_d = props === null || props === void 0 ? void 0 : props.dynamicText) === null || _d === void 0 ? void 0 : _d.recordDetailModelText,
                                 sortOptions: (props === null || props === void 0 ? void 0 : props.sortOptions) ? props.sortOptions : constants_1.COLUMN_SORT_OPTIONS,
                                 filterConditions: props === null || props === void 0 ? void 0 : props.filterConditions,
-                                clearFilters: props === null || props === void 0 ? void 0 : props.clearFilters
+                                clearFilters: props === null || props === void 0 ? void 0 : props.clearFilters,
+                                setGridData,
+                                gridApi: gridRef,
                             } }, { children: (0, jsx_runtime_1.jsx)(advanced_feature_1.default, { props: props }) })), (0, jsx_runtime_1.jsx)(AgGrid_1.default, { style: style, gridOptions: gridOptions, onGridReady: onGridReady, gridRef: gridRef })] }) })) }) }));
 }
 exports.default = ParentForGrid;

package/dist/types/components/ag-grid/Types.d.ts

@@ -12,6 +12,7 @@ export interface ColumnDef extends ColDef {
     options?: any[];
     selectionType?: string;
     columnType?: string;
+    checked?: boolean;
 }
 export interface Style {
     height: number | string;
@@ -155,4 +156,8 @@ export interface FilterCondition {
     id: number | string;
     label: string;
 }
+export interface CallGridOnHide {
+    toUpdateView: boolean;
+    reorderedColumns: ColumnDef[];
+}
 export {};

package/dist/types/components/ag-grid/context-provider.d.ts

@@ -18,6 +18,8 @@ interface MyProviderProps {
         sortOptions: any[];
         filterConditions: FilterCondition[];
         clearFilters: Boolean;
+        setGridData: (GridData: any) => void;
+        gridApi: any;
     };
 }
 declare function MyProvider({ children, value }: MyProviderProps): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sccoreui",
-  "version": "5.9.83",
+  "version": "5.9.84",
   "description": "ui-sccore",
   "main": "./dist/index.js",
   "module": "./dist/index.js",