feat: optimize user Management

bigcommerce · Nov 28, 2022 · fe553b2 · fe553b2
1 parent cdb40c1
commit fe553b2
Show file tree

Hide file tree

Showing 15 changed files with 267 additions and 24 deletions.
diff --git a/apps/storefront/package.json b/apps/storefront/package.json
@@ -30,7 +30,8 @@
     "react-hook-form": "^7.33.1",
     "react-infinite-scroller": "^1.2.6",
     "react-mui-dropzone": "^4.0.6",
-    "react-router-dom": "6"
+    "react-router-dom": "6",
+    "uuid": "^9.0.0"
   },
   "devDependencies": {
     "@b3/tsconfig": "*",
@@ -39,6 +40,7 @@
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@types/react-infinite-scroller": "^1.2.3",
+    "@types/uuid": "^8.3.4",
     "@vitejs/plugin-legacy": "^2.0.0",
     "@vitejs/plugin-react": "^2.0.0",
     "c8": "^7.11.3",

diff --git a/apps/storefront/src/components/B3Tip.tsx b/apps/storefront/src/components/B3Tip.tsx
@@ -0,0 +1,58 @@
+import {
+  AlertTitle,
+  Alert,
+  Snackbar,
+  Box,
+} from '@mui/material'
+
+import {
+  TipMessagesProps,
+  MsgsProps,
+} from '@/shared/global/context/config'
+
+interface B3TipProps extends TipMessagesProps {
+  handleItemClose?: (id: number | string) => void,
+  handleAllClose: () => void,
+}
+
+export const B3Tip = ({
+  autoHideDuration = 3000,
+  handleItemClose,
+  vertical = 'bottom',
+  horizontal = 'right',
+  msgs = [],
+  handleAllClose,
+}: B3TipProps) => {
+  if (!msgs || !msgs.length) return null
+  return (
+    <Snackbar
+      open={!!msgs.length}
+      autoHideDuration={autoHideDuration}
+      onClose={handleAllClose}
+      anchorOrigin={{
+        vertical, horizontal,
+      }}
+    >
+      <Box>
+        {
+          msgs.length && msgs.map((msg: MsgsProps) => (
+            <Alert
+              sx={{
+                width: '100%',
+                '& button[title="Close"]': {
+                  display: `${handleItemClose ? 'block' : 'none'}`,
+                },
+              }}
+              key={msg.id}
+              severity={msg.type}
+              onClose={() => handleItemClose && handleItemClose(msg.id)}
+            >
+              {msg?.title && <AlertTitle>{msg.title}</AlertTitle>}
+              {msg.msg}
+            </Alert>
+          ))
+        }
+      </Box>
+    </Snackbar>
+  )
+}
diff --git a/apps/storefront/src/components/filter/B3Filter.tsx b/apps/storefront/src/components/filter/B3Filter.tsx
@@ -82,17 +82,6 @@ const B3Filter:<T, Y> (props: B3FilterProps<T, Y>) => ReactElement = (props) =>
     handleFilterCustomButtomClick,
   } = props
 
-  // const {
-  //   isEnabled: sortEnabled = false,
-  //   sortByList = [],
-  //   sortByItemName,
-  //   sortByLabel = '',
-  //   // defaultValue: sortByDefaultValue = '',
-  //   isFirstSelect,
-  //   firstSelectText,
-  //   w: sortByWidth = 150,
-  // } = sortByConfig
-
   const [isMobile] = useMobile()
 
   const [sortByValue, setSortBy] = useState<string>(sortByConfig?.defaultValue || '')
@@ -219,6 +208,22 @@ const B3Filter:<T, Y> (props: B3FilterProps<T, Y>) => ReactElement = (props) =>
               onChange={handleFilterChange}
             />
           </Box>
+          {
+              customButtomConfig?.isEnabled && (
+                <Button
+                  // size="small"
+                  variant="contained"
+                  fullWidth
+                  sx={{
+                    marginTop: '20px',
+                    ...customButtomConfig?.customButtomStyle || {},
+                  }}
+                  onClick={handleCustomBtnClick}
+                >
+                  {customButtomConfig?.customLabel || ''}
+                </Button>
+              )
+            }
 
         </Box>
         )

