Skip to content

Commit

Permalink
Feat/browsing page add filters checkbox list (#89)
Browse files Browse the repository at this point in the history
* feat(redmine 1267924): Add FiltersCheckboxList in browsingPage

* feat(redmine 1267924): add provisional globalFilters value to the dom

* feat(redmine 1267924): Add FiltersCheckboxList in browsingPage

feat(redmine 1267924): add provisional globalFilters value to the dom

* feat(redmine 1267924):  fix pr review by quentin
  • Loading branch information
vapersmile authored and tonai committed Jan 3, 2024
1 parent 7f36dc9 commit e078f38
Show file tree
Hide file tree
Showing 4 changed files with 133 additions and 2 deletions.
5 changes: 5 additions & 0 deletions .changeset/wicked-geese-give.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'storybook-pages': minor
---

Add FiltersCheckboxList in BrowsingPage
Original file line number Diff line number Diff line change
Expand Up @@ -162,3 +162,58 @@ export const gridProps: ITableGridViewGridProps = {
spacing: 25,
verticalSpacing: 25,
};

export const filtersCheckboxListProps = [
{ active: false, id: 1, label: 'Nom du filtre', value: 'FILTER_NAME' },
{
active: false,
id: 2,
label: 'Blandit mollis nisi curabitur',
value: 'BLANDI',
},
{
active: false,
id: 3,
label: 'Ultricies dui ut non massa eget',
value: 'ULTRICIES',
},
{
active: false,
id: 4,
label: 'Lorem ipsum dolor ',
value: 'LOREM',
},
{ active: true, id: 5, label: 'Dernière modification', value: 'LAST_UPDATE' },
{ active: true, id: 6, label: 'Type de document', value: 'DOCUMENT_TYPE' },
{ active: true, id: 7, label: 'Période', value: 'PERIOD' },
{
active: false,
id: 8,
label: 'Lorem ipsum dolor ',
value: 'LOREM2',
},
{
active: false,
id: 9,
label: 'Blandit mollis nisi curabitur',
value: 'BLANDI2',
},
{
active: false,
id: 10,
label: 'Lorem ipsum dolor ',
value: 'LOREM3',
},
{
active: false,
id: 11,
label: 'Ultricies dui ut non massa eget',
value: 'ULTRICIES2',
},
{
active: false,
id: 12,
label: 'Blandit mollis nisi curabitur',
value: 'BLANDI3',
},
];
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,22 @@ export const useStyles = createStyles((theme) => ({
accordionItem: {
borderBottom: 'none',
},
arrowFiltersManager: {
color: theme.colors.dark[6],
marginLeft: '6px',
position: 'relative',
top: '2px',
},
buttonFiltersManager: {
color: theme.colors.dark[6],
cursor: 'pointer',
fontWeight: 700,
verticalAlign: 'middle',
},
filtersManagerModalTitle: {
fontSize: '18px',
fontWeight: 700,
},
modalBody: {
padding: '0px 48px 50px 48px',
},
Expand Down
59 changes: 57 additions & 2 deletions packages/storybook-pages/src/Pages/BrowsingPage/BrowsingPage.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
'use client';

import type { IFilter } from '@smile/react-front-kit';
import type { IFile } from '@smile/react-front-kit-dropzone';
import type { FormEvent, ReactElement } from 'react';

Expand All @@ -13,9 +14,16 @@ import {
useMantineTheme,
} from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import { Eye, FolderPlus, Suitcase, User } from '@phosphor-icons/react';
import {
CaretRight,
Eye,
FolderPlus,
Suitcase,
User,
} from '@phosphor-icons/react';
import {
Breadcrumbs,
FiltersCheckboxList,
FoldableColumnLayout,
Header,
InfoCard,
Expand All @@ -39,7 +47,13 @@ import {
headerRight,
} from '../pages.mock';

import { actions, data, gridProps, tableProps } from './BrowsingPage.mock';
import {
actions,
data,
filtersCheckboxListProps,
gridProps,
tableProps,
} from './BrowsingPage.mock';
import { useStyles } from './BrowsingPage.style';

/**
Expand All @@ -52,6 +66,10 @@ export function BrowsingPage(): ReactElement {
const [gridCols, setGridCols] = useState(4);
const [seeMoreModal, { open, close }] = useDisclosure(false);
const { primary, secondary } = useThemes();
const [filtersManagerModal, handleFiltersManagerModal] = useDisclosure(false);
const [globalFilters, setGlobalFilters] = useState<IFilter[]>(
filtersCheckboxListProps,
);

const { classes } = useStyles();
const theme = useMantineTheme();
Expand Down Expand Up @@ -80,6 +98,11 @@ export function BrowsingPage(): ReactElement {
);
}

function handleFiltersManagerSubmit(filters: IFilter[]): void {
handleFiltersManagerModal.close();
setGlobalFilters(filters);
}

function getAccordionItems(): ReactElement {
const items = accordionItems.map((item) => (
<Accordion.Item key={item.title} value={item.title}>
Expand Down Expand Up @@ -193,6 +216,23 @@ export function BrowsingPage(): ReactElement {
mt={24}
style={{ gap: 20, paddingTop: 12 }}
tableProps={tableProps}
topBarLeft={
<span
aria-hidden="true"
className={classes.buttonFiltersManager}
onClick={handleFiltersManagerModal.open}
>
<div style={{ fontWeight: 200 }}>
[
{globalFilters.map(
(element) => element.active && `${element.label}, `,
)}
]
</div>
Gérer les filtres
<CaretRight className={classes.arrowFiltersManager} size={12} />
</span>
}
/>
</FoldableColumnLayout>
<Modal
Expand All @@ -207,6 +247,21 @@ export function BrowsingPage(): ReactElement {
<h3 className={classes.modalTitle}>Propriétés du dossier</h3>
{getAccordionItems()}
</Modal>
<Modal
centered
classNames={{ title: classes.filtersManagerModalTitle }}
onClose={handleFiltersManagerModal.close}
opened={filtersManagerModal}
size="md"
title="Gérer les filtres"
>
<FiltersCheckboxList
buttonLabel="Valider les modifications"
filters={globalFilters}
onClickButton={handleFiltersManagerSubmit}
placeholder="Chercher dans les filtres"
/>
</Modal>
</AppShell>
);
}

0 comments on commit e078f38

Please sign in to comment.