sccoreui 5.9.63 → 5.9.64

package/dist/components/list-box-dropdown/list-box-dropdown.js

@@ -9,12 +9,17 @@ const button_1 = require("primereact/button");
 const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
 // import { InputText } from "primereact/inputtext";
 const checkbox_1 = require("primereact/checkbox");
-const ListBoxDropdown = ({ selectAll, onSelectAll, onChange, footeTemplate, headerTemplate, labelIcon, labelIconPos, label, labelIconSize, listItems, filter, multiple, filterPlaceholder, optionLabel, listClassName, menuClassName, listBoxParentClassName, listBoxclassName, optionTemplate, values, link, className, scrollElementId, buttonClassName, showChips, chipTemplate, chipClassName, chipsParentClassName, showRemoveIcon, removeIconSize, removeIconClassName, onRemoveItem, isDraggable, onDranghandle, onShow, onHide, onFocus, }) => {
+const ListBoxDropdown = ({ selectAll, onSelectAll, onChange, footeTemplate, headerTemplate, labelIcon, labelIconPos, label, labelIconSize, listItems, filter, multiple, filterPlaceholder, optionLabel, listClassName, menuClassName, listBoxParentClassName, listBoxclassName, optionTemplate, values, link, className, scrollElementId, buttonClassName, showChips, chipTemplate, chipClassName, chipsParentClassName, showRemoveIcon, removeIconSize, removeIconClassName, onRemoveItem, isDraggable, onDranghandle,
+// onShow,
+// onHide,
+// onFocus,
+ }) => {
     const [selectedItems, setSelectedItems] = (0, react_1.useState)([]);
     // const [inpValue, setInpValue] = useState<any>();
     const optionsMenuRef = (0, react_1.useRef)();
     const [checked, setChecked] = (0, react_1.useState)(false);
     const onSelectOption = (e) => {
+        setChecked(e.value.length === listItems.length);
         setSelectedItems(e.value);
         onChange(e);
     };
@@ -59,25 +64,37 @@ const ListBoxDropdown = ({ selectAll, onSelectAll, onChange, footeTemplate, head
     //   e.preventDefault()
     // }
     const onSelectAllItem = (e) => {
-        setChecked(e.checked);
+        e.stopPropagation();
+        setChecked(!checked);
         if (onSelectAll)
-            onSelectAll(e.checked);
-        e.preventDefault();
+            onSelectAll(!checked);
     };
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: className }, { children: [(0, jsx_runtime_1.jsx)(menu_1.Menu, { onShow: (e) => onShow && onShow(e), onHide: (e) => onHide && onHide(e), onFocus: (e) => onFocus && onFocus(e), popup: true, className: menuClassName ? menuClassName : "", ref: optionsMenuRef, model: [
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: className }, { children: [(0, jsx_runtime_1.jsx)(menu_1.Menu
+                // onShow={(e: any) => onShow && onShow(e)}
+                // onHide={(e: any) => onHide && onHide(e)}
+                // onFocus={(e: any) => onFocus && onFocus(e)}
+                // popup
+                , { 
+                    // onShow={(e: any) => onShow && onShow(e)}
+                    // onHide={(e: any) => onHide && onHide(e)}
+                    // onFocus={(e: any) => onFocus && onFocus(e)}
+                    // popup
+                    popup: true, ref: optionsMenuRef, id: "popup_menu_bottom", className: menuClassName ? menuClassName : "", 
+                    // ref={optionsMenuRef}
+                    model: [
                         {
                             template: () => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: listBoxParentClassName
                                     ? listBoxParentClassName +
                                         " list_box_dropdown border-round-lg border-1 overflow-hidden border-gray-200"
-                                    : "list_box_dropdown" }, { children: [headerTemplate && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: headerTemplate() }), selectAll && ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", 
+                                    : "list_box_dropdown" }, { children: [headerTemplate && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: headerTemplate() }), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", onClick: (e) => onSelectAllItem(e), 
                                         // onClick={() => {
                                         //   if (onSelectAll) onSelectAll();
                                         // }}
-                                        className: "text-primary-400 bg-white pt-0 px-2 flex gap-2 align-items-center w-full font-semibold absolute z-4  text-left focus:shadow-none", style: { top: "10em" }, link: true }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: checked, onChange: e => onSelectAllItem(e) }), " ", (0, jsx_runtime_1.jsx)("span", { children: "Select All" })] }))), (0, jsx_runtime_1.jsx)(listbox_1.ListBox, { itemTemplate: (option) => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: optionTemplate ? (optionTemplate(option)) : ((0, jsx_runtime_1.jsx)("span", { children: option[`${optionLabel}`] })) })), listClassName: `${listClassName ? listClassName : " h-18rem overflow-auto "} ${selectAll && " mt-8 pt-2"}`, filter: filter ? true : false, multiple: multiple ? true : false, value: selectedItems, onChange: (e) => onSelectOption(e), options: listItems, optionLabel: optionLabel, className: `${listBoxclassName
+                                        className: "text-primary-400 bg-white pt-0 px-2 flex gap-2 align-items-center w-full font-semibold absolute z-4  text-left focus:shadow-none", style: { top: "10em" }, link: true }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: checked }), " ", (0, jsx_runtime_1.jsx)("span", { children: checked ? "Select All" : "Unselect All" })] })), (0, jsx_runtime_1.jsx)(listbox_1.ListBox, { itemTemplate: (option) => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: optionTemplate ? (optionTemplate(option)) : ((0, jsx_runtime_1.jsx)("span", { children: option[`${optionLabel}`] })) })), listClassName: `${listClassName ? listClassName : " h-18rem overflow-auto "} ${selectAll && " mt-8 pt-2"}`, filter: filter ? true : false, multiple: multiple ? true : false, value: selectedItems, onChange: (e) => onSelectOption(e), options: listItems, optionLabel: optionLabel, className: `${listBoxclassName
                                             ? listBoxclassName
                                             : "w-16rem border-none "} `, filterPlaceholder: filterPlaceholder ? filterPlaceholder : "" }), footeTemplate && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: footeTemplate() })] }))),
                         },
-                    ] }), !showChips ? ((0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", className: `list_box_button focus:shadow-none p-0 h-max h-auto p-0 mx-2 ${buttonClassName}`, link: link ? true : false, icon: labelIcon ? labelIcon : "", size: labelIconSize ? labelIconSize : "", iconPos: labelIconPos ? labelIconPos : "", label: label, onClick: (event) => optionsMenuRef.current.toggle(event) })) : ((0, jsx_runtime_1.jsxs)("ul", Object.assign({ className: `pl-0 grid row-gap-2 list_box_chips ${chipsParentClassName}` }, { children: [(0, jsx_runtime_1.jsx)("li", Object.assign({ className: `cursor-pointer min-w-max mx-2 max-w-max  ${buttonClassName}` }, { children: (0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", className: `list_box_button focus:shadow-none p-0 h-max h-auto mx-2`, link: link ? true : false, icon: labelIcon ? labelIcon : "", size: labelIconSize ? labelIconSize : "", iconPos: labelIconPos ? labelIconPos : "", label: label, onClick: (event) => optionsMenuRef.current.toggle(event) }) })), selectedItems &&
+                    ] }), !showChips ? ((0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", className: `list_box_button focus:shadow-none p-0 h-max h-auto p-0 mx-2 ${buttonClassName}`, link: link ? true : false, icon: labelIcon ? labelIcon : "", size: labelIconSize ? labelIconSize : "", iconPos: labelIconPos ? labelIconPos : "", label: label, onClick: (event) => optionsMenuRef.current.toggle(event) })) : ((0, jsx_runtime_1.jsxs)("ul", Object.assign({ className: `pl-0 grid row-gap-2 list_box_chips ${chipsParentClassName}` }, { children: [(0, jsx_runtime_1.jsx)("li", Object.assign({ className: `cursor-pointer min-w-max mx-2 max-w-max  ${buttonClassName}` }, { children: (0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", className: `list_box_button focus:shadow-none p-0 h-max h-auto mx-2`, link: link ? true : false, icon: labelIcon ? labelIcon : "", size: labelIconSize ? labelIconSize : "", iconPos: labelIconPos ? labelIconPos : "", label: label, onClick: (event) => optionsMenuRef.current.toggle(event), "aria-controls": "popup_menu_right", "aria-haspopup": true }) })), selectedItems &&
                             (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.map((item, index) => {
                                 var _a, _b;
                                 return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isDraggable !== undefined ? ((0, jsx_runtime_1.jsx)("li", Object.assign({ draggable: isDraggable, onDragStart: (e) => handleDragStart(e, index), onDragOver: (e) => handleDragOver(e), onDrop: (e) => handleDrop(e, index), className: `${chipClassName

package/dist/pages/aggrid/AgGrid.js

@@ -0,0 +1,257 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const parent_for_grid_1 = tslib_1.__importDefault(require("../../components/ag-grid/parent-for-grid"));
+const axios_1 = tslib_1.__importDefault(require("axios"));
+const Types_1 = require("../../components/ag-grid/Types");
+// import IdCell from "./id-cell";
+const constants_1 = require("../../components/ag-grid/constants");
+// import { Dropdown } from "primereact/dropdown";
+const custom_dropdown_1 = tslib_1.__importDefault(require("../../components/ag-grid/custom-dropdown"));
+const BulkAction_1 = tslib_1.__importDefault(require("./BulkAction"));
+// import { ATTRIBUTEDATATYPES } from "../../components/ag-grid/constants";
+const AgGridPage = () => {
+    const [rowData, setRowData] = (0, react_1.useState)([]);
+    const [shouldRefetch, setShouldRefetch] = (0, react_1.useState)(false);
+    const [defaultFilters, setDefaultFilters] = (0, react_1.useState)([]);
+    const deleteComponent = () => {
+        return (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("button", Object.assign({ className: "bg-white", onClick: () => setShouldRefetch(true) }, { children: "Delete" })) });
+    };
+    const noRowsOverlayComponent = () => {
+        return (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("p", { children: "No Rows, message from products" }) });
+    };
+    const [columnDefs] = (0, react_1.useState)([
+        {
+            pinned: "left",
+            lockPosition: "left",
+            cellClass: "lock-pinned",
+            suppressMovable: true,
+            enableHeaderCheckbox: true,
+            enableChildCheckbox: true,
+            id: "101",
+            headerName: "ID",
+            field: "id",
+            isSortable: false,
+            code: 1,
+            dataType: Types_1.ATTRIBUTEDATATYPES.STRING,
+            editable: true,
+            isFilterable: false,
+            cellStyle: { borderRight: "1px solid #ccc" },
+            cellRendererSelector: (params) => {
+                if (params.node.rowPinned) {
+                    return {
+                        component: custom_dropdown_1.default,
+                        params: {
+                            style: { color: "#5577CC" },
+                        },
+                    };
+                }
+                else {
+                    return undefined;
+                }
+            },
+        },
+        {
+            lockPinned: true,
+            id: "102",
+            headerName: "Title",
+            cellRendererSelector: (params) => {
+                if (params.node.rowPinned) {
+                    return {
+                        component: custom_dropdown_1.default,
+                        params: {
+                            style: { color: "#5577CC" },
+                        },
+                    };
+                }
+                else {
+                    return undefined;
+                }
+            },
+            field: "name",
+            isSortable: true,
+            code: 1,
+            dataType: Types_1.ATTRIBUTEDATATYPES.STRING,
+            editable: false,
+            isFilterable: false,
+        },
+        {
+            lockPinned: true,
+            id: "103",
+            headerName: "Body",
+            field: "body",
+            isSortable: true,
+            code: 1,
+            dataType: Types_1.ATTRIBUTEDATATYPES.STRING,
+            editable: false,
+            isFilterable: true,
+        },
+        {
+            lockPinned: true,
+            id: "103",
+            headerName: "Status",
+            field: "status",
+            isSortable: true,
+            columnType: "single",
+            options: [
+                { id: constants_1.STATUSLIST.DRAFT, label: "Draft", value: constants_1.STATUSLIST.DRAFT },
+                { id: constants_1.STATUSLIST.ACTIVE, label: "Active", value: constants_1.STATUSLIST.ACTIVE },
+                {
+                    id: constants_1.STATUSLIST.INACTIVE,
+                    label: "Inactive",
+                    value: constants_1.STATUSLIST.INACTIVE,
+                },
+            ],
+            code: 1,
+            dataType: Types_1.ATTRIBUTEDATATYPES.BOOLEAN,
+            editable: false,
+            isFilterable: true,
+        },
+        {
+            pinned: "right",
+            lockPosition: "rigth",
+            cellClass: "lock-pinned",
+            cellRendererSelector: (params) => {
+                if (params.node.rowPinned) {
+                    return () => null;
+                }
+                else {
+                    return { component: deleteComponent };
+                }
+            },
+        },
+    ]);
+    // const [selectedCity, setSelectedCity] = useState(null);
+    const pinnedTopRowData = (0, react_1.useMemo)(() => {
+        return [
+            { id: "1",
+                name: "nitesh",
+                body: "working out"
+            }
+        ];
+    }, []);
+    // Remove items from - button
+    const removeItem = (checkboxSelectionDetails) => {
+        const unSelectedData = checkboxSelectionDetails === null || checkboxSelectionDetails === void 0 ? void 0 : checkboxSelectionDetails.excludedRecords;
+        const selectedData = checkboxSelectionDetails === null || checkboxSelectionDetails === void 0 ? void 0 : checkboxSelectionDetails.includedRecords;
+        const isIternminite = checkboxSelectionDetails === null || checkboxSelectionDetails === void 0 ? void 0 : checkboxSelectionDetails.isIndeterminate;
+        console.log(checkboxSelectionDetails, 'coming in remove item products');
+        let updatedRowData = [];
+        if (isIternminite) {
+            updatedRowData = unSelectedData;
+        }
+        else if ((selectedData === null || selectedData === void 0 ? void 0 : selectedData.length) && !(isIternminite)) {
+            const childIds = new Set(selectedData === null || selectedData === void 0 ? void 0 : selectedData.map(child => child.id));
+            updatedRowData = rowData.filter(parent => !childIds.has(parent.id));
+        }
+        console.log(updatedRowData, 'result data from remove items in products');
+        return updatedRowData;
+    };
+    const getCheckedRows = (checkedRows) => {
+        console.log(checkedRows, 'checked rows in products');
+    };
+    const getRowData = (startRow, endRow, featureDetails) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        console.log(featureDetails, 'feature details in page for filter queries');
+        const features = featureDetails;
+        // const conditionToRemoveItem = features.checkBoxSelection.allBoxChecked || features.checkBoxSelection.isIndeterminate || features.checkBoxSelection.includedRecords.length || features.checkBoxSelection.excludedRecords.length
+        if (featureDetails.isRemoveClicked) {
+            const result = removeItem(features.checkBoxSelection);
+            const output = {
+                totalRecords: result.length,
+                rowData: result
+            };
+            return yield output;
+        }
+        let totalRecords = 500;
+        const serverSideUrl = `https://jsonplaceholder.typicode.com/comments?_start=${startRow}&_end=${endRow}`;
+        const clientSideUrl = "https://jsonplaceholder.typicode.com/comments?_limit=20";
+        console.log(serverSideUrl, clientSideUrl);
+        const result = yield axios_1.default.get(serverSideUrl);
+        result.data[2].isSelected = true;
+        const outputData = result === null || result === void 0 ? void 0 : result.data.map((item) => {
+            item.status = "Active";
+            return item;
+        });
+        let output = {
+            totalRecords: totalRecords,
+            rowData: outputData
+        };
+        if (featureDetails.searchedText === "data") {
+            output = {
+                totalRecords: 0,
+                rowData: []
+            };
+        }
+        setRowData(result.data);
+        setShouldRefetch(false);
+        return output;
+    });
+    const style = {
+        height: "100vh",
+        width: "100%"
+    };
+    const conditionsToDisplay = {
+        displayFilter: true,
+        displaySort: true,
+        displaySearch: true,
+        displayRefresh: true,
+        displayRemoveItems: true,
+        displayBulkAction: true,
+        enableViewCreate: true
+    };
+    console.log(pinnedTopRowData, defaultFilters);
+    const createView = (viewDetails) => {
+        console.log(viewDetails, 'parsed value for create view');
+    };
+    const selectFilter = () => {
+        const defaultFilters = [
+            {
+                columnName: {
+                    name: "Body",
+                    code: "body",
+                    dataType: "string",
+                },
+                condition: 5,
+                value: "data",
+                id: "0.028544677566825438",
+                isActive: true,
+                logicalOperator: 1, // number
+            },
+        ];
+        setShouldRefetch(true);
+        setDefaultFilters(defaultFilters);
+    };
+    const dynamicText = {
+        filterModelText: {
+            header: "Filter",
+            subHeader: "Streamline Your Search With Filters",
+            resetFilterAction: "Reset Filter",
+            createViewInputPlaceHolder: "Enter",
+            createViewAction: "Create View",
+            applyAction: "Apply",
+            elementOnePlaceHolder: "Select",
+            elementTwoPlaceHolder: "Select",
+            elementThreePlaceHolder_Input: "Enter Text",
+            elementThreePlaceHolder_Input_Number: "Enter Number",
+            elementThreePlaceHolder_DropDown: "Select",
+            elementThreePlaceHolder_MultiSelect: "Select",
+            elementThreePlaceHolder_Calender: "Select Date",
+            onSelectedFilter: "Selected"
+        },
+        sortModelText: {
+            header: "Column Sorting",
+            clearAction: "Clear",
+            applyAction: "Apply",
+            onSelectedSort: "Selected"
+        },
+        recordDetailModelText: {
+            totalRecordHeader: "Total Records"
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("button", Object.assign({ onClick: selectFilter }, { children: "Select Filter" })), (0, jsx_runtime_1.jsx)(parent_for_grid_1.default, { columnData: columnDefs, style: style, getRowData: getRowData, conditionsToDisplay: conditionsToDisplay, rowModelType: constants_1.ROWMODELTYPE.INFINITE, 
+                // pinnedTopRowData={pinnedTopRowData}
+                bulkActionComponent: BulkAction_1.default, getCheckedRows: getCheckedRows, shouldRefetch: shouldRefetch, noRowsOverlayComponent: noRowsOverlayComponent, defaultFilters: defaultFilters, createView: createView, dynamicText: dynamicText, sortOptions: constants_1.COLUMN_SORT_OPTIONS, filterConditions: [{ id: 1, label: "AND" }, { id: 2, label: "OR" }] })] }));
+};
+exports.default = AgGridPage;

package/dist/pages/aggrid/BulkAction.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+function BulkAction() {
+    return ((0, jsx_runtime_1.jsx)("div", { children: "Bulk Action " }));
+}
+exports.default = BulkAction;

package/dist/pages/aggrid/id-cell.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+function IdCell(data) {
+    var _a;
+    console.log(data.row, 'data from grid');
+    return ((0, jsx_runtime_1.jsx)("div", { children: (_a = data.row) === null || _a === void 0 ? void 0 : _a.id }));
+}
+exports.default = IdCell;