feat: user Management for Remote Frontend

bigcommerce · Nov 25, 2022 · cdb40c1 · cdb40c1
1 parent e39aac7
commit cdb40c1
Show file tree

Hide file tree

Showing 13 changed files with 1,037 additions and 86 deletions.
diff --git a/apps/storefront/src/components/B3Dialog.tsx b/apps/storefront/src/components/B3Dialog.tsx
@@ -0,0 +1,146 @@
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+} from '@mui/material'
+
+import {
+  useRef,
+  ReactElement,
+  ReactNode,
+} from 'react'
+
+import {
+  useMobile,
+} from '@/hooks'
+
+import {
+  B3Sping,
+} from './spin/B3Sping'
+
+interface B3DialogProps<T> {
+  customActions?: () => ReactElement
+  isOpen: boolean,
+  leftStyleBtn?: {[key: string]: string}
+  rightStyleBtn?: {[key: string]: string}
+  leftSizeBtn?: string
+  rightSizeBtn?: string
+  title?: string
+  handleLeftClick?: () => void
+  handRightClick?: (row?: T) => Promise<void> | void | undefined
+  children: ReactNode
+  loading?: boolean
+  row?: T
+}
+
+export const B3Dialog:<T> ({
+  customActions,
+  isOpen,
+  leftStyleBtn,
+  rightStyleBtn,
+  title,
+  handleLeftClick,
+  handRightClick,
+  children,
+  loading,
+  row,
+}: B3DialogProps<T>) => ReactElement = ({
+  customActions,
+  isOpen,
+  leftStyleBtn = {},
+  rightStyleBtn = {},
+  leftSizeBtn,
+  rightSizeBtn,
+  title,
+  handleLeftClick,
+  handRightClick,
+  children,
+  loading = false,
+  row,
+}) => {
+  const container = useRef<HTMLInputElement | null>(null)
+
+  const [isMobile] = useMobile()
+
+  const handleSaveClick = () => {
+    if (handRightClick) {
+      if (row) handRightClick(row)
+      if (!row) handRightClick()
+    }
+  }
+
+  const handleCloseClick = () => {
+    if (handleLeftClick) handleLeftClick()
+  }
+
+  return (
+    <Box
+      sx={{
+        ml: 3,
+        cursor: 'pointer',
+      }}
+    >
+      <Box
+        ref={container}
+      />
+
+      <Dialog
+        open={isOpen}
+        container={container.current}
+        onClose={handleCloseClick}
+        fullScreen={isMobile}
+        aria-labelledby="alert-dialog-title"
+        aria-describedby="alert-dialog-description"
+      >
+        {
+          title && (
+          <DialogTitle id="alert-dialog-title">
+            {title}
+          </DialogTitle>
+          )
+        }
+
+        <DialogContent>
+          {children}
+        </DialogContent>
+        <DialogActions>
+          {
+            customActions ? customActions() : (
+              <>
+                <Button
+                  sx={{
+                    ...leftStyleBtn,
+                  }}
+                  onClick={handleCloseClick}
+                >
+                  {leftSizeBtn || 'cancel'}
+
+                </Button>
+
+                <Button
+                  sx={{
+                    ...rightStyleBtn,
+                  }}
+                  onClick={handleSaveClick}
+                  autoFocus
+                >
+                  <B3Sping
+                    isSpinning={loading}
+                    tip=""
+                    size={16}
+                  >
+                    {rightSizeBtn || 'save'}
+                  </B3Sping>
+                </Button>
+              </>
+            )
+          }
+        </DialogActions>
+      </Dialog>
+    </Box>
+
+  )
+}
diff --git a/apps/storefront/src/components/B3Table.tsx b/apps/storefront/src/components/B3Table.tsx
@@ -23,7 +23,7 @@ import {
   B3NoData,
 } from './B3NoData'
 
