Feat: added option to select no category

mezh-hq · Jun 9, 2024 · a6f60dd · a6f60dd
1 parent 1904fe1
commit a6f60dd
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 3 deletions.
diff --git a/src/components/controls/select/seats/categorizer.tsx b/src/components/controls/select/seats/categorizer.tsx
@@ -55,6 +55,7 @@ const Categorizer = ({ firstElement, selectedElementIds, options }: IControlProp
               </div>
               <div className="flex flex-col gap-4">
                 {categories.map((category) => {
+                  if (category.id === "0") return null;
                   const displayDisabledDelete =
                     options?.disableCategoryDeleteIfReserved &&
                     seats?.some(
@@ -133,7 +134,9 @@ const Categorizer = ({ firstElement, selectedElementIds, options }: IControlProp
       <Select
         key={selectedElementIds?.join(",")}
         onValueChange={(value) => {
-          store.dispatch(updateSeats({ ids: selectedElementIds, data: { category: value } }));
+          store.dispatch(
+            updateSeats({ ids: selectedElementIds, data: { category: +value === 0 ? undefined : value } })
+          );
         }}
         defaultValue={firstElement?.getAttribute?.(dataAttributes.category) || undefined}
       >
@@ -144,7 +147,12 @@ const Categorizer = ({ firstElement, selectedElementIds, options }: IControlProp
           {categories.map((category) => (
             <SelectItem key={category.id} value={category.id}>
               <div className="flex gap-3 items-center">
-                <div className="h-4 w-4 rounded-full" style={{ backgroundColor: category.color }} /> {category.name}
+                {category.id === "0" ? (
+                  <div className="w-4 h-0.5 bg-black" />
+                ) : (
+                  <div className="h-4 w-4 rounded-full" style={{ backgroundColor: category.color }} />
+                )}{" "}
+                {category.name}
               </div>
             </SelectItem>
           ))}

diff --git a/src/components/workspace/elements/seat.tsx b/src/components/workspace/elements/seat.tsx
@@ -59,6 +59,9 @@ const Seat: React.FC<ISeatProps> = forwardRef(
           if (categoryObject) {
             seat.style("color", categoryObject.color);
             seatLabel?.style("stroke", categoryObject.textColor);
+          } else {
+            seat.style("color", seatStatusColors[status].background);
+            seatLabel?.style("stroke", seatStatusColors[status].label);
           }
         }
       }

diff --git a/src/store/reducers/editor/index.ts b/src/store/reducers/editor/index.ts
@@ -16,6 +16,13 @@ const noSection = {
   stroke: "#ffffff"
 };
 
+const noCategory = {
+  id: "0",
+  name: "No Category",
+  color: "#ffffff",
+  textColor: "#ffffff"
+};
+
 const initialState = {
   initialized: false,
   dataSynced: false,
@@ -26,6 +33,7 @@ const initialState = {
   selectedElementIds: [],
   lastDeselectedElementId: null,
   categories: [
+    noCategory,
     {
       id: uuidv4(),
       name: "Standard",
@@ -249,6 +257,7 @@ export const slice = createSlice({
       const { name, sections, ...data } = action.payload as ISTKData;
       state.location = name ?? state.location;
       state.sections = sections ? [noSection, ...sections] : state.sections;
+      state.categories = data.categories ? [noCategory, ...data.categories] : state.categories;
       state.initialViewBoxScale = data.workspace?.initialViewBoxScale;
       state.initialViewBoxScaleForWidth = data.workspace?.initialViewBoxScaleForWidth;
       state.visibilityOffset = data.workspace?.visibilityOffset ?? state.visibilityOffset;

diff --git a/src/utils/transformer.ts b/src/utils/transformer.ts
@@ -101,7 +101,7 @@ export const stateToJSON = () => {
   const state = store.getState().editor;
   return {
     name: state.location,
-    categories: state.categories,
+    categories: state.categories.slice(1),
     sections: state.sections.slice(1),
     seats: domSeatsToJSON(),
     booths: domBoothsToJSON(),