admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feature: set the right sort on click

Browse Source
This commit is contained in:
Sammy Teillet
2023-04-24 18:17:01 +02:00
parent 0f4dcc1957
commit f7c53dbdeb
3 changed files with 6 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
front/src/components/table/table-header/DropdownButton.tsx
View File

@ -2,13 +2,10 @@ import styled from '@emotion/styled';
import { useRef, ReactNode } from 'react'; import { useRef, ReactNode } from 'react';
import { useOutsideAlerter } from '../../../hooks/useOutsideAlerter'; import { useOutsideAlerter } from '../../../hooks/useOutsideAlerter';
import { modalBackground } from '../../../layout/styles/themes'; import { modalBackground } from '../../../layout/styles/themes';
import { SortType } from './SortAndFilterBar';
type OwnProps = { type OwnProps = {
label: string; label: string;
options: Array<SortType>;
isActive: boolean; isActive: boolean;
onSortSelect?: (id: string) => void;
children?: ReactNode; children?: ReactNode;
isUnfolded?: boolean; isUnfolded?: boolean;
setIsUnfolded?: React.Dispatch<React.SetStateAction<boolean>>; setIsUnfolded?: React.Dispatch<React.SetStateAction<boolean>>;
@ -92,7 +89,6 @@ const StyledIcon = styled.div`
function DropdownButton({ function DropdownButton({
label, label,
options,
isActive, isActive,
children, children,
isUnfolded = false, isUnfolded = false,
@ -118,7 +114,7 @@ function DropdownButton({
> >
{label} {label}
</StyledDropdownButton> </StyledDropdownButton>
{isUnfolded && options.length > 0 && ( {isUnfolded && (
<StyledDropdown ref={dropdownRef}>{children}</StyledDropdown> <StyledDropdown ref={dropdownRef}>{children}</StyledDropdown>
)} )}
</StyledDropdownButtonContainer> </StyledDropdownButtonContainer>

14
front/src/components/table/table-header/SortDropdownButton.tsx
View File

@ -17,14 +17,8 @@ export function SortDropdownButton({
const [isUnfolded, setIsUnfolded] = useState(false); const [isUnfolded, setIsUnfolded] = useState(false);
const onSortItemSelect = useCallback( const onSortItemSelect = useCallback(
(sortId: string) => { (sort: SortType) => {
const newSorts = [ const newSorts = [sort];
{
label: 'Created at',
order: 'asc',
id: sortId,
} satisfies SortType,
];
setSorts(newSorts); setSorts(newSorts);
}, },
[setSorts], [setSorts],
@ -33,8 +27,6 @@ export function SortDropdownButton({
return ( return (
<DropdownButton <DropdownButton
label="Sort" label="Sort"
options={sortsAvailable}
onSortSelect={onSortItemSelect}
isActive={sorts.length > 0} isActive={sorts.length > 0}
isUnfolded={isUnfolded} isUnfolded={isUnfolded}
setIsUnfolded={setIsUnfolded} setIsUnfolded={setIsUnfolded}
@ -44,7 +36,7 @@ export function SortDropdownButton({
key={index} key={index}
onClick={() => { onClick={() => {
setIsUnfolded(false); setIsUnfolded(false);
onSortItemSelect(option.id); onSortItemSelect(option);
}} }}
> >
<DropdownButton.StyledIcon> <DropdownButton.StyledIcon>

12
front/src/components/table/table-header/TableHeader.tsx
View File

@ -80,22 +80,14 @@ function TableHeader({
{viewName} {viewName}
</StyledViewSection> </StyledViewSection>
<StyledFilters> <StyledFilters>
<DropdownButton <DropdownButton label="Filter" isActive={false}></DropdownButton>
label="Filter"
options={[]}
isActive={false}
></DropdownButton>
<SortDropdownButton <SortDropdownButton
setSorts={setSorts} setSorts={setSorts}
sorts={sorts} sorts={sorts}
sortsAvailable={sortsAvailable} sortsAvailable={sortsAvailable}
/> />
<DropdownButton <DropdownButton label="Settings" isActive={false}></DropdownButton>
label="Settings"
options={[]}
isActive={false}
></DropdownButton>
</StyledFilters> </StyledFilters>
</StyledTableHeader> </StyledTableHeader>
{sorts.length > 0 && ( {sorts.length > 0 && (