147 lines
4.2 KiB
TypeScript
147 lines
4.2 KiB
TypeScript
"use client";
|
|
|
|
import { useCallback } from "react";
|
|
|
|
import { useConfirm } from "@frontend-opensource/use-react-hooks";
|
|
|
|
import { useAlertStore } from "@/shared/lib";
|
|
import { useAcntgSeMngPage, useSaveMultiAcntgSeMng } from "@/entities/acntg";
|
|
import {
|
|
Button,
|
|
Skeleton,
|
|
Table,
|
|
TableBody,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "@common/components";
|
|
|
|
import { acntgGridConfig } from "../lib/configs/acntg-config";
|
|
import { useSeGridRows } from "../lib/use-se-grid-rows";
|
|
import type { AcntgSeRow } from "../model/acntg/acntg-se-row-types";
|
|
|
|
import { AcntgSeRowComponent } from "./acntg-se-row";
|
|
|
|
function AcntgCodeTabPanel() {
|
|
const { confirm } = useConfirm();
|
|
const alert = useAlertStore((state) => state.setMessage);
|
|
|
|
const pageQuery = useAcntgSeMngPage({
|
|
page: 0,
|
|
size: 500,
|
|
sort: "sortSeq,asc",
|
|
});
|
|
|
|
const saveMultiMutation = useSaveMultiAcntgSeMng();
|
|
|
|
const handlePersist = useCallback(
|
|
async (payload: Parameters<typeof saveMultiMutation.mutateAsync>[0]) => {
|
|
await saveMultiMutation.mutateAsync(payload);
|
|
},
|
|
[saveMultiMutation],
|
|
);
|
|
|
|
const {
|
|
displayRows,
|
|
canSave,
|
|
updateRow,
|
|
addRootRow,
|
|
addChildRow,
|
|
removeDraft,
|
|
markDeleted,
|
|
resetFromServer,
|
|
save,
|
|
} = useSeGridRows(acntgGridConfig, {
|
|
serverContent: pageQuery.data?.content,
|
|
onAlert: alert,
|
|
onSave: handlePersist,
|
|
});
|
|
|
|
const handleDelete = async (row: AcntgSeRow) => {
|
|
if (!(await confirm("삭제하시겠습니까?"))) return;
|
|
|
|
if (row.isNew) {
|
|
removeDraft(row.rowKey);
|
|
return;
|
|
}
|
|
|
|
markDeleted(row.rowKey);
|
|
};
|
|
|
|
const handleSave = async () => {
|
|
if (!(await confirm("저장하시겠습니까?"))) return;
|
|
|
|
const saved = await save();
|
|
if (!saved) return;
|
|
|
|
alert("저장되었습니다.");
|
|
const result = await pageQuery.refetch();
|
|
resetFromServer(result.data?.content ?? []);
|
|
};
|
|
|
|
const isSaving = saveMultiMutation.isPending;
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="flex flex-wrap items-center justify-end gap-3 px-4">
|
|
<Button type="button" color="green" onClick={addRootRow}>
|
|
코드 추가
|
|
</Button>
|
|
<Button type="button" disabled={!canSave || isSaving} onClick={handleSave}>
|
|
저장
|
|
</Button>
|
|
</div>
|
|
|
|
{pageQuery.isPending ? (
|
|
<div className="flex flex-col gap-2 px-4 pb-4">
|
|
<Skeleton className="h-[4rem]" />
|
|
<Skeleton className="h-[16rem]" />
|
|
</div>
|
|
) : displayRows.length === 0 ? (
|
|
<p className="py-8 text-center text-lg text-muted-foreground">
|
|
등록된 코드가 없습니다. [코드 추가]로 1단계 코드를 등록하세요.
|
|
</p>
|
|
) : (
|
|
<div className="max-h-[60rem] overflow-y-auto px-4 pb-4 pt-1">
|
|
<Table caption="회계구분 코드 목록" className="w-full">
|
|
<colgroup>
|
|
<col width="14%" />
|
|
<col width="16%" />
|
|
<col width="26%" />
|
|
<col width="11%" />
|
|
<col width="8%" />
|
|
<col width="8%" />
|
|
<col width="11%" />
|
|
</colgroup>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>코드</TableHead>
|
|
<TableHead>코드명</TableHead>
|
|
<TableHead>설명</TableHead>
|
|
<TableHead>사용 여부</TableHead>
|
|
<TableHead>정렬순서</TableHead>
|
|
<TableHead>구분</TableHead>
|
|
<TableHead>관리</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{displayRows.map(({ row, depth }) => (
|
|
<AcntgSeRowComponent
|
|
key={row.rowKey}
|
|
row={row}
|
|
depth={depth}
|
|
onChange={(patch) => updateRow(row.rowKey, patch)}
|
|
onAddChild={() => addChildRow(row)}
|
|
onDelete={() => handleDelete(row)}
|
|
/>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export { AcntgCodeTabPanel };
|