#1 Add litigious check to entry

UniRegensburg · Aug 13, 2022 · 923ed6f · 923ed6f
1 parent 1d7c04a
commit 923ed6f
Show file tree

Hide file tree

Showing 6 changed files with 139 additions and 14 deletions.
diff --git a/src/components/Discussion.tsx b/src/components/Discussion.tsx
@@ -1,5 +1,5 @@
 import { IEntry, UserRole } from "../types";
-import { Entry } from "./entry/Entry";
+import { Entry } from "./entry";
 
 const mockEntries: IEntry[] = [
   {
@@ -36,7 +36,7 @@ export const Discussion = () => {
                 entry={entry}
                 isBookmarked={index % 2 === 0}
                 isHidden={index % 2 === 0}
-                viewedBy={UserRole.Judge}
+                viewedBy={UserRole.Defendant}
                 isOld={index % 2 === 0}
               />
             ))}

diff --git a/src/components/entry/Entry.tsx b/src/components/entry/Entry.tsx
@@ -9,13 +9,10 @@ import {
   Trash,
 } from "phosphor-react";
 import React, { useEffect, useState } from "react";
+import { Action, EntryBody, EntryForm, EntryHeader, NewEntry } from ".";
 import { IEntry, UserRole } from "../../types";
 import { Button } from "../Button";