diff --git a/apps/storefront/src/components/index.ts b/apps/storefront/src/components/index.ts
@@ -32,3 +32,7 @@ export {
 export {
   B3Dialog,
 } from './B3Dialog'
+
+export {
+  B3Tip,
+} from './B3Tip'
diff --git a/apps/storefront/src/components/layout/B3LayoutTip.tsx b/apps/storefront/src/components/layout/B3LayoutTip.tsx
@@ -0,0 +1,76 @@
+import {
+  useContext,
+  useEffect,
+} from 'react'
+
+import {
+  GlobaledContext,
+} from '@/shared/global'
+
+import {
+  B3Tip,
+} from '@/components'
+
+import {
+  useMobile,
+} from '@/hooks'
+
+import {
+  MsgsProps,
+} from '@/shared/global/context/config'
+
+const B3LayoutTip = () => {
+  const {
+    state: {
+      tipMessage,
+    },
+    dispatch,
+  } = useContext(GlobaledContext)
+
+  const [isMobile] = useMobile()
+
+  useEffect(() => {
+    window.tipDispatch = dispatch
+  }, [])
+
+  const setMsgs = (msgs: [] | Array<MsgsProps> = []) => {
+    dispatch({
+      type: 'common',
+      payload: {
+        tipMessage: {
+          ...tipMessage,
+          msgs,
+        },
+      },
+    })
+  }
+
+  const handleClose = (id: number | string) => {
+    const msgs = tipMessage?.msgs || []
+    const newMsgs = msgs.filter((msg) => msg.id !== id)
+    setMsgs(newMsgs)
+  }
+
+  const {
+    msgs = [],
+    autoHideDuration = 13000,
+    vertical = `${isMobile ? 'bottom' : 'bottom'}`,
+    horizontal = 'right',
+    isClose = false,
+  } = tipMessage
+
+  return (
+    <>
+      <B3Tip
+        msgs={msgs}
+        handleAllClose={setMsgs}
+        autoHideDuration={autoHideDuration}
+        handleItemClose={isClose ? handleClose : undefined}
+        vertical={vertical}
+        horizontal={horizontal}
+      />
+    </>
+  )
+}
+
+export default B3LayoutTip
diff --git a/apps/storefront/src/components/layout/B3RenderRouter.tsx b/apps/storefront/src/components/layout/B3RenderRouter.tsx
@@ -38,6 +38,8 @@ import {
   GlobaledContext,
 } from '@/shared/global'
 
+import B3LayoutTip from './B3LayoutTip'
+
 const Registered = lazy(() => import('../../pages/registered/Registered'))
 
 const RegisteredBCToB2B = lazy(() => import('../../pages/registered/RegisteredBCToB2B'))
@@ -86,6 +88,7 @@ export const B3RenderRouter = (props: B3RenderRouterProps) => {
       </Box>
       )}
     >
+      <B3LayoutTip />
       <Routes>
         <Route
           path="/"

diff --git a/apps/storefront/src/index.d.ts b/apps/storefront/src/index.d.ts
@@ -1,3 +1,7 @@
+/// <reference types="./shared/global/context/config.ts"
 declare interface CustomFieldItems {
   [key: string]: any
 }
+declare interface Window {
+  tipDispatch: DispatchProps
+}
diff --git a/apps/storefront/src/pages/usermanagement/AddEditUser.tsx b/apps/storefront/src/pages/usermanagement/AddEditUser.tsx
@@ -18,6 +18,10 @@ import {
   B3Dialog,
 } from '@/components'
 
