Feat: added on free seat click event

mezh-hq · Apr 7, 2024 · 0ffd956 · 0ffd956
1 parent c0964a4
commit 0ffd956
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 3 deletions.
diff --git a/src/components/workspace/elements/polyline.tsx b/src/components/workspace/elements/polyline.tsx
@@ -1,27 +1,42 @@
 import { forwardRef, useMemo } from "react";
 import { twMerge } from "tailwind-merge";
 import { dataAttributes, selectors } from "@/constants";
-import { IPolyline, ISTKProps, ISection } from "@/types";
+import { IPolyline, ISTKProps, ISeatCategory, ISection } from "@/types";
 import { d3Extended, getRelativeWorkspaceClickCoords } from "@/utils";
 import { panAndZoomWithTransition } from "../zoom";
 
 export interface IPolylineProps extends IPolyline {
   className?: string;
   consumer: ISTKProps;
   sections?: ISection[];
+  categories?: ISeatCategory[];
   onClick: (e: any) => void;
   isSelected?: boolean;
 }
 
 const Polyline: React.FC<IPolylineProps> = forwardRef(
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  ({ id, points, color, stroke, sections, section, onClick, consumer, isSelected: _, ...props }, ref: any) => {
+  (
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    { id, points, color, stroke, sections, categories, section, onClick, consumer, isSelected: _, ...props },
+    ref: any
+  ) => {
     const sectionObject = useMemo(() => sections?.find?.((s) => s.id === section), [sections, section]);
 
     const localOnClick = (e) => {
       onClick(e);
       if (sectionObject) {
         consumer.events?.onSectionClick?.(sectionObject);
+        if (consumer.events?.onFreeSeatClick && sectionObject.freeSeating) {
+          const category = categories?.find((c: ISeatCategory) => c.section === sectionObject.id);
+          if (category) {
+            consumer.events.onFreeSeatClick({
+              category: {
+                ...category,
+                section: sectionObject
+              }
+            });
+          }
+        }
         if (!sectionObject.freeSeating) {
           const visibilityOffset = +d3Extended.select(selectors.workspaceGroup).attr(dataAttributes.visibilityOffset);
           if (visibilityOffset > 0) {

diff --git a/src/components/workspace/index.tsx b/src/components/workspace/index.tsx
@@ -110,6 +110,7 @@ export const Workspace: React.FC<ISTKProps> = (props) => {
               type={ElementType.Polyline}
               points={e.points}
               sections={sections}
+              categories={categories}
               section={e.section}
               {...elementProps(e)}
             />

diff --git a/src/types/elements/seat.ts b/src/types/elements/seat.ts
@@ -24,6 +24,10 @@ export interface ISeat {
   status?: SeatStatus | string;
 }
 
+export interface IFreeSeat {
+  category: IPopulatedSeatCategory;
+}
+
 export interface IPopulatedSeatCategory extends Omit<ISeatCategory, "section"> {
   section?: ISection;
 }

diff --git a/src/types/index.ts b/src/types/index.ts
@@ -1,5 +1,6 @@
 import type {
   IBooth,
+  IFreeSeat,
   IImage,
   IPolyline,
   IPopulatedSeat,
@@ -24,6 +25,8 @@ export interface ICoordinates {
 
 export interface IEvents {
   onSeatClick?: (seat: IPopulatedSeat) => void;
+  /** Triggered once a free seating section is clicked */
+  onFreeSeatClick?: (seat: IFreeSeat) => void;
   /** Only applicable in user mode */
   onSeatHover?: (seat: IPopulatedSeat, coords: ICoordinates) => void;
   /** Only applicable in user mode */