89 lines
3.7 KiB
TypeScript
89 lines
3.7 KiB
TypeScript
/* =============================================================================
|
|
* D01_PlanRegister_UI_Page.ts
|
|
* D01 예정노선 등록(요구서 345 3-1 · 389 3장 1~3 · PLAN 560-1) — B02 등록 화면 꼴 · 도면 칸 없음.
|
|
* 칸 = 사업연도(시작) · 사업지역 · 프로젝트명(B02 이름 조합기 · 「<시작 연도> <사업 지역> 노선 계획」)
|
|
* · 사업연도 끝 · 임도 종류 · 설계속도 · 측점은 안 받음(끝 연도 = D03 [저장] · 나머지 = 서버 기본).
|
|
* [등록] = POST /api/d01/project → 현재 프로젝트 · D02 로.
|
|
* ========================================================================== */
|
|
|
|
import { ROUTES } from "@config/config_frontend";
|
|
import { createButton, createCard, createInputField } from "@ui/ui_template_elements";
|
|
import { createFormGrid, createGeneralLayout } from "@ui/ui_template_general_layout";
|
|
import { createHelpButton } from "@ui/ui_template_help";
|
|
import { t } from "@ui/ui_template_locale";
|
|
import { createGroupProject } from "../A00_Common/group_workflow";
|
|
import { navigateTo } from "../A00_Common/router";
|
|
import { createNameComposer } from "../B02_ProjRegister/B02_ProjRegister_UI_Name";
|
|
|
|
export function renderD01PlanRegister(root: HTMLElement): void {
|
|
const yearStart = createInputField({
|
|
label: t("DE_Reg_YearStart"),
|
|
type: "number",
|
|
value: String(new Date().getFullYear()),
|
|
min: 2000,
|
|
max: 2100,
|
|
});
|
|
const region = createInputField({
|
|
label: t("B02_Proj_Field_Region"),
|
|
placeholder: t("B02_Proj_Field_Region_Placeholder"),
|
|
required: true,
|
|
});
|
|
const name = createInputField({ label: t("DE_Reg_Name"), required: true });
|
|
|
|
// 이름 = B02 조합기 그대로(손대기 전 = 자동 · 고친 뒤 = 조각만 갈아 끼움)
|
|
const composer = createNameComposer();
|
|
const syncName = (): void => {
|
|
name.input.value = composer.update({
|
|
year: yearStart.input.value.trim(),
|
|
region: region.input.value,
|
|
type: t("DE_Reg_KindPlan"),
|
|
});
|
|
};
|
|
name.input.addEventListener("input", () => composer.edit(name.input.value));
|
|
for (const field of [yearStart, region]) field.input.addEventListener("input", syncName);
|
|
syncName();
|
|
|
|
const submit = (): void => {
|
|
const fields = [yearStart, region, name];
|
|
fields.forEach((field) => field.setError());
|
|
const y0 = Number.parseInt(yearStart.input.value, 10);
|
|
const errors: Array<[(typeof fields)[number], string | false]> = [
|
|
[yearStart, !(y0 >= 2000 && y0 <= 2100) && t("Common_Validation_NumberRange")],
|
|
[region, !region.input.value.trim() && t("B02_Proj_Error_Required")],
|
|
[name, !name.input.value.trim() && t("B02_Proj_Error_Required")],
|
|
];
|
|
const bad = errors.filter(([, message]) => message);
|
|
bad.forEach(([field, message]) => field.setError(message as string));
|
|
if (bad.length) return;
|
|
void createGroupProject(
|
|
"/d01/project",
|
|
{
|
|
project_name: name.input.value.trim(),
|
|
project_year: y0,
|
|
region: region.input.value.trim(),
|
|
},
|
|
ROUTES.D02_PLAN_BASE,
|
|
);
|
|
};
|
|
|
|
const grid = createFormGrid([yearStart, region, name].map((f) => f.root));
|
|
const actions = document.createElement("div");
|
|
actions.className = "ui-general-block__actions ui-general-block__actions--end";
|
|
actions.append(
|
|
createHelpButton(),
|
|
createButton({
|
|
label: t("Common_Btn_Cancel"),
|
|
variant: "ghost",
|
|
onClick: () => navigateTo(ROUTES.B01_ACCOUNT),
|
|
}),
|
|
createButton({ label: t("DE_Reg_Submit"), variant: "filled", onClick: submit }),
|
|
);
|
|
const layout = createGeneralLayout({
|
|
narrow: true,
|
|
title: t("DE_Reg_PlanTitle"),
|
|
subtitle: t("DE_Reg_PlanSubtitle"),
|
|
content: createCard({ body: [grid, actions], raised: true }),
|
|
});
|
|
root.append(layout.root);
|
|
}
|