Feat: added free seating checkbox

Author: Akalanka47000

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

@@ -1,5 +1,8 @@
+import { useCallback } from "react";
 import { useSelector } from "react-redux";
-import { selectPolylineById } from "@/store/reducers/editor";
+import { Checkbox } from "@/components/core";
+import { store } from "@/store";
+import { selectPolylineById, updatePolyline } from "@/store/reducers/editor";
 import { d3Extended, rgbToHex } from "@/utils";
 import { default as ControlInput } from "../../control-input";
 import { default as SectionSelector } from "./section-selector";
@@ -8,6 +11,16 @@ const PolylineSelectControls = () => {
   const selectedElementIds = useSelector((state: any) => state.editor.selectedElementIds);
   const firstPolyline = useSelector(selectPolylineById(selectedElementIds[0]));
   const firstElement = document.getElementById(selectedElementIds[0]);
+
+  const onCheckedChange = useCallback(
+    (value: boolean) => {
+      selectedElementIds.forEach((id: string) => {
+        store.dispatch(updatePolyline({ id, freeSeating: value }));
+      });
+    },
+    [selectedElementIds]
+  );
+
   return (
     <div className="flex flex-col gap-4 py-1">
       <SectionSelector firstElement={firstElement} selectedElementIds={selectedElementIds} />
@@ -36,6 +49,20 @@ const PolylineSelectControls = () => {
             });
           }}
         />
+        <div className="col-span-3 w-full flex justify-end items-center gap-[2.3rem]">
+          <Checkbox
+            id="stk-free-section-marker"
+            checked={firstPolyline.freeSeating}
+            onCheckedChange={onCheckedChange}
+            disabled={!!firstPolyline.section}
+          />
+          <label
+            htmlFor="stk-free-section-marker"
+            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+          >
+            Free seating section
+          </label>
+        </div>
       </div>
     </div>
   );

src/components/workspace/elements/polyline.tsx

@@ -1,21 +1,30 @@
 import { forwardRef, useMemo } from "react";
 import { twMerge } from "tailwind-merge";
 import { dataAttributes } from "@/constants";
-import { IPolyline, ISection } from "@/types";
+import { IPolyline, ISTKProps, ISection } from "@/types";
 
 export interface IPolylineProps extends IPolyline {
   className?: string;
+  consumer: ISTKProps;
   sections?: ISection[];
+  onClick: (e: any) => void;
 }
 
 const Polyline: React.FC<IPolylineProps> = forwardRef(
-  ({ id, points, color, stroke, sections, section, ...props }, ref: any) => {
+  ({ id, points, color, stroke, sections, section, onClick, consumer, ...props }, ref: any) => {
     const sectionObject = useMemo(() => sections?.find?.((s) => s.id === section), [sections, section]);
+
+    const localOnClick = (e) => {
+      onClick(e);
+      consumer.events?.onSectionClick?.(sectionObject);
+    };
+
     return (
       <polyline
         ref={ref}
         id={id}
         points={points.map((p) => `${p.x},${p.y}`).join(" ")}
+        onClick={localOnClick}
         {...props}
         style={{ color: sectionObject?.color ?? color ?? "transparent", stroke: sectionObject?.stroke ?? stroke }}
         {...{ [dataAttributes.section]: section }}