Feat/codes lists page

next/package.json

@@ -14,8 +14,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@base-ui-components/react": "^1.0.0-alpha.5",
+    "@base-ui-components/react": "^1.0.0-alpha.6",
     "@fontsource-variable/open-sans": "^5.1.1",
+    "@hookform/resolvers": "^4.1.0",
     "@tanstack/react-form": "^0.41.3",
     "@tanstack/react-query": "^5.64.1",
     "@tanstack/react-router": "^1.97.1",
@@ -27,6 +28,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^5.0.0",
+    "react-hook-form": "^7.54.2",
     "react-hot-toast": "^2.5.1",
     "react-i18next": "^15.4.0",
     "vite-envs": "^4.4.10",

next/src/api/codesLists.test.ts

@@ -0,0 +1,27 @@
+import nock from 'nock';
+
+import { deleteCodesList, putCodesList } from './codesLists';
+
+vi.mock('@/contexts/oidc');
+
+it('Delete codes list', async () => {
+  nock('https://mock-api')
+    .delete('/persistence/questionnaire/my-q-id/codes-list/my-code-list-id')
+    .reply(204);
+
+  const res = await deleteCodesList('my-q-id', 'my-code-list-id');
+  expect(res.status).toEqual(204);
+});
+
+it('Create codes list', async () => {
+  nock('https://mock-api')
+    .put('/persistence/questionnaire/my-q-id/codes-list/my-code-list-id')
+    .reply(201);
+
+  const res = await putCodesList('my-q-id', 'my-code-list-id', {
+    codes: [],
+    id: 'id',
+    label: 'label',
+  });
+  expect(res.status).toEqual(201);
+});

next/src/api/codesLists.ts

@@ -0,0 +1,26 @@
+import type { CodesList } from '@/models/codesLists';
+
+import { instance } from './instance';
+
+/** Create or update a codes list. */
+export async function putCodesList(
+  questionnaireId: string,
+  codeListId: string,
+  codeList: CodesList,
+): Promise<Response> {
+  return instance.put(
+    `/persistence/questionnaire/${questionnaireId}/codes-list/${codeListId}`,
+    codeList,
+    { headers: { 'Content-Type': 'application/json' } },
+  );
+}
+
+/** Delete a codes list. */
+export async function deleteCodesList(
+  questionnaireId: string,
+  codeListId: string,
+): Promise<Response> {
+  return instance.delete(
+    `/persistence/questionnaire/${questionnaireId}/codes-list/${codeListId}`,
+  );
+}

next/src/api/questionnaires.ts

@@ -101,6 +101,28 @@ export async function addQuestionnaireCodesList(
   return putQuestionnaire(questionnaireId, questionnaire);
 }
 
+/** Update the questionnaire of the provided id with a new codes list. */
+export async function updateCodesList(
+  questionnaireId: string,
+  newCodesList: CodesList,
+): Promise<Response> {
+  const newCodesLists = [];
+  const questionnaire = await getPoguesQuestionnaire(questionnaireId);
+  const codesLists = questionnaire.CodeLists?.CodeList || [];
+  let i = 0;
+  for (const codesList of codesLists) {
+    if (codesList.id === newCodesList.id) {
+      newCodesLists.push(
+        ...codesLists.splice(i, 1, ...computePoguesCodesLists([newCodesList])),
+      );
+    }
+    i++;
+  }
+  questionnaire.CodeLists = { CodeList: newCodesLists };
+
+  return putQuestionnaire(questionnaireId, questionnaire);
+}
+
 /** Retrieve a questionnaire by id with the pogues model. */
 async function getPoguesQuestionnaire(
   id: string,

next/src/api/utils/codesLists.test.ts

@@ -8,8 +8,23 @@ const codesLists: CodesList[] = [
     id: 'id-1',
     label: 'label-1',
     codes: [
-      { label: 'code-1', value: 'code-value-1' },
-      { label: 'code-2', value: 'code-value-2' },
+      {
+        label: 'code-1',
+        value: 'value-1',
+        codes: [
+          {
+            label: 'sub-code-1',
+            value: 'sub-value-1',
+            codes: [
+              {
+                label: 'sub-sub-code-1',
+                value: 'sub-sub-value-1',
+              },
+            ],
+          },
+        ],
+      },
+      { label: 'code-2', value: 'value-2' },
     ],
   },
 ];
