feat: invoice table

https://bigc-b2b.atlassian.net/browse/BUN-486
bigcommerce · Jul 11, 2023 · 6757266 · 6757266
1 parent 9a9b707
commit 6757266
Show file tree

Hide file tree

Showing 19 changed files with 1,295 additions and 76 deletions.
diff --git a/apps/storefront/src/components/filter/B3Filter.tsx b/apps/storefront/src/components/filter/B3Filter.tsx
@@ -57,6 +57,7 @@ interface B3FilterProps<T, Y> {
   handleFilterChange: (value: Y) => void
   handleFilterCustomButtomClick?: () => void
   showB3FilterMoreIcon?: boolean
+  searchValue?: string
 }
 
 function B3Filter<T, Y>(props: B3FilterProps<T, Y>) {
@@ -70,6 +71,7 @@ function B3Filter<T, Y>(props: B3FilterProps<T, Y>) {
     handleFilterChange,
     handleFilterCustomButtomClick,
     showB3FilterMoreIcon = true,
+    searchValue = '',
   } = props
 
   const [isMobile] = useMobile()
@@ -113,7 +115,11 @@ function B3Filter<T, Y>(props: B3FilterProps<T, Y>) {
               alignItems: 'center',
             }}
           >
-            <B3FilterSearch handleChange={handleSearchChange} w="70%" />
+            <B3FilterSearch
+              handleChange={handleSearchChange}
+              w="70%"
+              searchValue={searchValue}
+            />
             {showB3FilterMoreIcon && (
               <B3FilterMore
                 startPicker={startPicker}
@@ -183,7 +189,11 @@ function B3Filter<T, Y>(props: B3FilterProps<T, Y>) {
               justifyContent: 'space-between',
             }}
           >
-            <B3FilterSearch handleChange={handleSearchChange} w="90%" />
+            <B3FilterSearch
+              handleChange={handleSearchChange}
+              w="90%"
+              searchValue={searchValue}
+            />
             <B3FilterMore
               startPicker={startPicker}
               endPicker={endPicker}

diff --git a/apps/storefront/src/components/filter/B3FilterSearch.tsx b/apps/storefront/src/components/filter/B3FilterSearch.tsx
@@ -10,6 +10,7 @@ interface B3FilterSearchProps {
   searchBGColor?: string
   placeholder?: string
   h?: number | string
+  searchValue?: string
 }
 
 function B3FilterSearch({
@@ -18,6 +19,7 @@ function B3FilterSearch({
   h,
   searchBGColor = '#efeae7',
   placeholder = 'Search',
+  searchValue = '',
 }: B3FilterSearchProps) {
   const [search, setSearch] = useState<string>('')
   const debouncedValue = useDebounce<string>(search, 500)
@@ -30,6 +32,11 @@ function B3FilterSearch({
   useEffect(() => {
     handleChange(search)
   }, [debouncedValue])
+  useEffect(() => {
+    if (searchValue.length > 0) {
+      setSearch(searchValue)
+    }
+  }, [searchValue])
 
   return (
     <Paper

diff --git a/apps/storefront/src/components/table/B3PaginationTable.tsx b/apps/storefront/src/components/table/B3PaginationTable.tsx
@@ -47,6 +47,7 @@ interface B3PaginationTableProps {
   searchParams?: any
   requestLoading?: (bool: boolean) => void
   showCheckbox?: boolean
+  showSelectAllCheckbox?: boolean
   selectedSymbol?: string
   isSelectOtherPageCheckbox?: boolean
   showBorder?: boolean
@@ -55,8 +56,12 @@ interface B3PaginationTableProps {
   labelRowsPerPage?: string
   itemIsMobileSpacing?: number
   disableCheckbox?: boolean
+  applyAllDisableCheckbox?: boolean
   onClickRow?: (item: any, index?: number) => void
   showRowsPerPageOptions?: boolean
+  sortDirection?: 'asc' | 'desc'
+  sortByFn?: (node: CustomFieldItems) => void
+  orderBy?: string
 }
 
 function PaginationTable(
@@ -75,6 +80,7 @@ function PaginationTable(
     searchParams,
     requestLoading,
     showCheckbox = false,
+    showSelectAllCheckbox = false,
     selectedSymbol = 'id',
     isSelectOtherPageCheckbox = false,
     showBorder = true,
@@ -87,6 +93,10 @@ function PaginationTable(
     showPagination = true,
     showRowsPerPageOptions = true,
     CollapseComponent,
+    applyAllDisableCheckbox = true,
+    sortDirection = 'asc',
+    sortByFn = () => {},
+    orderBy = '',
   }: B3PaginationTableProps,
   ref?: Ref<unknown>
 ) {
@@ -331,6 +341,7 @@ function PaginationTable(
       tableKey={tableKey}
       itemIsMobileSpacing={itemIsMobileSpacing}
       showCheckbox={showCheckbox}
+      showSelectAllCheckbox={showSelectAllCheckbox}
       disableCheckbox={disableCheckbox}
       selectedSymbol={selectedSymbol}
       isSelectOtherPageCheckbox={isSelectOtherPageCheckbox}
@@ -344,6 +355,10 @@ function PaginationTable(
       showPagination={showPagination}
       showRowsPerPageOptions={showRowsPerPageOptions}
       CollapseComponent={CollapseComponent}
+      applyAllDisableCheckbox={applyAllDisableCheckbox}
+      sortDirection={sortDirection}
+      sortByFn={sortByFn}
+      orderBy={orderBy}
     />
   )
 }

diff --git a/apps/storefront/src/components/table/B3Table.tsx b/apps/storefront/src/components/table/B3Table.tsx
@@ -23,6 +23,7 @@ import {
   TableRow,
 } from '@mui/material'
 import IconButton from '@mui/material/IconButton'
+import TableSortLabel from '@mui/material/TableSortLabel'
 
 import { useMobile } from '@/hooks'
 import { CustomStyleContext } from '@/shared/customStyleButtton'
@@ -46,6 +47,7 @@ export interface TableColumnItem<T> {
   width?: string
   render?: (item: T, index: number) => ReactNode
   style?: { [key: string]: string }
+  isSortable?: boolean
 }
 
 interface TableProps<T> {
@@ -72,6 +74,7 @@ interface TableProps<T> {
   noDataText?: string
   tableKey?: string
   showCheckbox?: boolean
+  showSelectAllCheckbox?: boolean
   setNeedUpdate?: (boolean: boolean) => void
   handleSelectAllItems?: () => void
   handleSelectOneItem?: (id: number | string) => void
@@ -81,10 +84,14 @@ interface TableProps<T> {
   selectCheckbox?: Array<number | string>
   labelRowsPerPage?: string
   disableCheckbox?: boolean
+  applyAllDisableCheckbox?: boolean
   onClickRow?: (item: any, index?: number) => void
   showRowsPerPageOptions?: boolean
   isSelectOtherPageCheckbox?: boolean
   isAllSelect?: boolean
+  sortDirection?: 'asc' | 'desc'
+  sortByFn?: (node: any) => void
+  orderBy: string
 }
 
 interface RowProps<T> {
@@ -97,6 +104,7 @@ interface RowProps<T> {
   selectedSymbol?: string
   selectCheckbox?: Array<number | string>
   disableCheckbox?: boolean
+  applyAllDisableCheckbox?: boolean
   handleSelectOneItem?: (id: number | string) => void
   tableKey?: string
   onClickRow?: (item: any, index?: number) => void
@@ -125,8 +133,9 @@ function Row({
   onClickRow,
   hover,
   CollapseComponent,
+  applyAllDisableCheckbox,
 }: RowProps<any>) {
-  const { isCollapse = false } = node
+  const { isCollapse = false, disableCurrentCheckbox } = node
 
   const [open, setOpen] = useState<boolean>(isCollapse || false)
 
@@ -153,7 +162,11 @@ function Row({
                 if (handleSelectOneItem)
                   handleSelectOneItem(node[selectedSymbol])
               }}
-              disabled={disableCheckbox}
+              disabled={
+                applyAllDisableCheckbox
+                  ? disableCheckbox
+                  : disableCurrentCheckbox
+              }
             />
           </TableCell>
         )}
@@ -186,7 +199,7 @@ function Row({
       </TableRow>
       {CollapseComponent && (
         <TableRow>
-          <TableCell style={{ padding: 0 }} colSpan={6}>
+          <TableCell style={{ padding: 0 }} colSpan={24}>
             <Collapse in={open} timeout="auto" unmountOnExit>
               <CollapseComponent row={node} />
             </Collapse>
@@ -220,6 +233,7 @@ export function B3Table<T>({
   tableHeaderHide = false,
   tableKey,
   showCheckbox = false,
+  showSelectAllCheckbox = false,
   setNeedUpdate = () => {},
   handleSelectAllItems,
   handleSelectOneItem,
@@ -234,6 +248,10 @@ export function B3Table<T>({
   onClickRow,
   showRowsPerPageOptions = true,
   CollapseComponent,
+  applyAllDisableCheckbox = true,
+  sortDirection = 'asc',
+  sortByFn,
+  orderBy = '',
 }: TableProps<T>) {
   const {
     state: {
@@ -281,7 +299,7 @@ export function B3Table<T>({
     <>
       {isInfiniteScroll && (
         <>
-          {showCheckbox && (
+          {showSelectAllCheckbox && (
             <Box
               sx={{
                 display: 'flex',
@@ -411,8 +429,8 @@ export function B3Table<T>({
               {!tableHeaderHide && (
                 <TableHead>
                   <TableRow>
-                    {showCheckbox && (
-                      <TableCell key="showCheckbox">
+                    {showSelectAllCheckbox && (
+                      <TableCell key="showSelectAllCheckbox">
                         <Checkbox
                           checked={
                             isSelectOtherPageCheckbox
@@ -437,8 +455,24 @@ export function B3Table<T>({
                               }
                             : {}
                         }
+                        sortDirection={
+                          column.key === orderBy ? sortDirection : false
+                        }
                       >
-                        {column.title}
+                        {column?.isSortable ? (
+                          <TableSortLabel
+                            active={column.key === orderBy}
+                            direction={
+                              column.key === orderBy ? sortDirection : 'desc'
+                            }
+                            hideSortIcon={column.key !== orderBy}
+                            onClick={() => sortByFn && sortByFn(column)}
+                          >
+                            {column.title}
+                          </TableSortLabel>
+                        ) : (
+                          column.title
+                        )}
                       </TableCell>
                     ))}
                   </TableRow>
@@ -462,6 +496,7 @@ export function B3Table<T>({
                       selectCheckbox={selectCheckbox}
                       selectedSymbol={selectedSymbol}
                       disableCheckbox={disableCheckbox}
+                      applyAllDisableCheckbox={applyAllDisableCheckbox}
                       showBorder={showBorder}
                       handleSelectOneItem={handleSelectOneItem}
                       clickableRowStyles={clickableRowStyles}