sccoreui 6.2.40 → 6.2.41

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/RowGroupTrail.js

@@ -0,0 +1,114 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@ag-grid-community/react");
+require("@ag-grid-community/styles/ag-grid.css");
+require("@ag-grid-community/styles/ag-theme-quartz.css");
+const core_1 = require("@ag-grid-community/core");
+const row_grouping_1 = require("@ag-grid-enterprise/row-grouping");
+const server_side_row_model_1 = require("@ag-grid-enterprise/server-side-row-model");
+const range_selection_1 = require("@ag-grid-enterprise/range-selection");
+const fakeServer_1 = require("./fakeServer");
+core_1.ModuleRegistry.registerModules([row_grouping_1.RowGroupingModule, server_side_row_model_1.ServerSideRowModelModule, range_selection_1.RangeSelectionModule]);
+const getServerSideDatasource = (server) => {
+    return {
+        getRows: (params) => {
+            console.log("[Datasource] - rows requested by grid: ", params.request, params);
+            var response = server.getData(params.request);
+            console.log(response, 'request to server');
+            // adding delay to simulate real server call
+            setTimeout(() => {
+                if (response.success) {
+                    // call the success callback
+                    params.success({
+                        rowData: response.rows,
+                        rowCount: response.lastRow,
+                    });
+                }
+                else {
+                    // inform the grid request failed
+                    params.fail();
+                }
+            }, 1000);
+        },
+    };
+};
+console.log(getServerSideDatasource);
+const GridComponent = () => {
+    const containerStyle = (0, react_1.useMemo)(() => ({ width: "1500px", height: "900px" }), []);
+    const gridStyle = (0, react_1.useMemo)(() => ({ height: "900px", width: "1500px" }), []);
+    const [columnDefs] = (0, react_1.useState)([
+        { field: "country", rowGroup: true, hide: true, editable: true, filter: "agSetColumnFilter" },
+        { field: "athlete", editable: true, filter: "agSetColumnFilter" },
+        { field: "age", editable: true, filter: "agSetColumnFilter" },
+        { field: "sport", rowGroup: true, hide: true, editable: true },
+        { field: "year", rowGroup: true, hide: true, editable: true },
+        { field: "date", editable: true },
+        { field: "gold", editable: true },
+        { field: "silver" },
+        { field: "bronze" },
+        { field: "total" },
+    ]);
+    const defaultColDef = (0, react_1.useMemo)(() => {
+        return {
+            flex: 1,
+            minWidth: 120,
+        };
+    }, []);
+    const autoGroupColumnDef = (0, react_1.useMemo)(() => {
+        return {
+            headerName: "Group",
+            field: "group",
+            cellRenderer: "agGroupCellRenderer",
+            editable: true,
+            cellRendererParams: {
+                suppressCount: true,
+            },
+        };
+    }, []);
+    const onGridReady = (0, react_1.useCallback)((params) => {
+        fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
+            .then((resp) => resp.json())
+            .then((data) => {
+            // setup the fake server with entire dataset
+            var fakeServer = (0, fakeServer_1.FakeServer)(data, ['country', 'sport']);
+            // create datasource with a reference to the fake server
+            // var datasource = getServerSideDatasource(fakeServer);
+            const dataSource = {
+                getRows: (params) => {
+                    console.log("[Datasource] - rows requested by grid: ", params.request, params);
+                    var response = fakeServer.getData(params.request);
+                    console.log(response, 'request to server');
+                    // adding delay to simulate real server call
+                    setTimeout(() => {
+                        if (response.success) {
+                            console.log(response, 'response from fake server');
+                            // call the success callback
+                            params.success({
+                                rowData: response.rows,
+                                rowCount: response.lastRow,
+                            });
+                        }
+                        else {
+                            // inform the grid request failed
+                            params.fail();
+                        }
+                    }, 1000);
+                },
+            };
+            // console.log(datasource, 'data source passing');
+            // register the datasource with the grid
+            params.api.setGridOption("serverSideDatasource", dataSource);
+        });
+    }, []);
+    const fillOperation = (0, react_1.useCallback)((params) => {
+        console.log(params.column, 'params columns', params);
+        if (params.column.getColId() === "country") {
+            return params.currentCellValue;
+        }
+        return params.values[params.values.length - 1];
+    }, []);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ style: containerStyle }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ style: gridStyle, className: "ag-theme-quartz" }, { children: (0, jsx_runtime_1.jsx)(react_2.AgGridReact, { columnDefs: columnDefs, defaultColDef: defaultColDef, autoGroupColumnDef: autoGroupColumnDef, rowModelType: "serverSide", cacheBlockSize: 10, onGridReady: onGridReady, suppressServerSideFullWidthLoadingRow: true, enableRangeSelection: true, enableFillHandle: true, fillOperation: fillOperation }) })) })));
+};
+exports.default = GridComponent;

