Feat/agenda item subject detail (#195)

* fix: opendMenu index fix * feat(redmine 1302081): add inputs to modify title and description in detail tab * feat(redmine 1302216): upgrade mantine to 7.11.0 (#194) * feat(redmine 1302216): upgrade mantine to 7.11.0 * feat(redmine 1302216): add changeset * feat(redmine 1302081): fix pr review from Valentin * feat(redmine 1302081): second fix pr review * chore: replace composent by body * feat(redmine 1302277): added ThemePage to show the application of DSFR theme * feat(redmine 1302277): fix pr review from Tony * feat(redmine 1294487): replaced rowActionNumber by maxVisibleActions in table component * feat(redmine 1294487): chaged rowActionNumber to maxVisibleActions in agenda and browsing page --------- Co-authored-by: vapersmile <[email protected]>
Smile-SA · Jul 11, 2024 · 09e3e63 · 09e3e63
1 parent 6cdc280
commit 09e3e63
Show file tree

Hide file tree

Showing 13 changed files with 466 additions and 92 deletions.
diff --git a/.changeset/mighty-ghosts-grin.md b/.changeset/mighty-ghosts-grin.md
@@ -0,0 +1,5 @@
+---
+'storybook-pages': minor
+---
+
+Added ThemePage to show the application of a customized theme (DSFR)
diff --git a/.changeset/small-singers-juggle.md b/.changeset/small-singers-juggle.md
@@ -0,0 +1,5 @@
+---
+'storybook-pages': minor
+---
+
+Add inputs to modify title and description in detail tab on agenda item page
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/haring-react-table/src/Components/Table/Table.mock.tsx b/packages/haring-react-table/src/Components/Table/Table.mock.tsx
@@ -143,5 +143,5 @@ export const tableMock: ITableProps<Record<string, unknown>> = {
     },
   ],
   manualSorting: false,
-  rowActionNumber: 3,
+  maxVisibleActions: 3,
 };
diff --git a/packages/haring-react-table/src/Components/Table/Table.tsx b/packages/haring-react-table/src/Components/Table/Table.tsx
@@ -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 = {
@@ -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;
@@ -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 {

diff --git a/packages/storybook-pages/src/Pages/AgendaItemPage/AgendaItemPage.mock.tsx b/packages/storybook-pages/src/Pages/AgendaItemPage/AgendaItemPage.mock.tsx
@@ -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`,
 };
 
@@ -42,7 +45,11 @@ export const menusMock: IMenuItem<string>[] = [
 ];
 
 export interface IAgendaItemTab {
-  content: ReactNode;
+  content: {
+    body?: ReactNode;
+    description?: string;
+    title?: string;
+  };
   id: string;
 }
 
@@ -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',
+      },
     ],
   },
 ];