Merge pull request #210 from SocialGouv/origin/feature/enfants

feat: add user CRUD

src/components/AddCommission.module.scss

@@ -0,0 +1,46 @@
+.inputText {
+  background-color: white;
+  height: 5rem;
+  border-bottom: solid #060591 2px;
+  display: block;
+  width: 100%;
+  border-radius: 0.25rem 0.25rem 0 0;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  padding: 0.5rem 1rem;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline-color: #2a77fe;
+  color: var(--g800);
+  box-shadow: inset 0 -2px 0 0 var(--g600);
+  resize: vertical;
+}
+
+.formField {
+  display: grid;
+  grid-template-columns: 3fr 3fr 3fr;
+
+  div {
+    padding: 0.5rem;
+  }
+}
+
+.postButton {
+  --color-hover: rgba(0, 0, 221, 0.5);
+  --color-active: rgba(41, 41, 255, 0.5);
+  cursor: pointer;
+  background-color: #060591;
+  color: var(--w-bf500);
+  font-size: 1rem;
+  line-height: 1.5rem;
+  min-height: 2.5rem;
+  padding: 0.5rem 1.5rem;
+  color: white;
+  float: right;
+  margin-top: 1rem;
+}
+
+.Form {
+  margin-bottom: 5rem;
+}

src/components/AddCommission.tsx

@@ -1,6 +1,6 @@
 import type { Commission } from "@prisma/client";
 import * as React from "react";
-import styles from "src/components/AddComment.module.scss";
+import styles from "src/components/AddCommission.module.scss";
 
 interface Props {
   saveCommission: (e: React.FormEvent, formData: Commission) => void;
@@ -30,25 +30,43 @@ const AddCommission: React.FC<Props> = ({ saveCommission }) => {
       }}
     >
       <div>
-        <div className="Form--field">
-          <input
-            onChange={handleForm}
-            type="text"
-            id="departement"
-            className={styles.areaText}
-          />
-          <input
-            onChange={handleForm}
-            type="text"
-            id="date"
-            className={styles.areaText}
-          />
-          <input
-            onChange={handleForm}
-            type="text"
-            id="dateLimiteDepot"
-            className={styles.areaText}
-          />
+        <div className={styles.formField}>
+          <div>
+            <label htmlFor="departement" className="mb-2 italic">
+              Département
+            </label>
+            <input
+              onChange={handleForm}
+              type="text"
+              id="departement"
+              name="departement"
+              className={styles.inputText}
+            />
+          </div>
+          <div>
+            <label htmlFor="date" className="mb-2 italic">
+              Date
+            </label>
+            <input
+              onChange={handleForm}
+              type="text"
+              id="date"
+              name="date"
+              className={styles.inputText}
+            />
+          </div>
+          <div>
+            <label htmlFor="dateLimiteDepot" className="mb-2 italic">
+              Date limite dépôt
+            </label>
+            <input
+              onChange={handleForm}
+              type="text"
+              id="dateLimiteDepot"
+              name="dateLimiteDepot"
+              className={styles.inputText}
+            />
+          </div>
         </div>
       </div>
       <button

src/components/AddUtilisateur.tsx

@@ -0,0 +1,85 @@
+import type { User } from "@prisma/client";
+import * as React from "react";
+import styles from "src/components/AddCommission.module.scss";
+
+interface Props {
+  saveUser: (e: React.FormEvent, formData: User) => void;
+}
+
+const AddUser: React.FC<Props> = ({ saveUser }) => {
+  const [formData, setFormData] = React.useState<User>({
+    email: "",
+    emailVerified: new Date(),
+    id: 1,
+    image: "",
+    name: "",
+    nom: "",
+    prenom: "",
+  });
+
+  const handleForm = (e: React.FormEvent<HTMLInputElement>): void => {
+    setFormData({
+      ...formData,
+      [e.target.id]: e.currentTarget.value,
+    });
+  };
+
+  return (
+    <form
+      className={styles.Form}
+      onSubmit={(e) => {
+        e.currentTarget.value = "";
+        saveUser(e, formData);
+      }}
+    >
+      <div>
+        <div className={styles.formField}>
+          <div>
+            <label htmlFor="nom" className="mb-2 italic">
+              Nom
+            </label>
+            <input
+              onChange={handleForm}
+              type="text"
+              id="nom"
+              name="nom"
+              className={styles.inputText}
+            />
+          </div>
+          <div>
+            <label htmlFor="prenom" className="mb-2 italic">
+              Prénom
+            </label>
+            <input
+              onChange={handleForm}
+              type="text"
+              id="prenom"
+              name="prenom"
+              className={styles.inputText}
+            />
+          </div>
+          <div>
+            <label htmlFor="email" className="mb-2 italic">
+              Email
+            </label>
+            <input
+              onChange={handleForm}
+              type="text"
+              id="email"
+              name="email"
+              className={styles.inputText}
+            />
+          </div>
+        </div>
+      </div>
+      <button
+        className={styles.postButton}
+        disabled={formData.email === "" ? true : false}
+      >
+        Poster
+      </button>
+    </form>
+  );
+};
+
+export default AddUser;