package/dist/pages/aggrid/fakeServer.js

@@ -0,0 +1,95 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FakeServer = void 0;
+function FakeServer(allData, groupFields) {
+    // allData.splice(10,8000)
+    // Get unique data according to first group
+    const getUnique = (allData, groupField) => {
+        let filterField = {};
+        const withFilter = allData === null || allData === void 0 ? void 0 : allData.filter((data, idx) => {
+            if (!(filterField === null || filterField === void 0 ? void 0 : filterField.hasOwnProperty(data[groupField]))) {
+                filterField[data[groupField]] = idx;
+                return data;
+            }
+        });
+        return withFilter;
+    };
+    // const uniqueData = groupFields.reduce((data, field) => getUnique(data, field), allData);
+    const uniqueData = getUnique(allData, groupFields[0]);
+    // Returns the data to grid
+    return {
+        getData: function (request) {
+            var results = executeQuery(request);
+            const output = {
+                success: true,
+                rows: results,
+                lastRow: getLastRowIndex(request)
+            };
+            return output;
+        }
+    };
+    function executeQuery(request) {
+        console.log(request, groupFields, 'request in execute query');
+        let filteredData = applyFilters(request, allData);
+        console.log(filteredData, 'filtered data in execute query');
+        // return filteredData
+        // var sortedData = applySorting(request, filteredData);
+        if (allData.length <= 10)
+            return filteredData;
+        // Only used when no api is called trimming data from front end (ex:group-grid:route)
+        let paginatedData = applyPagination(request, filteredData);
+        // console.log(paginatedData,'paginated data ')
+        return paginatedData;
+    }
+    function applyFilters(request, data) {
+        var _a;
+        let filteredData = uniqueData;
+        const currentGroup = request === null || request === void 0 ? void 0 : request.groupKeys;
+        const groupedCols = request === null || request === void 0 ? void 0 : request.rowGroupCols;
+        let groupFilteredData = [];
+        let hash = {};
+        if (currentGroup && currentGroup.length > 0) {
+            const nextSingleField = (_a = groupedCols[currentGroup.length]) === null || _a === void 0 ? void 0 : _a.field;
+            data.filter((item, idx) => {
+                // Check all conditions
+                let matchesAllConditions = true;
+                for (let i = 0; i < currentGroup.length; i++) {
+                    const field = groupedCols[i].field;
+                    const value = currentGroup[i];
+                    if (item[field] !== value) {
+                        matchesAllConditions = false;
+                        break;
+                    }
+                }
+                if (matchesAllConditions) {
+                    if (nextSingleField) {
+                        if (!hash.hasOwnProperty(item[nextSingleField])) {
+                            console.log(item, 'item sending in group filtered data');
+                            groupFilteredData.push(item);
+                        }
+                        hash[item[nextSingleField]] = idx;
+                    }
+                    else {
+                        groupFilteredData.push(item);
+                    }
+                }
+            });
+        }
+        else {
+            groupFilteredData = filteredData;
+        }
+        return groupFilteredData;
+    }
+    function applyPagination(request, data) {
+        if (request.endRow === undefined || request.startRow === undefined) {
+            return data;
+        }
+        var blockSize = (request === null || request === void 0 ? void 0 : request.endRow) - (request === null || request === void 0 ? void 0 : request.startRow);
+        var startIndex = request === null || request === void 0 ? void 0 : request.startRow;
+        return data.slice(startIndex, startIndex + blockSize);
+    }
+    function getLastRowIndex(request) {
+        return executeQuery(Object.assign(Object.assign({}, request), { startRow: undefined, endRow: undefined })).length;
+    }
+}
+exports.FakeServer = FakeServer;

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;

package/dist/pages/aggrid/interface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/pages/avatar/avatar.js

