feat: allow delete evaluation (#110)

code4romania · Mar 8, 2024 · fcb9f1e · fcb9f1e
1 parent 22eed07
commit fcb9f1e
Show file tree

Hide file tree

Showing 9 changed files with 127 additions and 21 deletions.
diff --git a/client/src/components/Confirm/index.tsx b/client/src/components/Confirm/index.tsx
@@ -9,6 +9,7 @@ const Confirm = ({
   open,
   setOpen,
   handleComplete,
+  destructive = false,
 }) => {
   const cancelButtonRef = useRef(null);
 
@@ -64,7 +65,11 @@ const Confirm = ({
                     <>
                       <button
                         type="button"
-                        className="inline-flex w-full justify-center rounded-md bg-teal-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-teal-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600 sm:col-start-2"
+                        className={`${
+                          destructive
+                            ? "bg-red-600 hover:bg-red-500 focus-visible:outline-red-500"
+                            : "bg-teal-600 hover:bg-teal-500 focus-visible:outline-teal-500"
+                        } inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 sm:col-start-2`}
                         onClick={() => {
                           handleComplete();
                           setOpen(false);

diff --git a/client/src/components/DeleteEvaluation/index.tsx b/client/src/components/DeleteEvaluation/index.tsx
@@ -0,0 +1,61 @@
+import { useCallback, useState, useEffect } from "react";
+import { useDeleteEvaluationMutation } from "@/redux/api/userApi";
+import { toast } from "react-toastify";
+import { TrashIcon } from "@heroicons/react/20/solid";
+import Confirm from "@/components/Confirm";
+
+const DeleteEvaluation = ({ id }: { id: number }) => {
+  const [deleteEvaluation, {isSuccess, isError, error}] = useDeleteEvaluationMutation();
+  const [open, setOpen] = useState(false);
+
+  const handleComplete = useCallback(() => {
+    deleteEvaluation({ id: id });
+  }, [id]);
+
+  useEffect(() => {
+    if (isSuccess) {
+      toast.success("Invitația a fost ștearsă.");
+    }
+  }, [isSuccess]);
+
+  useEffect(() => {
+    if (!isError) {
+      return;
+    }
+
+    console.log(id, error?.data?.error?.details?.id);
+
+    if (error?.data?.error?.details?.id !== id) {
+      return;
+    }
+
+    toast.error(error.data.error.message);
+  }, [isError]);
+
+  return (
+    <>
+      <Confirm
+        header="Șterge adresa de email"
+        body="Ești sigur că vrei să ștergi adresa de email introdusă? Utilizatorul nu va mai avea acces la evaluare și va
+trebui să trimiți invitația din nou pentru ca progresul să fie salvat."
+        buttonText="Șterge"
+        open={open}
+        setOpen={setOpen}
+        handleComplete={handleComplete}
+        destructive={true}
+      />
+      <button
+          onClick={() => setOpen(true)}
+          className="text-red-600 hover:text-red-900"
+          title="Șterge invitația"
+        >
+          <TrashIcon
+            className="h-5 w-5"
+            aria-hidden="true"
+          />
+        </button>
+    </>
+  );
+};
+
+export default DeleteEvaluation;
diff --git a/client/src/components/TableEvaluations/index.tsx b/client/src/components/TableEvaluations/index.tsx
@@ -1,13 +1,18 @@
-import React from "react";
 import envelope from "@/assets/envelope.svg";
-import { Evaluation } from "@/redux/api/types";
+import { Report } from "@/redux/api/types";
 import { useAppSelector } from "@/redux/store";
 import { Link } from "react-router-dom";
+import DeleteEvaluation from "@/components/DeleteEvaluation";
 
-const TableEvaluations = ({ evaluations }: { evaluations: Evaluation[] }) => {
+
+const TableEvaluations = ({ report }: { report: Report }) => {
   const user = useAppSelector((state) => state.userState.user);
   const isFDSC = user?.role?.type === "fdsc";
 
+  const evaluations = report?.evaluations || [];
+
+  console.log(report);
+
   return evaluations.length ? (
     <table className="w-full table-auto divide-y divide-gray-300">
       <thead className="bg-gray-50">
@@ -25,10 +30,10 @@ const TableEvaluations = ({ evaluations }: { evaluations: Evaluation[] }) => {
             STATUS
           </th>
           {isFDSC && (
-            <th
-              scope="col"
-              className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
-            ></th>
+            <th scope="col"></th>
+          )}
+          {!report.finished && (
+            <th scope="col"></th>
           )}
         </tr>
       </thead>
@@ -53,6 +58,11 @@ const TableEvaluations = ({ evaluations }: { evaluations: Evaluation[] }) => {
                 </Link>
               </td>
             )}
+            {!report.finished && (
+              <td className="whitespace-nowrap px-3 py-4 text-sm text-right text-gray-500">
+                <DeleteEvaluation id={id} />
+              </td>
+            )}
           </tr>
         ))}
       </tbody>

diff --git a/client/src/pages/Evaluation/index.tsx b/client/src/pages/Evaluation/index.tsx
@@ -220,6 +220,9 @@ const Evaluation = () => {
               <Button type={"submit"}>
                 {evaluationIndex !== 10 ? "Continuă" : "Trimite"}
               </Button>
+              <Button type="{button}" onClick={() => setEvaluationIndex((state) => state - 1)}>
+                Back
+              </Button>
             </div>
           </div>
         </Section>

diff --git a/client/src/pages/admin/Report/ReportResults.tsx b/client/src/pages/admin/Report/ReportResults.tsx
@@ -14,7 +14,7 @@ const ReportResults = ({ report, scoreByEvaluation }) => {
       <ResultsByDimension scoreByEvaluation={scoreByEvaluation} />
       <div className="mt-10">
         <div className="font-medium text-lg mb-4">Completări evaluare</div>
-        <TableEvaluations evaluations={report?.evaluations} />
+        <TableEvaluations report={report} />
       </div>
     </div>
   );

diff --git a/client/src/pages/authenticated/Report/ReportInProgress.tsx b/client/src/pages/authenticated/Report/ReportInProgress.tsx
@@ -184,7 +184,7 @@ const ReportInProgress = ({ report }) => {
         <div className="my-10 md:max-w-xl">
           <CreateEvaluation reportId={reportId} />
         </div>
-        <TableEvaluations evaluations={report.evaluations} />
+        <TableEvaluations report={report} />
       </div>
       {canFinish && (
         <div className={"md:hidden mt-4"}>

diff --git a/client/src/pages/authenticated/Report/ReportResults.tsx b/client/src/pages/authenticated/Report/ReportResults.tsx
@@ -34,7 +34,7 @@ const ReportResults = ({ report, evaluationsCompleted, scoreByEvaluation }) => {
       <LibraryBanner />
       <div className="mt-10">
         <div className="font-medium text-lg mb-4">Invitații trimise</div>
-        <TableEvaluations evaluations={report?.evaluations} />
+        <TableEvaluations report={report} />
       </div>
     </div>
   );

diff --git a/client/src/redux/api/userApi.ts b/client/src/redux/api/userApi.ts
@@ -319,6 +319,16 @@ export const userApi = createApi({
           ...evaluation.attributes,
         })),
     }),
+    deleteEvaluation: builder.mutation<Evaluation, Evaluation>({
+      query: ({ id }) => {
+        return {
+          method: "DELETE",
+          url: `evaluations/${id}`,
+          credentials: "include",
+        }
+      },
+      invalidatesTags: ["Report"],
+    }),
     getDomains: builder.query({
       query() {
         return {
@@ -398,6 +408,7 @@ export const {
   useUpdateUserMutation,
   useGetEvaluationQuery,
   useCreateEvaluationMutation,
+  useDeleteEvaluationMutation,
   useCreateReportMutation,
   useFindReportQuery,
   useUpdateReportMutation,

diff --git a/server/src/api/evaluation/controllers/evaluation.js b/server/src/api/evaluation/controllers/evaluation.js
@@ -58,18 +58,15 @@ module.exports = createCoreController(
           (acc, { name, quiz }, dimensionIndex) => {
             return `${acc}\n<h2>${name}</h2>${quiz.reduce(
               (acc, matrixQuiz, quizIndex) =>
-                `${acc}<h3>Intrebare: ${matrixQuiz.question}</h3><p>Raspuns: ${
-                  matrixQuiz[
-                    `option_${
-                      +dimensions[dimensionIndex]?.quiz[quizIndex]?.answer + 1
-                    }`
-                  ]
+                `${acc}<h3>Intrebare: ${matrixQuiz.question}</h3><p>Raspuns: ${matrixQuiz[
+                `option_${+dimensions[dimensionIndex]?.quiz[quizIndex]?.answer + 1
+                }`
+                ]
                 }</p>`,
               ""
-            )}${
-              dimensions[dimensionIndex]?.comment &&
-              `<div style="padding: 1em 0 1em 0"><b>Argumentare:</b> ${dimensions[dimensionIndex]?.comment}</p>`
-            }
+            )}${dimensions[dimensionIndex]?.comment &&
+            `<div style="padding: 1em 0 1em 0"><b>Argumentare:</b> ${dimensions[dimensionIndex]?.comment}</p>`
+              }
             <hr>
             `;
           },
@@ -96,5 +93,24 @@ module.exports = createCoreController(
       }
       return response;
     },
+    async delete(ctx) {
+      const { id } = ctx.params;
+      const data = await strapi.entityService.findOne(
+        "api::evaluation.evaluation",
+        id,
+        {
+          populate: ["report"],
+        }
+      );
+
+      if (data.report.finished || deadlineHasPassed(data.report.deadline)) {
+        throw new ForbiddenError(
+          `Perioada de evaluare a luat sfarsit. Evaluarea nu poate fi ștearsă.`,
+          { id: data.id }
+        );
+      }
+
+      return await strapi.entityService.delete('api::evaluation.evaluation', data.id);
+    }
   })
 );