139 lines
4.0 KiB
TypeScript
139 lines
4.0 KiB
TypeScript
"use client";
|
|
import { ReactNode, useState } from "react";
|
|
import { cn } from "../helper/cn";
|
|
|
|
export const PenaltyDropdown = ({
|
|
onClick,
|
|
btnClassName,
|
|
showDatePicker,
|
|
btnTip,
|
|
btnName,
|
|
Icon,
|
|
}: {
|
|
onClick: (data: { reason: string; until: Date | null }) => void;
|
|
showDatePicker?: boolean;
|
|
btnClassName?: string;
|
|
btnName: string;
|
|
btnTip?: string;
|
|
Icon: ReactNode;
|
|
}) => {
|
|
const [open, setOpen] = useState(true);
|
|
const [reason, setReason] = useState("");
|
|
const [until, setUntil] = useState<string>("default");
|
|
return (
|
|
<div className="dropdown dropdown-open">
|
|
<div tabIndex={0} role="button"></div>
|
|
<div className="indicator">
|
|
<button
|
|
className={cn("btn btn-xs btn-square btn-soft cursor-pointer", btnClassName)}
|
|
onClick={() => setOpen(!open)}
|
|
>
|
|
{Icon}
|
|
</button>
|
|
</div>
|
|
{open && (
|
|
<div
|
|
className="dropdown-content bg-base-100 rounded-box z-1 p-4 shadow-sm space-y-4 shadow-md"
|
|
style={{ minWidth: "500px", right: "40px" }}
|
|
>
|
|
<button
|
|
className="absolute top-2 right-2 btn btn-xs btn-circle btn-ghost"
|
|
onClick={() => setOpen(false)}
|
|
type="button"
|
|
>
|
|
<span className="text-xl leading-none">×</span>
|
|
</button>
|
|
<h2 className="text-xl font-bold text-center">{btnName}</h2>
|
|
<textarea
|
|
value={reason}
|
|
onChange={(e) => setReason(e.target.value)}
|
|
className="input w-full"
|
|
placeholder="Begründung"
|
|
style={{ minHeight: "100px" }}
|
|
/>
|
|
{showDatePicker && (
|
|
<select
|
|
className="select w-full select-bordered"
|
|
value={until}
|
|
onChange={(e) => setUntil(e.target.value)}
|
|
>
|
|
<option value="default" disabled>
|
|
Keine
|
|
</option>
|
|
<option value="1h">1 Stunde</option>
|
|
<option value="6h">6 Stunden</option>
|
|
<option value="12h">12 Stunden</option>
|
|
<option value="24h">24 Stunden</option>
|
|
<option value="72h">72 Stunden</option>
|
|
<option value="1w">1 Woche</option>
|
|
<option value="2w">2 Wochen</option>
|
|
<option value="1m">1 Monat</option>
|
|
<option value="3m">3 Monate</option>
|
|
<option value="6m">6 Monate</option>
|
|
<option value="1y">1 Jahr</option>
|
|
</select>
|
|
)}
|
|
<button
|
|
className={cn("btn w-full btn-square btn-soft tooltip tooltip-bottom", btnClassName)}
|
|
data-tip={btnTip}
|
|
onClick={() => {
|
|
let untilDate: Date | null = null;
|
|
if (until !== "default") {
|
|
const now = new Date();
|
|
switch (until) {
|
|
case "1h":
|
|
untilDate = new Date(now.getTime() + 1 * 60 * 60 * 1000);
|
|
break;
|
|
case "6h":
|
|
untilDate = new Date(now.getTime() + 6 * 60 * 60 * 1000);
|
|
break;
|
|
case "12h":
|
|
untilDate = new Date(now.getTime() + 12 * 60 * 60 * 1000);
|
|
break;
|
|
case "24h":
|
|
untilDate = new Date(now.getTime() + 24 * 60 * 60 * 1000);
|
|
break;
|
|
case "72h":
|
|
untilDate = new Date(now.getTime() + 72 * 60 * 60 * 1000);
|
|
break;
|
|
case "1w":
|
|
untilDate = new Date(now.getTime() + 7 * 24 * 60 * 60 * 1000);
|
|
break;
|
|
case "2w":
|
|
untilDate = new Date(now.getTime() + 14 * 24 * 60 * 60 * 1000);
|
|
break;
|
|
case "1m":
|
|
untilDate = new Date(now.setMonth(now.getMonth() + 1));
|
|
break;
|
|
case "3m":
|
|
untilDate = new Date(now.setMonth(now.getMonth() + 3));
|
|
break;
|
|
case "6m":
|
|
untilDate = new Date(now.setMonth(now.getMonth() + 6));
|
|
break;
|
|
case "1y":
|
|
untilDate = new Date(now.setFullYear(now.getFullYear() + 1));
|
|
break;
|
|
default:
|
|
untilDate = null;
|
|
}
|
|
}
|
|
onClick({ reason, until: untilDate });
|
|
}}
|
|
>
|
|
{Icon} {btnName}
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
return (
|
|
<details className={"dropdown dropdown-left dropdown-center dropdown-open"}>
|
|
<summary
|
|
className={cn("btn btn-xs btn-square btn-soft", btnClassName)}
|
|
onClick={() => setOpen(true)}
|
|
></summary>
|
|
</details>
|
|
);
|
|
};
|