mukeshs/twenty_crm
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Sammy/t 131 i see a ascending descending option in (#73)

Browse Source 
* refactor: use safe css selector

* feature: onclick update the order option

* feature: set option in the dropdown

* feature: display icon for sort options

* refactor: indent key so react does not complain of conflicting keys

* feature: align icon and text

* feature: fix size of icon to align text

* feature: create design for TopOption in dropdown

* refactor: set font weight in style

* feature: finalise design of TopOption

* refactor: rename option to sort

* refactor: remove order from the sortType

* refactor: move sort mapper in service

* test: selection of Descending in SortDropdownButton

* refactor: fix styme-component warning

* feature: add sorting by people

* refactor: set SortFields types for tables

* feature: add sort by company

* refactor: rename sortFields to singular

* refactor: rename option to SortDirection
This commit is contained in:
Sammy Teillet
2023-04-25 16:29:08 +02:00
committed by GitHub
parent 463b5f4ec9
commit a93c92c65c
14 changed files with 270 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,15 +2,18 @@ import styled from '@emotion/styled';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import DropdownButton from './DropdownButton';
import { IconProp } from '@fortawesome/fontawesome-svg-core';
import SortAndFilterBar, { SortType } from './SortAndFilterBar';
import SortAndFilterBar, {
SelectedSortType,
SortType,
} from './SortAndFilterBar';
import { useCallback, useState } from 'react';
import { SortDropdownButton } from './SortDropdownButton';
type OwnProps = {
type OwnProps<SortField> = {
viewName: string;
viewIcon?: IconProp;
onSortsUpdate?: (sorts: Array<SortType>) => void;
sortsAvailable: Array<SortType>;
onSortsUpdate?: (sorts: Array<SelectedSortType<SortField>>) => void;
sortsAvailable: Array<SortType<SortField>>;
};
const StyledContainer = styled.div`
@ -49,16 +52,18 @@ const StyledFilters = styled.div`
margin-right: ${(props) => props.theme.spacing(2)};
`;
function TableHeader({
function TableHeader<SortField extends string>({
viewName,
viewIcon,
onSortsUpdate,
sortsAvailable,
}: OwnProps) {
const [sorts, innerSetSorts] = useState([] as Array<SortType>);
}: OwnProps<SortField>) {
const [sorts, innerSetSorts] = useState<Array<SelectedSortType<SortField>>>(
[],
);
const setSorts = useCallback(
(sorts: SortType[]) => {
(sorts: SelectedSortType<SortField>[]) => {
innerSetSorts(sorts);
onSortsUpdate && onSortsUpdate(sorts);
},
@ -67,7 +72,7 @@ function TableHeader({
const onSortItemUnSelect = useCallback(
(sortId: string) => {
const newSorts = [] as SortType[];
const newSorts = [] as SelectedSortType<SortField>[];
innerSetSorts(newSorts);
onSortsUpdate && onSortsUpdate(newSorts);
},