61 lines
1.7 KiB
TypeScript
61 lines
1.7 KiB
TypeScript
import { useState } from "react";
|
|
import { JobCategory } from "./action";
|
|
|
|
type Props = {
|
|
availableJobs: JobCategory[];
|
|
selectJob: (id: number) => void;
|
|
removeJob: (id: number) => void;
|
|
updateGroup: (id: number[]) => void;
|
|
};
|
|
|
|
export default function Grouping({
|
|
availableJobs,
|
|
selectJob,
|
|
removeJob,
|
|
updateGroup,
|
|
}: Props) {
|
|
const [selectedJob, setSelectedJob] = useState<JobCategory[]>([]);
|
|
function addJob(id: string) {
|
|
const _id = parseInt(id);
|
|
const job = availableJobs.find((j) => j.id == _id);
|
|
if (job == undefined) return;
|
|
const newSelectedJob = [...selectedJob, job];
|
|
setSelectedJob(newSelectedJob);
|
|
selectJob(_id);
|
|
updateGroup(newSelectedJob.map((j) => j.id));
|
|
}
|
|
function removeJobFromGroup(id: number) {
|
|
const newSelectedJob = selectedJob.filter((j) => j.id != id);
|
|
setSelectedJob(newSelectedJob);
|
|
removeJob(id);
|
|
updateGroup(newSelectedJob.map((j) => j.id));
|
|
}
|
|
return (
|
|
<div className="m-2 flex w-full flex-col gap-2 rounded-md border border-black p-2 shadow-md">
|
|
{selectedJob.map((j) => (
|
|
<div className="flex justify-between gap-2 p-2" key={j.id}>
|
|
<p>{j.name}</p>
|
|
<button
|
|
onClick={() => removeJobFromGroup(j.id)}
|
|
className="text-red-400"
|
|
>
|
|
นำออก
|
|
</button>
|
|
</div>
|
|
))}
|
|
{selectedJob.length < 5 && (
|
|
<select onChange={(e) => addJob(e.currentTarget.value)}>
|
|
<option value={undefined} hidden>
|
|
None
|
|
</option>
|
|
{availableJobs.map((j) => (
|
|
<option value={j.id} key={j.id}>
|
|
{j.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|