feat(redmine 1298979): add subject modal on agenda page

.changeset/modern-bags-kick.md

@@ -0,0 +1,5 @@
+---
+'storybook-pages': minor
+---
+
+fix pr review from Valentin

.changeset/thin-knives-do.md

@@ -0,0 +1,5 @@
+---
+'storybook-pages': minor
+---
+
+Add subject modal

packages/storybook-pages/src/Pages/AgendaPage/AgendaPage.mock.tsx

@@ -1,11 +1,21 @@
 export const texts = {
   addSubject: 'Ajouter un sujet',
   cancel: 'Annuler',
+  color: 'color',
   displaySpecificResultNbr(number: number): string {
     return `Afficher ${number} résultats`;
   },
   editDocument: 'Edit document',
+  formContentLabel: 'Content',
+  formEndTimeLabel: 'End time',
+  formEndTimeName: 'endTime',
+  formStartTimeLabel: 'Start time',
+  formStartTimeName: 'startTime',
+  formTitleLabel: 'Titre',
   indicator: 'Indicateurs',
+  indicatorColorData: ['blue', 'red', 'green', 'orange'],
+  modalCheckBox: 'Nouveau titre',
+  name: 'name',
   of: 'De',
   pdfExport: 'Export PDF',
   remove: 'Supprimer',
@@ -15,4 +25,5 @@ export const texts = {
   sidebarToggleLabel: 'Afficher la barre latéral',
   to: 'à',
   topics: 'Sujets',
+  value: 'value',
 };

packages/storybook-pages/src/Pages/AgendaPage/AgendaPage.tsx

@@ -1,11 +1,34 @@
 'use client';
 
 import type { MRT_Row } from 'mantine-react-table';
-import type { ReactElement } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 
-import { Badge, Button, Flex, Group } from '@mantine/core';
-import { FilePdf, PencilSimple, Plus, Trash } from '@phosphor-icons/react';
-import { FoldableColumnLayout, SidebarMenu } from '@smile/haring-react';
+import {
+  Badge,
+  Button,
+  Checkbox,
+  Flex,
+  Group,
+  NativeSelect,
+  Stack,
+  TextInput,
+} from '@mantine/core';
+import { TimeInput } from '@mantine/dates';
+import { useForm } from '@mantine/form';
+import { useDisclosure } from '@mantine/hooks';
+import {
+  Clock,
+  FilePdf,
+  PencilSimple,
+  Plus,
+  Trash,
+  X,
+} from '@phosphor-icons/react';
+import {
+  ConfirmModal,
+  FoldableColumnLayout,
+  SidebarMenu,
+} from '@smile/haring-react';
 import { Table } from '@smile/haring-react-table';
 import { useState } from 'react';
 
@@ -35,7 +58,7 @@ interface IDataItem extends Record<string, unknown> {
 }
 
 export function AgendaPage(): ReactElement {
-  const [data, setData] = useState([
+  const [data, setData] = useState<IDataItem[]>([
     {
       indicator: [{ color: 'blue', value: 'DEV' }],
       schedules: { startTime: '9h30' },
@@ -70,13 +93,136 @@ export function AgendaPage(): ReactElement {
       },
     },
   ]);
+  const [modalOpened, { open, close }] = useDisclosure(false);
+  const [newTitleChecked, setNewTitleChecked] = useState<boolean>(false);
+  const [showTimeValueError, setShowTimeValueError] = useState<boolean>(false);
+  const [newTempIndicator, setNewTempIndicator] = useState<IIndicator>({
+    color: 'blue',
+    value: '',
+  });
+  const addSubjectForm = useForm<IDataItem>({
+    initialValues: {
+      indicator: [],
+      schedules: { startTime: '' },
+      subject: {
+        content: '',
+        title: data[0].subject.title,
+      },
+    },
+    mode: 'uncontrolled',
+    validate: {
+      indicator: (value) =>
+        value.length === 0 && 'Veuillez renseigner au moins un indicateur',
+      schedules: {
+        startTime: (value) =>
+          value === '' && 'Veuillez renseigner une heure de début.',
+      },
+      subject: {
+        content: (value) =>
+          value === '' && 'Veuillez renseigner le contenu du sujet',
+        title: (value) => value === '' && 'Veuillez renseigner un titre.',
+      },
+    },
+  });
 
   function removeSubject(row: MRT_Row<IDataItem>): void {
     if (row.index >= 0 && row.index < data.length) {
       setData(data.filter((_, i) => i !== row.index));
     }
   }
 
+  function handleSetTimeForm(e: React.ChangeEvent<HTMLInputElement>): void {
+    const { name, value } = e.target;
+    const timeValue = value.toString().replace(':', 'h');
+
+    const { startTime, endTime } = addSubjectForm.getValues().schedules;
+
+    const startTimeNumber =
+      name === 'startTime'
+        ? parseInt(timeValue.replace('h', '0'), 10)
+        : parseInt(startTime.replace('h', '0'), 10);
+    const endTimeNumber =
+      name === 'endTime'
+        ? parseInt(timeValue.replace('h', '0'), 10)
+        : endTime !== undefined
+          ? parseInt(endTime.replace('h', '0'), 10)
+          : undefined;
+
+    if (endTimeNumber !== undefined && endTimeNumber < startTimeNumber) {
+      setShowTimeValueError(true);
+    } else {
+      addSubjectForm.setFieldValue(`schedules.${name}`, timeValue);
+      setShowTimeValueError(false);
+    }
+  }
+
+  const defaultIndicator: IIndicator[] = [
+    { color: 'orange', value: 'ux' },
+    { color: 'green', value: 'ui' },
+    { color: 'blue', value: 'dev' },
+  ];
+
+  function handleAddIndicator(): void {
+    if (
+      addSubjectForm
+        .getValues()
+        .indicator.filter(
+          (item) =>
+            item.value.toLowerCase() === newTempIndicator.value.toLowerCase(),
+        ).length === 0 &&
+      newTempIndicator.value !== ''
+    ) {
+      const foundIndicator = defaultIndicator.find(
+        (indicator) => indicator.value === newTempIndicator.value,
+      );
+
+      if (foundIndicator) {
+        addSubjectForm.insertListItem('indicator', {
+          color: foundIndicator.color,
+          value: newTempIndicator.value,
+        });
+      } else {
+        addSubjectForm.insertListItem('indicator', newTempIndicator);
+      }
+
+      setNewTempIndicator({
+        color: '',
+        value: '',
+      });
+    }
+  }
+
+  function addSubject(): void {
+    if (addSubjectForm.isValid() && !showTimeValueError) {
+      setData([addSubjectForm.getValues(), ...data]);
+      addSubjectForm.reset();
+      close();
+    }
+  }
+
+  const formIndicatorList = addSubjectForm
+    .getValues()
+    .indicator.map((indicator) => (
+      <Badge key={indicator.value} color={indicator.color} size="xl">
+        <Group justify="center">
+          {indicator.value}
+          <X
+            cursor="pointer"
+            onClick={() =>
+              addSubjectForm.removeListItem(
+                'indicator',
+                addSubjectForm
+                  .getValues()
+                  .indicator.findIndex(
+                    (item) => item.value === indicator.value,
+                  ),
+              )
+            }
+          />
+        </Group>
+      </Badge>
+    ));
+
   const sidebarMenu = menuMock;
 
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -97,7 +243,7 @@ export function AgendaPage(): ReactElement {
           <p>
             <strong>
               {element.schedules.endTime
-                ? `${texts.of} ${element.schedules.startTime} ${texts.of} ${element.schedules.endTime}`
+                ? `${texts.of} ${element.schedules.startTime} ${texts.to} ${element.schedules.endTime}`
                 : `${texts.to.toUpperCase()} ${element.schedules.startTime}`}
             </strong>
           </p>
@@ -113,6 +259,104 @@ export function AgendaPage(): ReactElement {
     };
   });
 
+  const subjectForm: ReactNode = (
+    <form>
+      <Stack>
+        <Checkbox
+          checked={newTitleChecked}
+          label={texts.modalCheckBox}
+          onChange={(event) => setNewTitleChecked(event.currentTarget.checked)}
+        />
+        {newTitleChecked ? (
+          <TextInput
+            key={addSubjectForm.key('subject.title')}
+            label={texts.formTitleLabel}
+            placeholder={texts.formTitleLabel}
+            required
+            {...addSubjectForm.getInputProps('subject.title')}
+          />
+        ) : (
+          <NativeSelect
+            key={addSubjectForm.key('subject.title')}
+            data={data.map((item) => item.subject.title)}
+            label={texts.formTitleLabel}
+            name={texts.formTitleLabel}
+            onChange={(e) =>
+              addSubjectForm.setFieldValue('subject.title', e.target.value)
+            }
+            required
+            value={addSubjectForm.getValues().subject.title}
+          />
+        )}
+
+        <TextInput
+          key={addSubjectForm.key('subject.content')}
+          label={texts.formContentLabel}
+          placeholder={texts.formContentLabel}
+          required
+          {...addSubjectForm.getInputProps('subject.content')}
+        />
+        <Stack gap={0}>
+          <Group grow justify="space-between">
+            <TimeInput
+              label={texts.formStartTimeLabel}
+              leftSection={<Clock />}
+              name={texts.formStartTimeName}
+              onChange={handleSetTimeForm}
+              required
+            />
+            <TimeInput
+              label={texts.formEndTimeLabel}
+              leftSection={<Clock />}
+              name={texts.formEndTimeName}
+              onChange={handleSetTimeForm}
+            />
+          </Group>
+          <Group>{showTimeValueError ? <p>Invalid end time.</p> : null}</Group>
+        </Stack>
+        <Group align="end" grow justify="space-between">
+          <TextInput
+            label={texts.indicator}
+            name={texts.value}
+            onChange={(e) =>
+              setNewTempIndicator({
+                ...newTempIndicator,
+                [e.target.name]: e.target.value,
+              })
+            }
+            placeholder={texts.name}
+            value={newTempIndicator.value}
+          />
+          {!defaultIndicator.find(
+            (item) =>
+              item.value.toLowerCase() === newTempIndicator.value.toLowerCase(),
+          ) && (
+            <NativeSelect
+              aria-placeholder={texts.color}
+              data={texts.indicatorColorData}
+              label={texts.color}
+              name={texts.color}
+              onChange={(e) =>
+                setNewTempIndicator({
+                  ...newTempIndicator,
+                  [e.target.name]: e.target.value,
+                })
+              }
+              value={newTempIndicator.color}
+            />
+          )}
+
+          <Button onClick={handleAddIndicator}>Ajouter</Button>
+        </Group>
+        <Group justify="center">
+          {addSubjectForm.getValues().indicator.length
+            ? formIndicatorList
+            : null}
+        </Group>
+      </Stack>
+    </form>
+  );
+
   return (
     <FoldableColumnLayout
       sidebarContent={
@@ -122,8 +366,24 @@ export function AgendaPage(): ReactElement {
       }
       sidebarToggleLabel={texts.sidebarToggleLabel}
     >
+      <ConfirmModal
+        cancelColor="red"
+        confirmColor="black"
+        onCancel={() => {
+          close();
+        }}
+        onClose={close}
+        onConfirm={() => {
+          addSubject();
+        }}
+        opened={modalOpened}
+        title={texts.addSubject}
+      >
+        {subjectForm}
+      </ConfirmModal>
+
       <Group justify="space-between">
-        <Button mb="md" rightSection={<Plus size={14} />}>
+        <Button mb="md" onClick={open} rightSection={<Plus size={14} />}>
           {texts.addSubject}
         </Button>
         <Button mb="md" rightSection={<FilePdf size={14} />}>
@@ -158,9 +418,6 @@ export function AgendaPage(): ReactElement {
             id: 'delete',
             isMassAction: true,
             label: texts.remove,
-            onAction: () => {
-              console.log('Delete');
-            },
           },
         ]}
         columns={[