Skip to content

Commit

Permalink
fix: products are unselected when you move to the next page on purcha…
Browse files Browse the repository at this point in the history 
…sed products

https://bigc-b2b.atlassian.net/jira/software/c/projects/BUN/issues/BUN-1140
  • Loading branch information
@kris-liu-smile
kris-liu-smile committed Jun 27, 2023
1 parent e515d18 commit 46fa204
Show file tree
Hide file tree
Showing 3 changed files with 127 additions and 16 deletions.
111 changes: 98 additions & 13 deletions apps/storefront/src/components/table/B3PaginationTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ interface B3PaginationTableProps {
requestLoading?: (bool: boolean) => void
showCheckbox?: boolean
selectedSymbol?: string
isSelectOtherPageCheckbox?: boolean
showBorder?: boolean
getSelectCheckbox?: (arr: Array<string | number>) => void
hover?: boolean
Expand Down Expand Up @@ -74,6 +75,7 @@ function PaginationTable(
requestLoading,
showCheckbox = false,
selectedSymbol = 'id',
isSelectOtherPageCheckbox = false,
showBorder = true,
getSelectCheckbox,
hover = false,
Expand All @@ -99,6 +101,10 @@ function PaginationTable(

const [count, setAllCount] = useState<number>(0)

const [isAllSelect, setAllSelect] = useState<boolean>(false)

const [cacheAllList, setCacheAllList] = useState<Array<CustomFieldItems>>([])

const [list, setList] = useState<Array<CustomFieldItems>>([])

const [selectCheckbox, setSelectCheckbox] = useState<Array<string | number>>(
Expand All @@ -107,6 +113,28 @@ function PaginationTable(

const [isMobile] = useMobile()

const cacheList = (edges: Array<CustomFieldItems>) => {
if (!cacheAllList.length) setCacheAllList(edges)

const copyCacheAllList = [...cacheAllList]

edges.forEach((item: CustomFieldItems) => {
const option = item?.node || item
const isExist = cacheAllList.some((cache: CustomFieldItems) => {
const cacheOption = cache?.node || cache
return cacheOption[selectedSymbol] === option[selectedSymbol]
})

if (!isExist) {
copyCacheAllList.push(item)
}
})

console.log(copyCacheAllList, 'copyCacheAllList')

setCacheAllList(copyCacheAllList)
}

const fetchList = async (
b3Pagination?: TablePagination,
isRefresh?: boolean
Expand Down Expand Up @@ -147,7 +175,10 @@ function PaginationTable(
const { edges, totalCount }: CustomFieldItems = requestList

setList(edges)
setSelectCheckbox([])

cacheList(edges)

if (!isSelectOtherPageCheckbox) setSelectCheckbox([])

if (!b3Pagination) {
setPagination({
Expand Down Expand Up @@ -179,9 +210,9 @@ function PaginationTable(
if (getSelectCheckbox) getSelectCheckbox(selectCheckbox)
}, [selectCheckbox, list])

const handlePaginationChange = (pagination: TablePagination) => {
const handlePaginationChange = async (pagination: TablePagination) => {
await fetchList(pagination)
setPagination(pagination)
fetchList(pagination)
}

const tablePagination = {
Expand All @@ -195,25 +226,77 @@ function PaginationTable(

const getList = () => list

const getCacheList = () => cacheAllList

useImperativeHandle(ref, () => ({
getSelectedValue,
setList,
setCacheAllList,
getList,
getCacheList,
refresh,
}))

const getCurrentAllItemsSelect = () => {
if (!selectCheckbox.length) return false
return list.every((item: CustomFieldItems) => {
const option = item?.node || item

return selectCheckbox.includes(option[selectedSymbol])
})
}

useEffect(() => {
if (isSelectOtherPageCheckbox) {
const flag = getCurrentAllItemsSelect()
setAllSelect(flag)
}
}, [selectCheckbox, pagination])

const handleSelectAllItems = () => {
if (selectCheckbox.length === list.length) {
setSelectCheckbox([])
const singlePageCheckbox = () => {
if (selectCheckbox.length === list.length) {
setSelectCheckbox([])
} else {
const selects: Array<string | number> = []
list.forEach((item: CustomFieldItems) => {
const option = item?.node || item
if (option) {
selects.push(option[selectedSymbol])
}
})
setSelectCheckbox(selects)
}
}

const otherPageCheckbox = () => {
const flag = getCurrentAllItemsSelect()

const newSelectCheckbox = [...selectCheckbox]
if (flag) {
list.forEach((item: CustomFieldItems) => {
const option = item?.node || item
const index = newSelectCheckbox.findIndex(
(item: any) => item === option[selectedSymbol]
)
newSelectCheckbox.splice(index, 1)
})
} else {
list.forEach((item: CustomFieldItems) => {
const option = item?.node || item
if (!selectCheckbox.includes(option[selectedSymbol])) {
newSelectCheckbox.push(option[selectedSymbol])
}
})
}

setSelectCheckbox(newSelectCheckbox)
}

if (isSelectOtherPageCheckbox) {
otherPageCheckbox()
} else {
const selects: Array<string | number> = []
list.forEach((item: CustomFieldItems) => {
const option = item?.node || item
if (option) {
selects.push(option[selectedSymbol])
}
})
setSelectCheckbox(selects)
singlePageCheckbox()
}
}

Expand Down Expand Up @@ -250,6 +333,8 @@ function PaginationTable(
showCheckbox={showCheckbox}
disableCheckbox={disableCheckbox}
selectedSymbol={selectedSymbol}
isSelectOtherPageCheckbox={isSelectOtherPageCheckbox}
isAllSelect={isAllSelect}
selectCheckbox={selectCheckbox}
handleSelectAllItems={handleSelectAllItems}
handleSelectOneItem={handleSelectOneItem}
Expand Down
16 changes: 14 additions & 2 deletions apps/storefront/src/components/table/B3Table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,8 @@ interface TableProps<T> {
disableCheckbox?: boolean
onClickRow?: (item: any, index?: number) => void
showRowsPerPageOptions?: boolean
isSelectOtherPageCheckbox?: boolean
isAllSelect?: boolean
}

const MOUSE_POINTER_STYLE = {
Expand Down Expand Up @@ -112,6 +114,8 @@ export function B3Table<T>({
hover = false,
showBorder = true,
selectedSymbol = 'id',
isSelectOtherPageCheckbox = false,
isAllSelect = false,
selectCheckbox = [],
labelRowsPerPage = '',
disableCheckbox = false,
Expand Down Expand Up @@ -172,7 +176,11 @@ export function B3Table<T>({
}}
>
<Checkbox
checked={selectCheckbox.length === listItems.length}
checked={
isSelectOtherPageCheckbox
? isAllSelect
: selectCheckbox.length === listItems.length
}
onChange={handleSelectAllItems}
disabled={disableCheckbox}
/>
Expand Down Expand Up @@ -289,7 +297,11 @@ export function B3Table<T>({
{showCheckbox && (
<TableCell key="showCheckbox">
<Checkbox
checked={selectCheckbox.length === listItems.length}
checked={
isSelectOtherPageCheckbox
? isAllSelect
: selectCheckbox.length === listItems.length
}
onChange={handleSelectAllItems}
disabled={disableCheckbox}
/>
Expand Down
16 changes: 15 additions & 1 deletion apps/storefront/src/pages/quickorder/components/QuickorderTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,8 @@ interface SearchProps {

interface PaginationTableRefProps extends HTMLInputElement {
getList: () => void
getCacheList: () => void
setCacheAllList: (items?: ListItemProps[]) => void
setList: (items?: ListItemProps[]) => void
getSelectedValue: () => void
}
Expand Down Expand Up @@ -213,7 +215,7 @@ function QuickorderTable({

const getSelectCheckbox = (selectCheckbox: Array<string | number>) => {
if (selectCheckbox.length > 0) {
const productList = paginationTableRef.current?.getList() || []
const productList = paginationTableRef.current?.getCacheList() || []
const checkedItems = selectCheckbox.map((item: number | string) => {
const newItems = productList.find((product: ListItemProps) => {
const { node } = product
Expand Down Expand Up @@ -261,6 +263,8 @@ function QuickorderTable({
) => {
if (value !== '' && +value <= 0) return
const listItems = paginationTableRef.current?.getList() || []
const listCacheItems = paginationTableRef.current?.getCacheList() || []

const newListItems = listItems?.map((item: ListItemProps) => {
const { node } = item
if (node?.id === id) {
Expand All @@ -269,7 +273,16 @@ function QuickorderTable({

return item
})
const newListCacheItems = listCacheItems?.map((item: ListItemProps) => {
const { node } = item
if (node?.id === id) {
node.quantity = +value || ''
}

return item
})
paginationTableRef.current?.setList([...newListItems])
paginationTableRef.current?.setCacheAllList([...newListCacheItems])
}

const columnItems: TableColumnItem<ListItem>[] = [
Expand Down Expand Up @@ -499,6 +512,7 @@ function QuickorderTable({
requestLoading={setIsRequestLoading}
getSelectCheckbox={getSelectCheckbox}
itemIsMobileSpacing={0}
isSelectOtherPageCheckbox
noDataText="No products found"
renderItem={(
row: ProductInfoProps,
Expand Down

0 comments on commit 46fa204

Please sign in to comment.