feat(FON-381): improves agenda file selection

apps/client/src/components/secretariat-general/transparence/content/tableau-de-bord/actions/DocGenerationAction.tsx

@@ -1,9 +1,7 @@
 import Button from '@codegouvfr/react-dsfr/Button';
-import { cx } from '@codegouvfr/react-dsfr/fr/cx';
 import React from 'react';
 import { generatePath } from 'react-router';
 
-import { MenuContent, MenuItem, MenuRoot, MenuTrigger } from '@/components/shared/menu';
 import { ROUTE_PATHS } from '@/utils/route-path.utils';
 import { useIsSessionReadyForDocGenerationQuery } from '@queries/agenda.queries';
 
@@ -12,48 +10,12 @@ export function DocGenerationAction(props: { sessionId: string }) {
     sessionId: props.sessionId,
   });
 
-  const [agendaPath, officialReportPath] = React.useMemo(
-    () => [
-      generatePath(ROUTE_PATHS.SG.AGENDA_NEW, { sessionId: props.sessionId }),
-      generatePath(ROUTE_PATHS.SG.OFFICIAL_REPORT_NEW, { sessionId: props.sessionId }),
-    ],
+  const officialReportPath = React.useMemo(
+    () => generatePath(ROUTE_PATHS.SG.OFFICIAL_REPORT_NEW, { sessionId: props.sessionId }),
     [props.sessionId],
   );
 
-  if (!readiness?.isReady) return null;
-
-  if (readiness.canCreateAgenda && readiness.canCreateOfficialReport) {
-    return (
-      <li>
-        <MenuRoot>
-          <MenuTrigger size="small" priority="secondary" iconId="fr-icon-folder-2-line">
-            Générer la documentation <i className={cx('ri-arrow-down-s-line')} />
-          </MenuTrigger>
-
-          <MenuContent>
-            <MenuItem linkProps={{ to: agendaPath }}>Ordre du jour</MenuItem>
-
-            <MenuItem linkProps={{ to: officialReportPath }}>Procès verbal</MenuItem>
-          </MenuContent>
-        </MenuRoot>
-      </li>
-    );
-  }
-
-  if (readiness.canCreateAgenda) {
-    return (
-      <li>
-        <Button
-          size="small"
-          priority="secondary"
-          iconId="fr-icon-folder-2-line"
-          linkProps={{ to: agendaPath }}
-        >
-          Ordre du jour
-        </Button>
-      </li>
-    );
-  }
+  if (!readiness?.canCreateOfficialReport) return null;
 
   return (
     <li>

apps/client/src/components/shared/menu.tsx

@@ -16,7 +16,7 @@ export const MenuTrigger = React.memo((props: ButtonProps) => (
 
 export const MenuContent = React.memo((props: React.PropsWithChildren) => (
   <BaseMenu.Portal>
-    <BaseMenu.Positioner className="outline-hidden" sideOffset={8} align="end">
+    <BaseMenu.Positioner className="z-10 outline-hidden" sideOffset={8} align="end">
       <BaseMenu.Popup
         className={clsx(
           'flex origin-(--transform-origin) flex-col rounded-md border border-solid border-gray-300 bg-[canvas] shadow-lg',
@@ -42,7 +42,6 @@ export const MenuItem = React.memo((props: ButtonProps) => (
         {...renderProps}
         {...props}
         data-highlighted={state.highlighted}
-        disabled={state.disabled}
         className={clsx(
           'w-full!',
           'first:data-highlighted:rounded-t-md',

apps/client/src/components/shared/nomination-files-table/components/AgendaBasketButton.tsx

@@ -0,0 +1,69 @@
+import Button from '@codegouvfr/react-dsfr/Button';
+import { cx } from '@codegouvfr/react-dsfr/fr/cx';
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { generatePath, useNavigate } from 'react-router';
+
+import { useSelectedFileIds } from '../contexts/files-selection.context';
+import { useNominationFilesTable } from '../contexts/files-table.context';
+import { MenuContent, MenuItem, MenuRoot, MenuTrigger } from '@/components/shared/menu';
+import { useAgendaBasket } from '@/pages/secretariat-general/docs/agenda/hooks/useAgendaBasket.hook';
+import { ROUTE_PATHS } from '@/utils/route-path.utils';
+import { useIsSessionReadyForDocGenerationQuery } from '@queries/agenda.queries';
+
+export function AgendaBasketButton() {
+  const navigate = useNavigate();
+  const { sessionId } = useNominationFilesTable();
+  const selectedIds = useSelectedFileIds();
+  const basket = useAgendaBasket(sessionId);
+  const { data: readiness } = useIsSessionReadyForDocGenerationQuery({ sessionId });
+
+  const onAddToBasket = React.useCallback(() => {
+    if (selectedIds.length === 0) return;
+    basket.add(selectedIds);
+  }, [basket, selectedIds]);
+
+  const onStartAgenda = React.useCallback(() => {
+    navigate(generatePath(ROUTE_PATHS.SG.AGENDA_NEW, { sessionId }));
+  }, [navigate, sessionId]);
+
+  if (!readiness?.canCreateAgenda) return null;
+
+  if (basket.isEmpty) {
+    return (
+      <Button
+        size="small"
+        priority="secondary"
+        iconId="fr-icon-file-add-line"
+        onClick={onAddToBasket}
+        disabled={selectedIds.length === 0}
+      >
+        <FormattedMessage defaultMessage={"Ajouter à l'ODJ"} />
+      </Button>
+    );
+  }
+
+  return (
+    <MenuRoot>
+      <MenuTrigger size="small" priority="secondary" iconId="fr-icon-folder-2-line">
+        ODJ ({basket.size}) <i className={cx('ri-arrow-down-s-line')} />
+      </MenuTrigger>
+
+      <MenuContent>
+        <MenuItem onClick={onAddToBasket} disabled={selectedIds.length === 0} iconId="fr-icon-file-add-line">
+          <FormattedMessage
+            values={{ count: basket.size }}
+            defaultMessage={`{count, plural,
+              =0 {Ajouter à l'ODJ}
+              other {Ajouter à l'ODJ ({count})}
+            }`}
+          />
+        </MenuItem>
+
+        <MenuItem onClick={onStartAgenda}>
+          <FormattedMessage defaultMessage={"Générer l'ODJ"} />
+        </MenuItem>
+      </MenuContent>
+    </MenuRoot>
+  );
+}

apps/client/src/components/shared/nomination-files-table/components/NominationFilesActionsBar.tsx

@@ -1,5 +1,6 @@
 import { useNominationFilesTable } from '../contexts/files-table.context';
 
+import { AgendaBasketButton } from './AgendaBasketButton';
 import { NominationFilesAutoAffectationButton } from './NominationFilesAutoAffectationButton';
 import { NominationFilesBatchOperationsButton } from './NominationFilesBatchOperationsButton';
 import { NominationFilesSaveAffectationsButton } from './NominationFilesSaveAffectationsButton';
@@ -17,6 +18,7 @@ export function NominationFilesTableActionsBar() {
           <NominationFilesAutoAffectationButton />
           <NominationFilesBatchOperationsButton />
           <NominationFilesSaveAffectationsButton />
+          <AgendaBasketButton />
         </>
       ) : null}
 

apps/client/src/components/shared/nomination-files-table/components/NominationFilesAutoAffectationButton.tsx

@@ -115,7 +115,7 @@ export function NominationFilesAutoAffectationButton() {
       iconId={isAutoAffecting ? undefined : 'fr-icon-sparkling-2-line'}
       title={unaffectedFilesCount ? undefined : 'Tous les dossiers ont des rapporteurs attribués'}
     >
-      {isAutoAffecting ? 'Affectation en cours...' : 'Attribuer les rapports'}
+      {isAutoAffecting ? 'En cours...' : 'Aff. auto'}
     </Button>
   );
 }

apps/client/src/components/shared/nomination-files-table/components/NominationFilesBatchOperationsButton.tsx

@@ -109,11 +109,11 @@ export function NominationFilesBatchOperationsButton() {
       <Button
         size="small"
         priority="secondary"
-        iconId="fr-icon-menu-fill"
+        iconId="ri-settings-4-fill"
         disabled={!hasSelection}
         onClick={handleOpenModal}
       >
-        Actions groupées
+        Actions
       </Button>
 
       <actionsGroupeesModal.Component

apps/client/src/hooks/useLocallyStoredState.hook.ts

@@ -1,12 +1,17 @@
 import React from 'react';
 
-type Jsonifiable = string | number | boolean | { [id: string]: string | number | boolean | null };
+type Jsonifiable =
+  | string
+  | number
+  | boolean
+  | null
+  | { [id: string]: string | number | boolean | null | (string | number | boolean | null)[] };
 
 /** synchronizes react state with local storage */
 export function useLocallyStoredState<T extends Jsonifiable>(options: {
   state: T;
   key: string;
-}): [T, React.Dispatch<React.SetStateAction<T>>] {
+}): [state: T, stateUpdater: React.Dispatch<React.SetStateAction<T>>, clear: () => void] {
   const [state, setReactState] = React.useState<T>(readLocalStorage(options.key) ?? options.state);
 
   const update = React.useCallback(
@@ -18,7 +23,11 @@ export function useLocallyStoredState<T extends Jsonifiable>(options: {
     [state, options.key, setReactState],
   );
 
-  return [state, update];
+  const clear = React.useCallback(() => {
+    clearLocalStorage(options.key);
+  }, [options.key]);
+
+  return [state, update, clear];
 }
 
 const NAMESPACE = 'fondation';
@@ -28,6 +37,10 @@ function readLocalStorage<T>(key: string): T | undefined {
   return value ? JSON.parse(value) : undefined;
 }
 
-function writeLocalStorage<T extends Jsonifiable>(key: string, value: T): undefined {
+function writeLocalStorage(key: string, value: Jsonifiable): undefined {
   localStorage.setItem(`${NAMESPACE}.${key}`, JSON.stringify(value));
 }
+
+function clearLocalStorage(key: string): void {
+  localStorage.removeItem(`${NAMESPACE}.${key}`);
+}

apps/client/src/pages/secretariat-general/docs/agenda/AgendaPage.tsx

@@ -14,8 +14,8 @@ function AgendaContent() {
     <div className="fr-container fr-py-2w">
       <AgendaBreadCrumb />
       <Stepper currentStep={step.index} stepCount={2} title={step.title} nextTitle={step.nextTitle} />
-      <AgendaMetadataStep className={clsx({ hidden: step.index !== 1 })} />
-      <AgendaNominationFilesStep className={clsx({ hidden: step.index !== 2 })} />
+      <AgendaNominationFilesStep className={clsx({ hidden: step.index !== 1 })} />
+      <AgendaMetadataStep className={clsx({ hidden: step.index !== 2 })} />
     </div>
   );
 }

apps/client/src/pages/secretariat-general/docs/agenda/context/AgendaContext.types.ts

@@ -18,10 +18,11 @@ export type AgendaContextType = {
   agendaId: string | null;
   session: { id: string; dueDate: PlainDateOnly | null; formation: FormationEnum };
   metadata: AgendaMetadata | null;
+  selectedFileIds: readonly string[] | null;
   defaultFileIds: readonly string[] | null;
   isSubmitting: boolean;
-  goToNominationFiles(values: AgendaMetadata): void;
-  goToMetadata(): void;
-  submit(nominationFileIds: string[]): unknown;
+  goToFiles(): void;
+  goToMetadata(selectedFileIds: readonly string[]): void;
+  submit(metadata: AgendaMetadata): unknown;
   cancel(): void;
 };