-
setKeyword(e.target.value)}
- />
-
+
+
+ {isPending ? (
+
+
+
+
+ ) : isError ? (
+
+ 검토인력 목록을 불러오지 못했습니다.
+
+ ) : items.length === 0 ? (
+
+ 배치된 검토인력이 없습니다.
+
+ ) : (
+
+
+
+
+
+
+
+
+
+
+ 성명
+ 부서
+ 직위
+ 직급
+ 선택
+
+
+
+ {items.map((item) => (
+
+
+ {item.userUuidNm || item.userUuid}
+
+ {item.ognzNm || "-"}
+ {item.jbpsSeNm || "-"}
+ {item.jbgdSeNm || "-"}
+
+
+
+
+ ))}
+
+
+ )}
+
-
diff --git a/apps/as/src/pages/approval-line-management/ui/elapr-apln-grid.tsx b/apps/as/src/pages/approval-line-management/ui/elapr-apln-grid.tsx
index e3647d441..c2393715b 100644
--- a/apps/as/src/pages/approval-line-management/ui/elapr-apln-grid.tsx
+++ b/apps/as/src/pages/approval-line-management/ui/elapr-apln-grid.tsx
@@ -4,14 +4,10 @@ import { useState } from "react";
import { closestCenter, DndContext, type DragEndEvent } from "@dnd-kit/core";
import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
import { useAlertStore } from "@/shared/lib";
-import {
- useCreateElaprApln,
- useDeleteElaprApln,
- useElaprAplnPage,
- useUpdateElaprApln,
-} from "@/entities/elapr";
+import { useElaprAplnPage, useSaveMultiElaprApln } from "@/entities/elapr";
import {
Button,
Skeleton,
@@ -22,12 +18,18 @@ import {
TableRow,
} from "@common/components";
-import { assignAtrzSeqNumbers } from "../lib/assign-atrz-seq";
+import { buildSaveMultiPayload } from "../lib/build-save-multi-payload";
+import { hasUnsavedChanges } from "../lib/has-unsaved-changes";
import { useAplnRows } from "../lib/use-apln-rows";
import { useDndSensors } from "../lib/use-dnd-sensors";
-import { validateAplnRow, validateAtrzOrder } from "../lib/validators";
+import {
+ validateAllRowsForSave,
+ validateAplnRow,
+ validateAtrzOrder,
+ validateUniqueSeqNo,
+} from "../lib/validators";
import type { ElaprAplnRow } from "../model/apln-row-types";
-import type { ReviewerOption } from "../model/mock-reviewers";
+import type { ReviewerOption } from "../model/reviewer-option";
import { AprvrPickerDialog } from "./aprvr-picker-dialog";
import { SortableAplnRow } from "./sortable-apln-row";
@@ -37,6 +39,7 @@ interface ElaprAplnGridProps {
}
function ElaprAplnGrid({ elaprTmpltId }: ElaprAplnGridProps) {
+ const { confirm } = useConfirm();
const [pickerOpen, setPickerOpen] = useState(false);
const [pickingRowKey, setPickingRowKey] = useState
(null);
@@ -49,20 +52,19 @@ function ElaprAplnGrid({ elaprTmpltId }: ElaprAplnGridProps) {
sort: "atrzSeqNo,asc",
});
- const createMutation = useCreateElaprApln();
- const updateMutation = useUpdateElaprApln();
- const deleteMutation = useDeleteElaprApln();
+ const saveMultiMutation = useSaveMultiElaprApln();
const {
rows,
+ visibleRows,
editingRowKey,
isEditingLocked,
addRow,
startEdit,
updateRow,
cancelEdit,
- clearEditing,
- removeRowLocal,
+ commitEdit,
+ markDeleted,
reorderRows,
} = useAplnRows({
elaprTmpltId,
@@ -71,116 +73,65 @@ function ElaprAplnGrid({ elaprTmpltId }: ElaprAplnGridProps) {
const sensors = useDndSensors();
const isDisabled = !elaprTmpltId;
+ const serverRows = aplnQuery.data?.content ?? [];
+ const canSave = hasUnsavedChanges(rows, serverRows);
+ const pickingRow = pickingRowKey ? rows.find((r) => r.rowKey === pickingRowKey) : undefined;
const handleDragEnd = (event: DragEndEvent) => {
const { active, over } = event;
if (!over || active.id === over.id) return;
- const { orderError } = reorderRows(String(active.id), String(over.id));
- if (orderError) {
- alert(orderError);
- }
+ reorderRows(String(active.id), String(over.id));
};
const handleRowChange = (row: ElaprAplnRow, patch: Partial) => {
updateRow(row.rowKey, patch);
};
- const handleRowSave = async (row: ElaprAplnRow) => {
+ const handleRowSave = (row: ElaprAplnRow) => {
const fieldError = validateAplnRow(row);
if (fieldError) {
alert(fieldError);
return;
}
- const rowsWithSeq = assignAtrzSeqNumbers(rows.map((r) => (r.rowKey === row.rowKey ? row : r)));
- const savedRow = rowsWithSeq.find((r) => r.rowKey === row.rowKey);
- if (!savedRow) return;
-
- const orderError = validateAtrzOrder(rowsWithSeq);
- if (orderError) {
- alert(orderError);
- return;
- }
-
- if (!elaprTmpltId) return;
-
- if (savedRow.isNew) {
- await createMutation.mutateAsync({
- elaprTmpltId,
- aprvrUuid: savedRow.aprvrUuid,
- atrzSeComCd: savedRow.atrzSeComCd,
- atrzSeqNo: savedRow.atrzSeqNo,
- });
- } else if (savedRow.aplnId) {
- await updateMutation.mutateAsync({
- aplnId: savedRow.aplnId,
- body: {
- elaprTmpltId,
- aprvrUuid: savedRow.aprvrUuid,
- atrzSeComCd: savedRow.atrzSeComCd,
- atrzSeqNo: savedRow.atrzSeqNo,
- },
- });
- }
-
- clearEditing();
- await aplnQuery.refetch();
+ commitEdit(row.rowKey);
};
const handleRowDelete = async (row: ElaprAplnRow) => {
- if (!window.confirm("선택한 결재선을 삭제하시겠습니까?")) return;
+ markDeleted(row.rowKey);
+ };
- if (row.isNew) {
- removeRowLocal(row.rowKey);
+ const handleSaveAll = async () => {
+ if (!elaprTmpltId) return;
+
+ const rowsError = validateAllRowsForSave(rows, isEditingLocked);
+ if (rowsError) {
+ alert(rowsError);
return;
}
- if (!elaprTmpltId || !row.aplnId) return;
-
- await deleteMutation.mutateAsync({ aplnId: row.aplnId, elaprTmpltId });
- await aplnQuery.refetch();
- };
-
- const handleBulkSave = async () => {
- if (!elaprTmpltId || isEditingLocked) return;
-
- const rowsWithSeq = assignAtrzSeqNumbers(rows);
- const orderError = validateAtrzOrder(rowsWithSeq);
+ const orderError = validateAtrzOrder(rows);
if (orderError) {
alert(orderError);
return;
}
- const dirtyRows = rowsWithSeq.filter((r) => r.isDirty || r.isNew);
-
- for (const row of dirtyRows) {
- const fieldError = validateAplnRow(row);
- if (fieldError) {
- alert(fieldError);
- return;
- }
-
- if (row.isNew) {
- await createMutation.mutateAsync({
- elaprTmpltId,
- aprvrUuid: row.aprvrUuid,
- atrzSeComCd: row.atrzSeComCd,
- atrzSeqNo: row.atrzSeqNo,
- });
- } else if (row.aplnId) {
- await updateMutation.mutateAsync({
- aplnId: row.aplnId,
- body: {
- elaprTmpltId,
- aprvrUuid: row.aprvrUuid,
- atrzSeComCd: row.atrzSeComCd,
- atrzSeqNo: row.atrzSeqNo,
- },
- });
- }
+ const seqError = validateUniqueSeqNo(rows);
+ if (seqError) {
+ alert(seqError);
+ return;
}
+ const payload = buildSaveMultiPayload(rows, elaprTmpltId, serverRows);
+ if (payload.length === 0) {
+ alert("저장할 변경 사항이 없습니다.");
+ return;
+ }
+
+ if (!(await confirm("결재선을 저장하시겠습니까?"))) return;
+
+ await saveMultiMutation.mutateAsync({ body: payload, elaprTmpltId });
alert("결재선이 저장되었습니다.");
await aplnQuery.refetch();
};
@@ -201,13 +152,17 @@ function ElaprAplnGrid({ elaprTmpltId }: ElaprAplnGridProps) {
-
@@ -222,13 +177,22 @@ function ElaprAplnGrid({ elaprTmpltId }: ElaprAplnGridProps) {
상단 목록에서 결재서식을 선택해 주세요.
- ) : rows.length === 0 ? (
+ ) : visibleRows.length === 0 ? (
- 등록된 결재선이 없습니다. [행 추가]로 결재자를 등록하세요.
+ 등록된 결재선이 없습니다. [결재선 추가]로 결재자를 등록하세요.
) : (
+
+
+
+
+
+
+
+
+
@@ -242,10 +206,10 @@ function ElaprAplnGrid({ elaprTmpltId }: ElaprAplnGridProps) {
r.rowKey)}
+ items={visibleRows.map((r) => r.rowKey)}
strategy={verticalListSortingStrategy}
>
- {rows.map((row, index) => (
+ {visibleRows.map((row, index) => (
diff --git a/apps/as/src/pages/approval-line-management/ui/elapr-tmplt-list.tsx b/apps/as/src/pages/approval-line-management/ui/elapr-tmplt-list.tsx
index ae2b97e4c..7955f8b6b 100644
--- a/apps/as/src/pages/approval-line-management/ui/elapr-tmplt-list.tsx
+++ b/apps/as/src/pages/approval-line-management/ui/elapr-tmplt-list.tsx
@@ -2,6 +2,7 @@
import { useMemo, useState } from "react";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
import { getCoreRowModel, type RowSelectionState } from "@tanstack/react-table";
import { useDataTable } from "@/shared/lib";
@@ -24,6 +25,7 @@ interface ElaprTmpltListProps {
}
function ElaprTmpltList({ selectedTmpltId, onSelectTmplt }: ElaprTmpltListProps) {
+ const { confirm } = useConfirm();
const [dialogMode, setDialogMode] = useState<"create" | "edit" | null>(null);
const [editingTmplt, setEditingTmplt] = useState(null);
const [rowSelection, setRowSelection] = useState({});
@@ -46,14 +48,14 @@ function ElaprTmpltList({ selectedTmpltId, onSelectTmplt }: ElaprTmpltListProps)
setDialogMode("edit");
},
onDelete: async (row) => {
- if (!window.confirm("선택한 결재서식을 삭제하시겠습니까?")) return;
+ if (!(await confirm("선택한 결재서식을 삭제하시겠습니까?"))) return;
await deleteMutation.mutateAsync(row.elaprTmpltId);
if (selectedTmpltId === row.elaprTmpltId) {
onSelectTmplt(null);
}
},
}),
- [deleteMutation, onSelectTmplt, selectedTmpltId],
+ [confirm, deleteMutation, onSelectTmplt, selectedTmpltId],
);
const { tableComponent } = useDataTable({
@@ -112,7 +114,7 @@ function ElaprTmpltList({ selectedTmpltId, onSelectTmplt }: ElaprTmpltListProps)
전자결재선 관리 목록
-
diff --git a/apps/as/src/pages/approval-line-management/ui/sortable-apln-row.tsx b/apps/as/src/pages/approval-line-management/ui/sortable-apln-row.tsx
index c9fc44af6..fcb315bdb 100644
--- a/apps/as/src/pages/approval-line-management/ui/sortable-apln-row.tsx
+++ b/apps/as/src/pages/approval-line-management/ui/sortable-apln-row.tsx
@@ -36,7 +36,7 @@ function SortableAplnRow({
onChange,
onPickAprvr,
}: SortableAplnRowProps) {
- const { data: atrzSeCodes } = useCodeList("ATRZSECD");
+ const { data: atrzSeCodes } = useCodeList("ATRZSE");
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
id: row.rowKey,
@@ -50,7 +50,7 @@ function SortableAplnRow({
};
const rowDisabled = isLocked && !isEditing;
- const atrzSeLabel = row.atrzSeComNm ?? findCodeLabel(atrzSeCodes, row.atrzSeComCd);
+ const atrzSeLabel = row.atrzSeComNm || findCodeLabel(atrzSeCodes, row.atrzSeComCd);
return (
@@ -72,7 +72,7 @@ function SortableAplnRow({
{isEditing ? (
@@ -103,7 +103,7 @@ function SortableAplnRow({
{isEditing ? (
<>