added support for uploadedBy on file uploads, and table for viewing f…

…iles

frontend/package.json

@@ -19,6 +19,7 @@
     "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",
     "autoprefixer": "^10.4.16",
+    "date-fns": "^4.1.0",
     "eslint": "8.48.0",
     "eslint-config-next": "^13.5.2",
     "lodash": "^4.17.21",

frontend/src/actions/agreementActions.ts

@@ -8,6 +8,7 @@ import {
 } from "@/data/apiCallsWithToken";
 import { Agreement, AgreementWriteModel, FileReference } from "@/types";
 import { deleteFiles, uploadFiles } from "./blobActions";
+import { authOptions, getCustomServerSession } from "@/app/api/auth/[...nextauth]/route";
 
 export async function saveChanges(
   formData: FormData,
@@ -44,6 +45,7 @@ export async function saveChanges(
     const validFiles = files.filter(
       (file) => file.size > 0 && file.name !== "undefined",
     );
+
 
     if (validFiles.length > 0) {
       const fileRes = await uploadFiles(validFiles);

frontend/src/actions/blobActions.ts

@@ -1,4 +1,8 @@
 "use server";
+import {
+  authOptions,
+  getCustomServerSession,
+} from "@/app/api/auth/[...nextauth]/route";
 import { FileReference } from "@/types";
 import {
   BlobSASPermissions,
@@ -23,6 +27,11 @@ export async function uploadFiles(files: File[]) {
     const uploadedFiles = await Promise.all(
       files.map(async (file) => {
         const uploaded = new Date();
+        const session =
+          !process.env.NEXT_PUBLIC_NO_AUTH &&
+          (await getCustomServerSession(authOptions));
+        const user =
+          session && session?.user?.name ? session.user.name : "Unknown";
         const blobName = `${file.name}${uploaded}`;
 
         const arrayBuffer = await file.arrayBuffer();
@@ -37,6 +46,7 @@ export async function uploadFiles(files: File[]) {
           fileName: file.name,
           blobName: blobName,
           uploadedOn: uploaded,
+          uploadedBy: user,
         } as FileReference;
       }),
     );

frontend/src/app/globals.css

@@ -268,6 +268,5 @@
     border-radius: 5px;
     padding: 0.3rem 0.7rem;
     background-color: #423d89;
-    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.3);
   }
 }

frontend/src/components/Agreement/AgreementEdit.tsx

@@ -12,16 +12,18 @@ import {
   ProjectWithCustomerModel,
 } from "@/api-types";
 import { useParams } from "next/navigation";
-import { useEffect, useState } from "react";
+import { useEffect, useState, Fragment } from "react";
 import { EditDateInput } from "./components/EditDateInput";
-import { Agreement } from "@/types";
+import { Agreement, FileReference } from "@/types";
 import { getDownloadUrl } from "@/actions/blobActions";
 import { EditTextarea } from "./components/EditTextarea";
 import { EditSelect } from "./components/EditSelect";
 import { EditInput } from "./components/EditInput";
 import { AgreementButton } from "./components/AgreementButton";
 import InfoPill from "../Staffing/InfoPill";
 import { Delete, Download, X } from "react-feather";
+import { format } from "date-fns";
+import { AgreementFileTable } from "./components/AgreementFileTable";
 
 export function AgreementEdit({
   project,
@@ -263,7 +265,7 @@ export function AgreementEdit({
                   inEdit={inEditIndex === i}
                 />
               </div>
-              <div className="flex-1 ">
+              <div className="flex-1 pr-2">
                 <EditTextarea
                   onClick={(e) => {
                     e.preventDefault();
@@ -277,78 +279,47 @@ export function AgreementEdit({
               </div>
             </div>
 
-            <div className="flex flex-col max-w-xl pb-5">
+            <div className="flex flex-col max-w-3xl pb-5">
               {agreement.files && agreement.files?.length > 0 ? (
                 <label
                   htmlFor="files"
-                  className="block px-2 text-sm font-medium text-gray-700 pb-2"
+                  className="block px-2 font-medium text-gray-700"
+                  style={{ fontSize: "1.1rem" }}
                 >
                   Filer
                 </label>
               ) : null}
               {inEditIndex === i ? (
-                <>
+                <div className="px-2">
                   <input
                     type="file"
                     name="files"
                     multiple
                     className="file-upload"
                   />
-                  {agreement.files?.map((file, ind) => (
-                    <div key={file.blobName + ind} className="pt-2">
-                      <button
-                        type="button"
-                        onClick={(e) => {
-                          e.preventDefault();
-
-                          let agreementsCopy = [...agreements];
-
-                          agreementsCopy[i].files = agreementsCopy[
-                            i
-                          ].files?.filter((f) => f.blobName !== file.blobName);
-                          setAgreements(agreementsCopy);
-                          deleteFile(
-                            file.blobName,
-                            agreementsCopy[i],
-                            organisation,
-                          );
-                        }}
-                        className="cursor-pointer  pr-2"
-                      >
-                        <InfoPill
-                          variant="wide"
-                          text=""
-                          colors={""}
-                          icon={<X size="12" />}
-                        />
-                      </button>
-                      {file.fileName}
-                    </div>
-                  ))}
-                </>
-              ) : (
-                <div className="flex flex-row">
-                  {agreement.files?.map((file, ind) => (
-                    <button
-                      key={file.blobName + ind}
-                      type="button"
-                      onClick={(e) => {
-                        e.preventDefault();
-                        download(file.blobName, file.fileName);
-                      }}
-                      className="border-one_and_a_half  border-primary/50 flex gap-1 flex-row items-center rounded-sm shadow-sm py-1 px-1.5 bg-primary/10 w-fit"
-                    >
-                      <div>{file.fileName}</div>
-                      <InfoPill
-                        variant="wide"
-                        text=""
-                        colors={"text-primary"}
-                        icon={<Download size="15" />}
-                      />
-                    </button>
-                  ))}
                 </div>
+              ) : (
+                <></>
               )}
+              <div className="flex flex-row w-full">
+                <AgreementFileTable
+                  agreement={agreement}
+                  inEditIndex={inEditIndex}
+                  i={i}
+                  onDelete={(e: any, file: FileReference) => {
+                    e.preventDefault();
+
+                    let agreementsCopy = [...agreements];
+
+                    agreementsCopy[i].files = agreementsCopy[i].files?.filter(
+                      (f) => f.blobName !== file.blobName,
+                    );
+                    setAgreements(agreementsCopy);
+                    deleteFile(file.blobName, agreementsCopy[i], organisation);
+                  }}
+                  download={download}
+                />
+              </div>
             </div>
 
             {inEditIndex === i ? (

frontend/src/components/Agreement/components/AgreementFileTable.tsx

@@ -0,0 +1,70 @@
+import { Agreement, FileReference } from "@/types";
+import { Fragment } from "react";
+import InfoPill from "@/components/Staffing/InfoPill";
+import { X } from "react-feather";
+import { format } from "date-fns";
+
+export function AgreementFileTable({
+  agreement,
+  inEditIndex,
+  i,
+  onDelete,
+  download,
+}: {
+  agreement: Agreement;
+  inEditIndex: number | null;
+  i: number;
+  onDelete: (e: any, file: FileReference) => void;
+  download: (blobName: string, filename: string) => Promise<void>;
+}) {
+  return (
+    <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>
+          <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"
+              onClick={(e) => {
+                e.preventDefault();
+                download(file.blobName, file.fileName);
+              }}
+            >
+              <td className="py-1 pl-6 border-b  items-center">
+                {file.fileName}
+              </td>
+              <td className="py-1 px-2 border-b items-center">
+                {format(file.uploadedOn, "dd.MM.yyyy")}
+              </td>
+              <td className="py-1 px-2 border-b items-center">
+                {file.uploadedBy}
+              </td>
+            </tr>
+          </Fragment>
+        ))}
+      </tbody>
+    </table>
+  );
+}

frontend/src/types.ts

@@ -78,4 +78,5 @@ export interface FileReference {
   fileName: string;
   blobName: string;
   uploadedOn: Date;
+  uploadedBy?: string;
 }