Feat: added category section binding

Akalanka47000 · Akalanka47000 · commit 2723a050d48c · 2024-03-08T10:43:48.000+05:30
diff --git a/src/components/controls/select/polyline/section-selector.tsx b/src/components/controls/select/polyline/section-selector.tsx
@@ -40,35 +40,38 @@ const SectionSelector = ({ firstElement, selectedElementIds }) => {
                 <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.stroke}
-                      type="color"
-                      className="flex-shrink-0 w-6 h-6 p-0 bg-white rounded-color-input"
-                      onChange={(e) => onUpdateSection({ ...section, stroke: 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>
-                ))}
+                {sections.map(
+                  (section, index) =>
+                    section.id !== "0" && (
+                      <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.stroke}
+                          type="color"
+                          className="flex-shrink-0 w-6 h-6 p-0 bg-white rounded-color-input"
+                          onChange={(e) => onUpdateSection({ ...section, stroke: 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>
@@ -89,7 +92,7 @@ const SectionSelector = ({ firstElement, selectedElementIds }) => {
           {sections.map((section) => (
             <SelectItem key={section.id} value={section.id}>
               <div className="flex gap-3 items-center">
-                {section.id === 0 ? (
+                {section.id === "0" ? (
                   <div className="w-4 h-0.5 bg-black" />
                 ) : (
                   <div className="h-4 w-4 rounded-full" style={{ backgroundColor: section.color }} />
diff --git a/src/components/controls/select/seats/categorizer.tsx b/src/components/controls/select/seats/categorizer.tsx
@@ -1,6 +1,9 @@
-import { Trash2 } from "lucide-react";
+import { MouseEvent } from "react";
+import { PopoverClose } from "@radix-ui/react-popover";
+import { LayoutTemplate, 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";
@@ -13,8 +16,16 @@ const onDeleteCategory = (id: string) => store.dispatch(deleteCategory(id));
 
 const onUpdateCategory = debounce((category) => store.dispatch(updateCategory(category)), 150);
 
+const onSectionSelect = (e: MouseEvent<HTMLButtonElement>) => {
+  const element = e.target as HTMLButtonElement;
+  const categoryId = element.getAttribute(dataAttributes.category);
+  const sectionId = element.getAttribute(dataAttributes.section);
+  store.dispatch(updateCategory({ id: categoryId, section: +sectionId === 0 ? null : sectionId }));
+};
+
 const Categorizer = ({ firstElement, selectedElementIds }) => {
   const categories = useSelector((state: any) => state.editor.categories);
+  const sections = useSelector((state: any) => state.editor.sections);
 
   return (
     <>
@@ -59,6 +70,36 @@ const Categorizer = ({ firstElement, selectedElementIds }) => {
                       className="h-8"
                       onChange={(e) => onUpdateCategory({ ...category, name: e.target.value })}
                     />
+                    <Popover>
+                      <PopoverTrigger>
+                        <LayoutTemplate
+                          size={22}
+                          className={twMerge(
+                            "flex-shrink-0 cursor-pointer transition-all duration-medium ",
+                            category.section ? "text-blue-600 hover:text-blue-500" : "hover:text-gray-500"
+                          )}
+                        />
+                      </PopoverTrigger>
+                      <PopoverContent className="bg-white w-auto p-0 mr-4">
+                        {sections.map((section) => (
+                          <PopoverClose
+                            key={section.id}
+                            className={twMerge(
+                              "flex gap-3 items-center py-2 px-4 text-base cursor-pointer hover:bg-gray-100 transition-all duration-medium",
+                              section.id === "0" && "justify-center border-b pb-2"
+                            )}
+                            {...{ [dataAttributes.section]: section.id }}
+                            {...{ [dataAttributes.category]: category.id }}
+                            onClick={onSectionSelect}
+                          >
+                            {section.id !== "0" && (
+                              <div className="h-4 w-4 rounded-full" style={{ backgroundColor: section.color }} />
+                            )}
+                            {section.name}
+                          </PopoverClose>
+                        ))}
+                      </PopoverContent>
+                    </Popover>
                     <Trash2
                       size={22}
                       className="hover:text-gray-500 flex-shrink-0 cursor-pointer transition-all duration-medium"
diff --git a/src/components/core/popover.tsx b/src/components/core/popover.tsx
@@ -8,6 +8,8 @@ const PopoverTrigger = PopoverPrimitive.Trigger;
 
 const PopoverAnchor = PopoverPrimitive.Anchor;
 
+const PopoverClose = PopoverPrimitive.Close;
+
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
@@ -27,4 +29,4 @@ const PopoverContent = React.forwardRef<
 ));
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverClose };
diff --git a/src/components/operations/index.tsx b/src/components/operations/index.tsx
@@ -80,7 +80,7 @@ const Operations: React.FC<ISTKProps> = ({
               Preview
             </Button>
             <Button
-              className={twMerge("py-[0.35rem]", coreStyles?.button?.className)}
+              className={twMerge("py-[0.35rem] text-center", coreStyles?.button?.className)}
               style={coreStyles?.button?.properties}
               onClick={onExportJson}
             >
diff --git a/src/components/workspace/elements/seat.tsx b/src/components/workspace/elements/seat.tsx
@@ -2,7 +2,7 @@ import { forwardRef, useEffect, useMemo } from "react";
 import { twMerge } from "tailwind-merge";
 import { dataAttributes, seatStatusColors } from "@/constants";
 import { ISTKProps } from "@/types";
-import { ISeat, ISeatCategory, SeatStatus } from "@/types/elements";
+import { ISeat, ISeatCategory, ISection, SeatStatus } from "@/types/elements";
 import { d3Extended } from "@/utils";
 
 export const seatSize = 28;
@@ -14,12 +14,17 @@ export interface ISeatProps extends ISeat {
   consumer: ISTKProps;
   element: ISeat;
   categories: ISeatCategory[];
+  sections: ISection[];
   onClick: (e: any) => void;
 }
 
 const Seat: React.FC<ISeatProps> = forwardRef(
-  ({ x, y, id, label, categories, category, status, onClick, consumer, element, ...props }, ref: any) => {
+  ({ x, y, id, label, categories, category, sections, status, onClick, consumer, element, ...props }, ref: any) => {
     const categoryObject = useMemo(() => categories?.find?.((c) => c.id === category), [categories, category]);
+    const sectionObject = useMemo(
+      () => sections?.find?.((s) => s.id === categoryObject?.section),
+      [sections, categoryObject]
+    );
 
     const showLabel = consumer.options?.showSeatLabels ?? true;
 
@@ -55,7 +60,7 @@ const Seat: React.FC<ISeatProps> = forwardRef(
       onClick(e);
       consumer.events?.onSeatClick?.({
         ...element,
-        category: categoryObject
+        category: categoryObject ? { ...categoryObject, section: sectionObject } : null
       });
     };
 
@@ -69,6 +74,7 @@ const Seat: React.FC<ISeatProps> = forwardRef(
           r={seatSize / 2}
           onClick={localOnClick}
           {...{ [dataAttributes.category]: category }}
+          {...{ [dataAttributes.section]: categoryObject?.section }}
           {...{ [dataAttributes.status]: status ?? SeatStatus.Available }}
           {...props}
           className={twMerge(props.className, "filter hover:brightness-[1.05]")}
diff --git a/src/components/workspace/index.tsx b/src/components/workspace/index.tsx
@@ -68,6 +68,7 @@ export const Workspace: React.FC<ISTKProps> = (props) => {
             <Element
               key={e.id}
               type={ElementType.Seat}
+              sections={sections}
               categories={categories}
               category={e.category}
               status={e.status}
diff --git a/src/store/reducers/editor/index.ts b/src/store/reducers/editor/index.ts
@@ -187,7 +187,7 @@ export const slice = createSlice({
     },
     updateCategory: (state, action) => {
       const index = state.categories.findIndex((category) => category.id === action.payload.id);
-      state.categories[index] = action.payload;
+      state.categories[index] = { ...state.categories[index], ...action.payload };
     },
     addSection: (state) => {
       state.sections.push({
@@ -200,7 +200,7 @@ export const slice = createSlice({
     },
     updateSection: (state, action) => {
       const index = state.sections.findIndex((section) => section.id === action.payload.id);
-      state.sections[index] = action.payload;
+      state.sections[index] = { ...state.sections[index], ...action.payload };
     },
     deleteSection: (state, action) => {
       state.sections = state.sections.filter((section) => section.id !== action.payload);
diff --git a/src/types/elements/seat.ts b/src/types/elements/seat.ts
@@ -1,8 +1,11 @@
+import { ISection } from "./polyline";
+
 export interface ISeatCategory {
   id: string;
   name: string;
   color: string;
   textColor: string;
+  section?: string;
 }
 
 export enum SeatStatus {
@@ -20,6 +23,10 @@ export interface ISeat {
   status?: SeatStatus | string;
 }
 
+export interface IPopulatedSeatCategory extends Omit<ISeatCategory, "section"> {
+  section?: ISection;
+}
+
 export interface IPopulatedSeat extends Omit<ISeat, "category"> {
-  category?: ISeatCategory;
+  category?: IPopulatedSeatCategory;
 }

Original file line number	Diff line number	Diff line change
`@@ -80,7 +80,7 @@ const Operations: React.FC<ISTKProps> = ({`
`80`	`80`	`Preview`
`81`	`81`	`</Button>`
`82`	`82`	`<Button`
`83`		`- className={twMerge("py-[0.35rem]", coreStyles?.button?.className)}`
	`83`	`+ className={twMerge("py-[0.35rem] text-center", coreStyles?.button?.className)}`
`84`	`84`	`style={coreStyles?.button?.properties}`
`85`	`85`	`onClick={onExportJson}`
`86`	`86`	`>`