Feat: added seat status locked

mezh-hq · Mar 16, 2024 · 1e4db17 · 1e4db17
1 parent fd4bc76
commit 1e4db17
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 37 deletions.
diff --git a/src/components/controls/select/seats/index.tsx b/src/components/controls/select/seats/index.tsx
@@ -28,42 +28,42 @@ const SeatSelectControls = () => {
             store.dispatch(updateSeats({ ids: selectedElementIds, data: { label: e.target.value } }));
           }}
         />
-        <RadioGroup
-          key={firstElement?.getAttribute(dataAttributes.status)}
-          defaultValue={firstElement?.getAttribute(dataAttributes.status) ?? SeatStatus.Available.toString()}
-          onValueChange={(value) => {
-            selectedElementIds.forEach((id: string) => {
-              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);
-              seatLabel?.style("stroke", textColor);
-            });
-          }}
-          className="flex justify-between gap-2 my-1"
-        >
-          {Object.values(SeatStatus).map((status) => {
-            const id = `stk-seat-status-rg-${status}`;
-            return (
-              <div key={id} className="flex items-center gap-x-2">
-                <RadioGroupItem value={status.toString()} id={id} />
-                <Label htmlFor={id}>{status}</Label>
-              </div>
-            );
-          })}
-        </RadioGroup>
       </div>
+      <RadioGroup
+        key={firstElement?.getAttribute(dataAttributes.status)}
+        defaultValue={firstElement?.getAttribute(dataAttributes.status) ?? SeatStatus.Available.toString()}
+        onValueChange={(value) => {
+          selectedElementIds.forEach((id: string) => {
+            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);
+            seatLabel?.style("stroke", textColor);
+          });
+        }}
+        className="w-full flex flex-wrap flex-row-reverse items-end gap-2 gap-y-4 my-1"
+      >
+        {Object.values(SeatStatus).map((status) => {
+          const id = `stk-seat-status-rg-${status}`;
+          return (
+            <div key={id} className="flex items-center gap-x-2">
+              <RadioGroupItem value={status.toString()} id={id} />
+              <Label htmlFor={id}>{status}</Label>
+            </div>
+          );
+        })}
+      </RadioGroup>
     </div>
   );
 };

diff --git a/src/components/workspace/elements/seat.tsx b/src/components/workspace/elements/seat.tsx
@@ -50,7 +50,7 @@ const Seat: React.FC<ISeatProps> = forwardRef(
         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) {
+        if (status === SeatStatus.Unavailable || status === SeatStatus.Reserved || status === SeatStatus.Locked) {
           seat.style("color", seatStatusColors[status].background);
           seatLabel?.style("stroke", seatStatusColors[status].label);
         } else {

diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -40,5 +40,9 @@ export const seatStatusColors = {
   [SeatStatus.Reserved]: {
     background: "#ff0000",
     label: "#ffffff"
+  },
+  [SeatStatus.Locked]: {
+    background: "#000000",
+    label: "#ffffff"
   }
 };
diff --git a/src/types/elements/seat.ts b/src/types/elements/seat.ts
@@ -11,7 +11,8 @@ export interface ISeatCategory {
 export enum SeatStatus {
   Available = "Available",
   Unavailable = "Unavailable",
-  Reserved = "Reserved"
+  Reserved = "Reserved",
+  Locked = "Locked"
 }
 
 export interface ISeat {