fix: allow multiple departements for members (#312)

* fix: allow multiple departements for members

* fix: fix error on create user

Author: YoannNumericite

package-lock.json

@@ -54,6 +54,7 @@
     "react-datepicker": "^4.7.0",
     "react-dom": "17.0.2",
     "react-icons": "^4.3.1",
+    "react-multi-select-component": "^4.2.5",
     "remixicon": "^2.5.0",
     "sass": "^1.44.0",
     "superjson": "^1.8.0",

package.json

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "User" ADD COLUMN     "departements" TEXT;

prisma/migrations/20220512141616_add_departements_on_users/migration.sql

@@ -0,0 +1,9 @@
+/*
+  Warnings:
+
+  - The `departements` column on the `User` table would be dropped and recreated. This will lead to data loss if there is data in the column.
+
+*/
+-- AlterTable
+ALTER TABLE "User" DROP COLUMN "departements",
+ADD COLUMN     "departements" TEXT[];

prisma/migrations/20220512141829_make_departements_array_on_users/migration.sql

@@ -223,6 +223,7 @@ model User {
   commentaires  Commentaire[]
   role          Role?
   departement   String?
+  departements  String[]
 }
 
 model Session {

prisma/schema.prisma

@@ -1,6 +1,8 @@
 import { Select } from "@dataesr/react-dsfr";
 import type { User } from "@prisma/client";
+import _ from "lodash";
 import * as React from "react";
+import { MultiSelect } from "react-multi-select-component";
 import styles from "src/components/AddUtilisateur.module.scss";
 import {
   ALL_DEPARTEMENTS,
@@ -12,11 +14,6 @@ interface Props {
   saveUser: (e: React.FormEvent, formData: User) => void;
 }
 
-interface Option {
-  label: string | null;
-  value: string;
-}
-
 const AddUser: React.FC<Props> = ({ saveUser }) => {
   const [formData, setFormData] = React.useState<User>({
     departement: "",
@@ -30,16 +27,24 @@ const AddUser: React.FC<Props> = ({ saveUser }) => {
     role: "",
   });
 
-  const handleForm = (e: React.FormEvent<HTMLInputElement>): void => {
+  const [selected, setSelected] = React.useState([]);
+
+  const handleSelect = () => {
     setFormData({
       ...formData,
-      [e.target.id]: e.currentTarget.value,
+      departements: _.map(selected, "key"),
     });
   };
 
-  const defaultDepartement: Option = {
-    label: "Département",
-    value: "",
+  React.useEffect(() => {
+    handleSelect();
+  }, [selected]);
+
+  const handleForm = (e: React.FormEvent<HTMLInputElement>): void => {
+    setFormData({
+      ...formData,
+      [e.target.id]: e.currentTarget.value,
+    });
   };
 
   return (
@@ -116,20 +121,18 @@ const AddUser: React.FC<Props> = ({ saveUser }) => {
               Département
             </label>
             <div className="selectDpt">
-              <Select
-                id="departement"
-                name="departement"
-                selected={formData.departement ? formData.departement : ""}
-                options={[defaultDepartement].concat(
-                  ALL_DEPARTEMENTS.map((u) => ({
-                    key: u,
-                    label: frenchDepartementName(u),
-                    value: u,
-                  }))
-                )}
-                onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-                  handleForm(event);
+              <MultiSelect
+                options={ALL_DEPARTEMENTS.map((u) => ({
+                  key: u,
+                  label: frenchDepartementName(u),
+                  value: u,
+                }))}
+                value={selected}
+                hasSelectAll={false}
+                onChange={(value) => {
+                  setSelected(value as React.SetStateAction<never[]>);
                 }}
+                labelledBy="Département(s)"
               />
             </div>
           </div>

src/components/AddUtilisateur.tsx

@@ -1,9 +1,11 @@
 import type { User } from "@prisma/client";
+import _ from "lodash";
 import Link from "next/link";
 import React from "react";
+import { MultiSelect } from "react-multi-select-component";
 import AddUser from "src/components/AddUtilisateur";
-import { frenchDepartementName } from "src/lib/helpers";
-import { createUser, removeUser } from "src/lib/queries";
+import { ALL_DEPARTEMENTS, frenchDepartementName } from "src/lib/helpers";
+import { createUser, removeUser, updateUser } from "src/lib/queries";
 import styles from "src/styles/commissions.module.scss";
 
 interface Props {
@@ -16,6 +18,36 @@ interface RowProps {
 }
 
 const UserRow: React.FC<RowProps> = ({ user, deleteUser }) => {
+  const [changeDep, setDepartementChange] = React.useState<boolean>(false);
+  const [selected, setSelected] = React.useState(
+    user.departements.map((departement) => {
+      return {
+        key: departement,
+        label: frenchDepartementName(departement),
+        value: departement,
+      };
+    })
+  );
+  const [newUser, changeUser] = React.useState<User>(user);
+  const [mountedRef, setMountedRef] = React.useState<boolean>(false);
+
+  React.useEffect(() => {
+    changeUser({
+      ...user,
+      departements: _.map(selected, "key"),
+    });
+  }, [selected]);
+
+  React.useEffect(() => {
+    setMountedRef(true);
+  });
+
+  React.useEffect(() => {
+    if (mountedRef && newUser.id) {
+      updateUser(newUser);
+    }
+  }, [newUser]);
+
   return (
     <div className={`${styles.rowUser} card`}>
       <div>
@@ -33,7 +65,44 @@ const UserRow: React.FC<RowProps> = ({ user, deleteUser }) => {
         <b>{user.role}</b>
       </div>
       <div>
-        <b>{user.departement ? frenchDepartementName(user.departement) : ""}</b>
+        {changeDep ? (
+          <MultiSelect
+            options={ALL_DEPARTEMENTS.map((u) => ({
+              key: u,
+              label: frenchDepartementName(u),
+              value: u,
+            }))}
+            value={selected}
+            hasSelectAll={false}
+            onChange={(value) => {
+              setSelected(
+                value as React.SetStateAction<
+                  { key: string; label: string; value: string }[]
+                >
+              );
+              setDepartementChange(!changeDep);
+            }}
+            labelledBy="Département(s)"
+          />
+        ) : (
+          <span>
+            {newUser.departements.map((departement) => (
+              <b key={departement}>
+                <li key={departement}>{frenchDepartementName(departement)}</li>
+              </b>
+            ))}
+            <br />
+            {user.role === "MEMBRE" && (
+              <button
+                onClick={() => {
+                  setDepartementChange(!changeDep);
+                }}
+              >
+                Modifier
+              </button>
+            )}
+          </span>
+        )}
       </div>
       <div>
         <Link href={`/utilisateurs`}>
@@ -65,6 +134,8 @@ const Utilisateurs: React.FC<Props> = ({ allUsers }) => {
     e.preventDefault();
     const user: User = {
       departement: formData.departement,
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      departements: formData.departements || [""],
       email: formData.email,
       emailVerified: new Date(),
       nom: formData.nom,

src/components/Utilisateurs.tsx

@@ -511,6 +511,23 @@ const createUser = (user: User) => {
     });
 };
 
+const updateUser = (user: User) => {
+  window
+    .fetch(`/api/users`, {
+      body: JSON.stringify(user),
+      method: "PUT",
+    })
+    .then((r) => {
+      if (!r.ok) {
+        throw Error(`got status ${r.status}`);
+      }
+      return r;
+    })
+    .catch((e) => {
+      throw e;
+    });
+};
+
 const removeUser = (id: number) => {
   window
     .fetch(`/api/users`, {
@@ -748,5 +765,6 @@ export {
   updateEnfant,
   updateEnfants,
   updatePieceDossierEnfant,
+  updateUser,
   uploadZip,
 };

src/lib/queries.ts

@@ -17,6 +17,8 @@ const handler: NextApiHandler = async (req, res) => {
     await post(req, res);
   } else if (req.method == "DELETE") {
     await remove(req, res);
+  } else if (req.method == "PUT") {
+    await update(req, res);
   } else {
     res.status(405).end();
     return;
@@ -46,6 +48,31 @@ const remove: NextApiHandler = async (req, res) => {
   }
 };
 
+const update: NextApiHandler = async (req, res) => {
+  if (typeof req.body !== "string") {
+    res.status(400).end();
+    return;
+  }
+
+  const parsed = JSON.parse(req.body);
+  if (!parsed) {
+    res.status(400).end();
+    return;
+  }
+
+  const userId = parsed.id;
+
+  console.log("id : ", userId);
+  const updatedUser = await prisma.user.update({
+    data: {
+      departements: parsed.departements,
+    },
+    where: { id: userId },
+  });
+
+  res.status(200).json(superjson.stringify(updatedUser));
+};
+
 const get: NextApiHandler = async (req, res) => {
   const role = req.query.role;
   const allUsers =

src/pages/api/users/index.ts

@@ -24,7 +24,11 @@ const get: NextApiHandler = async (req, res) => {
   if (typeof departement === "string") {
     const allUsers = await prisma.user.findMany({
       orderBy: { name: "asc" },
-      where: { departement: departement },
+      where: {
+        departements: {
+          has: departement,
+        },
+      },
     });
     res.status(200).json(superjson.stringify(allUsers));
   } else {