Files
frontend/apps/sn/app/(map-layout)/map/components/exmn/ExmnSurveyResultSection.tsx
T

145 lines
4.5 KiB
TypeScript

"use client";
import {
Button,
Table,
TableBody,
TableCell,
TableRow,
} from "@common/components";
import { getExmnPipeReportAvailability } from "@/features/exmn";
import { openWindowPopup } from "@/features/windowPopup/lib/openWindowPopup";
import { useAlertStore } from "@/shared/lib";
type ExmnSurveyResultSectionProps = {
featureData: any;
};
const readRawFeatureProperty = (featureData: any, keys: string[]) => {
for (const key of keys) {
const value =
featureData?.get?.(key) ??
featureData?.values_?.[key] ??
featureData?.[key];
if (value !== undefined && value !== null) return value;
}
return undefined;
};
const readFeatureProperty = (featureData: any, keys: string[]) =>
String(readRawFeatureProperty(featureData, keys) ?? "").trim();
const readBooleanFeatureProperty = (featureData: any, keys: string[]) => {
const value = readRawFeatureProperty(featureData, keys);
return (
value === true ||
String(value ?? "")
.trim()
.toLowerCase() === "true"
);
};
const displayValue = (value: string) => value || "-";
export default function ExmnSurveyResultSection({
featureData,
}: ExmnSurveyResultSectionProps) {
const alert = useAlertStore((state) => state.setMessage);
const exmnBizId = readFeatureProperty(featureData, ["exmnBizId"]);
const jobType = readFeatureProperty(featureData, ["jobType"]);
const pipeNumber = readFeatureProperty(featureData, [
"gisManagementNo",
"fclt_mng_no",
"fcltMngNo",
]);
const reportAvailable = readBooleanFeatureProperty(featureData, [
"reportAvailable",
]);
const canOpenPipeReport =
jobType === "PPL" && Boolean(exmnBizId && pipeNumber);
const openPipeReport = async () => {
if (!canOpenPipeReport) return;
if (!reportAvailable) {
alert("등록된 관로 조사보고서가 없습니다.");
return;
}
try {
const availability = await getExmnPipeReportAvailability(
exmnBizId,
pipeNumber,
);
if (!availability.available) {
alert(
availability.message?.trim() ||
`선택한 관로번호의 조사보고서가 등록된 PDF에 없습니다: ${pipeNumber}`,
);
return;
}
const reportWindow = openWindowPopup("exmnPipeReport", {
exmnBizId,
pipeNumber,
reportNo: readFeatureProperty(featureData, ["reportNo"]),
});
if (!reportWindow) {
alert(
"팝업이 차단되었습니다. 브라우저의 팝업 허용 설정을 확인해주세요.",
);
}
} catch (error) {
alert(
error instanceof Error && error.message
? error.message
: "관로 조사보고서 열람 가능 여부를 확인하지 못했습니다.",
);
}
};
const rows = [
["사업명", readFeatureProperty(featureData, ["bizNm"])],
["사업차수", readFeatureProperty(featureData, ["bizCycl"])],
["처리분구", readFeatureProperty(featureData, ["trtdstNm"])],
["조사유형", jobType === "MNHL" ? "맨홀조사" : "관로조사"],
["보고서번호", readFeatureProperty(featureData, ["reportNo"])],
["구조적결함 등급", readFeatureProperty(featureData, ["structuralGrade"])],
["운영적결함 등급", readFeatureProperty(featureData, ["operationalGrade"])],
];
return (
<section className="border-b border-border bg-background">
<div className="card-header flex items-center justify-between">
<h3 className="mx-3 text-2xl font-medium text-label">조사 결과</h3>
{jobType === "PPL" && (
<Button
onClick={openPipeReport}
disabled={!canOpenPipeReport}
className="hover:bg-primary/90 mr-3 rounded-sm bg-primary px-4 py-2 text-sm font-medium text-primary-foreground disabled:cursor-not-allowed disabled:opacity-50"
>
조사보고서 보기
</Button>
)}
</div>
<div className="card !m-[1.2rem] !p-0">
<Table variant="secondary">
<TableBody className="text-center">
{rows.map(([label, value]) => (
<TableRow key={label}>
<TableCell className="w-[120px] whitespace-nowrap bg-secondary text-xs font-bold text-label">
{label}
</TableCell>
<TableCell className="break-all text-left text-xs">
{displayValue(value ?? "")}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
</section>
);
}