Skip to content

Commit

Permalink
Feat: added flag to disable category deletion if there are reserved s…
Browse files Browse the repository at this point in the history 
…eats
  • Loading branch information
@Akalanka47000
Akalanka47000 committed Jun 8, 2024
1 parent 13ef656 commit 223e1c8
Show file tree
Hide file tree
Showing 2 changed files with 71 additions and 57 deletions.
126 changes: 69 additions & 57 deletions src/components/controls/select/seats/categorizer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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));
Expand All @@ -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">
Expand All @@ -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>
Expand Down
2 changes: 2 additions & 0 deletions src/types/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down

0 comments on commit 223e1c8

Please sign in to comment.