Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat/agenda item subject detail #195

Merged
merged 11 commits into from
Jul 10, 2024
Merged
5 changes: 5 additions & 0 deletions .changeset/mighty-ghosts-grin.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'storybook-pages': minor
---

Added ThemePage to show the application of a customized theme (DSFR)
5 changes: 5 additions & 0 deletions .changeset/small-singers-juggle.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'storybook-pages': minor
---

Add inputs to modify title and description in detail tab on agenda item page
6 changes: 3 additions & 3 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Original file line number Diff line number Diff line change
Expand Up @@ -143,5 +143,5 @@ export const tableMock: ITableProps<Record<string, unknown>> = {
},
],
manualSorting: false,
rowActionNumber: 3,
maxVisibleActions: 3,
};
8 changes: 4 additions & 4 deletions packages/haring-react-table/src/Components/Table/Table.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -39,9 +39,9 @@ import classes from './Table.module.css';
export interface ITableProps<Data extends Record<string, unknown>>
extends MRT_TableOptions<Data> {
actions?: ITableAction<Data>[];
maxVisibleActions?: number;
menuLabel?: string;
paginationProps?: Partial<IPaginationProps>;
rowActionNumber?: number;
}

const tooltipProps = {
Expand All @@ -63,7 +63,7 @@ export function Table<Data extends Record<string, unknown>>(
menuLabel = 'Other actions',
paginationDisplayMode = 'custom',
paginationProps,
rowActionNumber = 0,
maxVisibleActions = 0,
...mantineTableProps
} = props;
const { enablePagination = true, manualPagination } = mantineTableProps;
Expand All @@ -76,8 +76,8 @@ export function Table<Data extends Record<string, unknown>>(
// Calculated values
const massActions = actions.filter(({ isMassAction }) => isMassAction);
const rowActions = actions.filter(({ isItemAction = true }) => isItemAction);
const visibleRowActions = rowActions.slice(0, rowActionNumber);
const menuRowActions = rowActions.slice(rowActionNumber);
const visibleRowActions = rowActions.slice(0, maxVisibleActions);
const menuRowActions = rowActions.slice(maxVisibleActions);

// Handle
function handleMenuChange(opened: boolean, index: number): void {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,16 @@ import type { ReactNode } from 'react';
export const texts = {
conflicts: `Conflits d'intérêt`,
decisions: 'Décisions',
descriptionLabel: 'Description :',
details: 'Détails',
history: 'Historique',
modifyLabel: 'Modify',
next: 'Suivant',
order: `Ordre du jour`,
previous: 'Précédent',
pv: 'PV',
sends: 'Envois',
titleLabel: 'Title :',
toggleLabel: `Voir l'ordre du jour`,
};

Expand Down Expand Up @@ -42,7 +45,11 @@ export const menusMock: IMenuItem<string>[] = [
];

export interface IAgendaItemTab {
content: ReactNode;
content: {
body?: ReactNode;
description?: string;
title?: string;
};
id: string;
}

Expand All @@ -56,92 +63,133 @@ export const tabsMock: IAgendaItemOrder[] = [
id: '1',
tabs: [
{
content: (
<>
<p>Content of Order 1</p>
<p>Tab order</p>
</>
),
content: {
body: (
<>
<p>Content of Order 1</p>
<p>Tab order</p>
</>
),
},

id: 'order',
},
{
content: (
<>
<p>Content of Order 1</p>
<p>Tab details</p>
</>
),
content: {
description: '',
title: 'Titre tab détails order 1',
},
id: 'details',
},
{
content: (
<>
<p>Content of Order 1</p>
<p>Tab conflicts</p>
</>
),
content: {
body: (
<>
<p>Content of Order 1</p>
<p>Tab conflicts</p>
</>
),
},
id: 'conflicts',
},
{
content: (
<>
<p>Content of Order 1</p>
<p>Tab sends</p>
</>
),
content: {
body: (
<>
<p>Content of Order 1</p>
<p>Tab sends</p>
</>
),
},
id: 'sends',
},
{
content: (
<>
<p>Content of Order 1</p>
<p>Tab pv</p>
</>
),
content: {
body: (
<>
<p>Content of Order 1</p>
<p>Tab pv</p>
</>
),
},
id: 'pv',
},
{
content: (
<>
<p>Content of Order 1</p>
<p>Tab decisions</p>
</>
),
content: {
body: (
<>
<p>Content of Order 1</p>
<p>Tab decisions</p>
</>
),
},
id: 'decisions',
},
{
content: (
<>
<p>Content of Order 1</p>
<p>Tab history</p>
</>
),
content: {
body: (
<>
<p>Content of Order 1</p>
<p>Tab history</p>
</>
),
},
id: 'history',
},
],
},
{
id: '2',
tabs: [
{ content: 'Content of Order 2, Tab order', id: 'order' },
{ content: 'Content of Order 2, Tab details', id: 'details' },
{ content: 'Content of Order 2, Tab conflicts', id: 'conflicts' },
{ content: 'Content of Order 2, Tab sends', id: 'sends' },
{ content: 'Content of Order 2, Tab pv', id: 'pv' },
{ content: 'Content of Order 2, Tab decisions', id: 'decisions' },
{ content: 'Content of Order 2, Tab history', id: 'history' },
{ content: { body: 'Content of Order 2, Tab order' }, id: 'order' },
{
content: {
description: '',
title: 'Titre tab détails order 2',
},
id: 'details',
},
{
content: { body: 'Content of Order 2, Tab conflicts' },
id: 'conflicts',
},
{ content: { body: 'Content of Order 2, Tab sends' }, id: 'sends' },
{ content: { body: 'Content of Order 2, Tab pv' }, id: 'pv' },
{
content: { body: 'Content of Order 2, Tab decisions' },
id: 'decisions',
},
{
content: { body: 'Content of Order 2, Tab history' },
id: 'history',
},
],
},
{
id: '3',
tabs: [
{ content: 'Content of Order 3, Tab order', id: 'order' },
{ content: 'Content of Order 3, Tab details', id: 'details' },
{ content: 'Content of Order 3, Tab conflicts', id: 'conflicts' },
{ content: 'Content of Order 3, Tab sends', id: 'sends' },
{ content: 'Content of Order 3, Tab pv', id: 'pv' },
{ content: 'Content of Order 3, Tab decisions', id: 'decisions' },
{ content: 'Content of Order 3, Tab history', id: 'history' },
{ content: { body: 'Content of Order 3, Tab order' }, id: 'order' },
{
content: {
description: '',
title: 'Titre tab détails order 3',
},
id: 'details',
},
{
content: { body: 'Content of Order 3, Tab conflicts' },
id: 'conflicts',
},
{ content: { body: 'Content of Order 3, Tab order' }, id: 'sends' },
{ content: { body: 'Content of Order 3, Tab pv' }, id: 'pv' },
{
content: { body: 'Content of Order 3, Tab decisions' },
id: 'decisions',
},
{
content: { body: 'Content of Order 3, Tab history' },
id: 'history',
},
],
},
];
Loading
Loading