feat(geoportal-v2): export toolbar + Semnez ca picker + CF intern/Extras split
V2 panel toolbar replaces the single "Comandă CF" button with two rows:
[Încadrare] [Pl. situație] [Coord.] [DXF] ← 4 exports
[CF intern] [Extras CF] ← 2 CF flows
Each export button pops an inline modal:
- PIZ / PAD: SignAsPicker (PFA / PJA radio list, manual-add inline,
co-signer slot on PIZ) + basemap toggle (google / orto for PIZ).
- Coord / DXF: no picker — single-click download via JWT proxy.
"CF intern" is the free copycf flow from eTerra (proxied via gis-api);
"Extras CF" keeps the existing CfOrderModal (1 credit ePay). The two
modes are now visually balanced as a 2-button row.
Sign-as picker rows merge user-owned Signatory table entries with the
SIGN_AS_DEFAULT_OPTIONS env-driven fallback (org-wide hardcoded options;
defaults seed two Studii de teren entries — Tiurbe PFA + SRL PJA). New
rows added via the picker's "Adaugă autorizație" inline form write to
the Signatory table; ENV rows are read-only.
Architots side ships fully:
- prisma Signatory model + ALTER TABLE applied (per the schema-drift
feedback memory).
- /api/sign-as-options (GET, POST) + /api/sign-as-options/[id]
(PATCH, DELETE).
- /api/cf-intern/order and /api/gis/parcel/[id]/{piz,pad,coords,dxf}
proxy routes — auth check + JWT forward, stream binary back.
- gis-api thin client extended with the matching exports.* namespace.
Until the gis-api endpoints ship (next session — full spec in
docs/plans/005-gis-api-export-endpoints.md), each export proxy returns
501 "…urmează" with a Romanian message so the modal shows what's
coming instead of a hard error.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude VM
@@ -0,0 +1,286 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
import { X, Loader2, Download, AlertCircle, FileText, Map as MapIcon } from "lucide-react";
|
||||
import { cn } from "@/shared/lib/utils";
|
||||
import { SignAsPicker } from "../sign-as/sign-as-picker";
|
||||
import type { SignerPayload } from "../sign-as/types";
|
||||
|
||||
export type ExportKind = "piz" | "pad" | "coords" | "dxf";
|
||||
|
||||
export interface ExportModalProps {
|
||||
open: boolean;
|
||||
kind: ExportKind;
|
||||
/** GisFeature uuid (when known) — used in the route path. */
|
||||
parcelId: string;
|
||||
/** Display-only metadata for the modal header. */
|
||||
cadastralRef: string | null;
|
||||
uatName: string | null;
|
||||
layerId: string | null;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const TITLE: Record<ExportKind, string> = {
|
||||
piz: "Plan de încadrare în zonă",
|
||||
pad: "Plan de situație (PAD)",
|
||||
coords: "Coordonate Stereo70 (XLSX)",
|
||||
dxf: "Export DXF",
|
||||
};
|
||||
|
||||
const DESCRIPTION: Record<ExportKind, string> = {
|
||||
piz: "PDF A4 cu parcela încadrată la scara 1:5000 peste imagine satelit / ortofoto ANCPI.",
|
||||
pad: "PDF cu plan de amplasament + delimitare, cu cartuș (CF, topo, categorie, adresă) și tabel de coordonate.",
|
||||
coords: "Tabel Excel cu coordonatele vârfurilor (X/Y Stereo70), lungimile segmentelor și suprafața.",
|
||||
dxf: "Fișier DXF al parcelei (+ vecini și clădiri din intersecție) pentru deschidere în AutoCAD / QCAD.",
|
||||
};
|
||||
|
||||
const NEEDS_SIGNER: Record<ExportKind, boolean> = {
|
||||
piz: true,
|
||||
pad: true,
|
||||
coords: false,
|
||||
dxf: false,
|
||||
};
|
||||
|
||||
const NEEDS_BASEMAP: Record<ExportKind, boolean> = {
|
||||
piz: true,
|
||||
pad: false,
|
||||
coords: false,
|
||||
dxf: false,
|
||||
};
|
||||
|
||||
const FILE_EXT: Record<ExportKind, string> = {
|
||||
piz: "pdf",
|
||||
pad: "pdf",
|
||||
coords: "xlsx",
|
||||
dxf: "dxf",
|
||||
};
|
||||
|
||||
type State =
|
||||
| { kind: "idle" }
|
||||
| { kind: "running" }
|
||||
| { kind: "done"; blobUrl: string; filename: string }
|
||||
| { kind: "error"; message: string };
|
||||
|
||||
export function ExportModal({
|
||||
open,
|
||||
kind,
|
||||
parcelId,
|
||||
cadastralRef,
|
||||
uatName,
|
||||
layerId,
|
||||
onClose,
|
||||
}: ExportModalProps) {
|
||||
const [signer, setSigner] = useState<SignerPayload | null>(null);
|
||||
const [coSigner, setCoSigner] = useState<SignerPayload | null>(null);
|
||||
const [basemap, setBasemap] = useState<"google" | "orto">("google");
|
||||
const [state, setState] = useState<State>({ kind: "idle" });
|
||||
const lastBlobUrl = useRef<string | null>(null);
|
||||
|
||||
// Reset transient state when the modal closes or jumps to a new parcel.
|
||||
useEffect(() => {
|
||||
if (!open) {
|
||||
setState({ kind: "idle" });
|
||||
if (lastBlobUrl.current) {
|
||||
URL.revokeObjectURL(lastBlobUrl.current);
|
||||
lastBlobUrl.current = null;
|
||||
}
|
||||
}
|
||||
}, [open, parcelId]);
|
||||
|
||||
if (!open) return null;
|
||||
if (typeof document === "undefined") return null;
|
||||
|
||||
const handleGenerate = async () => {
|
||||
setState({ kind: "running" });
|
||||
try {
|
||||
const body: Record<string, unknown> = {};
|
||||
if (NEEDS_SIGNER[kind]) {
|
||||
if (!signer) {
|
||||
setState({ kind: "error", message: "Selectează un semnatar." });
|
||||
return;
|
||||
}
|
||||
body.signer = signer;
|
||||
if (coSigner) body.coSigner = coSigner;
|
||||
}
|
||||
if (NEEDS_BASEMAP[kind]) {
|
||||
body.basemap = basemap;
|
||||
}
|
||||
if (layerId) body.layerId = layerId;
|
||||
|
||||
const isJsonOnly = kind === "coords" || kind === "dxf";
|
||||
const res = await fetch(`/api/gis/parcel/${parcelId}/${kind}`, {
|
||||
method: isJsonOnly && kind === "coords" ? "GET" : "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: isJsonOnly && kind === "coords" ? undefined : JSON.stringify(body),
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
let msg = `Eroare HTTP ${res.status}`;
|
||||
const text = await res.text();
|
||||
try {
|
||||
const j = JSON.parse(text);
|
||||
if (typeof j.error === "string") msg = j.error;
|
||||
else if (typeof j.message === "string") msg = j.message;
|
||||
} catch {
|
||||
if (text) msg += `: ${text.slice(0, 200)}`;
|
||||
}
|
||||
setState({ kind: "error", message: msg });
|
||||
return;
|
||||
}
|
||||
|
||||
const blob = await res.blob();
|
||||
const url = URL.createObjectURL(blob);
|
||||
lastBlobUrl.current = url;
|
||||
const cd = res.headers.get("content-disposition") ?? "";
|
||||
const m = /filename\*?=(?:UTF-8''|"?)([^";]+)/i.exec(cd);
|
||||
const fallback = `${kind}_${cadastralRef ?? parcelId}.${FILE_EXT[kind]}`;
|
||||
const filename = m?.[1] ? decodeURIComponent(m[1]) : fallback;
|
||||
setState({ kind: "done", blobUrl: url, filename });
|
||||
|
||||
// Auto-download — most users just want the file.
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = filename;
|
||||
a.click();
|
||||
} catch (err) {
|
||||
setState({
|
||||
kind: "error",
|
||||
message: err instanceof Error ? err.message : String(err),
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return createPortal(
|
||||
<div
|
||||
className="fixed inset-0 z-[1100] flex items-center justify-center bg-black/40 p-4"
|
||||
onClick={onClose}
|
||||
>
|
||||
<div
|
||||
className="w-full max-w-md overflow-hidden rounded-lg border bg-background shadow-xl"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="flex items-start gap-2 border-b bg-muted/30 px-3 py-2">
|
||||
{kind === "piz" ? (
|
||||
<MapIcon className="mt-0.5 h-4 w-4 text-primary" />
|
||||
) : (
|
||||
<FileText className="mt-0.5 h-4 w-4 text-primary" />
|
||||
)}
|
||||
<div className="flex-1">
|
||||
<div className="text-sm font-semibold">{TITLE[kind]}</div>
|
||||
<div className="text-[11px] text-muted-foreground">
|
||||
{cadastralRef && <span className="font-mono">{cadastralRef}</span>}
|
||||
{cadastralRef && uatName && " · "}
|
||||
{uatName}
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="rounded p-1 hover:bg-muted"
|
||||
>
|
||||
<X className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="max-h-[60vh] space-y-3 overflow-y-auto px-3 py-3">
|
||||
<p className="text-xs text-muted-foreground">{DESCRIPTION[kind]}</p>
|
||||
|
||||
{NEEDS_BASEMAP[kind] && (
|
||||
<div>
|
||||
<div className="mb-1 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
|
||||
Fundal hartă
|
||||
</div>
|
||||
<div className="flex gap-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setBasemap("google")}
|
||||
className={cn(
|
||||
"flex-1 rounded-md border px-2 py-1.5 text-xs",
|
||||
basemap === "google"
|
||||
? "border-primary bg-primary/5 font-medium"
|
||||
: "border-border hover:bg-muted/50",
|
||||
)}
|
||||
>
|
||||
Google Satellite
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setBasemap("orto")}
|
||||
className={cn(
|
||||
"flex-1 rounded-md border px-2 py-1.5 text-xs",
|
||||
basemap === "orto"
|
||||
? "border-primary bg-primary/5 font-medium"
|
||||
: "border-border hover:bg-muted/50",
|
||||
)}
|
||||
>
|
||||
Ortofoto ANCPI
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{NEEDS_SIGNER[kind] && (
|
||||
<SignAsPicker
|
||||
value={signer}
|
||||
onChange={setSigner}
|
||||
allowCoSigner={kind === "piz"}
|
||||
coSigner={coSigner}
|
||||
onCoSignerChange={setCoSigner}
|
||||
/>
|
||||
)}
|
||||
|
||||
{state.kind === "error" && (
|
||||
<div className="flex items-start gap-2 rounded border border-destructive/40 bg-destructive/10 p-2 text-xs text-destructive">
|
||||
<AlertCircle className="mt-0.5 h-3.5 w-3.5 flex-shrink-0" />
|
||||
<div className="min-w-0">{state.message}</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{state.kind === "done" && (
|
||||
<div className="flex items-start gap-2 rounded border border-emerald-500/40 bg-emerald-500/10 p-2 text-xs">
|
||||
<Download className="mt-0.5 h-3.5 w-3.5 flex-shrink-0 text-emerald-600" />
|
||||
<div className="min-w-0">
|
||||
<div className="font-medium">Gata.</div>
|
||||
<a
|
||||
href={state.blobUrl}
|
||||
download={state.filename}
|
||||
className="text-primary underline-offset-2 hover:underline"
|
||||
>
|
||||
{state.filename}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-end gap-2 border-t bg-muted/30 px-3 py-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="rounded px-3 py-1.5 text-xs hover:bg-muted"
|
||||
>
|
||||
Închide
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleGenerate}
|
||||
disabled={state.kind === "running" || (NEEDS_SIGNER[kind] && !signer)}
|
||||
className="inline-flex items-center gap-1 rounded bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground disabled:opacity-50"
|
||||
>
|
||||
{state.kind === "running" ? (
|
||||
<>
|
||||
<Loader2 className="h-3 w-3 animate-spin" /> Generare…
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Download className="h-3 w-3" /> Generează
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
document.body,
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user