added trash icon, and avbryt knapp, and a warning before deleting (#545)

varianter · Nov 27, 2024 · 3aedb94 · 3aedb94
1 parent ceb5b6e
commit 3aedb94
Show file tree

Hide file tree

Showing 5 changed files with 106 additions and 52 deletions.
diff --git a/frontend/src/actions/agreementActions.ts b/frontend/src/actions/agreementActions.ts
@@ -96,6 +96,23 @@ export async function saveChanges(
     throw new Error(`Failed to save changes: ${error}`);
   }
 }
+function ensureDatesOnAgreement(agreement: Agreement) {
+  if (typeof agreement.endDate === "string") {
+    agreement.endDate = new Date(agreement.endDate);
+  }
+
+  if (typeof agreement.startDate === "string") {
+    agreement.startDate = new Date(agreement.startDate);
+  }
+
+  if (typeof agreement.nextPriceAdjustmentDate === "string") {
+    agreement.nextPriceAdjustmentDate = new Date(
+      agreement.nextPriceAdjustmentDate,
+    );
+  }
+
+  return agreement;
+}
 
 export async function deleteFile(
   blobName: string,
@@ -121,7 +138,11 @@ export async function getAgreementsForProject(
       `${orgUrlKey}/agreements/get/engagement/${projectId}`,
     );
 
-    return await res;
+    let agreementsWithDateTypes: Agreement[] = [];
+    if (res) {
+      agreementsWithDateTypes = res.map(ensureDatesOnAgreement);
+    }
+    return agreementsWithDateTypes;
   } catch (e) {
     console.error("Error fetching agreement for project", e);
   }
@@ -136,7 +157,11 @@ export async function getAgreementsForCustomer(
       `${orgUrlKey}/agreements/get/customer/${customerId}`,
     );
 
-    return await res;
+    let agreementsWithDateTypes: Agreement[] = [];
+    if (res) {
+      agreementsWithDateTypes = res.map(ensureDatesOnAgreement);
+    }
+    return agreementsWithDateTypes;
   } catch (e) {
     console.error("Error fetching agreement for customer", e);
   }
@@ -149,7 +174,11 @@ export async function updateAgreement(agreement: Agreement, orgUrlKey: string) {
       agreement,
     );
 
-    return await res;
+    let agreementWithDateTypes: Agreement | null = null;
+    if (res) {
+      agreementWithDateTypes = ensureDatesOnAgreement(res);
+    }
+    return agreementWithDateTypes;
   } catch (e) {
     console.error("Error updating agreement", e);
   }
@@ -164,8 +193,11 @@ export async function createAgreement(
       `${orgUrlKey}/agreements/create`,
       agreement,
     );
-
-    return res;
+    let agreementWithDateTypes: Agreement | null = null;
+    if (res) {
+      agreementWithDateTypes = ensureDatesOnAgreement(res);
+    }
+    return agreementWithDateTypes;
   } catch (e) {
     console.error("Error creating agreement", e);
   }

diff --git a/frontend/src/components/Agreement/AgreementEdit.tsx b/frontend/src/components/Agreement/AgreementEdit.tsx
@@ -320,35 +320,48 @@ export function AgreementEdit({
             </div>
 
             {inEditIndex === i ? (
-              <AgreementButton
-                buttonText="Lagre"
-                type="submit"
-                className="border border-black shadow-md bg-primary text-white font-semibold py-2 px-4 rounded-md  w-fit"
-              />
-            ) : (
               <div className="flex flex-row justify-between">
-                <AgreementButton
-                  type="button"
-                  buttonText="Rediger"
-                  onClick={(e) => {
-                    e.preventDefault();
-                    setInEditIndex(i);
-                  }}
-                />
-
+                <div className="flex gap-3">
+                  <AgreementButton
+                    buttonText="Lagre"
+                    type="submit"
+                    className="border-2 border-black shadow-md bg-primary text-white font-semibold py-2 px-4 rounded-md  w-fit"
+                  />
+                  <AgreementButton
+                    type="button"
+                    className="border-2 border-primary shadow-md text-primary font-semibold "
+                    buttonText="Avbryt"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      setInEditIndex(null);
+                    }}
+                  />
+                </div>
                 <AgreementButton
                   type="button"
                   buttonText="Slett"
                   onClick={async (e) => {
-                    e.preventDefault();
-                    let agreementsCopy = [...agreements];
-                    agreementsCopy.splice(i, 1);
-                    setAgreements(agreementsCopy);
-                    await deleteAgreementWithFiles(agreement, organisation);
+                    var result = confirm("Er du sikker på at du vil slette?");
+                    if (result) {
+                      e.preventDefault();
+                      let agreementsCopy = [...agreements];
+                      agreementsCopy.splice(i, 1);
+                      setAgreements(agreementsCopy);
+                      await deleteAgreementWithFiles(agreement, organisation);
+                    }
                   }}
-                  className="border-primary bg-holiday_darker text-white "
+                  className="border-holiday_darker border-2 bg-white f text-holiday_darker shadow-md "
                 />
               </div>
+            ) : (
+              <AgreementButton
+                type="button"
+                buttonText="Rediger"
+                onClick={(e) => {
+                  e.preventDefault();
+                  setInEditIndex(i);
+                }}
+              />
             )}
           </form>
         ))}

