108 lines
3.3 KiB
TypeScript
108 lines
3.3 KiB
TypeScript
import { useState } from "preact/hooks";
|
|
import AddLeaseDialog from "./AddLeaseDialog.tsx";
|
|
import { Lease, Property } from "../../db/interfaces.ts";
|
|
|
|
export function PopAddLeaseDialog(leases: Lease[], properties: Property[]) {
|
|
const [popup, setPopup] = useState<
|
|
{
|
|
propertyId: string | null;
|
|
popupKey: number;
|
|
resolve: (value: boolean) => void;
|
|
} | null
|
|
>(null);
|
|
const [selectedPropertyId, setSelectedPropertyId] = useState("");
|
|
|
|
function getPropertyInfo(propertyId: string) {
|
|
const property = properties.find((p) => p.id === propertyId);
|
|
return property
|
|
? {
|
|
title: property.title,
|
|
address: property.address_1,
|
|
price: property.price,
|
|
}
|
|
: { title: "", address: "", price: undefined };
|
|
}
|
|
|
|
// Show the popup and return a Promise for the answer
|
|
const popAddLease = (
|
|
propertyId?: string,
|
|
popupKey: number,
|
|
): Promise<boolean> => {
|
|
return new Promise((resolve) => {
|
|
setPopup({ propertyId, popupKey, resolve });
|
|
});
|
|
};
|
|
|
|
// Render the popup if needed
|
|
const popupAddLeaseDialog = popup
|
|
? (() => {
|
|
const { title, address, price } = getPropertyInfo(popup.propertyId || "");
|
|
return (
|
|
<AddLeaseDialog
|
|
leases={leases}
|
|
propertyId={popup.propertyId}
|
|
propertyTitle={title || ""}
|
|
propertyAddress={address || ""}
|
|
propertyCost={price || undefined}
|
|
popupKey={popup.popupKey}
|
|
onClose={() => {
|
|
popup.resolve(false);
|
|
setPopup(null);
|
|
}}
|
|
/>
|
|
);
|
|
})()
|
|
: null;
|
|
|
|
// Render property selection dialog if no propertyId provided
|
|
const propertySelectionDialog = popup && !popup.propertyId
|
|
? (() => {
|
|
return (
|
|
<div class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-30 z-50">
|
|
<div class="bg-white p-6 rounded shadow-lg w-full max-w-md space-y-4">
|
|
<h3 class="text-xl font-bold mb-2">Select Property</h3>
|
|
<select
|
|
class="border p-2 rounded w-full"
|
|
value={selectedPropertyId}
|
|
onInput={(e) => setSelectedPropertyId(e.currentTarget.value)}
|
|
>
|
|
<option value="">-- Select a property --</option>
|
|
{properties.map((p) => (
|
|
<option key={p.id} value={p.id}>
|
|
{p.title} - {p.address_1}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<div class="flex justify-end gap-2 mt-4">
|
|
<button
|
|
type="button"
|
|
class="px-4 py-2 rounded border"
|
|
onClick={() => {
|
|
popup.resolve(false);
|
|
setPopup(null);
|
|
}}
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="px-4 py-2 rounded bg-blue-600 text-white"
|
|
disabled={!selectedPropertyId}
|
|
onClick={() => {
|
|
setPopup({ ...popup, propertyId: selectedPropertyId });
|
|
}}
|
|
>
|
|
Continue
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})()
|
|
: null;
|
|
|
|
return [popAddLease, popupAddLeaseDialog || propertySelectionDialog] as const;
|
|
}
|
|
|
|
|