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

Uniformize folder structure (#693)

Browse Source 
* Uniformize folder structure

* Fix icons

* Fix icons

* Fix tests

* Fix tests
This commit is contained in:
Charles Bochet
2023-07-16 14:29:28 -07:00
committed by GitHub
parent 900ec5572f
commit 6ced8434bd
462 changed files with 931 additions and 960 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
front/src/modules/ui/table/table-header/components/TableHeader.tsx Normal file
View File

@ -0,0 +1,131 @@
import { ReactNode, useCallback, useState } from 'react';
import styled from '@emotion/styled';
import { FilterDropdownButton } from '@/ui/filter-n-sort/components/FilterDropdownButton';
import SortAndFilterBar from '@/ui/filter-n-sort/components/SortAndFilterBar';
import { SortDropdownButton } from '@/ui/filter-n-sort/components/SortDropdownButton';
import { FiltersHotkeyScope } from '@/ui/filter-n-sort/types/FiltersHotkeyScope';
import { SelectedSortType, SortType } from '@/ui/filter-n-sort/types/interface';
import { TableContext } from '../../states/TableContext';
type OwnProps<SortField> = {
viewName: string;
viewIcon?: ReactNode;
availableSorts?: Array<SortType<SortField>>;
onSortsUpdate?: (sorts: Array<SelectedSortType<SortField>>) => void;
};
const StyledContainer = styled.div`
display: flex;
flex-direction: column;
`;
const StyledTableHeader = styled.div`
align-items: center;
color: ${({ theme }) => theme.font.color.secondary};
display: flex;
flex-direction: row;
font-weight: ${({ theme }) => theme.font.weight.medium};
height: 40px;
justify-content: space-between;
padding-left: ${({ theme }) => theme.spacing(3)};
padding-right: ${({ theme }) => theme.spacing(2)};
`;
const StyledIcon = styled.div`
display: flex;
margin-left: ${({ theme }) => theme.spacing(1)};
margin-right: ${({ theme }) => theme.spacing(2)};
& > svg {
font-size: ${({ theme }) => theme.icon.size.sm};
}
`;
const StyledViewSection = styled.div`
display: flex;
`;
const StyledFilters = styled.div`
display: flex;
font-weight: ${({ theme }) => theme.font.weight.regular};
gap: 2px;
`;
export function TableHeader<SortField>({
viewName,
viewIcon,
availableSorts,
onSortsUpdate,
}: OwnProps<SortField>) {
const [sorts, innerSetSorts] = useState<Array<SelectedSortType<SortField>>>(
[],
);
const sortSelect = useCallback(
(newSort: SelectedSortType<SortField>) => {
const newSorts = updateSortOrFilterByKey(sorts, newSort);
innerSetSorts(newSorts);
onSortsUpdate && onSortsUpdate(newSorts);
},
[onSortsUpdate, sorts],
);
const sortUnselect = useCallback(
(sortKey: string) => {
const newSorts = sorts.filter((sort) => sort.key !== sortKey);
innerSetSorts(newSorts);
onSortsUpdate && onSortsUpdate(newSorts);
},
[onSortsUpdate, sorts],
);
return (
<StyledContainer>
<StyledTableHeader>
<StyledViewSection>
<StyledIcon>{viewIcon}</StyledIcon>
{viewName}
</StyledViewSection>
<StyledFilters>
<FilterDropdownButton
context={TableContext}
HotkeyScope={FiltersHotkeyScope.FilterDropdownButton}
/>
<SortDropdownButton<SortField>
isSortSelected={sorts.length > 0}
availableSorts={availableSorts || []}
onSortSelect={sortSelect}
HotkeyScope={FiltersHotkeyScope.FilterDropdownButton}
/>
</StyledFilters>
</StyledTableHeader>
<SortAndFilterBar
context={TableContext}
sorts={sorts}
onRemoveSort={sortUnselect}
onCancelClick={() => {
innerSetSorts([]);
onSortsUpdate && onSortsUpdate([]);
}}
/>
</StyledContainer>
);
}
function updateSortOrFilterByKey<SortOrFilter extends { key: string }>(
sorts: Readonly<SortOrFilter[]>,
newSort: SortOrFilter,
): SortOrFilter[] {
const newSorts = [...sorts];
const existingSortIndex = sorts.findIndex((sort) => sort.key === newSort.key);
if (existingSortIndex !== -1) {
newSorts[existingSortIndex] = newSort;
} else {
newSorts.push(newSort);
}
return newSorts;
}

68
front/src/modules/ui/table/table-header/components/__stories__/TableHeader.stories.tsx Normal file
View File

@ -0,0 +1,68 @@
import type { Meta, StoryObj } from '@storybook/react';
import { userEvent, within } from '@storybook/testing-library';
import { IconList } from '@/ui/icon/index';
import { availableSorts } from '~/pages/companies/companies-sorts';
import { getRenderWrapperForEntityTableComponent } from '~/testing/renderWrappers';
import { TableHeader } from '../TableHeader';
const meta: Meta<typeof TableHeader> = {
title: 'UI/Table/TableHeader',
component: TableHeader,
};
export default meta;
type Story = StoryObj<typeof TableHeader>;
export const Empty: Story = {
render: getRenderWrapperForEntityTableComponent(
<TableHeader
viewName="ViewName"
viewIcon={<IconList />}
availableSorts={availableSorts}
/>,
),
};
export const WithSortsAndFilters: Story = {
render: getRenderWrapperForEntityTableComponent(
<TableHeader
viewName="ViewName"
viewIcon={<IconList />}
availableSorts={availableSorts}
/>,
),
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
const outsideClick = await canvas.findByText('ViewName');
userEvent.click(await canvas.findByText('Filter'));
userEvent.click(await canvas.findByText('Name'));
const nameInput = await canvas.findByPlaceholderText('Name');
userEvent.type(nameInput, 'My name');
userEvent.click(outsideClick);
userEvent.click(await canvas.findByText('Sort'));
userEvent.click(await canvas.findByText('Name'));
userEvent.click(await canvas.findByText('Sort'));
userEvent.click(await canvas.findByText('Creation'));
userEvent.click(await canvas.findByText('Sort'));
userEvent.click(await canvas.findByText('Address'));
userEvent.click(await canvas.findByText('Filter'));
userEvent.click(await canvas.findByText('Employees'));
const employeesInput = await canvas.findByPlaceholderText('Employees');
userEvent.type(employeesInput, '12');
userEvent.click(await canvas.findByText('Sort'));
userEvent.click(await canvas.findByText('Url'));
userEvent.click(await canvas.findByText('Filter'));
userEvent.click(await canvas.findByText('Created at'));
userEvent.click(await canvas.findByText('6'));
userEvent.click(outsideClick);
},
};