feat: little redesign

* feat: redesign of stars, course group item, add opinions count * feat: helping tooltip
Solvro · Jan 16, 2025 · a1ef34c · a1ef34c
1 parent 5c77215
commit a1ef34c
Show file tree

Hide file tree

Showing 7 changed files with 104 additions and 53 deletions.
diff --git a/frontend/src/app/plans/edit/[id]/page.client.tsx b/frontend/src/app/plans/edit/[id]/page.client.tsx
@@ -401,6 +401,7 @@ export function CreateNewPlanPage({
                                 spotsOccupied: g.spotsOccupied,
                                 spotsTotal: g.spotsTotal,
                                 averageRating: g.averageRating,
+                                opinionsCount: g.opinionsCount,
                               }) satisfies ExtendedGroup,
                           ),
                         }))

diff --git a/frontend/src/components/class-block-stars.tsx b/frontend/src/components/class-block-stars.tsx
@@ -1,5 +1,7 @@
 import { StarHalfIcon, StarIcon } from "lucide-react";
 
+import { cn } from "@/lib/utils";
+
 function customRound(rating: number): number {
   const integerPart = Math.floor(rating);
   const decimalPart = rating - integerPart;
@@ -13,17 +15,23 @@ function customRound(rating: number): number {
   }
 }
 