-interface Pagination {
+export interface Pagination {
   offset: number,
   first: number,
   count: number,

diff --git a/apps/storefront/src/components/filter/B3Filter.tsx b/apps/storefront/src/components/filter/B3Filter.tsx
@@ -4,6 +4,7 @@ import {
 } from 'react'
 import {
   Box,
+  Button,
 } from '@mui/material'
 
 import {
@@ -35,7 +36,7 @@ interface PickerProps {
 
 interface sortByConfigProps {
   isEnabled: boolean;
-  sortByList: any[]
+  sortByList?: any[]
   sortByItemName?: sortByItemNameProps | undefined
   sortByLabel: string
   defaultValue?: string | undefined
@@ -52,39 +53,49 @@ type DeepPartial<T> = {
     : DeepPartial<T[P]>;
 }
 
-interface B3FilterProps<T> {
-  sortByConfig: sortByConfigProps
-  startPicker: PickerProps
-  endPicker: PickerProps
+interface customButtomProps {
+  isEnabled: boolean;
+  customLabel: string;
+  customButtomStyle?: {[key: string]: string}
+}
+
+interface B3FilterProps<T, Y> {
+  sortByConfig?: sortByConfigProps
+  customButtomConfig?: customButtomProps
+  startPicker?: PickerProps
+  endPicker?: PickerProps
   fiterMoreInfo: Array<DeepPartial<T>>
   handleChange: (key: string, value: string) => void
-  handleFilterChange: (value: {[key: string]: string | number | Date}) => void
+  handleFilterChange: (value: Y) => void
+  handleFilterCustomButtomClick?: () => void
 }
 
-const B3Filter:<T> (props: B3FilterProps<T>) => ReactElement = (props) => {
+const B3Filter:<T, Y> (props: B3FilterProps<T, Y>) => ReactElement = (props) => {
   const {
     sortByConfig,
     startPicker,
     endPicker,
     fiterMoreInfo,
+    customButtomConfig,
     handleChange,
     handleFilterChange,
+    handleFilterCustomButtomClick,
   } = props
 
-  const {
-    isEnabled: sortEnabled = false,
-    sortByList = [],
-    sortByItemName,
-    sortByLabel = '',
-    defaultValue: sortByDefaultValue = '',
-    isFirstSelect,
-    firstSelectText,
-    w: sortByWidth = 150,
-  } = sortByConfig
+  // const {
+  //   isEnabled: sortEnabled = false,
+  //   sortByList = [],
+  //   sortByItemName,
+  //   sortByLabel = '',
+  //   // defaultValue: sortByDefaultValue = '',
+  //   isFirstSelect,
+  //   firstSelectText,
+  //   w: sortByWidth = 150,
+  // } = sortByConfig
 
   const [isMobile] = useMobile()
 
-  const [sortByValue, setSortBy] = useState<string>(sortByDefaultValue)
+  const [sortByValue, setSortBy] = useState<string>(sortByConfig?.defaultValue || '')
 
   const handleSortByChange = (value: string) => {
     setSortBy(value)
@@ -95,8 +106,12 @@ const B3Filter:<T> (props: B3FilterProps<T>) => ReactElement = (props) => {
     handleChange('search', value)
   }
 
-  const handleFilterMoreChange = (filterItems: {[key: string]: string | number | Date}) => {
-    handleFilterChange(filterItems)
+  // const handleFilterMoreChange = (filterItems) => {
+  //   handleFilterChange(filterItems)
+  // }
+
+  const handleCustomBtnClick = () => {
+    if (handleFilterCustomButtomClick) handleFilterCustomButtomClick()
   }
 
   return (
@@ -125,7 +140,7 @@ const B3Filter:<T> (props: B3FilterProps<T>) => ReactElement = (props) => {
               startPicker={startPicker}
               endPicker={endPicker}
               fiterMoreInfo={fiterMoreInfo}
-              onChange={handleFilterMoreChange}
+              onChange={handleFilterChange}
             />
           </Box>
 
@@ -135,25 +150,40 @@ const B3Filter:<T> (props: B3FilterProps<T>) => ReactElement = (props) => {
             }}
           >
             {
-            sortEnabled && (
-              <Box
-                sx={{
-                  m: '0 5px',
-                }}
-              >
-                <B3Select
-                  list={sortByList}
-                  value={sortByValue}
-                  handleChange={handleSortByChange}
-                  label={sortByLabel}
-                  config={sortByItemName}
-                  isFirstSelect={isFirstSelect}
-                  firstSelectText={firstSelectText}
-                  w={sortByWidth}
-                />
-              </Box>
-            )
-          }
+              sortByConfig?.isEnabled && (
+                <Box
+                  sx={{
+                    m: '0 5px',
+                  }}
+                >
+                  <B3Select
+                    list={sortByConfig?.sortByList || []}
+                    value={sortByValue}
+                    handleChange={handleSortByChange}
+                    label={sortByConfig?.sortByLabel || ''}
+                    config={sortByConfig?.sortByItemName}
+                    isFirstSelect={sortByConfig?.isFirstSelect}
+                    firstSelectText={sortByConfig?.firstSelectText}
+                    w={sortByConfig?.w || 150}
+                  />
+                </Box>
+              )
+            }
+            {
+              customButtomConfig?.isEnabled && (
+                <Button
+                  size="small"
+                  variant="contained"
+                  sx={{
+                    maxWidth: 150,
+                    ...customButtomConfig?.customButtomStyle || {},
+                  }}
+                  onClick={handleCustomBtnClick}
+                >
+                  {customButtomConfig?.customLabel || ''}
+                </Button>
+              )
+            }
             {/* <B3FilterToggleTable /> */}
           </Box>
 
@@ -186,7 +216,7 @@ const B3Filter:<T> (props: B3FilterProps<T>) => ReactElement = (props) => {
               startPicker={startPicker}
               endPicker={endPicker}
               fiterMoreInfo={fiterMoreInfo}
-              onChange={handleFilterMoreChange}
+              onChange={handleFilterChange}
             />
           </Box>
 

diff --git a/apps/storefront/src/components/filter/B3FilterMore.tsx b/apps/storefront/src/components/filter/B3FilterMore.tsx
@@ -46,24 +46,24 @@ type DeepPartial<T> = {
     : DeepPartial<T[P]>;
 }
 
-interface B3FilterMoreProps<T> {
-  startPicker: PickerProps
-  endPicker: PickerProps
+interface B3FilterMoreProps<T, Y> {
+  startPicker?: PickerProps
+  endPicker?: PickerProps
   fiterMoreInfo: Array<DeepPartial<T>>
-  onChange?: (val: {[key: string]: Date | string | number}) => void
+  onChange?: (val: Y) => void
 }
 
 interface PickerRefProps extends HTMLInputElement {
   setClearPickerValue: () => void
   getPickerValue: () => {[key: string]: string}
 }
 
-const B3FilterMore:<T> ({
+const B3FilterMore:<T, Y> ({
   startPicker,
   endPicker,
   fiterMoreInfo,
   onChange,
-}: B3FilterMoreProps<T>) => ReactElement = ({
+}: B3FilterMoreProps<T, Y>) => ReactElement = ({
   startPicker,
   endPicker,
   fiterMoreInfo,
@@ -82,7 +82,6 @@ const B3FilterMore:<T> ({
       errors,
     },
     setValue,
-    reset,
   } = useForm({
     mode: 'onSubmit',
   })
@@ -101,17 +100,19 @@ const B3FilterMore:<T> ({
     handleSubmit((data) => {
       const getPickerValues = pickerRef.current?.getPickerValue()
       if (onChange) {
-        onChange({
+        const submitData: any = {
           ...getPickerValues, ...data,
-        })
+        }
+        onChange(submitData)
       }
       handleClose()
     })(event)
   }
 
   const handleClearFilters = () => {
-    reset()
-    setValue('orderStatus', '')
+    Object.keys(getValues()).forEach((item: string) => {
+      setValue(item, '')
+    })
     pickerRef.current?.setClearPickerValue()
   }
   return (