Skip to content

Commit

Permalink
Merge branch 'feature/display-assessment-colors'
Browse files Browse the repository at this point in the history
  • Loading branch information
@severynenko
severynenko committed Aug 13, 2024
2 parents 01d547b + d47c794 commit d75f98e
Show file tree
Hide file tree
Showing 9 changed files with 498 additions and 63 deletions.
128 changes: 128 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

11 changes: 7 additions & 4 deletions src/app/projects/[id]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,10 +45,13 @@ export default async function Page({
</DropdownMenuTrigger>
<DropdownMenuContent>
{allProjects.map((project) => (
<Link prefetch href={`/projects/${project.id}`} className="hover:underline" key={project.id}>
<DropdownMenuItem>
{project.name}
</DropdownMenuItem>
<Link
prefetch
href={`/projects/${project.id}`}
className="hover:underline"
key={project.id}
>
<DropdownMenuItem>{project.name}</DropdownMenuItem>
</Link>
))}
</DropdownMenuContent>
Expand Down
8 changes: 8 additions & 0 deletions src/components/ProjectDetailAssessment.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,9 @@ export default function ProjectDetailAssessment({
const { mutateAsync: createAssessment, isPending: isSubmitting } =
api.assessment.createAssessment.useMutation();

const { mutateAsync: createAreasScores } =
api.assessment.createAreasScores.useMutation();

useEffect(() => {
if (existingAssessment) {
setAnswersArea(
Expand Down Expand Up @@ -245,6 +248,11 @@ export default function ProjectDetailAssessment({
answersArtefact: finalAnswersArtefact || [],
stageId: currentStage.id,
});
await createAreasScores({
projectId: project.id,
stageId: currentStage.id,
answersArea: finalAnswersArea || [],
});
setHasChanges(false); // Reset changes flag after successful submission
toast({
title: "Assessment created successfully",
Expand Down
19 changes: 13 additions & 6 deletions src/components/charts/ProjectAreaCompletion.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,11 +48,14 @@ export function ProjectAreaCompletion({
title?: string;
}) {
const { currentStage } = useProjectDetailsStore();
const { data: projectStatistics, isLoading, isRefetching } =
api.assessment.getProjectStatistics.useQuery({
projectId: projectId,
stageId: currentStage.id, // Use current stage ID from the store
});
const {
data: projectStatistics,
isLoading,
isRefetching,
} = api.assessment.getProjectStatistics.useQuery({
projectId: projectId,
stageId: currentStage.id, // Use current stage ID from the store
});

if (isLoading) return <ChartSkeleton />; // Use the skeleton loader during loading

Expand All @@ -73,7 +76,11 @@ export function ProjectAreaCompletion({
return (
<Fragment>
<div className="py-4 text-lg font-bold">
{isRefetching ? <div className="h-6 my-2 w-1/3 rounded bg-gray-300"></div> : `Artefacts Score: ${projectStatistics.artefactsHandledPercentage.toFixed(2)}%`}
{isRefetching ? (
<div className="my-2 h-6 w-1/3 rounded bg-gray-300"></div>
) : (
`Artefacts Score: ${projectStatistics.artefactsHandledPercentage.toFixed(2)}%`
)}
</div>
<Card className="m-0 w-full pt-6">
<CardTitle className="mx-4">
Expand Down
171 changes: 122 additions & 49 deletions src/components/ui/areaCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,10 @@ import { Card, CardContent, CardHeader, CardTitle } from "./card";
import { Button } from "./button";
import { Icons } from "../icons";
import { useSession } from "next-auth/react";
import { cn } from "~/lib/utils";
import useProjectDetailsStore from "~/stores/useProjectDetailsStore";
import { api } from "~/trpc/react";
import { useEffect, useState } from "react";

export interface AreaProps {
id: string;
Expand All @@ -23,62 +27,131 @@ export interface AreaProps {
const AreaCard = React.forwardRef<HTMLDivElement, AreaProps>((area, ref) => {
const { data: session } = useSession();
const userLoggedIn = !!session;
const [loading, setLoading] = useState(true);

const { data: areaDetails, isFetched: isAreaFetched } =
api.refa.areaByAreaId.useQuery({
area_id: area.id,
});

const { currentProject } = useProjectDetailsStore();

const { data: areaScore, isFetched: isScoreFetched } =
api.assessment.getAreaScore.useQuery(
{
projectId: currentProject?.id || -1,
areaId: areaDetails?.id || -1,
},
{
enabled: userLoggedIn && !!currentProject?.id && !!areaDetails?.id,
},
);

// Default values if areaScore is undefined
const areaMaturityScore = areaScore?.areaMaturityScore ?? 0;
const targetAreaMaturityScore = areaScore?.targeAreaMaturityScore ?? 1;

// Calculate the scores on a 100% scale
const maturityScore = (areaMaturityScore / targetAreaMaturityScore) * 100;

const backgroundColor = userLoggedIn
? maturityScore == null || maturityScore < 20
? "text-black bg-[hsl(var(--assessment-level-0))]"
: maturityScore >= 20 && maturityScore < 40
? "text-black bg-[hsl(var(--assessment-level-1))]"
: maturityScore >= 40 && maturityScore < 60
? "text-white bg-[hsl(var(--assessment-level-2))]"
: maturityScore >= 60 && maturityScore < 80
? "text-white bg-[hsl(var(--assessment-level-3))]"
: maturityScore >= 80 && maturityScore < 100
? "text-white bg-[hsl(var(--assessment-level-4))]"
: maturityScore === 100
? "text-white bg-[hsl(var(--assessment-level-5))]"
: ""
: ""; // if not loggedIn show no color coding

useEffect(() => {
if (isAreaFetched && isScoreFetched) {
setLoading(false);
}
}, [isAreaFetched, isScoreFetched]);

return (
<Card
title={area.name}
className="flex h-full w-full flex-col items-center justify-center"
>
<div className="absolute right-2 top-2 space-x-1">
<Button
variant="outline"
size="icon"
className="h-4 w-4 shrink-0 rounded-full opacity-50 hover:bg-accent hover:text-accent-foreground"
onClick={area.toggleVisibility}
<>
{loading ? (
<div className="flex animate-pulse items-center justify-center p-4">
<div className="h-16 w-full max-w-md rounded bg-gray-100"></div>
</div>
) : (
<Card
title={area.name}
className={cn(
"flex h-full w-full flex-col items-center justify-center",
backgroundColor,
)}
>
{area.visible ? <Icons.show /> : <Icons.hide />}
</Button>
{/* Info icon to trigger info sheet */}
<SheetTrigger>
<div className="h-4 w-4 shrink-0 rounded-full opacity-50 hover:bg-accent hover:text-accent-foreground">
<Icons.info />
</div>
</SheetTrigger>
{/* If user is logged in, edit icon to trigger assess sheet */}
{userLoggedIn && (
<Sheet>
<div className="absolute right-2 top-2 mr-2 h-7 space-x-1 rounded-xl bg-white p-1">
<Button
variant="outline"
size="icon"
className="h-4 w-4 shrink-0 rounded-full opacity-50 hover:bg-accent hover:text-accent-foreground"
onClick={area.toggleVisibility}
>
{area.visible ? <Icons.show /> : <Icons.hide />}
</Button>
{/* Info icon to trigger info sheet */}
<SheetTrigger>
<div className="h-4 w-4 shrink-0 rounded-full opacity-50 hover:bg-accent hover:text-accent-foreground">
<Icons.edit />
<Icons.info />
</div>
</SheetTrigger>
<SheetContent className="lg:min-w-[40vw]">
<SheetHeader>
<SheetTitle className="text-center">
<div>Assess Area: </div>
{area.name}
</SheetTitle>
</SheetHeader>
<div className="mt-4">
<p>TODO: Edit assessment about this area.</p>
{/* TODO: Implement assessment component here */}
</div>
</SheetContent>
</Sheet>
)}
</div>
<CardHeader
className="flex flex-col items-center justify-center"
title={area.name}
>
<CardTitle className="text-center">{area.name}</CardTitle>
</CardHeader>
<CardContent className="flex flex-col items-center justify-center">
<div className="text-center">
<p className="text-sm text-gray-500">{area.id}</p>
</div>
</CardContent>
</Card>
{/* 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 Area: </div>
{area.name}
</SheetTitle>
</SheetHeader>
<div className="mt-4">
<p>TODO: Edit assessment about this area.</p>
{/* TODO: Implement assessment component here */}
</div>
</SheetContent>
</Sheet>
)}
</div>
<div
className={cn(
"text-bold absolute bottom-2 right-2 space-x-1 text-sm",
backgroundColor,
)}
>
{maturityScore.toFixed(0)}%
</div>
<CardHeader
className="flex flex-col items-center justify-center"
title={area.name}
>
<CardTitle className="text-center">{area.name}</CardTitle>
</CardHeader>
<CardContent className="flex flex-col items-center justify-center">
<div className="text-center">
<p className={cn("text-sm text-gray-500", backgroundColor)}>
{area.id}
</p>
</div>
</CardContent>
</Card>
)}
</>
);
});
AreaCard.displayName = "AreaCard";
Expand Down
Loading

0 comments on commit d75f98e

Please sign in to comment.