122 lines
4.1 KiB
TypeScript
122 lines
4.1 KiB
TypeScript
import React, { useState } from "react";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogFooter,
|
|
} from "@/components/ui/dialog";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select";
|
|
|
|
interface TechnicalRequirement {
|
|
id: number;
|
|
name: string;
|
|
result: number;
|
|
}
|
|
|
|
interface PersyaratanTeknisModalProps {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
const PersyaratanTeknisModal: React.FC<PersyaratanTeknisModalProps> = ({
|
|
open,
|
|
onClose,
|
|
}) => {
|
|
const initialRequirements: TechnicalRequirement[] = [
|
|
{ id: 1, name: "Instalasi pengolah air limbah", result: 0 },
|
|
{ id: 2, name: "Flowmeter", result: 0 },
|
|
{ id: 3, name: "Titik pengambilan sampel", result: 0 },
|
|
{ id: 4, name: "Saluran air limbah & air hujan terpisah", result: 0 },
|
|
];
|
|
|
|
const [requirements, setRequirements] =
|
|
useState<TechnicalRequirement[]>(initialRequirements);
|
|
const [uploaded, setUploaded] = useState(false);
|
|
|
|
const handleSelectChange = (id: number, value: string) => {
|
|
let resultValue = 0;
|
|
if (value === "ada-berfungsi") resultValue = 100;
|
|
else if (value === "ada-tidak-berfungsi") resultValue = 50;
|
|
else if (value === "tidak-ada") resultValue = 0;
|
|
|
|
setRequirements(
|
|
requirements.map((req) =>
|
|
req.id === id ? { ...req, result: resultValue } : req
|
|
)
|
|
);
|
|
};
|
|
|
|
const handleUpload = () => {
|
|
// Simulasi upload dokumen, kemudian enable dropdown
|
|
setUploaded(true);
|
|
};
|
|
|
|
const handleSave = () => {
|
|
// Lakukan penyimpanan data persyaratan teknis
|
|
onClose();
|
|
};
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={onClose}>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Persyaratan Teknis</DialogTitle>
|
|
</DialogHeader>
|
|
<div className="my-4 space-y-4">
|
|
{!uploaded && (
|
|
<Button variant="outline" onClick={handleUpload}>
|
|
Upload Dokumen
|
|
</Button>
|
|
)}
|
|
{requirements.map((req) => (
|
|
<div
|
|
key={req.id}
|
|
className="flex items-center justify-between"
|
|
>
|
|
<span>{req.name}</span>
|
|
<Select
|
|
disabled={!uploaded}
|
|
value={req.result.toString()}
|
|
onValueChange={(value) =>
|
|
handleSelectChange(req.id, value)
|
|
}
|
|
>
|
|
<SelectTrigger className="w-36">
|
|
<SelectValue placeholder="Pilih Hasil" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="ada-berfungsi">
|
|
Ada Berfungsi
|
|
</SelectItem>
|
|
<SelectItem value="ada-tidak-berfungsi">
|
|
Ada Tidak Berfungsi
|
|
</SelectItem>
|
|
<SelectItem value="tidak-ada">
|
|
Tidak Ada
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={onClose}>
|
|
Batal
|
|
</Button>
|
|
<Button onClick={handleSave}>Simpan</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
};
|
|
|
|
export default PersyaratanTeknisModal;
|