94 lines
3.3 KiB
TypeScript
94 lines
3.3 KiB
TypeScript
/**
|
|
* 화면명: 침수흔적도 레이어 설정
|
|
* 침수흔적위선·심선의 표시 여부와 조회 연도 범위를 설정한다.
|
|
*/
|
|
"use client";
|
|
|
|
import { SelectBox } from "@common/business_components/ui";
|
|
import { FLDNG_HSTRY_MIN_YEAR, FLDNG_HSTRY_MAX_YEAR, type FldngHstryYearRange } from "@/entities/flood-history/model/flood-history-types";
|
|
import { normalizeFldngHstryYearRange } from "@/entities/flood-history/lib/flood-history-utils";
|
|
import LayerSettingCard from "../layer-setting/layer-setting-card";
|
|
|
|
type Props = {
|
|
yearRange: FldngHstryYearRange;
|
|
enabled: boolean;
|
|
onYearRangeChange: (yearRange: FldngHstryYearRange) => void;
|
|
onEnabledChange: (enabled: boolean) => void;
|
|
onClose: () => void;
|
|
};
|
|
|
|
/** 침수흔적위선·심선에 공통 적용되는 즉시 반영 침수년도 설정 카드다. */
|
|
export default function FldngHstryLayerSettingPanel({
|
|
yearRange,
|
|
enabled,
|
|
onYearRangeChange,
|
|
onEnabledChange,
|
|
onClose,
|
|
}: Props) {
|
|
const normalizedRange = normalizeFldngHstryYearRange(yearRange);
|
|
// 제공 자료의 최대 연도부터 최소 연도까지 선택 목록을 구성한다.
|
|
const yearOptions = Array.from(
|
|
{ length: FLDNG_HSTRY_MAX_YEAR - FLDNG_HSTRY_MIN_YEAR + 1 },
|
|
(_, index) => String(FLDNG_HSTRY_MAX_YEAR - index),
|
|
);
|
|
const startYearOptions = yearOptions
|
|
.filter((year) => Number(year) <= Number(normalizedRange.endYear))
|
|
.map((year) => ({ val: year, text: year }));
|
|
const endYearOptions = yearOptions
|
|
.filter((year) => Number(year) >= Number(normalizedRange.startYear))
|
|
.map((year) => ({ val: year, text: year }));
|
|
const yearSelectClass =
|
|
"!h-[26px] w-full !rounded border border-input bg-background px-2 py-0 text-center text-[12px] leading-none text-foreground";
|
|
|
|
const changeYear = (key: keyof FldngHstryYearRange, value: string) => {
|
|
onYearRangeChange(
|
|
normalizeFldngHstryYearRange({
|
|
...normalizedRange,
|
|
[key]: value,
|
|
}),
|
|
);
|
|
};
|
|
|
|
return (
|
|
<LayerSettingCard
|
|
title="침수흔적도"
|
|
enabled={enabled}
|
|
onEnabledChange={onEnabledChange}
|
|
onClose={onClose}
|
|
>
|
|
<div className="flex flex-col gap-1.5 font-medium text-label">
|
|
<span className="shrink-0">침수년도</span>
|
|
<div className="flex w-full items-center gap-1.5">
|
|
<div className="min-w-0 flex-1">
|
|
<SelectBox
|
|
className="w-full"
|
|
selectClass={yearSelectClass}
|
|
label=""
|
|
selectArray={startYearOptions}
|
|
value={normalizedRange.startYear}
|
|
onSelectValue={(value) => changeYear("startYear", String(value))}
|
|
selectContentClass="z-[101]"
|
|
labelClass="hidden"
|
|
/>
|
|
</div>
|
|
<span className="px-[1px] text-[0.95rem] font-normal text-muted-foreground">
|
|
~
|
|
</span>
|
|
<div className="min-w-0 flex-1">
|
|
<SelectBox
|
|
className="w-full"
|
|
selectClass={yearSelectClass}
|
|
label=""
|
|
selectArray={endYearOptions}
|
|
value={normalizedRange.endYear}
|
|
onSelectValue={(value) => changeYear("endYear", String(value))}
|
|
selectContentClass="z-[101]"
|
|
labelClass="hidden"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</LayerSettingCard>
|
|
);
|
|
}
|