@itilite/iui-user-management 1.0.1 → 1.0.2

package/dist/index.modern.js

@@ -1,4 +1,4 @@
-import { IUIAsyncSelect, IUIBox, IUILabel, IUIFileUpload, IUICheckboxButton, IUIPhone, IUISelect, IUIDatePicker, IUIInput, IUIDivider, IUIGrid, IUITypography, IUIRadio, IUIButton, IUIModal, IUIAccordion, IUIAccordionSummary, IUIAccordionDetails, IUIIconButton, IUICard, IUIBackdrop, IUICircularProgress, IUIBreadCrumb, IUIDropzone, IUIStepper, IUIFormControlLabel, IUICheckBox, IUIPrimaryRadio, IUITable, IUISkeleton, IUIProfileBox, IUIFormGroup, IUIDropdownButton, IUITabs } from '@itilite/iuistyles';
+import { IUIAsyncSelect, IUIBox, IUILabel, IUIFileUpload, IUICheckboxButton, IUIPhone, IUISelect, IUIDatePicker, IUIInput, IUIDivider, IUIGrid, IUITypography, IUIRadio, IUIButton, IUIModal, IUIAccordion, IUIAccordionSummary, IUIAccordionDetails, IUIIconButton, IUICard, IUIBackdrop, IUICircularProgress, IUIBreadCrumb, IUIDropzone, IUIStepper, IUIFormControlLabel, IUICheckBox, IUIPrimaryRadio, IUITable, IUISkeleton, IUIProfileBox, IUIFormGroup, IUISearch, IUIDropdownButton, IUITabs } from '@itilite/iuistyles';
 import React, { useState, useEffect, useRef, Fragment as Fragment$1 } from 'react';
 import { configs, services, utilUrls } from '@itilite/utils';
 import axios from 'axios';
@@ -14,7 +14,8 @@ import { withStyles } from '@material-ui/core/styles';
 import Switch from '@material-ui/core/Switch';
 import MoreHorizIcon from '@material-ui/icons/MoreHoriz';
 import Button from '@material-ui/core/Button';
-import { Popper, Grow, Paper, ClickAwayListener, MenuList, MenuItem, Typography } from '@material-ui/core';
+import { Popper, Grow, Paper, ClickAwayListener, MenuList, MenuItem, Typography, Box } from '@material-ui/core';
+import { useScrollPosition } from '@n8tb1t/use-scroll-position';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -6698,7 +6699,7 @@ var fetchBulkactionHistory = function fetchBulkactionHistory(url) {
   };
 };
 
