rajpreet/Kuma
1
0
Fork 0
mirror of https://github.com/Since-3/Kuma.git synced 2026-10-12 20:51:18 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

added funcitonality to remove roles and fix focus bug

Browse source
This commit is contained in:
Rajpreet0 2026-01-25 13:48:15 +01:00
parent 1c0037220c
commit d4a4bcc89d
2 changed files with 38 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

33
src/components/layout/MultiSelectDropdown.tsx
View file

@ -8,7 +8,7 @@ import {
} from "../ui/dropdown-menu";
import { Input } from "../ui/input";
import { Label } from "../ui/label";
import { ChevronDown, Plus } from "lucide-react";
import { ChevronDown, Plus, X } from "lucide-react";
import { Checkbox } from "../ui/checkbox";
import { useState } from "react";
import { Button } from "../ui/button";
@ -21,6 +21,8 @@ interface MultiSelectDropdownProps {
error?: string;
allowCreate?: boolean;
onCreateOption?: (newOption: { value: string; label: string }) => void;
onDeleteOption?: (value: string) => void;
deletableValues?: string[];
}
const MultiSelectDropdown: React.FC<MultiSelectDropdownProps> = ({
@ -31,6 +33,8 @@ const MultiSelectDropdown: React.FC<MultiSelectDropdownProps> = ({
error,
allowCreate = false,
onCreateOption,
onDeleteOption,
deletableValues = [],
}) => {
const [isCreating, setIsCreating] = useState(false);
const [newOptionLabel, setNewOptionLabel] = useState("");
@ -98,10 +102,24 @@ const MultiSelectDropdown: React.FC<MultiSelectDropdownProps> = ({
e.preventDefault();
toggleOption(option.value);
}}
className="flex items-center gap-2"
className="flex items-center gap-2 justify-between"
>
<Checkbox checked={selected.includes(option.value)} className="h-4 w-4" />
{option.label}
<div className="flex items-center gap-2">
<Checkbox checked={selected.includes(option.value)} className="h-4 w-4" />
{option.label}
</div>
{deletableValues.includes(option.value) && onDeleteOption && (
<button
onClick={(e) => {
e.stopPropagation();
onDeleteOption(option.value);
}}
className="p-1 hover:bg-red-100 rounded text-red-500 hover:text-red-700"
title="Rolle löschen"
>
<X size={14} />
</button>
)}
</DropdownMenuItem>
))}
{allowCreate && !isCreating && (
@ -117,13 +135,18 @@ const MultiSelectDropdown: React.FC<MultiSelectDropdownProps> = ({
</DropdownMenuItem>
)}
{allowCreate && isCreating && (
<div className="p-2 space-y-2" onClick={(e) => e.stopPropagation()}>
<div
className="p-2 space-y-2"
onClick={(e) => e.stopPropagation()}
onKeyDown={(e) => e.stopPropagation()}
>
<Input
value={newOptionLabel}
onChange={(e) => setNewOptionLabel(e.target.value)}
placeholder="Neue Rolle eingeben..."
className="h-8"
onKeyDown={(e) => {
e.stopPropagation();
if (e.key === "Enter") {
handleCreateOption();
} else if (e.key === "Escape") {

10
src/modules/employee/ui/views/employee-create-view.tsx
View file

@ -46,6 +46,7 @@ const EmployeeCreateView = ({ customRoles }: EmployeeCreateViewProps) => {
});
const [roles, setRoles] = useState(combinedRoles);
const [newlyCreatedRoles, setNewlyCreatedRoles] = useState<string[]>([]);
const [isPermissionCourseCreation, setIsPermissionCourseCreation] = useState(false);
const [isPermissionEmplyoeeCreation, setIsPermissionEmplyoeeCreation] = useState(false);
const [isSubmitting, setIsSubmitting] = useState(false);
@ -53,6 +54,13 @@ const EmployeeCreateView = ({ customRoles }: EmployeeCreateViewProps) => {
const handleCreateRole = (newRole: { value: string; label: string }) => {
setRoles([...roles, newRole]);
setNewlyCreatedRoles([...newlyCreatedRoles, newRole.value]);
};
const handleDeleteRole = (valueToDelete: string) => {
setRoles(roles.filter((role) => role.value !== valueToDelete));
setNewlyCreatedRoles(newlyCreatedRoles.filter((v) => v !== valueToDelete));
setSelectedRoles(selectedRoles.filter((v) => v !== valueToDelete));
};
const handlePublish = async () => {
@ -157,6 +165,8 @@ const EmployeeCreateView = ({ customRoles }: EmployeeCreateViewProps) => {
options={roles}
allowCreate={true}
onCreateOption={handleCreateRole}
onDeleteOption={handleDeleteRole}
deletableValues={newlyCreatedRoles}
/>
{errors.roles && <p className="text-red-500 text-sm mt-1">{errors.roles[0]}</p>}
</div>