added manual pagination (#140)

* added manual pagination * added mdmsv2 handling in Customdrodpown
egovernments · Oct 17, 2024 · 46bf4ce · 46bf4ce
1 parent f82f308
commit 46bf4ce
Show file tree

Hide file tree

Showing 8 changed files with 107 additions and 17 deletions.
diff --git a/react/example/package.json b/react/example/package.json
@@ -10,7 +10,7 @@
     "build": "webpack --mode production"
   },
   "dependencies": {
-    "@egovernments/digit-ui-components": "0.0.2-beta.48",
+    "@egovernments/digit-ui-components": "0.0.2-beta.49",
     "@egovernments/digit-ui-libraries": "1.8.2-beta.1",
     "@egovernments/digit-ui-module-common": "1.7.10",
     "@egovernments/digit-ui-module-core": "1.8.1-beta.6",

diff --git a/react/modules/core/package.json b/react/modules/core/package.json
@@ -14,7 +14,7 @@
     "prepublish": "yarn build"
   },
   "dependencies": {
-    "@egovernments/digit-ui-components": "0.0.2-beta.48",
+    "@egovernments/digit-ui-components": "0.0.2-beta.49",
     "@egovernments/digit-ui-react-components": "1.8.1-beta.4",
     "react": "17.0.2",
     "react-dom": "17.0.2",

diff --git a/react/modules/sample/package.json b/react/modules/sample/package.json
@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "@egovernments/digit-ui-react-components": "1.8.1-beta.4",
-    "@egovernments/digit-ui-components": "0.0.2-beta.48",
+    "@egovernments/digit-ui-components": "0.0.2-beta.49",
     "react": "17.0.2",
     "react-date-range": "^1.4.0",
     "react-dom": "17.0.2",

diff --git a/react/package.json b/react/package.json
@@ -85,7 +85,7 @@
     "@egovernments/digit-ui-module-sample": "0.0.1",
     "@egovernments/digit-ui-react-components": "1.7.10",
     "@egovernments/digit-ui-svg-components": "1.0.12",
-    "@egovernments/digit-ui-components": "0.0.2-beta.48",
+    "@egovernments/digit-ui-components": "0.0.2-beta.49",
     "babel-loader": "8.1.0",
     "clean-webpack-plugin": "4.0.0",
     "css-loader": "5.2.6",

diff --git a/react/ui-components/package.json b/react/ui-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@egovernments/digit-ui-components",
-  "version": "0.0.2-beta.48",
+  "version": "0.0.2-beta.49",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",

diff --git a/react/ui-components/src/molecules/CustomDropdown.js b/react/ui-components/src/molecules/CustomDropdown.js
@@ -7,23 +7,23 @@ import Dropdown from "../atoms/Dropdown";
 import Toggle from "../atoms/Toggle";
 import { createFunction } from "./techMolecules/createFunction";
 
-const CustomDropdown = ({ t, config, inputRef, label, onChange, value, errorStyle, disabled, type, additionalWrapperClass = "",variant }) => {
+const CustomDropdown = ({ t, config, inputRef, label, onChange, value, errorStyle, disabled, type, additionalWrapperClass = "",variant,mdmsv2}) => {
   const master = { name: config?.mdmsConfig?.masterName };
   if (config?.mdmsConfig?.filter) {
     master["filter"] = config?.mdmsConfig?.filter;
   }
 
   const { isLoading, data } = window?.Digit?.Hooks.useCustomMDMS(Digit?.ULBService?.getStateId(), config?.mdmsConfig?.moduleName, [master], {
     select: config?.mdmsConfig?.select
-      ? createFunction(config?.mdmsConfig?.select)
-      : (data) => {
+    ? createFunction(config?.mdmsConfig?.select)
+    : (data) => {
         const optionsData = _.get(data, `${config?.mdmsConfig?.moduleName}.${config?.mdmsConfig?.masterName}`, []);
         return optionsData
           .filter((opt) => (opt?.hasOwnProperty("active") ? opt.active : true))
           .map((opt) => ({ ...opt, name: `${config?.mdmsConfig?.localePrefix}_${Digit.Utils.locale.getTransformedLocale(opt.code)}` }));
       },
-    enabled: config?.mdmsConfig ? true : false,
-  });
+    enabled: (config?.mdmsConfig || config?.mdmsv2) ? true : false,
+  },mdmsv2);
 
   if (isLoading) {
     return <Loader />;

diff --git a/react/ui-components/src/molecules/TableMolecule.js b/react/ui-components/src/molecules/TableMolecule.js
@@ -27,6 +27,11 @@ const TableMolecule = ({
   pagination = {
     initialRowsPerPage: 5,
     rowsPerPageOptions: [5, 10, 15, 20],
+    manualPagination : false,
+    onPageSizeChange : () => {},
+    onNextPage : () => {},
+    onPrevPage : () => {},
+    currentPage : 1
   },
   styles = {
     withBorder: false,
@@ -43,6 +48,7 @@ const TableMolecule = ({
   sorting = {
     isTableSortable: true,
     initialSortOrder: "ascending",
+    customSortFunction:()=>{}
   },
   selection = {
     addCheckbox: false,
@@ -69,7 +75,7 @@ const TableMolecule = ({
   actions,
 }) => {
   const { t } = useTranslation();
-  const [currentPage, setCurrentPage] = useState(1);
+  const [currentPage, setCurrentPage] = useState(pagination?.currentPage || 1);
   const [expandedRows, setExpandedRows] = useState([]);
   const [rowsPerPage, setRowsPerPage] = useState(
     pagination?.initialRowsPerPage
@@ -159,6 +165,10 @@ const TableMolecule = ({
     if (!sortOrder) return;
     const sortRows = (columnIndex) => {
       const newSortedRows = [...rows];
+      if (sortOrder === "custom") {
+        setSortedRows(sorting?.customSortFunction(newSortedRows,columnIndex));
+        return;
+      }
       newSortedRows.sort((a, b) => {
         const columnA = a[columnIndex];
         const columnB = b[columnIndex];
@@ -192,7 +202,7 @@ const TableMolecule = ({
         sortRows(firstSortableColumnIndex);
       }
     }
-  }, [sortedColumnIndex, sortOrder, rows, headerData]);
+  }, [sortedColumnIndex, sortOrder, rows, headerData,sorting]);
 
   const currentRows = sorting?.isTableSortable
     ? sortedRows?.slice(indexOfFirstRow, indexOfLastRow)
@@ -661,7 +671,7 @@ const TableMolecule = ({
                         className="pagination-dropdown"
                         id="rowsPerPage"
                         value={rowsPerPage}
-                        onChange={handleRowsPerPageChange}
+                        onChange={pagination?.manualPagination ? pagination?.onPageSizeChange : handleRowsPerPageChange}
                       >
                         {pagination?.rowsPerPageOptions.map((option) => (
                           <option key={option} value={option}>
@@ -679,15 +689,15 @@ const TableMolecule = ({
                     </div>
                     <div className="pagination">
                       <button
-                        onClick={() => handlePageChange(currentPage - 1)}
+                        onClick={pagination?.manualPagination ? () => pagination?.onPrevPage() : () => handlePageChange(currentPage - 1)}
                         disabled={currentPage === 1}
                       >
                         <SVG.ChevronLeft
                           fill={currentPage === 1 ? "#C5C5C5" : "#363636"}
                         ></SVG.ChevronLeft>
                       </button>
                       <button
-                        onClick={() => handlePageChange(currentPage + 1)}
+                        onClick={pagination?.manualPagination ? () => pagination?.onNextPage() : () => handlePageChange(currentPage + 1)}
                         disabled={currentPage === totalPages}
                       >
                         <SVG.ChevronRight
@@ -778,6 +788,10 @@ TableMolecule.propTypes = {
   pagination: PropTypes.shape({
     initialRowsPerPage: PropTypes.number,
     rowsPerPageOptions: PropTypes.arrayOf(PropTypes.number),
+    manualPagination: PropTypes.bool,
+    onPageSizeChange : PropTypes.func,
+    onNextPage : PropTypes.func,
+    onPrevPage : PropTypes.func 
   }),
   styles: PropTypes.shape({
     withBorder: PropTypes.bool,
@@ -816,6 +830,10 @@ TableMolecule.defaultProps = {
   pagination: {
     initialRowsPerPage: 5,
     rowsPerPageOptions: [5, 10, 15, 20],
+    manualPagination:false,
+    onPageSizeChange: () => {},
+    onNextPage: () => {},
+    onPrevPage: () => {}
   },
   styles: {
     withBorder: false,

diff --git a/react/ui-components/src/molecules/stories/TableMolecule.stories.js b/react/ui-components/src/molecules/stories/TableMolecule.stories.js
@@ -1374,15 +1374,20 @@ const commonArgs = {
   },
   pagination:{
     initialRowsPerPage:5,
-    rowsPerPageOptions:[5,10,15,20]
+    rowsPerPageOptions:[5,10,15,20],
+    manualPagination:false,
+    onNextPage:()=>{},
+    onPrevPage:()=>{},
+    onPageSizeChange:()=>{}
   },
   tableDetails:{
     tableTitle: "",
     tableDescription: "",
   },
   sorting:{
     isTableSortable:false,
-    initialSortOrder:""
+    initialSortOrder:"",
+    customSortFunction:()=>{}
   },
   selection: {
     addCheckbox: false,
@@ -2616,4 +2621,71 @@ WithOnlyOneRowNestedTable.args = {
     showSelectedState: false,
   },
   onRowClick: undefined
+};
+
+export const ManualPagination = Template.bind({});
+ManualPagination.args = {
+  ...commonArgs,
+  headerData: headerData,
+  rows:rows,
+  pagination:{
+    initialRowsPerPage: 2,
+    rowsPerPageOptions: [2, 4, 6, 8, 10],
+    manualPagination: true,
+    onPageSizeChange:(event)=> { console.log(event)},
+    onNextPage:()=>{console.log("onNextPage")},
+    onPrevPage:()=>{console.log("onPrevPage")}
+  },
+  styles:{
+    withAlternateBg: false,
+    withColumnDivider: false,
+    extraStyles: {},
+    withHeaderDivider:true,
+    withRowDivider:true,
+    withBorder:true,
+  },
+  selection: {
+    addCheckbox: false,
+    checkboxLabel: '',
+    initialSelectedRows: [],
+    onSelectedRowsChange: (e) => {
+      console.log("These are the selected rows", e);
+    },
+    showSelectedState: false,
+  },
+  onRowClick:undefined,
+};
+
+const myCustomSort = (rows, columnIndex) => {
+  const middleIndex = Math.floor(rows.length / 2); 
+  const firstHalfReversed = [...rows.slice(0, middleIndex)].reverse(); 
+  const secondHalf = rows.slice(middleIndex); 
+  return [...firstHalfReversed, ...secondHalf];
+};
+
+
+export const WithCustomSortOrder = Template.bind({});
+WithCustomSortOrder.args = {
+  ...commonArgs,
+  headerData: headerData,
+  rows:rows,
+  pagination:{
+    initialRowsPerPage: 2,
+    rowsPerPageOptions: [2, 4, 6, 8, 10],
+  },
+  selection: {
+    addCheckbox: false,
+    checkboxLabel: 'Select All',
+    initialSelectedRows: [],
+    onSelectedRowsChange: (e) => {
+      console.log("These are the selected rows", e);
+    },
+    showSelectedState: false,
+  },
+  sorting:{
+    initialSortOrder: "custom",
+    isTableSortable:true,
+    customSortFunction:myCustomSort
+  },
+  onRowClick:undefined,
 };