diff --git a/src/fireedge/src/client/components/Tables/Enhanced/Utils/GlobalSort.js b/src/fireedge/src/client/components/Tables/Enhanced/Utils/GlobalSort.js index efac152d74..911ff528b6 100644 --- a/src/fireedge/src/client/components/Tables/Enhanced/Utils/GlobalSort.js +++ b/src/fireedge/src/client/components/Tables/Enhanced/Utils/GlobalSort.js @@ -17,7 +17,7 @@ import { useEffect, useMemo, ReactElement } from 'react' import PropTypes from 'prop-types' import { SortDown, ArrowDown, ArrowUp } from 'iconoir-react' -import { MenuItem, MenuList, Chip, Stack } from '@mui/material' +import { MenuItem, MenuList, Stack } from '@mui/material' import { TableInstance, UseSortByInstanceProps, @@ -45,71 +45,52 @@ const GlobalSort = ({ className, useTableProps }) => { /** @type {UseSortByState} */ const { sortBy } = state - const headersNotSorted = useMemo( + const sorters = useMemo( () => - headers.filter( - ({ isSorted, canSort, isVisible }) => !isSorted && canSort && isVisible - ), - [sortBy.length] + headers + .filter((header) => header.canSort && header.isVisible) + .map((header) => { + const sorter = sortBy.find((s) => s.id === header.id) + + return { ...header, ...sorter } + }), + [headers.length, sortBy?.[0]?.id, sortBy?.[0]?.desc] ) - const handleClick = (id, name) => { - setSortBy([{ id, desc: false, name }, ...sortBy]) - } - - const handleDelete = (removeId) => { - setSortBy(sortBy.filter(({ id }) => id !== removeId)) - } - - const handleToggle = (id, desc) => { - setSortBy(sortBy.map((sort) => (sort.id === id ? { ...sort, desc } : sort))) + const handleClick = (id, name, prevDesc = true) => { + setSortBy([{ id, desc: !prevDesc, name }]) } useEffect(() => () => setSortBy([]), []) - return !headersNotSorted.length && !sortBy.length ? null : ( - - {useMemo( - () => ( - } - buttonLabel={T.SortBy} - buttonProps={{ - 'data-cy': 'sort-by-button', - disabled: headersNotSorted.length === 0, - variant: 'outlined', - color: 'secondary', - }} - popperProps={{ placement: 'bottom-end' }} - > - {() => ( - - {headersNotSorted?.map(({ id, Header: name }) => ( - handleClick(id, name)}> - - - ))} - - )} - - ), - [headersNotSorted.length] - )} + if (sorters.length === 0) { + return null + } - {useMemo( - () => - sortBy?.map(({ name, id, desc }) => ( - : } - label={name ?? id} - onClick={() => handleToggle(id, !desc)} - onDelete={() => handleDelete(id)} - /> - )), - [sortBy.length, handleToggle] - )} + return ( + + } + buttonLabel={T.SortBy} + buttonProps={{ + 'data-cy': 'sort-by-button', + variant: 'outlined', + color: 'secondary', + }} + popperProps={{ placement: 'bottom-end' }} + > + {() => ( + + {sorters?.map(({ id, Header: name, desc }) => ( + handleClick(id, name, desc)}> + {desc !== undefined && (desc ? : )} + + + ))} + + )} + ) } @@ -119,4 +100,6 @@ GlobalSort.propTypes = { useTableProps: PropTypes.object.isRequired, } +GlobalSort.displayName = 'GlobalSort' + export default GlobalSort