alerts only on offers and focus on agreement element onclick (#547)

varianter · Dec 9, 2024 · 393188c · 393188c
1 parent acf7083
commit 393188c
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 17 deletions.
diff --git a/frontend/src/components/Agreement/components/AgreementFileTable.tsx b/frontend/src/components/Agreement/components/AgreementFileTable.tsx
@@ -22,52 +22,54 @@ export function AgreementFileTable({
       <thead className="text-xs text-gray-700 bg-primary_darker/20 font-semibold rounded w-full ">
         <tr>
           {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>
+          <th className="pl-2 py-1 text-left large font-semibold">Filnavn</th>
+          <th className="pl-2 py-1 text-left large font-semibold">Opplastet</th>
+          <th className="pl-2 py-1 text-left large font-semibold">
+            Opplastet av
+          </th>
         </tr>
       </thead>
       <tbody>
         {agreement.files?.map((file, ind) => (
           <Fragment key={file.blobName + ind}>
             <tr
-              className={`border-b${
+              className={`py-2 border-b ${
                 inEditIndex === i
                   ? ""
-                  : " hover:bg-primary_darker/10 cursor-pointer"
+                  : " hover:bg-primary_darker/10 cursor-pointer "
               }`}
               onClick={(e) => {
                 e.preventDefault();
                 download(file.blobName, file.fileName);
               }}
             >
               {inEditIndex === i && (
-                <td className="flex justify-start px-2 pt-2 relative">
+                <td className=" p-2">
                   <button
                     type="button"
                     onClick={(e) => onDelete(e, file)}
-                    className="absolute cursor-pointer h-5 pr-2  top-1.5 flex justify-center items-center"
+                    className="cursor-pointer flex justify-center items-center p-1 py-2 rounded-lg hover:bg-primary hover:bg-opacity-10"
                   >
                     <InfoPill
                       variant="wide"
                       text=""
-                      colors={"text-primary hover:text-primary_darker"}
+                      colors={"text-primary "}
                       icon={<Trash2 size="16" />}
                     />
                   </button>
                 </td>
               )}
               <td
-                className={`py-1 pl-2 border-b  items-center ${
+                className={`py-1 pl-2 border-b  large items-center ${
                   inEditIndex === i ? "hover:bg-primary_darker/10" : ""
                 }`}
               >
                 {file.fileName}
               </td>
-              <td className="py-1 px-2 border-b items-center">
+              <td className="py-1 px-2 border-b large items-center">
                 {format(file.uploadedOn, "dd.MM.yyyy")}
               </td>
-              <td className="py-1 px-2 border-b items-center">
+              <td className="py-1 px-2 border-b large items-center">
                 {file.uploadedBy}
               </td>
             </tr>

diff --git a/frontend/src/components/Agreement/components/EditDateInput.tsx b/frontend/src/components/Agreement/components/EditDateInput.tsx
@@ -1,4 +1,7 @@
 import { format } from "date-fns";
+import { on } from "events";
+import { set } from "lodash";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 
 export function EditDateInput({
   value,
@@ -15,6 +18,26 @@ export function EditDateInput({
   required?: boolean;
   onClick?: (e?: any) => any;
 }) {
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const [clicked, setClicked] = useState(false);
+
+  useEffect(() => {
+    if (!inEdit) {
+      setClicked(false);
+    }
+  }, [inEdit]);
+
+  function onInputClick(e: any) {
+    setClicked(true);
+    if (onClick) onClick(e);
+  }
+
+  useLayoutEffect(() => {
+    if (inEdit && inputRef.current && clicked) {
+      inputRef.current.focus();
+    }
+  }, [inEdit, clicked]);
+
   return (
     <div className="mb-4 pr-4">
       {inEdit ? (
@@ -27,6 +50,7 @@ export function EditDateInput({
           </label>
           <input
             id={name + label}
+            ref={inputRef}
             name={name}
             aria-label={label}
             required={required}
@@ -44,7 +68,7 @@ export function EditDateInput({
             {label}
           </label>
           <p
-            onClick={onClick}
+            onClick={(e) => onInputClick(e)}
             className="mt-1 bg-primary/5 shadow-sm border border-primary/5 pr-10 p-2 rounded-md hover:bg-primary_darker/10"
           >
             {value?.toLocaleDateString("nb-NO")}

diff --git a/frontend/src/components/Agreement/components/EditTextarea.tsx b/frontend/src/components/Agreement/components/EditTextarea.tsx
@@ -1,3 +1,5 @@
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+
 export function EditTextarea({
   value,
   name,
@@ -11,6 +13,25 @@ export function EditTextarea({
   inEdit: boolean;
   onClick?: (e?: any) => any;
 }) {
+  const inputRef = useRef<HTMLTextAreaElement | null>(null);
+  const [clicked, setClicked] = useState(false);
+
+  useEffect(() => {
+    if (!inEdit) {
+      setClicked(false);
+    }
+  }, [inEdit]);
+
+  function onInputClick(e: any) {
+    setClicked(true);
+    if (onClick) onClick(e);
+  }
+
+  useLayoutEffect(() => {
+    if (inEdit && inputRef.current && clicked) {
+      inputRef.current.focus();
+    }
+  }, [inEdit, clicked]);
   return (
     <div className="mb-7 pr-4">
       {inEdit ? (
@@ -23,6 +44,7 @@ export function EditTextarea({
           </label>
           <textarea
             id={name + label}
+            ref={inputRef}
             rows={5}
             cols={50}
             name={name}
@@ -44,7 +66,7 @@ export function EditTextarea({
             <div>
               {value.split(/\r?\n/).map((line, index) => (
                 <p
-                  onClick={onClick}
+                  onClick={(e) => onInputClick(e)}
                   className="mt-1 px-2 hover:cursor-pointer"
                   key={index}
                 >
@@ -54,7 +76,7 @@ export function EditTextarea({
             </div>
           ) : (
             <p
-              onClick={onClick}
+              onClick={(e) => onInputClick(e)}
               className="mt-1 px-2 italic text-text_light_black/50"
             >
               {"Legg til tekst her"}

diff --git a/frontend/src/components/Staffing/ConsultantRow.tsx b/frontend/src/components/Staffing/ConsultantRow.tsx
@@ -157,7 +157,10 @@ export default function ConsultantRows({
 
   function getAlert() {
     const dates = consultant.detailedBooking
-      .filter((e) => e.bookingDetails.projectId > 0)
+      .filter(
+        (e) =>
+          e.bookingDetails.projectId > 0 && e.bookingDetails.type == "Offer",
+      )
       .map((e) => e.bookingDetails.endDateAgreement);
 
     if (dates.some((e) => e === null)) {

diff --git a/frontend/src/components/Staffing/DetailedBookingRows.tsx b/frontend/src/components/Staffing/DetailedBookingRows.tsx
@@ -71,6 +71,7 @@ export function DetailedBookingRows(props: {
     { color: "green", text: "Avtale aktiv", icon: CheckCircle },
     { color: "red", text: "Ingen avtaler funnet", icon: AlertCircle },
     { color: "orange", text: "Avtale utgått", icon: AlertCircle },
+    { color: "transparent", text: "", icon: AlertCircle },
   ];
   const { setConsultants } = useContext(FilteredContext);
 
@@ -112,19 +113,22 @@ export function DetailedBookingRows(props: {
   }, []);
 
   async function getColorIcon() {
+    const bookingType = detailedBooking.bookingDetails.type;
     const endDateString = detailedBooking.bookingDetails.endDateAgreement;
     if (endDateString && endDateString !== null) {
       const endDate = new Date(endDateString).getTime();
 
       const today = new Date().getTime();
-      if (today > endDate) {
+      if (today > endDate && bookingType == "Offer") {
         return setAlertColor(colors.find((c) => c.color == "orange"));
       } else {
         return setAlertColor(colors.find((c) => c.color == "green"));
       }
     } else {
-      if (endDateString === null) {
+      if (endDateString === null && bookingType == "Offer") {
         return setAlertColor(colors.find((c) => c.color == "red"));
+      } else {
+        return setAlertColor(colors.find((c) => c.color == "transparent"));
       }
     }
   }