@@ -0,0 +1,338 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+// import { Button } from "primereact/button";
+// import avatar from "../../assets/images/avatar.png";
+// import SvgComponent from "../../directives/svg-component";
+// import "./avatar.scss";
+// import { Avatar } from "primereact/avatar";
+// import { AvatarGroup } from "primereact/avatargroup";
+// import profileimage from "../../assets/images/profile-square-image.png";
+// // import FormComponent from "../../components/form/form";
+// import FormFields from "../../components/form/form-fields/form-fields";
+// import { object, number } from "yup";
+// import TextEditor from "../../components/froala-editor/FroalaEditor";
+// import { useState } from "react";
+// const AvatarComponent = () => {
+//   const [text, setText] = useState<string>("");
+//   // const initVals = {
+//   //   title: 0,
+//   // }
+//   const onChangeText = (e: any) => {
+//     setText(e);
+//     debugger
+//   }
+//   // const FormVals = (props: any) => {
+//   //   const { errors, touched, isValid, values, setFieldValue } = props;
+//   //   const triggerSubmit = (e: any) => {
+//   //     console.log(e)
+//   //     debugger
+//   //     console.log(values);
+//   //     // submitForm()
+//   //     // resetForm()
+//   //   }
+//   //   return (
+//   //     <div className="p-5">
+//   //       <Button className={`p-button-xs ${isValid && Object.keys(touched).length === Object.keys(initVals).length ? '' : 'p-disabled'}`} type="submit" label="Create" onClick={(e: any) => triggerSubmit(e)} />
+//   //       <FormFields.InputNumberField  min={0} name={'title'} label={'Title'} setFieldValue={setFieldValue} length={'full'} placeholder={'Enter the plan title'} touched={touched} errors={errors} />
+//   //     </div>
+//   //   )
+//   // }
+//   // const validtionSchema = object().shape({
+//   //   title: number().min(1,'error').max(24, 'err max').test("custom","invalid",(value: any) => {
+//   //     if (value === "") {
+//   //       return false
+//   //     } else {
+//   //       return true;
+//   //     }
+//   //   })
+//   // })
+//   const config = {
+//     placeholder: 'Enter text',
+//     charCounterCount: true,
+//   }
+//   return (
+//     <>
+//       <h2 className="flex bg-gray-200 p-3 justify-content-center mb-4">Tags</h2>
+//       <div className="grid">
+//         {/* <FormComponent values={initVals} validations={validtionSchema}>
+//             {
+//               ({errors, touched, isValid, values, actions,resetForm, submitForm, setFieldValue}: any) => (
+//                   <FormVals errors={errors} touched={touched} isValid={isValid} values={values} actions={actions} resetForm={resetForm} submitForm={submitForm} setFieldValue={setFieldValue} />
+//               )
+//           }
+//         </FormComponent> */}
+//         <TextEditor config={config} model={text} onModelChange={onChangeText} />
+//         <div className="col-12 md:col-4 lg:col-3 px-7 flex align-items-center my-8 gap-3">
+//           <img
+//             src={avatar}
+//             className=" border-circle w-4rem h-4rem p-avatar-focus"
+//           />
+//           <div className="w-4rem h-4rem border-circle flex align-items-center justify-content-center relative ">
+//             <img
+//               src={avatar}
+//               className=" border-circle w-4rem h-4rem p-avatar-focus"
+//             />
+//             <span
+//               className="bg-green-500 w-1rem h-1rem border-circle absolute border-1 border-white"
+//               style={{
+//                 position: "absolute",
+//                 right: "0",
+//                 bottom: "0",
+//               }}
+//             ></span>
+//           </div>
+//           <div className="w-4rem h-4rem border-circle flex align-items-center justify-content-center relative ">
+//             <img
+//               src={avatar}
+//               className=" border-circle w-4rem h-4rem p-avatar-focus"
+//             />
+//             <span
+//               className=" absolute "
+//               style={{
+//                 right: "-2px",
+//                 bottom: "-2px",
+//               }}
+//             >
+//               <SvgComponent icon="avatar-company-logo-2xl" />
+//             </span>
+//           </div>
+//           <div className="w-4rem h-4rem border-circle flex align-items-center justify-content-center relative ">
+//             <img
+//               src={avatar}
+//               className=" border-circle w-4rem h-4rem p-avatar-focus"
+//             />
+//             <span
+//               className=" absolute "
+//               style={{
+//                 right: "-2px",
+//                 bottom: "-2px",
+//               }}
+//             >
+//               <SvgComponent icon="verified-tick-2xl" />
+//             </span>
+//           </div>
+//         </div>
+//         <div className="col-12 md:col-4 lg:col-3 px-7 flex align-items-center my-8 gap-3">
+//           <span className="w-4rem h-4rem border-circle bg-gray-100 flex align-items-center relative justify-content-center border-3 border-transparent hover:border-gray-200">
+//             <SvgComponent icon="avatar-user-2xl" />
+//           </span>
+//           <span className="w-4rem h-4rem border-circle bg-gray-100 flex align-items-center relative justify-content-center border-3 border-transparent hover:border-gray-200">
+//             <SvgComponent icon="avatar-user-2xl" />
+//             <span
+//               className="bg-green-500 w-1rem h-1rem border-circle  border-1 border-white"
+//               style={{
+//                 position: "absolute",
+//                 right: "0px",
+//                 bottom: "0px",
+//               }}
+//             ></span>
+//           </span>
+//           <span className="w-4rem h-4rem border-circle  bg-gray-100 text-2xl flex align-items-center text-gray-600 font-medium  justify-content-center border-3 border-transparent hover:border-gray-200">
+//             OR
+//           </span>
+//           <span
+//             className="w-4rem h-4rem border-circle relative bg-gray-100 text-2xl flex align-items-center text-gray-600 font-medium relative justify-content-center border-3 border-transparent hover:border-gray-200"
+//             style={{ fontSize: "18px" }}
+//           >
+//             OR
+//             <span
+//               className="bg-green-500 w-1rem h-1rem border-circle absolute border-1 border-white"
+//               style={{
+//                 position: "absolute",
+//                 right: "0px",
+//                 bottom: "0px",
+//               }}
+//             ></span>
+//           </span>
+//           <span className="w-4rem h-4rem border-circle relative bg-gray-100 text-xl flex align-items-center text-gray-600 font-medium relative justify-content-center border-3 border-transparent hover:border-gray-200">
+//             OR
+//             <span
+//               className="absolute "
+//               style={{
+//                 position: "absolute",
+//                 right: "-2px",
+//                 bottom: "-2px",
+//               }}
+//             >
+//               <SvgComponent icon="avatar-company-logo-xl" />
+//             </span>
+//           </span>
+//         </div>
+//         <div className="col-12 md:col-4 lg:col-3 px-7 flex align-items-center my-8 gap-3">
+//           <Button
+//             rounded
+//             tooltipOptions={{ position: "top" }}
+//             tooltip="Add user"
+//             className="w-3rem h-3rem border-gray-300 border-1 bg-white avatar-button p-dark-tooltip border-dashed p-0 flex align-items-center justify-content-center"
+//           >
+//             <SvgComponent icon="avatar-button-plus" />
+//           </Button>
+//           <Button
+//             disabled
+//             rounded
+//             tooltipOptions={{ position: "top" }}
+//             tooltip="Add user"
+//             className="border-gray-300 border-1 avatar-button bg-white p-dark-tooltip border-dashed w-3rem h-3rem flex align-items-center justify-content-center"
+//           >
+//             <SvgComponent icon="avatar-button-plus" />
+//           </Button>
+//         </div>
+//         <div className="col-12 md:col-4 lg:col-3 px-7 flex align-items-center my-8 gap-3 my-8">
+//           <div className="flex align-items-center">
+//             <AvatarGroup>
+//               {/* you can define the size of the avatar using size property with "noraml, large, xlarge" values */}
+//               <Avatar image={avatar} shape="circle" size="large" />
+//               <Avatar image={avatar} shape="circle" size="large" />
+//               <Avatar image={avatar} shape="circle" size="large" />
+//               <Avatar image={avatar} shape="circle" size="large" />
+//               <Avatar image={avatar} shape="circle" size="large" />
+//               <Avatar
+//                 label="+2"
+//                 shape="circle"
+//                 size="large"
+//                 className="bg-gray-100 text-gray-600 text-base font-medium"
+//               />
+//             </AvatarGroup>
+//             <Button
+//               rounded
+//               tooltipOptions={{ position: "top" }}
+//               tooltip="Add user"
+//               className="border-gray-300 p-0 border-1 ml-1 bg-white avatar-button  p-dark-tooltip border-dashed h-2rem w-2rem flex align-items-center justify-content-center"
+//             >
+//               <SvgComponent icon="avatar-button-plus" />
+//             </Button>
+//           </div>
+//         </div>
+//         <div className="col-12 md:col-4 lg:col-3 px-7 flex flex-wrap align-items-center my-8 gap-3 my-8">
+//           <div className="flex align-items-center gap-3">
+//             <img
+//               src={avatar}
+//               className=" border-circle w-2rem h-2rem p-avatar-focus"
+//             />
+//             <div className="flex flex-column">
+//               <span className="text-base font-semibold line-height-2">
+//                 Olivia Rhye
+//               </span>
+//               <span className="text-sm font-normal line-height-2">
+//                 olivia@untitledui.com
+//               </span>
+//             </div>
+//           </div>
+//           <div className="flex align-items-center gap-3">
+//             <div className="w-2rem h-2rem border-circle flex align-items-center justify-content-center relative ">
+//               <img
+//                 src={avatar}
+//                 className=" border-circle w-2rem h-2rem p-avatar-focus"
+//               />
+//               <span
+//                 className="bg-green-500 green-online-indicator-sm border-circle absolute border-1 border-white"
+//                 style={{
+//                   position: "absolute",
+//                   right: "0",
+//                   bottom: "0",
+//                 }}
+//               ></span>
+//             </div>
+//             <div className="flex flex-column">
+//               <span className="text-base font-semibold line-height-2">
+//                 Olivia Rhye
+//               </span>
+//               <span className="text-sm font-normal line-height-2">
+//                 olivia@untitledui.com
+//               </span>
+//             </div>
+//           </div>
+//           <div className="flex align-items-center gap-3">
+//             <div className="w-3rem h-3rem border-circle flex align-items-center justify-content-center relative ">
+//               <img
+//                 src={avatar}
+//                 className=" border-circle w-3rem h-3rem p-avatar-focus"
+//               />
+//               <span
+//                 className=" absolute "
+//                 style={{
+//                   right: "-2px",
+//                   bottom: "-2px",
+//                 }}
+//               >
+//                 <SvgComponent icon="avatar-company-logo-lg" />
+//               </span>
+//             </div>
+//             <div className="flex flex-column">
+//               <span className="text-lg font-semibold line-height-3">
+//                 Olivia Rhye
+//               </span>
+//               <span className="text-lg font-normal line-height-3">
+//                 olivia@untitledui.com
+//               </span>
+//             </div>
+//           </div>
+//           <div className="flex align-items-center gap-3">
+//             <div className="w-4rem h-4rem border-circle flex align-items-center justify-content-center relative ">
+//               <img
+//                 src={avatar}
+//                 className=" border-circle w-4rem h-4rem p-avatar-focus"
+//               />
+//               <span
+//                 className=" absolute "
+//                 style={{
+//                   right: "-2px",
+//                   bottom: "-2px",
+//                 }}
+//               >
+//                 <SvgComponent icon="verified-tick-xl" />
+//               </span>
+//             </div>
+//             <div className="flex flex-column">
+//               <span className="text-lg font-semibold line-height-3">
+//                 Olivia Rhye
+//               </span>
+//               <span className="text-lg font-normal line-height-3">
+//                 olivia@untitledui.com
+//               </span>
+//             </div>
+//           </div>
+//         </div>
+//         <div className="col-12 md:col-4 lg:col-3 px-7 flex flex-wrap align-items-center my-8 gap-3 my-8">
+//           <div className="w-6rem h-6rem border-circle flex align-items-center justify-content-center relative ">
+//             <img
+//               src={avatar}
+//               className=" border-circle border-3 border-white w-6rem h-6rem shadow-4"
+//             />
+//             <span
+//               className=" absolute "
+//               style={{
+//                 right: "2px",
+//                 bottom: "2px",
+//               }}
+//             >
+//               <SvgComponent icon="verified-tick-3xl" />
+//             </span>
+//           </div>
+//         </div>
+//         <div className="col-12 md:col-4 lg:col-3 px-7 flex flex-wrap align-items-center my-8 gap-3 my-8">
+//           <div className="w-10rem flex flex-column align-items-start">
+//             <img src={profileimage} alt="profile" className="h-10rem " />
+//             <span className="text-lg text-gray-900 line-height-3 pt-2">
+//               Olivia Rhye
+//             </span>
+//             <span className="flex align-items-center gap-2 line-height-3 ">
+//               <a href="www.google.com">
+//                 <SvgComponent icon="link-01" />
+//               </a>
+//               <a href="www.google.com" className="text-gray-500 font-normal">
+//                 Source
+//               </a>
+//             </span>
+//           </div>
+//         </div>
+//       </div>
+//     </>
+//   );
+// };
+// export default AvatarComponent;
+const avatar = () => {
+    return ((0, jsx_runtime_1.jsx)("div", { children: "avatar" }));
+};
+exports.default = avatar;