diff --git a/frontend/src/components/Agreement/components/AgreementFileTable.tsx b/frontend/src/components/Agreement/components/AgreementFileTable.tsx
@@ -1,7 +1,7 @@
 import { Agreement, FileReference } from "@/types";
 import { Fragment } from "react";
 import InfoPill from "@/components/Staffing/InfoPill";
-import { X } from "react-feather";
+import { Trash2 } from "react-feather";
 import { format } from "date-fns";
 
 export function AgreementFileTable({
@@ -21,38 +21,47 @@ export function AgreementFileTable({
     <table className="table-auto m-2 w-full text-sm text-left rounded text-gray-500">
       <thead className="text-xs text-gray-700 bg-primary_darker/20 font-semibold rounded w-full ">
         <tr>
-          <th className="pl-6 py-1 text-left font-semibold">Filnavn</th>
+          {inEditIndex === i && <th className="px-2 text-transparent">f</th>}
+          <th className="pl-2 py-1 text-left font-semibold">Filnavn</th>
           <th className="pl-2 py-1 text-left font-semibold">Opplastet</th>
           <th className="pl-2 py-1 text-left font-semibold">Opplastet av</th>
         </tr>
       </thead>
       <tbody>
         {agreement.files?.map((file, ind) => (
           <Fragment key={file.blobName + ind}>
-            {inEditIndex === i && (
-              <div className="flex justify-start pt-2 relative top-2">
-                <button
-                  type="button"
-                  onClick={(e) => onDelete(e, file)}
-                  className="absolute cursor-pointer h-5 pr-2  flex justify-center items-center"
-                >
-                  <InfoPill
-                    variant="wide"
-                    text=""
-                    colors={"text-primary hover:bg-primary_darker/20"}
-                    icon={<X size="16" />}
-                  />
-                </button>
-              </div>
-            )}
             <tr
-              className=" hover:bg-primary_darker/10 cursor-pointer"
+              className={`border-b${
+                inEditIndex === i
+                  ? ""
+                  : " hover:bg-primary_darker/10 cursor-pointer"
+              }`}
               onClick={(e) => {
                 e.preventDefault();
                 download(file.blobName, file.fileName);
               }}
             >
-              <td className="py-1 pl-6 border-b  items-center">
+              {inEditIndex === i && (
+                <td className="flex justify-start px-2 pt-2 relative">
+                  <button
+                    type="button"
+                    onClick={(e) => onDelete(e, file)}
+                    className="absolute cursor-pointer h-5 pr-2  top-1.5 flex justify-center items-center"
+                  >
+                    <InfoPill
+                      variant="wide"
+                      text=""
+                      colors={"text-primary hover:text-primary_darker"}
+                      icon={<Trash2 size="16" />}
+                    />
+                  </button>
+                </td>
+              )}
+              <td
+                className={`py-1 pl-2 border-b  items-center ${
+                  inEditIndex === i ? "hover:bg-primary_darker/10" : ""
+                }`}
+              >
                 {file.fileName}
               </td>
               <td className="py-1 px-2 border-b items-center">

diff --git a/frontend/src/components/Agreement/components/EditDateInput.tsx b/frontend/src/components/Agreement/components/EditDateInput.tsx
@@ -1,3 +1,5 @@
+import { format } from "date-fns";
+
 export function EditDateInput({
   value,
   name,
@@ -28,9 +30,7 @@ export function EditDateInput({
             name={name}
             aria-label={label}
             required={required}
-            defaultValue={
-              value ? new Date(value).toISOString().split("T")[0] : undefined
-            }
+            defaultValue={value ? format(value!, "yyyy-MM-dd") : undefined}
             type="date"
             className="border-one_and_a_half shadow-sm border-primary rounded-md px-2 pt-1 mt-1 block w-full"
           />
@@ -47,7 +47,7 @@ export function EditDateInput({
             onClick={onClick}
             className="mt-1 bg-primary/5 shadow-sm border border-primary/5 pr-10 p-2 rounded-md hover:bg-primary_darker/10"
           >
-            {value ? new Date(value).toLocaleDateString() : ""}
+            {value?.toLocaleDateString("nb-NO")}
           </p>
         </>
       )}

diff --git a/frontend/src/components/Agreement/components/EditTextarea.tsx b/frontend/src/components/Agreement/components/EditTextarea.tsx
@@ -41,7 +41,7 @@ export function EditTextarea({
           </label>
 
           {value ? (
-            <p>
+            <div>
               {value.split(/\r?\n/).map((line, index) => (
                 <p
                   onClick={onClick}
@@ -51,7 +51,7 @@ export function EditTextarea({
                   {line}
                 </p>
               ))}
-            </p>
+            </div>
           ) : (
             <p
               onClick={onClick}