-export function StarsRating({ rating }: { rating: number }) {
+export function StarsRating({
+  rating,
+  hideStars = false,
+}: {
+  rating: number;
+  hideStars?: boolean;
+}) {
   const roundedRating = customRound(rating);
   const fullPoints = Math.floor(roundedRating);
   const isHalfPoint = roundedRating % 1 === 0.5;
   return (
-    <div className="flex gap-1">
+    <div className={cn("flex gap-1", { hidden: hideStars })}>
       {Array.from({ length: fullPoints }).map((_, index) => {
         return (
           <StarIcon
-            fill="#9e881c"
-            color="#9e881c"
+            fill="#ffe605"
+            color="#cf9013"
             // eslint-disable-next-line react/no-array-index-key
             key={index}
             width={10}
@@ -32,7 +40,7 @@ export function StarsRating({ rating }: { rating: number }) {
         );
       })}
       {isHalfPoint ? (
-        <StarHalfIcon fill="#9e881c" color="#9e881c" width={10} height={10} />
+        <StarHalfIcon fill="#ffe605" color="#cf9013" width={10} height={10} />
       ) : null}
     </div>
   );

diff --git a/frontend/src/components/class-block.tsx b/frontend/src/components/class-block.tsx
@@ -4,14 +4,24 @@ import React from "react";
 import { StarsRating } from "@/components/class-block-stars";
 import { cn } from "@/lib/utils";
 
-export const typeClasses = {
-  W: "bg-red-300",
-  L: "bg-blue-300",
-  C: "bg-green-300",
-  S: "bg-orange-300",
-  P: "bg-fuchsia-200",
+import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
+
+const typeBgColors = {
+  W: "bg-red-100",
+  L: "bg-blue-100",
+  C: "bg-green-100",
+  S: "bg-orange-100",
+  P: "bg-fuchsia-100",
 } as const;
 
+const typeBarColors = {
+  W: "bg-red-500",
+  L: "bg-blue-500",
+  C: "bg-green-500",
+  S: "bg-orange-500",
+  P: "bg-fuchsia-500",
+};
+
 function calculatePosition(startTime: string, endTime: string) {
   const [startHour, startMinute] = startTime.split(":").map(Number);
   const [endHour, endMinute] = endTime.split(":").map(Number);
@@ -39,6 +49,7 @@ export function ClassBlock({
   spotsOccupied,
   spotsTotal,
   averageRating,
+  opinionsCount,
   onClick,
   isReadonly = false,
 }: {
@@ -54,55 +65,76 @@ export function ClassBlock({
   spotsOccupied: number;
   spotsTotal: number;
   averageRating: number;
+  opinionsCount: number;
   onClick: () => void;
   isReadonly?: boolean;
 }) {
   const position = calculatePosition(startTime, endTime);
   const [startGrid, durationSpan] = position;
   return (
-    <button
-      suppressHydrationWarning={true}
-      disabled={isDisabled}
-      onClick={isReadonly ? undefined : onClick}
-      style={{
-        gridColumnStart: startGrid,
-        gridColumnEnd: `span ${durationSpan.toString()}`,
-      }}
-      className={cn(
-        position,
-        typeClasses[courseType],
-        `relative flex flex-col truncate rounded-md p-2 shadow-md`,
-        isChecked
-          ? "cursor-pointer"
-          : isDisabled
-            ? "opacity-20"
-            : "cursor-pointer opacity-60",
-        isReadonly ? "cursor-default" : null,
-      )}
-    >
-      <div className="flex w-full justify-between">
-        <div className="flex gap-1">
-          <p>{`${courseType} ${week === "" ? "" : `|${week}`}`}</p>
-        </div>
-        <p>{`Grupa ${groupNumber}`}</p>
-      </div>
-      <p className="truncate font-bold">{courseName}</p>
-      <p className="truncate font-semibold">{lecturer}</p>
-      <p className="mt-2 flex w-full justify-between truncate">
-        <UsersRoundIcon className="size-3" />
-        <span
+    <Tooltip delayDuration={500}>
+      <TooltipTrigger asChild={true}>
+        <button
+          suppressHydrationWarning={true}
+          disabled={isDisabled}
+          onClick={isReadonly ? undefined : onClick}
+          style={{
+            gridColumnStart: startGrid,
+            gridColumnEnd: `span ${durationSpan.toString()}`,
+          }}
           className={cn(
-            "font-bold",
-            spotsOccupied >= spotsTotal ? "text-red-500" : null,
+            position,
+            typeBgColors[courseType],
+            `border-l-3 relative flex flex-col overflow-hidden truncate rounded-md p-2 shadow-md`,
+            isChecked
+              ? "cursor-pointer"
+              : isDisabled
+                ? "opacity-20"
+                : "cursor-pointer opacity-60",
+            isReadonly ? "cursor-default" : null,
           )}
         >
-          {spotsOccupied}/{spotsTotal}
-        </span>
-      </p>
-      <p className="flex w-full justify-between truncate">
-        <StarsRating rating={averageRating > 0 ? averageRating : 1} />
-        <span className="font-bold">{averageRating}</span>
-      </p>
-    </button>
+          <div
+            className={cn(
+              "absolute inset-y-0 left-0 top-0 w-[4px]",
+              typeBarColors[courseType],
+            )}
+          ></div>
+          <div className="flex w-full justify-between">
+            <div className="flex gap-1">
+              <p>{`${courseType} ${week === "" ? "" : `|${week}`}`}</p>
+            </div>
+            <p>{`Grupa ${groupNumber}`}</p>
+          </div>
+          <p className="truncate font-bold">{courseName}</p>
+          <p className="truncate font-semibold">{lecturer}</p>
+          <p className="mt-2 flex w-full justify-between truncate">
+            <UsersRoundIcon className="size-3" />
+            <span
+              className={cn(
+                "font-bold",
+                spotsOccupied >= spotsTotal ? "text-red-500" : null,
+              )}
+            >
+              {spotsOccupied}/{spotsTotal}
+            </span>
+          </p>
+          <div className={"flex w-full justify-between truncate"}>
+            <StarsRating
+              rating={averageRating > 0 ? averageRating : 1}
+              hideStars={durationSpan < 10}
+            />
+            <p className="font-bold">
+              {averageRating} ({opinionsCount})
+            </p>
+          </div>
+        </button>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>
+          {courseName} - {lecturer}
+        </p>
+      </TooltipContent>
+    </Tooltip>
   );
 }
diff --git a/frontend/src/components/groups-accordion.tsx b/frontend/src/components/groups-accordion.tsx
@@ -8,10 +8,17 @@ import {
 } from "@/components/ui/accordion";
 import { cn } from "@/lib/utils";
 
-import { typeClasses } from "./class-block";
 import { Button } from "./ui/button";
 import { Checkbox } from "./ui/checkbox";
 
+const typeClasses = {
+  W: "bg-red-300",
+  L: "bg-blue-300",
+  C: "bg-green-300",
+  S: "bg-orange-300",
+  P: "bg-fuchsia-200",
+} as const;
+
 export function GroupsAccordionItem({
   registrationName,
   onCourseCheck,

diff --git a/frontend/src/lib/types.ts b/frontend/src/lib/types.ts
@@ -16,6 +16,7 @@ export interface ClassBlockProps {
   spotsOccupied: number;
   spotsTotal: number;
   averageRating: number;
+  opinionsCount: number;
 }
 
 export interface Registration {

diff --git a/frontend/src/lib/utils/update-local-plan.ts b/frontend/src/lib/utils/update-local-plan.ts
@@ -60,6 +60,7 @@ export const updateLocalPlan = async (
             startTime: g.startTime.split(":").slice(0, 2).join(":"),
             spotsOccupied: g.spotsOccupied,
             spotsTotal: g.spotsTotal,
+            opinionsCount: g.opinionsCount,
             averageRating: g.averageRating,
           }));
           return {

diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
@@ -85,6 +85,7 @@ export type CourseType = {
     averageRating: number;
     createdAt: string;
     updatedAt: string;
+    opinionsCount: number;
   }[];
 }[];