Merge pull request #157 from UniRegensburg/153-feat-rubrum-anhang

#153 add attachment option to rubren

src/components/Discussion.tsx

@@ -12,6 +12,7 @@ import { MetaData } from "./metadata/MetaData";
 import { SectionHeader } from "./section-header/SectionHeader";
 import { MetaDataHeader } from "./metadata/MetaDataHeader";
 import { useState } from "react";
+import { useEvidence } from "../contexts/EvidenceContext";
 
 export const Discussion = () => {
   const [isBodyOpenPlaintiff, setIsBodyOpenPlaintiff] = useState<boolean>(true);
@@ -20,6 +21,7 @@ export const Discussion = () => {
   const { groupedEntries } = useCase();
   const { sectionList, individualSorting } = useSection();
   const { user } = useUser();
+  const { plaintiffAttachments, defendantAttachments } = useEvidence();
 
   const {
     selectedSorting,
@@ -67,11 +69,19 @@ export const Discussion = () => {
           </div>
           <div className="grid grid-cols-2 gap-6 ml-[40px] mt-4">
             {isBodyOpenPlaintiff ? (
-              <MetaData owner={UserRole.Plaintiff} />
+              <MetaData
+                owner={UserRole.Plaintiff}
+                attachments={plaintiffAttachments}
+              />
             ) : (
               <div></div>
             )}
-            {isBodyOpenDefendant && <MetaData owner={UserRole.Defendant} />}
+            {isBodyOpenDefendant && (
+              <MetaData
+                owner={UserRole.Defendant}
+                attachments={defendantAttachments}
+              />
+            )}
           </div>
           {selectedSorting === Sorting.Privat && showEntrySorting ? (
             <JudgeDiscussion />

src/components/header/DocumentButton.tsx

@@ -52,6 +52,8 @@ export const DocumentButton = () => {
     evidenceIdsDefendant,
     plaintiffFileVolume,
     defendantFileVolume,
+    plaintiffAttachments,
+    defendantAttachments,
   } = useEvidence();
   const { versionHistory, colorSelection, selectedTheme, setSelectedTheme } =
     useHeaderContext();
@@ -72,6 +74,8 @@ export const DocumentButton = () => {
         currentVersion,
         versionHistory,
         metaData,
+        plaintiffAttachments,
+        defendantAttachments,
         entries,
         sectionList,
         evidenceList,

src/components/metadata/MetaData.tsx

@@ -1,34 +1,55 @@
 import cx from "classnames";
-import { CaretDown, CaretRight, PencilSimple, Plus } from "phosphor-react";
+import {
+  CaretDown,
+  CaretRight,
+  ImageSquare,
+  PencilSimple,
+  Plus,
+} from "phosphor-react";
 import { useState } from "react";
 import { toast } from "react-toastify";
 import { useCase, useHeaderContext, useUser } from "../../contexts";
 import { getTheme } from "../../themes/getTheme";
-import { UserRole } from "../../types";
+import { IEvidence, UserRole } from "../../types";
 import { Button } from "../Button";
 import { ErrorPopup } from "../popups/ErrorPopup";
 import { Tooltip } from "../Tooltip";
 import { MetaDataBody } from "./MetaDataBody";
 import { MetaDataForm } from "./MetaDataForm";
+import { ImageViewerPopup } from "../entry/ImageViewerPopup";
+import { useEvidence } from "../../contexts/EvidenceContext";
 
 interface MetaDataProps {
   owner: UserRole;
+  attachments: IEvidence[];
 }
 
-export const MetaData: React.FC<MetaDataProps> = ({ owner }) => {
+export const MetaData: React.FC<MetaDataProps> = ({ owner, attachments }) => {
   const [isOpen, setIsOpen] = useState<boolean>(true);
   const [isEditing, setIsEditing] = useState<boolean>(false);
   const [isErrorVisible, setIsErrorVisible] = useState<boolean>(false);
 
   const { user } = useUser();
   const { metaData, setMetaData } = useCase();
   const { selectedTheme } = useHeaderContext();
+  const {
+    setPlaintiffFileVolume,
+    setDefendantFileVolume,
+    setPlaintiffAttachments,
+    setDefendantAttachments,
+  } = useEvidence();
 
   const isPlaintiff = owner === UserRole.Plaintiff;
   const isJudge = user?.role === UserRole.Judge;
   const canEdit = isJudge || user?.role === owner;
   const rubrumContent = isPlaintiff ? metaData?.plaintiff : metaData?.defendant;
 
+  const [imagePopupFilename, setImagePopupFilename] = useState<string>("");
+  const [imagePopupData, setImagePopupData] = useState<string>("");
+  const [imagePopupAttachment, setImagePopupAttachment] = useState<string>("");
+  const [imagePopupTitle, setImagePopupTitle] = useState<string>("");
+  const [imagePopupVisible, setImagePopupVisible] = useState<boolean>(false);
+
   const toggleMetaData = () => {
     setIsOpen(!isOpen);
     setIsEditing(false);
@@ -39,7 +60,13 @@ export const MetaData: React.FC<MetaDataProps> = ({ owner }) => {
     setIsOpen(true);
   };
 
-  const updateRubrum = (plainText: string, rawHtml: string) => {
+  const updateRubrum = (
+    plainText: string,
+    rawHtml: string,
+    attachments: IEvidence[],
+    plaintiffVolume: number,
+    defendantVolume: number
+  ) => {
     if (plainText.length === 0) {
       toast("Bitte geben Sie einen Text ein.", { type: "error" });
       return;
@@ -54,9 +81,32 @@ export const MetaData: React.FC<MetaDataProps> = ({ owner }) => {
       }
       return newState;
     });
+
+    if (isPlaintiff) {
+      setPlaintiffAttachments(attachments);
+    } else {
+      setDefendantAttachments(attachments);
+    }
+
+    setPlaintiffFileVolume(plaintiffVolume);
+    setDefendantFileVolume(defendantVolume);
+
     setIsEditing(false);
   };
 
+  const showImage = (
+    filedata: string,
+    filename: string,
+    attId: string,
+    title: string
+  ) => {
+    setImagePopupVisible(!imagePopupVisible);
+    setImagePopupData(filedata);
+    setImagePopupAttachment(attId);
+    setImagePopupFilename(filename);
+    setImagePopupTitle(title);
+  };
+
   return (
     <div className="flex flex-col space-y-2">
       <div className="flex items-center justify-between">
@@ -93,9 +143,23 @@ export const MetaData: React.FC<MetaDataProps> = ({ owner }) => {
               onAbort={(plainText, rawHtml) => {
                 setIsErrorVisible(true);
               }}
-              onSave={(plainText, rawHtml) => {
-                updateRubrum(plainText, rawHtml);
+              onSave={(
+                plainText,
+                rawHtml,
+                attachments,
+                plaintiffVolume,
+                defendantVolume
+              ) => {
+                updateRubrum(
+                  plainText,
+                  rawHtml,
+                  attachments,
+                  plaintiffVolume,
+                  defendantVolume
+                );
               }}
+              attachments={attachments}
+              isPlaintiff={isPlaintiff}
             />
           ) : (
             <MetaDataBody isPlaintiff={isPlaintiff}>
@@ -142,6 +206,55 @@ export const MetaData: React.FC<MetaDataProps> = ({ owner }) => {
               )}
             </MetaDataBody>
           )}
+          {!isEditing && attachments && attachments.length > 0 && (
+            <div className="flex flex-col gap-1 border-t border-lightGrey p-2">
+              <span className="ml-1 font-bold">
+                {(attachments.length === 1 ? "Anlage" : "Anlagen") + ":"}
+              </span>
+              <div className="flex flex-col pl-2">
+                {attachments.map((attachment, index) => (
+                  <div className="flex flex-row items-center" key={index}>
+                    <div className="flex flex-row gap-2">
+                      {attachments.length !== 1 && (
+                        <span className="w-4">{index + 1 + "."}</span>
+                      )}
+                      {attachment.hasAttachment ? (
+                        <span className="break-words font-medium">
+                          {attachment.name}
+                          <b> als Anlage {attachment.attachmentId}</b>
+                        </span>
+                      ) : (
+                        <span className="break-words font-medium">
+                          {attachment.name}
+                        </span>
+                      )}
+                      {attachment.hasImageFile && (
+                        <ImageSquare
+                          size={20}
+                          className="text-mediumGrey hover:text-black"
+                          onClick={() => {
+                            showImage(
+                              attachment.imageFile!,
+                              attachment.imageFilename!,
+                              attachment.attachmentId!,
+                              attachment.name
+                            );
+                          }}
+                        />
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+          <ImageViewerPopup
+            isVisible={imagePopupVisible}
+            filedata={imagePopupData}
+            filename={imagePopupFilename}
+            title={imagePopupTitle}
+            attachmentId={imagePopupAttachment}
+            setIsVisible={setImagePopupVisible}></ImageViewerPopup>
           <ErrorPopup isVisible={isErrorVisible}>
             <div className="flex flex-col items-center justify-center space-y-8">
               <p className="text-center text-base">

src/components/metadata/MetaDataBody.tsx

@@ -14,8 +14,7 @@ export const MetaDataBody: React.FC<MetaDataBodyProps> = ({
       className={cx("p-6", {
         "border-darkPurple/25": isPlaintiff,
         "border-darkPetrol/25": !isPlaintiff,
-      })}
-    >
+      })}>
       {children}
     </div>
   );