From 128291a0ecc9470f6d05cd2056e4f08d0e706394 Mon Sep 17 00:00:00 2001
From: b3aton <aton.xia@bundleb2b.net>
Date: Tue, 7 Mar 2023 17:35:54 +0800
Subject: [PATCH] fix: rebase 664

---
 .../src/components/filter/B3FilterMore.tsx    | 62 ++++++++++++++++++-
 .../src/components/filter/B3FilterPicker.tsx  |  2 -
 apps/storefront/src/pages/order/Order.tsx     | 15 +----
 3 files changed, 63 insertions(+), 16 deletions(-)

diff --git a/apps/storefront/src/components/filter/B3FilterMore.tsx b/apps/storefront/src/components/filter/B3FilterMore.tsx
index d19ee5f2..0c7a4b79 100644
--- a/apps/storefront/src/components/filter/B3FilterMore.tsx
+++ b/apps/storefront/src/components/filter/B3FilterMore.tsx
@@ -1,6 +1,7 @@
 import FilterListIcon from '@mui/icons-material/FilterList'
 import {
   Box,
+  Grid,
 } from '@mui/material'
 
 import Button from '@mui/material/Button'
@@ -15,6 +16,7 @@ import {
   useRef,
   BaseSyntheticEvent,
   ReactElement,
+  useEffect,
 } from 'react'
 
 import {
@@ -73,6 +75,8 @@ const B3FilterMore:<T, Y> ({
   isShowMore = false,
 }) => {
   const [open, setOpen] = useState<boolean>(false)
+  const [isFiltering, setIsFiltering] = useState<boolean>(false)
+  const [filterCounter, setFilterCounter] = useState<number>(0)
 
   const pickerRef = useRef<PickerRefProps | null>(null)
 
@@ -98,6 +102,31 @@ const B3FilterMore:<T, Y> ({
     setOpen(false)
   }
 
+  const handleFilterStatus = (submitData?: any) => {
+    const startTime = startPicker?.defaultValue
+    const endTime = endPicker?.defaultValue
+
+    if (submitData) {
+      const filterCountArr = []
+      const isNotFiltering = Object.keys(submitData).every((item) => submitData[item] === '')
+      Object.keys(submitData).forEach((item) => {
+        if (submitData[item] !== '') {
+          filterCountArr.push(item)
+        }
+      })
+
+      setIsFiltering(!isNotFiltering)
+      setFilterCounter(startTime && endTime ? filterCountArr.length - 1 : filterCountArr.length)
+    } else {
+      setIsFiltering(false)
+      setFilterCounter(0)
+    }
+  }
+
+  // useEffect(() => {
+  //   handleFilterStatus()
+  // }, [startPicker, endPicker])
+
   const handleSaveFilters = (event: BaseSyntheticEvent<object, any, any> | undefined) => {
     handleSubmit((data) => {
       const getPickerValues = pickerRef.current?.getPickerValue()
@@ -105,6 +134,8 @@ const B3FilterMore:<T, Y> ({
         const submitData: any = {
           ...getPickerValues, ...data,
         }
+
+        handleFilterStatus(submitData)
         onChange(submitData)
       }
       handleClose()
@@ -117,6 +148,8 @@ const B3FilterMore:<T, Y> ({
     })
     pickerRef.current?.setClearPickerValue()
 
+    handleFilterStatus()
+
     if (handleChange) {
       handleChange()
     }
@@ -133,7 +166,34 @@ const B3FilterMore:<T, Y> ({
       {
         ((fiterMoreInfo && fiterMoreInfo.length) || isShowMore) && (
         <Box onClick={handleDialogClick}>
-          <FilterListIcon />
+          {
+            !isFiltering && <FilterListIcon />
+          }
+          {
+            isFiltering && (
+              <>
+                <FilterListIcon />
+                <Box
+                  sx={{
+                    display: 'flex',
+                    flexFlow: 'row wrap',
+                    backgroundColor: '#ff8a65',
+                    borderRadius: '50px',
+                    justifyContent: 'center',
+                    alignContent: 'center',
+                    alignItems: 'center',
+                    position: 'absolute',
+                    top: '7px',
+                    padding: '0 7px',
+                    transform: 'scale(1) translate(50%, -50%)',
+                    transformOrigin: '100% 0%',
+                  }}
+                >
+                  {filterCounter}
+                </Box>
+              </>
+            )
+          }
         </Box>
         )
       }
diff --git a/apps/storefront/src/components/filter/B3FilterPicker.tsx b/apps/storefront/src/components/filter/B3FilterPicker.tsx
index 9ece2e43..2e19e3b3 100644
--- a/apps/storefront/src/components/filter/B3FilterPicker.tsx
+++ b/apps/storefront/src/components/filter/B3FilterPicker.tsx
@@ -47,8 +47,6 @@ const B3FilterPickers = ({
   const setClearPickerValue = () => {
     setStartValue(isMonthlySpacing ? distanceDay(30) : '')
     setEndValue(isMonthlySpacing ? distanceDay() : '')
-    console.log(startPicker?.defaultValue, 'startPicker?.defaultValue')
-    console.log(endPicker?.defaultValue, 'endPicker?.defaultValue')
   }
 
   useEffect(() => {
diff --git a/apps/storefront/src/pages/order/Order.tsx b/apps/storefront/src/pages/order/Order.tsx
index 674b2add..b8cc0f7b 100644
--- a/apps/storefront/src/pages/order/Order.tsx
+++ b/apps/storefront/src/pages/order/Order.tsx
@@ -267,18 +267,7 @@ const Order = ({
         orderBy: value,
       })
     } else if (key === 'clear') {
-      // const search: Partial<FilterSearchProps> = {
-      //   beginDateAt: null,
-      //   endDateAt: null,
-      //   createdBy: '',
-      //   statusCode: '',
-      //   companyName: '',
-      // }
-      // setFilterData({
-      //   ...filterData,
-      // })
       setIsClearFilter(true)
-      console.log(isClearFilter)
     }
   }
 
@@ -315,13 +304,13 @@ const Order = ({
             startPicker={{
               isEnabled: true,
               label: 'From',
-              defaultValue: isClearFilter ? null : (filterData?.beginDateAt || null),
+              defaultValue: filterData?.beginDateAt || null,
               pickerKey: 'start',
             }}
             endPicker={{
               isEnabled: true,
               label: 'To',
-              defaultValue: isClearFilter ? null : (filterData?.beginDateAt || null),
+              defaultValue: filterData?.beginDateAt || null,
               pickerKey: 'end',
             }}
             fiterMoreInfo={filterInfo}