Merge pull request #61 from noahstreller/feature/subject-weights

feat: subject weights
noahstreller · Jul 12, 2024 · ba33995 · ba33995
2 parents 21f73a8 + ebb6c8b
commit ba33995
Show file tree

Hide file tree

Showing 12 changed files with 217 additions and 95 deletions.
diff --git a/app/subject/[id]/page.tsx b/app/subject/[id]/page.tsx
@@ -303,6 +303,11 @@ function SubjectDetails({ subjectId }: { subjectId: string }) {
                           userPreferences.preferences!
                         )}
                       />
+                      <DetailRowBoolean
+                        variant="yes-no"
+                        title="Relevant for academic promotion"
+                        value={subject.weight === 1}
+                      />
                       {average.gradeAmount === average.gradeWeightedAmount ? (
                         <DetailRow
                           title="Grade count"

diff --git a/components/cards/allSubjects/columns.tsx b/components/cards/allSubjects/columns.tsx
@@ -28,7 +28,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
-import { truncateText } from "@/lib/utils";
+import { cn, truncateText } from "@/lib/utils";
 import { AverageWithSubject, Empty } from "@/types/types";
 import Link from "next/link";
 import { isMobile } from "react-device-detect";
@@ -43,6 +43,7 @@ export function columns(
   return [
     {
       id: "subjectName",
+      accessorKey: "subject.name",
       header: ({ column }) => {
         return (
           <Button
@@ -64,6 +65,7 @@ export function columns(
       },
       cell: ({ row }) => {
         let subject: string = row.original.subject.name || "";
+        let isIrrelevant: boolean = row.original.subject.weight === 0;
         let truncated: boolean = truncateText(
           subject,
           isMobile ? 16 : 20
@@ -82,7 +84,12 @@ export function columns(
                 hideText
               />
               <Popover>
-                <PopoverTrigger className="text-left text-wrap break-words max-w-40">
+                <PopoverTrigger
+                  className={cn(
+                    "text-left text-wrap break-words max-w-40",
+                    isIrrelevant && "text-muted-foreground"
+                  )}
+                >
                   {truncatedSubject}
                 </PopoverTrigger>
                 <PopoverContent className="w-fit max-w-80 text-wrap break-words">
@@ -99,7 +106,9 @@ export function columns(
               className="mr-1"
               hideText
             />
-            {subject}
+            <span className={isIrrelevant ? "text-muted-foreground" : ""}>
+              {subject}
+            </span>
           </>
         );
       },
@@ -147,9 +156,9 @@ export function columns(
             <DropdownMenuContent align="end">
               <DropdownMenuLabel>Actions</DropdownMenuLabel>
               <DropdownMenuSeparator />
-              <DropdownMenuItem>
+              <DropdownMenuItem asChild>
                 <Link
-                  className="flex flex-row items-center justify-center gap-3"
+                  className="flex flex-row items-center gap-3"
                   href={`/subject/${average.subject.id}`}
                 >
                   <Eye className="size-4 text-muted-foreground" />

diff --git a/components/cards/average-overview.tsx b/components/cards/average-overview.tsx
@@ -157,8 +157,8 @@ export function AverageOverview({
       )}
       <CardContent>
         {subjectAverages === gradeAverages ? (
-          <Card>
-            <CardHeader className="flex-row gap-3">
+          <Card className="outline outline-border outline-4">
+            <CardHeader className="flex-row gap-3 font-bold">
               Your Average
               <Popover>
                 <PopoverTrigger>
@@ -175,11 +175,11 @@ export function AverageOverview({
                   -
                 </b>
               ) : doesGradePass(subjectAverages, preferences) ? (
-                <b className="block text-5xl text-center items-center self-center text-green-400">
+                <b className="underline decoration-double block text-5xl text-center items-center self-center text-green-400">
                   {round(subjectAverages, 2)}
                 </b>
               ) : (
-                <b className="block text-5xl text-center items-center self-center text-red-400">
+                <b className="underline decoration-double block text-5xl text-center items-center self-center text-red-400">
                   {round(subjectAverages, 2)}
                 </b>
               )}
@@ -188,7 +188,7 @@ export function AverageOverview({
         ) : (
           <CardBoard>
             <CardBoard className="flex-col sm:flex-row ">
-              <Card>
+              <Card className="outline outline-border outline-4">
                 <CardHeader className="flex-row gap-3">
                   {t("subject-overview.subject-average")}
                   <Popover>
@@ -206,11 +206,11 @@ export function AverageOverview({
                       -
                     </b>
                   ) : doesGradePass(subjectAverages, preferences) ? (
-                    <b className="block text-5xl text-center items-center self-center text-green-400">
+                    <b className="underline decoration-double block text-5xl text-center items-center self-center text-green-400">
                       {round(subjectAverages, 2)}
                     </b>
                   ) : (
-                    <b className="block text-5xl text-center items-center self-center text-red-400">
+                    <b className="underline decoration-double block text-5xl text-center items-center self-center text-red-400">
                       {round(subjectAverages, 2)}
                     </b>
                   )}

diff --git a/components/cards/failingGradesCard/columns.tsx b/components/cards/failingGradesCard/columns.tsx
@@ -11,7 +11,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
-import { truncateText } from "@/lib/utils";
+import { cn, truncateText } from "@/lib/utils";
 import { AverageWithSubject, Empty } from "@/types/types";
 import { isMobile } from "react-device-detect";
 export function columns(): ColumnDef<AverageWithSubject>[] {
@@ -42,6 +42,7 @@ export function columns(): ColumnDef<AverageWithSubject>[] {
       },
       cell: ({ row }) => {
         let subject: string = row.original.subject.name || "";
+        let isIrrelevant: boolean = row.original.subject.weight === 0;
         let truncated: boolean = truncateText(
           subject,
           isMobile ? 16 : 20
@@ -60,7 +61,12 @@ export function columns(): ColumnDef<AverageWithSubject>[] {
                 hideText
               />
               <Popover>
-                <PopoverTrigger className="text-left text-wrap break-words max-w-40">
+                <PopoverTrigger
+                  className={cn(
+                    "text-left text-wrap break-words max-w-40",
+                    isIrrelevant && "text-muted-foreground"
+                  )}
+                >
                   {truncatedSubject}
                 </PopoverTrigger>
                 <PopoverContent className="w-fit max-w-80 text-wrap break-words">
@@ -77,7 +83,9 @@ export function columns(): ColumnDef<AverageWithSubject>[] {
               className="mr-1"
               hideText
             />
-            {subject}
+            <span className={isIrrelevant ? "text-muted-foreground" : ""}>
+              {subject}
+            </span>
           </>
         );
       },

diff --git a/components/cards/passingGradesCard/columns.tsx b/components/cards/passingGradesCard/columns.tsx
@@ -11,7 +11,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
-import { truncateText } from "@/lib/utils";
+import { cn, truncateText } from "@/lib/utils";
 import { AverageWithSubject, Empty } from "@/types/types";
 import { isMobile } from "react-device-detect";
 export function columns(): ColumnDef<AverageWithSubject>[] {
@@ -42,6 +42,7 @@ export function columns(): ColumnDef<AverageWithSubject>[] {
       },
       cell: ({ row }) => {
         let subject: string = row.original.subject.name || "";
+        let isIrrelevant: boolean = row.original.subject.weight === 0;
         let truncated: boolean = truncateText(
           subject,
           isMobile ? 16 : 20
@@ -60,7 +61,12 @@ export function columns(): ColumnDef<AverageWithSubject>[] {
                 hideText
               />
               <Popover>
-                <PopoverTrigger className="text-left text-wrap break-words max-w-40">
+                <PopoverTrigger
+                  className={cn(
+                    "text-left text-wrap break-words max-w-40",
+                    isIrrelevant && "text-muted-foreground"
+                  )}
+                >
                   {truncatedSubject}
                 </PopoverTrigger>
                 <PopoverContent className="w-fit max-w-80 text-wrap break-words">
@@ -77,7 +83,9 @@ export function columns(): ColumnDef<AverageWithSubject>[] {
               className="mr-1"
               hideText
             />
-            {subject}
+            <span className={isIrrelevant ? "text-muted-foreground" : ""}>
+              {subject}
+            </span>
           </>
         );
       },

diff --git a/components/create-subject-form.tsx b/components/create-subject-form.tsx
@@ -6,20 +6,23 @@ import { z } from "zod";
 import { useCategory } from "@/components/category-provider";
 import { usePreferences } from "@/components/preferences-provider";
 import { Button } from "@/components/ui/button";
+import { Highlight } from "@/components/ui/card-stack";
 import {
   Form,
   FormControl,
+  FormDescription,
   FormField,
   FormItem,
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
 import { LoadingSpinner } from "@/components/ui/spinner";
+import { Switch } from "@/components/ui/switch";
 import { catchProblem } from "@/lib/problem";
 import { quickCreateSubject } from "@/lib/services/subject-service";
 import { addSubjectToast } from "@/lib/toasts";
 import useTranslation from "next-translate/useTranslation";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Asterisk } from "./ui/asterisk";
 import { Input } from "./ui/input";
 
@@ -37,6 +40,7 @@ export function CreateSubjectForm({
 
   type FormValues = {
     subject: string;
+    showInOverview: boolean;
   };
 
   const FormSchema = z.object({
@@ -47,10 +51,12 @@ export function CreateSubjectForm({
       .trim()
       .min(1, { message: t("errors.required") })
       .max(255),
+    showInOverview: z.boolean().default(true),
   });
 
   const defaultValues: DefaultValues<FormValues> = {
     subject: "",
+    showInOverview: true,
   };
 
   const form = useForm<z.infer<typeof FormSchema>>({
@@ -60,9 +66,10 @@ export function CreateSubjectForm({
   async function onSubmit(data: z.infer<typeof FormSchema>) {
     setSubmitting(true);
     const subject = data.subject;
+    const weight = data.showInOverview ? 1 : 0;
     try {
       let insertedId: number | undefined = catchProblem(
-        await quickCreateSubject(subject, categoryState.category?.id),
+        await quickCreateSubject(subject, weight, categoryState.category?.id),
         true
       );
 
@@ -80,6 +87,11 @@ export function CreateSubjectForm({
     }
   }
 
+  useEffect(() => {
+    form.reset(defaultValues);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6 m-5">
@@ -99,6 +111,40 @@ export function CreateSubjectForm({
             </FormItem>
           )}
         />
+        <FormField
+          control={form.control}
+          name="showInOverview"
+          render={({ field }) => (
+            <FormItem className="flex flex-row items-center gap-1 justify-between rounded-lg border p-4">
+              <div className="space-y-0.5">
+                <FormLabel className="text-base">
+                  Relevant for academic promotion
+                </FormLabel>
+                <FormDescription>
+                  {field.value ? (
+                    <>
+                      This subject will be{" "}
+                      <Highlight colorName="green">included</Highlight> while
+                      calculating the total average
+                    </>
+                  ) : (
+                    <>
+                      This subject will be{" "}
+                      <Highlight colorName="red">ignored</Highlight> while
+                      calculating the total average
+                    </>
+                  )}
+                </FormDescription>
+              </div>
+              <FormControl>
+                <Switch
+                  checked={field.value}
+                  onCheckedChange={field.onChange}
+                />
+              </FormControl>
+            </FormItem>
+          )}
+        />
 
         <Button className="w-full" type="submit" disabled={submitting}>
           {submitting ? <LoadingSpinner /> : t("actions.submit")}