dash-registratori/src/components/add-registratore.tsx

132 lines
3.7 KiB
TypeScript

"use client";
import {
Dialog,
DialogClose,
DialogContent,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { Plus } from "lucide-react";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
import { useState } from "react";
import DatePicker from "./date-picker";
import { Checkbox } from "@/components/ui/checkbox";
import ModelPicker from "./model-picker";
const AddRegistratoreDialog = ({ id }: { id: Number }) => {
//const [nome, setNome] = useState("");
const [openData, setOpenData] = useState(false);
const [openModello, setOpenModello] = useState(false);
const [data, setData] = useState<Date | undefined>();
const [seriale, setSeriale] = useState<string>("");
const [modello, setModello] = useState<Date | undefined>();
const [fattura, setFattura] = useState<Boolean>();
const modelli = [
{
value: "FORM100",
label: "Form 100",
},
{
value: "FORM200",
label: "Form 200",
},
{
value: "FORM200PLUS",
label: "Form 200 Plus",
},
{
value: "FORM500",
label: "Form 500",
},
];
return (
<div>
<Dialog>
<form className="z-10">
<Tooltip>
<TooltipTrigger asChild>
<DialogTrigger asChild>
<Button variant="outline" type="button">
<Plus className="size-4" />
</Button>
</DialogTrigger>
</TooltipTrigger>
<TooltipContent>
<p>Aggiungi registratore</p>
</TooltipContent>
</Tooltip>
<DialogContent className="sm:max-w-[425px]">
<DialogHeader>
<DialogTitle>Aggiungi registratore</DialogTitle>
</DialogHeader>
<div className="grid gap-4">
<div className="grid gap-3">
<Label htmlFor="seriale">Seriale</Label>
<Input
id="seriale"
name="seriale"
placeholder="Seriale"
onChange={(e) => setSeriale(e.target.value)}
/>
</div>
<div className="grid gap-3">
<Label htmlFor="date">Data di acquisto</Label>
<DatePicker
open={openData}
setOpen={setOpenData}
date={data}
setDate={setData}
/>
</div>
<div className="grid gap-3">
<Label htmlFor="lavoro">Modello</Label>
<ModelPicker
open={openModello}
setOpen={setOpenModello}
value={modello}
setValue={setModello}
modelli={modelli}
/>
</div>
</div>
<DialogFooter>
<DialogClose asChild>
<Button variant="outline">Cancella</Button>
</DialogClose>
<Button
onClick={async () =>
await fetch("/api/registratori", {
method: "POST",
body: JSON.stringify({
id: id,
seriale: seriale,
data: data,
modello: modello,
}),
})
}
type="submit"
>
Aggiungi
</Button>
</DialogFooter>
</DialogContent>
</form>
</Dialog>
</div>
);
};
export default AddRegistratoreDialog;