Merge pull request #15 from DigitalProductInnovationAndDevelopment/pa…

…ge/refa-artefact-add-assess-icon-and-sheet Add info and assess icon to area card
DigitalProductInnovationAndDevelopment · Aug 13, 2024 · f540ab1 · f540ab1
2 parents 59be87f + e752e71
commit f540ab1
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 15 deletions.
diff --git a/src/components/ui/areaCard.tsx b/src/components/ui/areaCard.tsx
@@ -71,10 +71,13 @@ const AreaCard = React.forwardRef<HTMLDivElement, AreaProps>((area, ref) => {
     : ""; // if not loggedIn show no color coding
 
   useEffect(() => {
-    if (isAreaFetched && isScoreFetched) {
+    if (!userLoggedIn) {
       setLoading(false);
     }
-  }, [isAreaFetched, isScoreFetched]);
+    if (userLoggedIn && isAreaFetched && isScoreFetched) {
+      setLoading(false);
+    }
+  }, [isAreaFetched, isScoreFetched, userLoggedIn]);
 
   return (
     <>

diff --git a/src/components/ui/artifactCard.tsx b/src/components/ui/artifactCard.tsx
@@ -1,31 +1,48 @@
 "use client";
 
 import * as React from "react";
-import { CardDescription, CardHeader } from "./card";
+import { Card, CardDescription, CardHeader } from "./card";
 import { Dialog, DialogTrigger, DialogContent, DialogTitle } from "./dialog";
 import { api } from "~/trpc/react";
 import Spinner from "./spinner";
 import { skipToken } from "@tanstack/react-query";
+import { useSession } from "next-auth/react";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "./sheet";
+import { Icons } from "../icons";
 
 export type ArtifactProps = {
   id?: string;
   name?: string;
   isEmpty?: boolean;
+  displayIcons: boolean;
+};
+
+type ArtifactDialogProps = {
+  id?: string;
 };
 
 export const ArtifactDialog = ({
   id,
-  name,
   children,
   className,
-}: ArtifactProps & { children: React.ReactNode } & { className?: string }) => {
+}: ArtifactDialogProps & { children: React.ReactNode } & {
+  className?: string;
+}) => {
   const { data, isLoading } = api.refa.artefactById.useQuery(
     id ? { artefact_id: id } : skipToken,
   );
 
   return (
     <Dialog>
-      <DialogTrigger asChild className={className}>{children}</DialogTrigger>
+      <DialogTrigger asChild className={className}>
+        {children}
+      </DialogTrigger>
       <DialogContent>
         <DialogTitle>{data?.artefact_name}</DialogTitle>
         {isLoading ? (
@@ -49,22 +66,60 @@ export const ArtifactDialog = ({
 };
 
 const ArtifactCard = React.forwardRef<HTMLDivElement, ArtifactProps>(
-  ({ id, name, isEmpty = false }, ref) => {
+  ({ id, name, displayIcons, isEmpty = false }, ref) => {
+    const { data: session } = useSession();
+    const userLoggedIn = !!session;
     return (
       <>
         {isEmpty ? (
           <div className="rounded-xl bg-card text-card-foreground">
-            <CardHeader>No Artifacts</CardHeader>
+            <CardHeader>No Artefacts</CardHeader>
           </div>
         ) : (
-          <ArtifactDialog id={id} name={name} className="w-full">
-            <div className="rounded-xl border bg-card text-center text-card-foreground opacity-100 transition-opacity hover:opacity-50">
-              <CardHeader className="p-3">
-                <span className="text-sm font-bold">{name}</span>
+          <Card className="flex h-full w-full flex-col items-center justify-center">
+            {displayIcons && (
+              <div className="absolute right-1 top-1 z-20 space-x-1 p-1">
+                <div className="flex items-center justify-center space-x-0.5">
+                  {/* Info icon that triggers pop-up */}
+                  <ArtifactDialog id={id}>
+                    <div className="h-4 w-4 shrink-0 rounded-full opacity-50 hover:bg-accent hover:text-accent-foreground">
+                      <Icons.info />
+                    </div>
+                  </ArtifactDialog>
+                  {/* If user is logged in, edit icon to trigger assess sheet */}
+                  {userLoggedIn && (
+                    <Sheet>
+                      <SheetTrigger>
+                        <div className="h-4 w-4 shrink-0 rounded-full opacity-50 hover:bg-accent hover:text-accent-foreground">
+                          <Icons.edit />
+                        </div>
+                      </SheetTrigger>
+                      <SheetContent className="lg:min-w-[40vw]">
+                        <SheetHeader>
+                          <SheetTitle className="text-center">
+                            <div>Assess Artefact: </div>
+                            <span>{name}</span>
+                          </SheetTitle>
+                        </SheetHeader>
+                        <div className="mt-4">
+                          <p>TODO: Edit assessment about this artefact.</p>
+                          {/* TODO: Implement assessment component here */}
+                        </div>
+                      </SheetContent>
+                    </Sheet>
+                  )}
+                </div>
+              </div>
+            )}
+            <div className="text-center opacity-100 transition-opacity">
+              <CardHeader>
+                <div className="text-sm font-bold">{name}</div>
               </CardHeader>
-              <CardDescription className="pb-2">{id}</CardDescription>
+              <CardDescription className="pb-2">
+                <span>{id}</span>
+              </CardDescription>
             </div>
-          </ArtifactDialog>
+          </Card>
         )}
       </>
     );

diff --git a/src/components/ui/cardWrapper.tsx b/src/components/ui/cardWrapper.tsx
@@ -59,13 +59,14 @@ const CardWrapper = React.forwardRef<HTMLDivElement, CardWrapperProps>(
       >
         <div className={artifactClasses}>
           {artifacts.length === 0 ? (
-            <ArtifactCard isEmpty />
+            <ArtifactCard isEmpty displayIcons={false} />
           ) : (
             artifacts.map((artifact) => (
               <ArtifactCard
                 key={artifact.id}
                 id={artifact.id}
                 name={artifact.name}
+                displayIcons={artifactsView}
               />
             ))
           )}