@@ -20,8 +35,18 @@ const poguesCodesLists: PoguesCodesList[] = [
     Name: 'label-1',
     Label: 'label-1',
     Code: [
-      { Label: 'code-1', Value: 'code-value-1' },
-      { Label: 'code-2', Value: 'code-value-2' },
+      { Label: 'code-1', Value: 'value-1' },
+      {
+        Label: 'sub-code-1',
+        Value: 'sub-value-1',
+        Parent: 'value-1',
+      },
+      {
+        Label: 'sub-sub-code-1',
+        Value: 'sub-sub-value-1',
+        Parent: 'sub-value-1',
+      },
+      { Label: 'code-2', Value: 'value-2' },
     ],
   },
 ];

next/src/api/utils/codesLists.ts

@@ -11,29 +11,52 @@ export function computeCodesLists(
 ): CodesList[] {
   const res: CodesList[] = [];
   for (const codesList of codesLists) {
-    const datum = {
-      id: codesList.id,
-      label: codesList.Label,
-      codes: computeCodes(codesList.Code),
-    };
-    res.push(datum);
+    if (!codesList.Urn) {
+      const datum = {
+        id: codesList.id,
+        label: codesList.Label,
+        codes: computeRootCodes(codesList.Code),
+      };
+      res.push(datum);
+    }
   }
   return res;
 }
 
-function computeCodes(codes: PoguesCode[] = []): Code[] {
+// compute codes at the root of the list: they should not have a parent
+function computeRootCodes(codes: PoguesCode[] = []): Code[] {
   const res: Code[] = [];
   for (const code of codes) {
+    if (code.Parent) continue;
     const datum = {
       label: code.Label,
       value: code.Value,
-      // TODO subcodes
+      codes: getSubCodes(codes, code.Value),
     };
     res.push(datum);
   }
   return res;
 }
 
+// compute a subcode: they have a parent and we should get their children too
+function getSubCodes(
+  codes: PoguesCode[],
+  parentValue: string,
+): Code[] | undefined {
+  const subCodes = [];
+  for (const code of codes) {
+    if (code.Parent === parentValue) {
+      const datum = {
+        label: code.Label,
+        value: code.Value,
+        codes: getSubCodes(codes, code.Value),
+      };
+      subCodes.push(datum);
+    }
+  }
+  return subCodes.length > 0 ? subCodes : undefined;
+}
+
 /** Compute codes lists that can be sent to the API from our app data. */
 export function computePoguesCodesLists(
   codesLists: CodesList[] = [],
@@ -51,15 +74,16 @@ export function computePoguesCodesLists(
   return res;
 }
 
-function computePoguesCodes(codes: Code[] = []): PoguesCode[] {
+function computePoguesCodes(codes: Code[] = [], parent?: Code): PoguesCode[] {
   const res: PoguesCode[] = [];
   for (const code of codes) {
     const datum = {
       Label: code.label,
       Value: code.value,
-      // TODO subcodes
+      Parent: parent ? parent.value : undefined,
     };
     res.push(datum);
+    res.push(...computePoguesCodes(code.codes, code));
   }
   return res;
 }

next/src/components/codesLists/create/CreateCodesList.tsx

@@ -0,0 +1,33 @@
+import { useTranslation } from 'react-i18next';
+
+import ContentHeader from '@/components/ui/ContentHeader';
+import ContentMain from '@/components/ui/ContentMain';
+
+import CreateCodesListCSVImport from './CreateCodesListCSVImport';
+import CreateCodesListForm from './CreateCodesListForm';
+
+interface CreateCodesListProps {
+  questionnaireId: string;
+}
+
+/**
+ * Allow to create a new codes list (either by filling the form or by importing
+ * a CSV).
+ */
+export default function CreateCodesList({
+  questionnaireId,
+}: Readonly<CreateCodesListProps>) {
+  const { t } = useTranslation();
+
+  return (
+    <div>
+      <ContentHeader title={t('codesList.create.title')} />
+      <ContentMain>
+        <CreateCodesListCSVImport />
+        <div className="bg-default p-4 border border-default shadow-xl">
+          <CreateCodesListForm questionnaireId={questionnaireId} />
+        </div>
+      </ContentMain>
+    </div>
+  );
+}

next/src/components/codesLists/create/CreateCodesListCSVImport.tsx

@@ -0,0 +1,10 @@
+import { useTranslation } from 'react-i18next';
+
+import Button from '@/components/ui/Button';
+
+/** Allow to import a CSV which will create a codes list. */
+export default function CreateCodesListCSVImport() {
+  const { t } = useTranslation();
+
+  return <Button>{t('codesList.create.importCSV')}</Button>;
+}