+import {
+  snackbar,
+} from '@/utils'
+
 import {
   getUsersFiles,
   UsersList,
@@ -83,7 +87,8 @@ const AddEditUser = ({
           delete params.email
         }
         await addOrUpdateUsers(params)
-        setOpen(false)
+        handleCancelClick()
+        snackbar.success('add user successfully')
         renderList()
       } finally {
         setAddUpdateLoading(false)

diff --git a/apps/storefront/src/pages/usermanagement/Usermanagement.tsx b/apps/storefront/src/pages/usermanagement/Usermanagement.tsx
@@ -30,6 +30,10 @@ import {
   B3Dialog,
 } from '@/components'
 
+import {
+  snackbar,
+} from '@/utils'
+
 import {
   useMobile,
 } from '@/hooks'
@@ -60,16 +64,18 @@ const customItem = {
   isEnabled: true,
   customLabel: 'add new users',
 }
+
+const initPagination = {
+  offset: 0,
+  count: 0,
+  first: 15,
+}
 const Usermanagement = () => {
   const [isRequestLoading, setIsRequestLoading] = useState<boolean>(false)
 
   const [usersList, setUsersList] = useState<Array<UsersList>>([])
 
-  const [pagination, setPagination] = useState<Pagination>({
-    offset: 0,
-    count: 0,
-    first: 9,
-  })
+  const [pagination, setPagination] = useState<Pagination>(initPagination)
 
   const [deleteOpen, setDeleteOpen] = useState<boolean>(false)
 
@@ -95,7 +101,7 @@ const Usermanagement = () => {
   const addEditUserRef = useRef<RefCurrntProps | null>(null)
 
   const initSearch = {
-    first: 9,
+    first: 15,
     offset: 0,
     search: '',
     role: '',
@@ -135,6 +141,17 @@ const Usermanagement = () => {
     }
   }
 
+  const initSearchList = () => {
+    setFilterSearch({
+      ...filterSearch,
+      offset: 0,
+    })
+    setPagination({
+      ...pagination,
+      offset: 0,
+    })
+  }
+
   useEffect(() => {
     fetchList()
   }, [filterSearch])
@@ -144,7 +161,7 @@ const Usermanagement = () => {
   const handleChange = (key:string, value: string) => {
     const search = {
       ...filterSearch,
-      search: value,
+      q: value,
       offset: 0,
     }
     const listPagination = {
@@ -208,6 +225,7 @@ const Usermanagement = () => {
         userId: row.id,
         companyId: companyInfo?.id || '',
       })
+      snackbar.success('delete user successfully')
       fetchList()
     } finally {
       setIsRequestLoading(false)
@@ -236,7 +254,7 @@ const Usermanagement = () => {
           columnItems={[]}
           listItems={usersList}
           pagination={pagination}
-          rowsPerPageOptions={[9, 18, 27]}
+          rowsPerPageOptions={[15, 30, 45]}
           onPaginationChange={handlePaginationChange}
           isCustomRender
           isInfiniteScroll={isMobile}
@@ -252,7 +270,7 @@ const Usermanagement = () => {
         />
         <B3AddEditUser
           companyId={companyInfo?.id || ''}
-          renderList={fetchList}
+          renderList={initSearchList}
           ref={addEditUserRef}
         />
         <B3Dialog

diff --git a/apps/storefront/src/shared/global/context/config.ts b/apps/storefront/src/shared/global/context/config.ts
@@ -14,6 +14,21 @@ export interface CustomerInfo {
   emailAddress: string,
 }
 
+export type AlertTip = 'error' | 'info' | 'success' | 'warning'
+export interface MsgsProps {
+  title?: string,
+  msg: string,
+  id: string | number,
+  type: AlertTip
+}
+export interface TipMessagesProps{
+  msgs?: Array<MsgsProps> | [],
+  autoHideDuration?: number,
+  vertical?: 'top' | 'bottom'
+  horizontal?: 'left' | 'right' | 'center'
+  isClose?: boolean
+}
+
 export interface GlobalState {
   isCheckout: boolean,
   isCloseGotoBCHome: boolean,
@@ -36,6 +51,7 @@ export interface GlobalState {
   salesRepCompanyId: string,
   salesRepCompanyName: string,
   B3UserId: boolean,
+  tipMessage: TipMessagesProps,
 }
 
 export const initState = {
@@ -65,6 +81,7 @@ export const initState = {
   },
   logo: '',
   isCompanyAccount: false,
+  tipMessage: {},
 }
 
 export interface GlobalAction {

diff --git a/apps/storefront/src/shared/service/b2b/graphql/users.ts b/apps/storefront/src/shared/service/b2b/graphql/users.ts
@@ -2,11 +2,10 @@ import {
   B3Request,
 } from '../../request/b3Fetch'
 
-// search: "${data.q || ''}"
-
 const getUsersQl = (data: CustomFieldItems) => `{
   users (
     first: ${data.first}
+    search: "${data.q || ''}"
     offset: ${data.offset}
     companyId: ${data.companyId}
     ${data.role === '' ? '' : `role: ${data.role}`}