-import { Action } from "./Action";
-import { EntryBody } from "./EntryBody";
-import { EntryForm } from "./EntryForm";
-import { EntryHeader } from "./EntryHeader";
-import { NewEntry } from "./NewEntry";
+import { LitigiousCheck } from "./LitigiousCheck";
 
 interface EntryProps {
   entry: IEntry;
@@ -37,6 +34,7 @@ export const Entry: React.FC<EntryProps> = ({
   const [isEditing, setIsEditing] = useState<boolean>(false);
   const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false);
   const [isNewEntryVisible, setIsNewEntryVisible] = useState<boolean>(false);
+  const [isLitigious, setIsLitigious] = useState<boolean | null>(null);
 
   const isJudge = viewedBy === UserRole.Judge;
   const isPlaintiff = entry.role === UserRole.Plaintiff;
@@ -128,7 +126,13 @@ export const Entry: React.FC<EntryProps> = ({
           })}
         >
           {/* Entry */}
-          <div className={cx("shadow rounded-lg bg-white ")}>
+          <div className={cx("shadow rounded-lg bg-white relative ")}>
+            {isJudge && (
+              <LitigiousCheck
+                isLitigious={isLitigious}
+                setIsLitigious={setIsLitigious}
+              />
+            )}
             <EntryHeader
               isPlaintiff={isPlaintiff}
               isBodyOpen={isBodyOpen}
@@ -223,8 +227,12 @@ export const Entry: React.FC<EntryProps> = ({
                 setIsExpanded={() => setIsExpanded(!isExpanded)}
                 onAbort={() => {
                   setIsEditing(false);
+                  setIsExpanded(false);
+                }}
+                onSave={() => {
+                  updateEntry();
+                  setIsExpanded(false);
                 }}
-                onSave={updateEntry}
               />
             )}
           </div>

diff --git a/src/components/entry/EntryForm.tsx b/src/components/entry/EntryForm.tsx
@@ -65,7 +65,7 @@ export const EntryForm: React.FC<EntryBodyProps> = ({
           <Action
             className="text-base absolute right-2 top-1/2 -translate-y-1/2"
             onClick={() => setIsExpanded()}
-            isPlaintiff={!isPlaintiff}
+            isPlaintiff={isPlaintiff}
           >
             {isExpanded ? <CornersIn /> : <CornersOut />}
           </Action>,

diff --git a/src/components/entry/LitigiousCheck.tsx b/src/components/entry/LitigiousCheck.tsx
@@ -0,0 +1,106 @@
+import cx from "classnames";
+import { Check, Pencil, Trash, X } from "phosphor-react";
+import { useState } from "react";
+
+interface LitigiousCheckProps {
+  isLitigious: boolean | null;
+  setIsLitigious: (isLitigious: boolean | null) => void;
+}
+
+export const LitigiousCheck: React.FC<LitigiousCheckProps> = ({
+  isLitigious,
+  setIsLitigious,
+}) => {
+  const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false);
+  return (
+    <span
+      onClick={(e) => {
+        e.stopPropagation();
+        setIsMenuOpen(!isMenuOpen);
+      }}
+      className={cx(
+        "flex items-center justify-center cursor-pointer absolute bottom-0 right-0 translate-x-1 translate-y-1 z-10 rounded-full bg-offWhite text-white  h-6 w-6",
+        {
+          "border-2 border-mediumGrey": isLitigious === null,
+          "bg-vibrantRed": isLitigious,
+          "bg-vibrantGreen": isLitigious === false,
+        }
+      )}
+    >
+      {isLitigious && <X size={14} weight="bold" />}
+      {isLitigious === false && <Check size={14} weight="bold" />}
+      {isMenuOpen && (
+        <ul className="absolute right-0 top-full p-2 bg-white text-darkGrey rounded-xl min-w-[250px] shadow-lg z-50">
+          <li
+            tabIndex={0}
+            onClick={(e) => {
+              e.stopPropagation();
+              setIsLitigious(null);
+              setIsMenuOpen(false);
+            }}
+            className="flex items-center gap-2 p-2 rounded-lg hover:bg-offWhite focus:bg-offWhite focus:outline-none"
+          >
+            <CircleWithIcon isLitigious={null} />
+            Zurücksetzen
+          </li>
+
+          <li
+            tabIndex={0}
+            onClick={(e) => {
+              e.stopPropagation();
+              setIsLitigious(false);
+              setIsMenuOpen(false);
+            }}
+            className="flex items-center gap-2 p-2 rounded-lg hover:bg-offWhite focus:bg-offWhite focus:outline-none"
+          >
+            <CircleWithIcon
+              icon={<Check size={12} weight="bold" />}
+              isLitigious={false}
+            />
+            Als unstreitig markieren
+          </li>
+          <li
+            tabIndex={0}
+            onClick={(e) => {
+              e.stopPropagation();
+              setIsLitigious(true);
+              setIsMenuOpen(false);
+            }}
+            className="flex items-center gap-2 p-2 rounded-lg hover:bg-offWhite focus:bg-offWhite focus:outline-none"
+          >
+            <CircleWithIcon
+              icon={<X size={12} weight="bold" />}
+              isLitigious={true}
+            />
+            Als streitig markieren
+          </li>
+        </ul>
+      )}
+    </span>
+  );
+};
+
+interface CircleWithIconProps {
+  icon?: React.ReactNode;
+  isLitigious?: boolean | null;
+}
+
+const CircleWithIcon: React.FC<CircleWithIconProps> = ({
+  icon,
+  isLitigious,
+}) => {
+  return (
+    <div
+      className={cx(
+        "w-4 h-4 flex items-center justify-center rounded-full bg-offWhite text-white",
+        {
+          "border border-mediumGrey": isLitigious === null,
+          "bg-vibrantRed": isLitigious,
+          "bg-vibrantGreen": isLitigious === false,
+        }
+      )}
+    >
+      {icon}
+    </div>
+  );
+};
diff --git a/src/components/entry/NewEntry.tsx b/src/components/entry/NewEntry.tsx
@@ -57,14 +57,19 @@ export const NewEntry: React.FC<NewEntryProps> = ({
       </EntryHeader>
       {/* Toolbar */}
       <EntryForm
-        isPlaintiff={isPlaintiff}
+        isPlaintiff={!isPlaintiff}
         isExpanded={isExpanded}
         setIsExpanded={() => {
           setIsExpanded(!isExpanded);
-          console.log({ isExpanded: !isExpanded });
         }}
-        onAbort={() => setIsNewEntryVisible()}
-        onSave={() => setIsNewEntryVisible()}
+        onAbort={() => {
+          setIsNewEntryVisible();
+          setIsExpanded(false);
+        }}
+        onSave={() => {
+          setIsNewEntryVisible();
+          setIsExpanded(false);
+        }}
       />
     </div>
   );

diff --git a/src/components/entry/index.ts b/src/components/entry/index.ts
@@ -0,0 +1,6 @@
+export { Action } from "./Action";
+export { Entry } from "./Entry";
+export { EntryForm } from "./EntryForm";
+export { EntryHeader } from "./EntryHeader";
+export { EntryBody } from "./EntryBody";
+export { NewEntry } from "./NewEntry";