src/lib/queries.ts

@@ -349,6 +349,40 @@ const removeCommission = (id: number) => {
     });
 };
 
+const createUser = (user: User) => {
+  window
+    .fetch(`/api/users`, {
+      body: JSON.stringify(user),
+      method: "POST",
+    })
+    .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`, {
+      body: JSON.stringify(id),
+      method: "DELETE",
+    })
+    .then((r) => {
+      if (!r.ok) {
+        throw Error(`got status ${r.status}`);
+      }
+      return r;
+    })
+    .catch((e) => {
+      throw e;
+    });
+};
+
 function getDataDS(): void {
   window
     .fetch(`/api/dsapi`, {
@@ -405,12 +439,14 @@ export {
   createPieceDossier,
   createPieceDossierEnfant,
   createSocieteProduction,
+  createUser,
   deleteCommentaire,
   deleteEnfants,
   deletePieceDossier,
   getDataDS,
   getUpcomingCommissionsByLimitDate,
   removeCommission,
+  removeUser,
   searchDemandeur,
   searchDossierByExternalId,
   searchDossiers,

src/pages/api/users/index.ts

@@ -13,12 +13,39 @@ const handler: NextApiHandler = async (req, res) => {
 
   if (req.method == "GET") {
     await get(req, res);
+  } else if (req.method == "POST") {
+    await post(req, res);
+  } else if (req.method == "DELETE") {
+    await remove(req, res);
   } else {
     res.status(405).end();
     return;
   }
 };
 
+const post: NextApiHandler = async (req, res) => {
+  const data = JSON.parse(req.body as string);
+  try {
+    await prisma.user.create({ data });
+  } catch (e: unknown) {
+    console.log(e);
+  }
+  res.status(200).json({ message: "Utilisateur ajoutée" });
+};
+
+const remove: NextApiHandler = async (req, res) => {
+  const userId = Number(req.body as string);
+  try {
+    await prisma.user.delete({
+      where: { id: userId },
+    });
+    res.status(200).json({ message: "Utilisateur supprimé" });
+  } catch (e: unknown) {
+    console.log(e);
+    res.status(200).json({ message: "Utilisateur non trouvé" });
+  }
+};
+
 const get: NextApiHandler = async (req, res) => {
   const allUsers = await prisma.user.findMany({ orderBy: { name: "asc" } });
   res.status(200).json(superjson.stringify(allUsers));

src/pages/utilisateurs/index.tsx

@@ -0,0 +1,97 @@
+import { Icon, Title } from "@dataesr/react-dsfr";
+import type { User } from "@prisma/client";
+import Link from "next/link";
+import React from "react";
+import AddUser from "src/components/AddUtilisateur";
+import IconLoader from "src/components/IconLoader";
+import Layout from "src/components/Layout";
+import { useAllUsers } from "src/lib/api";
+import { createUser, removeUser } from "src/lib/queries";
+import styles from "src/styles/commissions.module.scss";
+
+interface RowProps {
+  user: User;
+  deleteUser: (id: number) => void;
+}
+
+const UserRow: React.FC<RowProps> = ({ user, deleteUser }) => {
+  return (
+    <div className={`${styles.row} card`}>
+      <div>
+        <span role="img" aria-label="hammer">
+          🔨
+        </span>{" "}
+        <b>{user.email}</b>
+      </div>
+      <div>
+        <b>
+          {user.nom} {user.prenom}
+        </b>
+      </div>
+      <div>
+        <b />
+      </div>
+      <div>
+        <Link href={`/utilisateurs`}>
+          <a
+            href={`/utilisateurs`}
+            className={styles.seeDossiers}
+            onClick={() => {
+              deleteUser(user.id);
+            }}
+          >
+            Supprimer utilisateur
+          </a>
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+const Page: React.FC = () => {
+  const { allUsers, ...swrUsers } = useAllUsers();
+  const isLoading = swrUsers.isLoading;
+  const isError = !isLoading && (swrUsers.isError || !allUsers);
+
+  const deleteUser = (id: number) => {
+    removeUser(id);
+  };
+
+  const addUser = (e: React.FormEvent, formData: User) => {
+    e.preventDefault();
+    const user: User = {
+      email: formData.email,
+      emailVerified: new Date(),
+      nom: formData.nom,
+      prenom: formData.prenom,
+    };
+    createUser(user);
+    console.log("user : ", user);
+  };
+
+  return (
+    <Layout
+      windowTitle="Utilisateurs"
+      headerMiddle={<Title as="h1">Utilisateurs</Title>}
+      breadcrumbs={[
+        { href: "/", label: "Accueil" },
+        { label: "Liste utilisateurs" },
+      ]}
+    >
+      {isLoading && <IconLoader />}
+      {isError && <Icon name="ri-error" />}
+      {!isLoading && !isError && allUsers && (
+        <>
+          <AddUser saveUser={addUser} />
+          {allUsers.map((user) => (
+            <UserRow key={user.id} user={user} deleteUser={deleteUser} />
+          ))}
+        </>
+      )}
+    </Layout>
+  );
+};
+
+Page.auth = true;
+
+export default Page;