Feat: added section selector dropdown

Author: Akalanka47000

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "react-seat-toolkit",
+  "name": "@mezh-hq/react-seat-toolkit",
   "version": "0.0.0",
   "description": "React UI library to design and render seat layouts",
   "main": "src/index.jsx",

src/components/controls/select/polyline.jsx renamed to src/components/controls/select/polyline/index.tsx

@@ -1,14 +1,14 @@
 import { useSelector } from "react-redux";
 import { d3Extended, rgbToHex } from "@/utils";
-import { default as ControlInput } from "../control-input";
+import { default as ControlInput } from "../../control-input";
+import { default as SectionSelector } from "./section-selector";
 
 const PolylineSelectControls = () => {
-  const selectedElementIds = useSelector((state) => state.editor.selectedElementIds);
-
+  const selectedElementIds = useSelector((state: any) => state.editor.selectedElementIds);
   const firstElement = document.getElementById(selectedElementIds[0]);
-
   return (
     <div className="flex flex-col gap-4 py-1">
+      <SectionSelector firstElement={firstElement} selectedElementIds={selectedElementIds} />
       <div className="grid grid-cols-3 items-center gap-4">
         <ControlInput
           id="polyline-stroke-input"

src/components/controls/select/polyline/section-selector.tsx

@@ -0,0 +1,101 @@
+import { Trash2 } from "lucide-react";
+import { useSelector } from "react-redux";
+import { debounce } from "lodash";
+import { twMerge } from "tailwind-merge";
+import { Input, Popover, PopoverContent, PopoverTrigger } from "@/components/core";
+import { dataAttributes } from "@/constants";
+import { store } from "@/store";
+import { addSection, deleteSection, updatePolyline, updateSection } from "@/store/reducers/editor";
+import { Callout, Caption, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../../core";
+
+const onAddSection = () => store.dispatch(addSection(undefined));
+
+const onDeleteSection = (id: string) => store.dispatch(deleteSection(id));
+
+const onUpdateSection = debounce((section) => store.dispatch(updateSection(section)), 150);
+
+const SectionSelector = ({ firstElement, selectedElementIds }) => {
+  const sections = useSelector((state: any) => state.editor.sections);
+  return (
+    <>
+      <div className="w-full flex justify-between items-center gap-12">
+        <Callout className="font-semibold">Sections</Callout>
+        <Popover>
+          <PopoverTrigger>
+            <Caption className="text-blue-500 hover:text-blue-600 transform translate-y-0.5 cursor-pointer transition-all duration-medium">
+              Manage
+            </Caption>
+          </PopoverTrigger>
+          <PopoverContent className="bg-white w-80 py-4 mr-4">
+            <div className="grid gap-4">
+              <div className="flex flex-col gap-2">
+                <h4 className="font-bold leading-none pb-1">Manage Sections</h4>
+                <hr />
+                <span
+                  className="hover:text-gray-500 cursor-pointer transition-all duration-medium"
+                  onClick={onAddSection}
+                >
+                  + Add Section
+                </span>
+                <hr />
+              </div>
+              <div className="flex flex-col gap-4">
+                {sections.map((section, index) => (
+                  <div key={`category-${section.id}`} className="flex justify-start items-center gap-4">
+                    <input
+                      defaultValue={section.color}
+                      type="color"
+                      className="flex-shrink-0 w-6 h-6 p-0 bg-white rounded-color-input"
+                      onChange={(e) => onUpdateSection({ ...section, color: e.target.value })}
+                    />
+                    <Input
+                      defaultValue={section.name}
+                      className="h-8"
+                      onChange={(e) => onUpdateSection({ ...section, name: e.target.value })}
+                    />
+                    <Trash2
+                      size={22}
+                      className={twMerge(
+                        "hover:text-gray-500 flex-shrink-0 cursor-pointer transition-all duration-medium",
+                        index === 0 && "opacity-0 pointer-events-none"
+                      )}
+                      onClick={() => onDeleteSection(section.id)}
+                    />
+                  </div>
+                ))}
+              </div>
+            </div>
+          </PopoverContent>
+        </Popover>
+      </div>
+      <Select
+        onValueChange={(value) => {
+          selectedElementIds.forEach((id: string) =>
+            store.dispatch(updatePolyline({ id, section: value === "0" ? null : value }))
+          );
+        }}
+        defaultValue={firstElement?.getAttribute?.(dataAttributes.section) || undefined}
+      >
+        <SelectTrigger className="w-full">
+          <SelectValue placeholder="Select Section" />
+        </SelectTrigger>
+        <SelectContent className="bg-white">
+          {sections.map((section) => (
+            <SelectItem key={section.id} value={section.id}>
+              <div className="flex gap-3 items-center">
+                {section.id === 0 ? (
+                  <div className="w-4 h-0.5 bg-black" />
+                ) : (
+                  <div className="h-4 w-4 rounded-full" style={{ backgroundColor: section.color }} />
+                )}{" "}
+                {section.name}
+              </div>
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </>
+  );
+};
+
+export default SectionSelector;

src/components/workspace/elements/polyline.jsx

@@ -1,14 +1,16 @@
 import { forwardRef } from "react";
 import { twMerge } from "tailwind-merge";
+import { dataAttributes } from "@/constants";
 
-const Polyline = forwardRef(({ id, points, color, stroke, ...props }, ref) => {
+const Polyline = forwardRef(({ id, points, color, stroke, section, ...props }, ref) => {
   return (
     <polyline
       ref={ref}
       id={id}
       points={points.map((p) => `${p.x},${p.y}`).join(" ")}
       {...props}
       style={{ color: color ?? "transparent", stroke }}
+      {...{ [dataAttributes.section]: section }}
       className={twMerge(props.className)}
     />
   );

src/constants/index.ts

@@ -22,7 +22,8 @@ export const dataAttributes = {
   elementType: "data-element-type",
   shape: "data-shape",
   category: "data-category",
-  status: "data-status"
+  status: "data-status",
+  section: "data-section"
 };
 
 export enum SeatStatus {

src/store/reducers/editor/index.ts

@@ -38,9 +38,29 @@ const initialState = {
     }
   ],
   sections: [
+    {
+      id: 0,
+      name: "No Section",
+      color: "#ffffff"
+    },
+    {
+      id: uuidv4(),
+      name: "Section 1",
+      color: "#000000",
+      freeSeating: true,
+      capacity: 100
+    },
+    {
+      id: uuidv4(),
+      name: "Section 2",
+      color: "#FF0000",
+      freeSeating: false
+    },
     {
       id: uuidv4(),
-      name: "Section 1"
+      name: "Section 3",
+      color: "#0000FF",
+      freeSeating: false
     }
   ],
   selectedPolylineId: null,
@@ -132,6 +152,10 @@ export const slice = createSlice({
     addPolyline: (state, action) => {
       state.polylines.push(action.payload);
     },
+    updatePolyline(state, action) {
+      const index = state.polylines.findIndex((polyline) => polyline.id === action.payload.id);
+      state.polylines[index] = { ...state.polylines[index], ...action.payload };
+    },
     deletePolyline: (state, action) => {
       state.polylines = state.polylines.filter((polyline) => polyline.id !== action.payload);
     },
@@ -165,13 +189,18 @@ export const slice = createSlice({
     addSection: (state) => {
       state.sections.push({
         id: uuidv4(),
-        name: `Section ${state.sections.length + 1}`
+        name: `Section ${state.sections.length + 1}`,
+        color: "#000000",
+        freeSeating: false
       });
     },
     updateSection: (state, action) => {
       const index = state.sections.findIndex((section) => section.id === action.payload.id);
       state.sections[index] = action.payload;
     },
+    deleteSection: (state, action) => {
+      state.sections = state.sections.filter((section) => section.id !== action.payload);
+    },
     setSelectedPolylineId: (state, action) => {
       state.selectedPolylineId = action.payload;
     }
@@ -201,6 +230,7 @@ export const {
   addShape,
   deleteShape,
   addPolyline,
+  updatePolyline,
   deletePolyline,
   addPolylinePoint,
   addImage,
@@ -210,6 +240,7 @@ export const {
   updateCategory,
   addSection,
   updateSection,
+  deleteSection,
   setSelectedPolylineId
 } = slice.actions;