From 223e1c8d00ff47ec35a323999e2094295e063b22 Mon Sep 17 00:00:00 2001
From: Akalanka Perera <akalankaperera128@gmail.com>
Date: Sat, 8 Jun 2024 12:27:09 +0530
Subject: [PATCH] Feat: added flag to disable category deletion if there are
 reserved seats

---
 .../controls/select/seats/categorizer.tsx     | 126 ++++++++++--------
 src/types/index.ts                            |   2 +
 2 files changed, 71 insertions(+), 57 deletions(-)

diff --git a/src/components/controls/select/seats/categorizer.tsx b/src/components/controls/select/seats/categorizer.tsx
index 811100a..b19bac5 100644
--- a/src/components/controls/select/seats/categorizer.tsx
+++ b/src/components/controls/select/seats/categorizer.tsx
@@ -8,7 +8,7 @@ import { Input, Popover, PopoverContent, PopoverTrigger } from "@/components/cor
 import { dataAttributes } from "@/constants";
 import { store } from "@/store";
 import { addCategory, deleteCategory, updateCategory, updateSeats } from "@/store/reducers/editor";
-import { ISTKProps } from "@/types";
+import { ISTKProps, SeatStatus } from "@/types";
 import { Callout, Caption, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../../core";
 
 const onAddCategory = () => store.dispatch(addCategory(undefined));
@@ -29,7 +29,7 @@ type IControlProps = Pick<ISTKProps, "options" | "styles">;
 const Categorizer = ({ firstElement, selectedElementIds, options }: IControlProps & Record<string, any>) => {
   const categories = useSelector((state: any) => state.editor.categories);
   const sections = useSelector((state: any) => state.editor.sections);
-
+  const seats = useSelector((state: any) => state.editor.seats);
   return (
     <>
       <div className="w-full flex justify-between items-center gap-12">
@@ -54,65 +54,77 @@ const Categorizer = ({ firstElement, selectedElementIds, options }: IControlProp
                 <hr />
               </div>
               <div className="flex flex-col gap-4">
-                {categories.map((category) => (
-                  <div key={`category-${category.id}`} className="flex justify-start items-center gap-4">
-                    <input
-                      defaultValue={category.color}
-                      type="color"
-                      className="flex-shrink-0 w-6 h-6 p-0 bg-white rounded-color-input"
-                      onChange={(e) => onUpdateCategory({ ...category, color: e.target.value })}
-                    />
-                    <input
-                      defaultValue={category.textColor}
-                      type="color"
-                      className="flex-shrink-0 w-6 h-6 p-0  bg-white square-color-input"
-                      onChange={(e) => onUpdateCategory({ ...category, textColor: e.target.value })}
-                    />
-                    <Input
-                      defaultValue={category.name}
-                      className="h-8"
-                      onChange={(e) => onUpdateCategory({ ...category, name: e.target.value })}
-                    />
-                    <Popover>
-                      <PopoverTrigger>
-                        <LayoutTemplate
+                {categories.map((category) => {
+                  const displayDisabledDelete =
+                    options?.disableCategoryDeleteIfReserved &&
+                    seats?.some(
+                      (seat: any) =>
+                        seat.category === category.id &&
+                        (seat.status === SeatStatus.Reserved || seat.status === SeatStatus.Locked)
+                    );
+                  return (
+                    <div key={`category-${category.id}`} className="flex justify-start items-center gap-4">
+                      <input
+                        defaultValue={category.color}
+                        type="color"
+                        className="flex-shrink-0 w-6 h-6 p-0 bg-white rounded-color-input"
+                        onChange={(e) => onUpdateCategory({ ...category, color: e.target.value })}
+                      />
+                      <input
+                        defaultValue={category.textColor}
+                        type="color"
+                        className="flex-shrink-0 w-6 h-6 p-0  bg-white square-color-input"
+                        onChange={(e) => onUpdateCategory({ ...category, textColor: e.target.value })}
+                      />
+                      <Input
+                        defaultValue={category.name}
+                        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(
+                                "w-full 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",
+                                section.id === category.section && "bg-blue-50 "
+                              )}
+                              {...{ [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>
+                      {!options?.disableCategoryDelete && (
+                        <Trash2
                           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"
+                            "hover:text-gray-500 flex-shrink-0 cursor-pointer transition-all duration-medium",
+                            displayDisabledDelete && "opacity-50 pointer-events-none"
                           )}
+                          onClick={() => onDeleteCategory(category.id)}
                         />
-                      </PopoverTrigger>
-                      <PopoverContent className="bg-white w-auto p-0 mr-4">
-                        {sections.map((section) => (
-                          <PopoverClose
-                            key={section.id}
-                            className={twMerge(
-                              "w-full 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",
-                              section.id === category.section && "bg-blue-50 "
-                            )}
-                            {...{ [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>
-                    {!options?.disableCategoryDelete && (
-                      <Trash2
-                        size={22}
-                        className="hover:text-gray-500 flex-shrink-0 cursor-pointer transition-all duration-medium"
-                        onClick={() => onDeleteCategory(category.id)}
-                      />
-                    )}
-                  </div>
-                ))}
+                      )}
+                    </div>
+                  );
+                })}
               </div>
             </div>
           </PopoverContent>
diff --git a/src/types/index.ts b/src/types/index.ts
index f00d9ce..577698e 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -87,6 +87,8 @@ export interface ISTKProps {
     /** Overrides the default input placeholder at the top left corner of the screen */
     locationInputPlaceholder?: string;
     disableCategoryDelete?: boolean;
+    /** Disables category deletion if there are reserved seats falling under the category */
+    disableCategoryDeleteIfReserved?: boolean;
     disableSectionDelete?: boolean;
   };
   plugins?: IPlugins;