-var styles$5 = {"UUIUserManagementList":"_3WNHx","pageHeader":"_1WLpc","buttonWrapper":"_2egTG","headingWrapper":"_1He01","headingSignUpWrapper":"_Q8vqd","heading":"_1uPaO","headingLarge":"_2FsLd","headingMedium":"_nGXA9","headingSmall":"_2rpwF","description":"_25vb9","headerText":"_1Ny9J","letterImage":"_2hr3R","tablewrapper":"_1-RPw","rowText":"_1LXyO","textTransform":"_3kFQS","lightColor":"_3Ghgw","avatarClassName":"_2qO_X","tooltipText":"_151u_","tooltip":"_-LQNH","importModalBodyContainer":"_25xUk","dividerColor":"_2HZv9","w100":"_3vGmU","downloadTemplateContainer":"_3-Xu_","downloadTemplateDescContainer":"_tLw43","labelContainer":"_7TYUZ","downlTempHeader":"__CZpe","downlTempDescription":"_19jEe","downloadTemplateButton":"_1qXtq","fileUploaderContainer":"_1YVz2","colGap":"_3vnY5","deActivateModalContainer":"_28H9H","backdrop":"_1ky1x","errorText":"_26_if","user_list_page_tabs":"_xWE7K","TabLabelCount":"_13pXn"};
+var styles$5 = {"UUIUserManagementList":"_3WNHx","scrollOverlayMenu":"_2_WEg","overlaysearch":"_1Pbhb","pageHeader":"_1WLpc","buttonWrapper":"_2egTG","headingWrapper":"_1He01","headingSignUpWrapper":"_Q8vqd","heading":"_1uPaO","headingLarge":"_2FsLd","headingMedium":"_nGXA9","headingSmall":"_2rpwF","description":"_25vb9","headerText":"_1Ny9J","letterImage":"_2hr3R","tablewrapper":"_1-RPw","rowText":"_1LXyO","textTransform":"_3kFQS","lightColor":"_3Ghgw","avatarClassName":"_2qO_X","tooltipText":"_151u_","tooltip":"_-LQNH","importModalBodyContainer":"_25xUk","dividerColor":"_2HZv9","w100":"_3vGmU","downloadTemplateContainer":"_3-Xu_","downloadTemplateDescContainer":"_tLw43","labelContainer":"_7TYUZ","downlTempHeader":"__CZpe","downlTempDescription":"_19jEe","downloadTemplateButton":"_1qXtq","fileUploaderContainer":"_1YVz2","colGap":"_3vnY5","deActivateModalContainer":"_28H9H","backdrop":"_1ky1x","errorText":"_26_if","user_list_page_tabs":"_xWE7K","TabLabelCount":"_13pXn"};
 
 var BulkUploadModal = function BulkUploadModal(props) {
   var isOpenImportUsersModal = props.isOpenImportUsersModal,
@@ -8296,7 +8297,8 @@ var StickyHeadTable = function StickyHeadTable(props) {
     isDataFetching: isDataFetching,
     disableRowCheckbox: disableRowCheckbox,
     searchBoxWidth: "400px",
-    searchValue: searchValue
+    searchValue: searchValue,
+    hideTopPagination: false
   });
 };
 var SingupRequests = function SingupRequests(props) {
@@ -8453,7 +8455,7 @@ var UserList = function UserList(_ref2) {
   var _React$useState = React.useState(1),
     page = _React$useState[0],
     setPage = _React$useState[1];
-  var _useState = useState(5),
+  var _useState = useState(10),
     rowsPerPage = _useState[0],
     setRowsPerPage = _useState[1];
   var _React$useState2 = React.useState({}),
@@ -8499,18 +8501,41 @@ var UserList = function UserList(_ref2) {
   var _useState10 = useState(false),
     isApiFetching = _useState10[0],
     setisApiFetching = _useState10[1];
-  var _React$useState5 = React.useState(1),
-    signup_page = _React$useState5[0],
-    setSignUpPage = _React$useState5[1];
+  var _React$useState5 = React.useState(false),
+    overlayMenu = _React$useState5[0],
+    setOverlayMenu = _React$useState5[1];
+  useScrollPosition(function (_ref3) {
+    var prevPos = _ref3.prevPos,
+      currPos = _ref3.currPos;
+    if (prevPos.y - currPos.y > 0) {
+      if (currPos.y < -130) {
+        setOverlayMenu(true);
+      }
+    } else {
+      if (currPos.y > -190) {
+        setOverlayMenu(false);
+      }
+    }
+  }, [overlayMenu]);
+  var scrollTo = function scrollTo(id) {
+    var el = document.getElementById(id);
+    window.scrollTo({
+      top: el.offsetTop,
+      behavior: 'smooth'
+    });
+  };
+  var _React$useState6 = React.useState(1),
+    signup_page = _React$useState6[0],
+    setSignUpPage = _React$useState6[1];
   var _useState11 = useState(5),
     signup_rowsPerPage = _useState11[0],
     setSignUpRowsPerPage = _useState11[1];
-  var _React$useState6 = React.useState('asc'),
-    signup_order = _React$useState6[0],
-    setSignUpOrder = _React$useState6[1];
-  var _React$useState7 = React.useState('fname'),
-    signup_orderBy = _React$useState7[0],
-    setSignUpOrderBy = _React$useState7[1];
+  var _React$useState7 = React.useState('asc'),
+    signup_order = _React$useState7[0],
+    setSignUpOrder = _React$useState7[1];
+  var _React$useState8 = React.useState('fname'),
+    signup_orderBy = _React$useState8[0],
+    setSignUpOrderBy = _React$useState8[1];
   var _useState12 = useState(''),
     signup_searchValue = _useState12[0],
     set_signup_SearchValue = _useState12[1];
@@ -8735,6 +8760,7 @@ var UserList = function UserList(_ref2) {
           dispatch(fetchUsersList(url)).then(function () {
             setSearchingChange(false);
             setisApiFetching(false);
+            scrollTo('table-root');
           });
         }, 1000);
         return function () {
@@ -8760,6 +8786,7 @@ var UserList = function UserList(_ref2) {
       }
       if (isSortingChange) {
         setisApiFetching(true);
+        scrollTo('table-root');
         dispatch(fetchUsersList(url)).then(function () {
           setisApiFetching(false);
           setSortingChange(false);
@@ -8798,15 +8825,89 @@ var UserList = function UserList(_ref2) {
       }
     }
   }, [isTokenVerified, isSearchingChangeTemp, isSortingChangeTemp, isSignUpSearchingChangeTemp, isSignUpSortingChangeTemp]);
+  var topRightButtons = function topRightButtons() {
+    return /*#__PURE__*/React.createElement(IUIBox, {
+      component: "div",
+      className: styles$5.buttonWrapper,
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      alignSelf: "flex-start"
+    }, /*#__PURE__*/React.createElement(IUIBox, {
+      component: "div",
+      className: clsx(styles$5.buttonSingle, styles$5.buttonLeft)
+    }, /*#__PURE__*/React.createElement(IUIButton, {
+      buttonText: "Export all users",
+      type: "outlined",
+      startIcon: /*#__PURE__*/React.createElement(BulkDownloadIcon, {
+        width: "22",
+        height: "22"
+      }),
+      onClick: handleExportUsers
+    })), /*#__PURE__*/React.createElement(IUIBox, {
+      component: "div",
+      className: clsx(styles$5.buttonSingle, styles$5.buttonLeft)
+    }, /*#__PURE__*/React.createElement(IUIDropdownButton, {
+      buttonText: "Bulk actions",
+      type: "outlined",
+      menuListInfo: BulkUploadInfo
+    })), /*#__PURE__*/React.createElement(IUIBox, {
+      component: "div",
+      className: "pageHeader--button-single button-right"
+    }, /*#__PURE__*/React.createElement(IUIButton, {
+      buttonText: "Add user",
+      type: "contained",
+      startIcon: /*#__PURE__*/React.createElement(AddIcon, {
+        width: "9",
+        height: "9",
+        color: "white"
+      }),
+      onClick: handleAddPageNavigation
+    })));
+  };
   return /*#__PURE__*/React.createElement(IUIBox, {
     component: "div",
     className: styles$5.UUIUserManagementList
-  }, !hasVerificationError ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IUIBackdrop, {
+  }, overlayMenu ? /*#__PURE__*/React.createElement(Box, {
+    className: styles$5.scrollOverlayMenu
+  }, /*#__PURE__*/React.createElement(IUIBox, {
+    component: "div",
+    className: clsx(styles$5.pageHeader)
+  }, /*#__PURE__*/React.createElement(IUIBox, {
+    component: "div",
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    flexWrap: "wrap",
+    style: {
+      gap: '1rem'
+    }
+  }, /*#__PURE__*/React.createElement(IUIBox, {
+    component: "div",
+    display: "flex",
+    flexDirection: "column",
+    style: {
+      gap: '0.5rem'
+    }
+  }, /*#__PURE__*/React.createElement(IUISearch, {
+    placeholder: "Search by name, email & department",
+    value: searchValue,
+    onChangeHandler: function onChangeHandler(e) {
+      return onSearchHandler(e.target.value);
+    },
+    className: styles$5.overlaysearch
+  })), topRightButtons()), /*#__PURE__*/React.createElement(IUIBox, {
+    component: "div",
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center"
+  }))) : '', !hasVerificationError ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IUIBackdrop, {
     open: isFileDownloading || isApiFetching,
     className: styles$5.backdrop
   }, /*#__PURE__*/React.createElement(IUICircularProgress, {
     color: "inherit"
   })), isDataFetching ? /*#__PURE__*/React.createElement(SkeletonLoader, null) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IUIBox, {
+    id: "table-root",
     component: "div",
     className: clsx(styles$5.pageHeader)
   }, /*#__PURE__*/React.createElement(IUIBox, {
@@ -8831,44 +8932,7 @@ var UserList = function UserList(_ref2) {
   }, /*#__PURE__*/React.createElement(IUITypography, {
     variant: "h3",
     className: clsx(styles$5.heading, styles$5.headingLarge)
-  }, isILadmin && companyName ? companyName + " - Users" : 'Users'))), /*#__PURE__*/React.createElement(IUIBox, {
-    component: "div",
-    className: styles$5.buttonWrapper,
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "center",
-    alignSelf: "flex-start"
-  }, /*#__PURE__*/React.createElement(IUIBox, {
-    component: "div",
-    className: clsx(styles$5.buttonSingle, styles$5.buttonLeft)
-  }, /*#__PURE__*/React.createElement(IUIButton, {
-    buttonText: "Export all users",
-    type: "outlined",
-    startIcon: /*#__PURE__*/React.createElement(BulkDownloadIcon, {
-      width: "22",
-      height: "22"
-    }),
-    onClick: handleExportUsers
-  })), /*#__PURE__*/React.createElement(IUIBox, {
-    component: "div",
-    className: clsx(styles$5.buttonSingle, styles$5.buttonLeft)
-  }, /*#__PURE__*/React.createElement(IUIDropdownButton, {
-    buttonText: "Bulk actions",
-    type: "outlined",
-    menuListInfo: BulkUploadInfo
-  })), /*#__PURE__*/React.createElement(IUIBox, {
-    component: "div",
-    className: "pageHeader--button-single button-right"
-  }, /*#__PURE__*/React.createElement(IUIButton, {
-    buttonText: "Add user",
-    type: "contained",
-    startIcon: /*#__PURE__*/React.createElement(AddIcon, {
-      width: "9",
-      height: "9",
-      color: "white"
-    }),
-    onClick: handleAddPageNavigation
-  })))), /*#__PURE__*/React.createElement(IUIBox, {
+  }, isILadmin && companyName ? companyName + " - Users" : 'Users'))), topRightButtons()), /*#__PURE__*/React.createElement(IUIBox, {
     component: "div",
     display: "flex",
     justifyContent: "space-between",
@@ -8995,8 +9059,8 @@ var UserList = function UserList(_ref2) {
     errMsg: hasVerificationError
   }));
 };
-var TabLabelCount = function TabLabelCount(_ref3) {
-  var count = _ref3.count;
+var TabLabelCount = function TabLabelCount(_ref4) {
+  var count = _ref4.count;
   return /*#__PURE__*/React.createElement(IUIBox, {
     className: styles$5.TabLabelCount
   }, " ", count, " ");