Feat: added seat status colors

Author: Akalanka47000

src/components/controls/select/seats/index.tsx

@@ -1,6 +1,6 @@
 import { useSelector } from "react-redux";
 import { Label, RadioGroup, RadioGroupItem } from "@/components/core";
-import { SeatStatus, dataAttributes } from "@/constants";
+import { SeatStatus, dataAttributes, seatStatusColors } from "@/constants";
 import { store } from "@/store";
 import { updateSeat } from "@/store/reducers/editor";
 import { d3Extended } from "@/utils";
@@ -34,7 +34,22 @@ const SeatSelectControls = () => {
           defaultValue={firstElement?.getAttribute(dataAttributes.status) ?? SeatStatus.Available.toString()}
           onValueChange={(value) => {
             selectedElementIds.forEach((id: string) => {
-              d3Extended.selectById(id).attr(dataAttributes.status, value);
+              const seat = d3Extended.selectById(id);
+              const seatLabel = d3Extended.selectById(`${id}-label`);
+              seat.attr(dataAttributes.status, value);
+              let color = seatStatusColors[value].background;
+              let textColor = seatStatusColors[value].label;
+              if (value === SeatStatus.Available) {
+                const category = store
+                  .getState()
+                  .editor.categories.find((c) => c.id === seat.attr(dataAttributes.category));
+                if (category) {
+                  color = category.color;
+                  textColor = category.textColor;
+                }
+              }
+              seat.style("color", color, "important");
+              seatLabel?.style("stroke", textColor, "important");
             });
           }}
           className="flex justify-between gap-2 my-1"

src/components/workspace/elements/seat.jsx

@@ -1,6 +1,6 @@
-import { forwardRef, useEffect } from "react";
+import { forwardRef, useEffect, useMemo } from "react";
 import { twMerge } from "tailwind-merge";
-import { dataAttributes } from "@/constants";
+import { SeatStatus, dataAttributes, seatStatusColors } from "@/constants";
 import { d3Extended } from "@/utils";
 
 export const seatSize = 28;
@@ -14,12 +14,22 @@ const Seat = forwardRef(({ x, y, id, label, categories, category, status, ...pro
 
   if (labelLength >= 2) textX -= (seatLabelFontSize / 2.75) * (labelLength - 1);
 
-  const categoryObject = categories?.find?.((c) => c.id === category);
+  const categoryObject = useMemo(() => categories?.find?.((c) => c.id === category), [categories, category]);
 
   useEffect(() => {
-    if (ref.current && categoryObject) {
-      d3Extended.select(ref.current).style("color", categoryObject.color, "important");
-      d3Extended.selectById(`${id}-label`).style("stroke", categoryObject.textColor, "important");
+    if (ref.current) {
+      const seat = d3Extended.select(ref.current);
+      const seatLabel = d3Extended.selectById(`${id}-label`);
+      const status = seat.attr(dataAttributes.status);
+      if (status === SeatStatus.Unavailable || status === SeatStatus.Reserved) {
+        seat.style("color", seatStatusColors[status].background, "important");
+        seatLabel?.style("stroke", seatStatusColors[status].label, "important");
+      } else {
+        if (categoryObject) {
+          seat.style("color", categoryObject.color, "important");
+          seatLabel?.style("stroke", categoryObject.textColor, "important");
+        }
+      }
     }
   }, [ref, categoryObject]);
 

src/constants/index.ts

@@ -30,3 +30,18 @@ export enum SeatStatus {
   Unavailable = "Unavailable",
   Reserved = "Reserved"
 }
+
+export const seatStatusColors = {
+  [SeatStatus.Available]: {
+    background: "#ffffff",
+    label: "#000000"
+  },
+  [SeatStatus.Unavailable]: {
+    background: "#e0e0e0",
+    label: "#000000"
+  },
+  [SeatStatus.Reserved]: {
+    background: "#ff0000",
+    label: "#ffffff"
+  }
+};