refactor: Update ProcessWorkStandard component to manage work item selection by phase
- Removed the "정보조회" option from the default configuration. - Refactored the ProcessWorkStandardComponent to handle work item selection independently for each phase. - Updated the WorkPhaseSection to pass phase-specific parameters for work item selection and detail management. - Enhanced the useProcessWorkStandard hook to maintain separate states for selected work items and details by phase, improving data handling and user experience.
This commit is contained in:
kjs
@@ -17,8 +17,9 @@ export function useProcessWorkStandard(config: ProcessWorkStandardConfig) {
|
||||
const [items, setItems] = useState<ItemData[]>([]);
|
||||
const [routings, setRoutings] = useState<RoutingVersion[]>([]);
|
||||
const [workItems, setWorkItems] = useState<WorkItem[]>([]);
|
||||
const [selectedWorkItemDetails, setSelectedWorkItemDetails] = useState<WorkItemDetail[]>([]);
|
||||
const [selectedWorkItemId, setSelectedWorkItemId] = useState<string | null>(null);
|
||||
// 섹션(phase)별 독립적인 선택 상태 관리
|
||||
const [selectedWorkItemIdByPhase, setSelectedWorkItemIdByPhase] = useState<Record<string, string | null>>({});
|
||||
const [selectedDetailsByPhase, setSelectedDetailsByPhase] = useState<Record<string, WorkItemDetail[]>>({});
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
@@ -101,15 +102,15 @@ export function useProcessWorkStandard(config: ProcessWorkStandardConfig) {
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 작업 항목 상세 조회
|
||||
const fetchWorkItemDetails = useCallback(async (workItemId: string) => {
|
||||
// 작업 항목 상세 조회 (phase별 독립 저장)
|
||||
const fetchWorkItemDetails = useCallback(async (workItemId: string, phaseKey: string) => {
|
||||
try {
|
||||
const res = await apiClient.get(
|
||||
`${API_BASE}/work-items/${workItemId}/details`
|
||||
);
|
||||
if (res.data?.success) {
|
||||
setSelectedWorkItemDetails(res.data.data);
|
||||
setSelectedWorkItemId(workItemId);
|
||||
setSelectedDetailsByPhase(prev => ({ ...prev, [phaseKey]: res.data.data }));
|
||||
setSelectedWorkItemIdByPhase(prev => ({ ...prev, [phaseKey]: workItemId }));
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("상세 조회 실패", err);
|
||||
@@ -129,8 +130,8 @@ export function useProcessWorkStandard(config: ProcessWorkStandardConfig) {
|
||||
processName: null,
|
||||
}));
|
||||
setWorkItems([]);
|
||||
setSelectedWorkItemDetails([]);
|
||||
setSelectedWorkItemId(null);
|
||||
setSelectedDetailsByPhase({});
|
||||
setSelectedWorkItemIdByPhase({});
|
||||
await fetchRoutings(itemCode);
|
||||
},
|
||||
[fetchRoutings]
|
||||
@@ -151,8 +152,8 @@ export function useProcessWorkStandard(config: ProcessWorkStandardConfig) {
|
||||
routingDetailId,
|
||||
processName,
|
||||
}));
|
||||
setSelectedWorkItemDetails([]);
|
||||
setSelectedWorkItemId(null);
|
||||
setSelectedDetailsByPhase({});
|
||||
setSelectedWorkItemIdByPhase({});
|
||||
await fetchWorkItems(routingDetailId);
|
||||
},
|
||||
[fetchWorkItems]
|
||||
@@ -233,28 +234,43 @@ export function useProcessWorkStandard(config: ProcessWorkStandardConfig) {
|
||||
const res = await apiClient.delete(`${API_BASE}/work-items/${id}`);
|
||||
if (res.data?.success && selection.routingDetailId) {
|
||||
await fetchWorkItems(selection.routingDetailId);
|
||||
if (selectedWorkItemId === id) {
|
||||
setSelectedWorkItemDetails([]);
|
||||
setSelectedWorkItemId(null);
|
||||
}
|
||||
// 삭제된 항목이 선택되어 있던 phase의 선택 상태 초기화
|
||||
setSelectedWorkItemIdByPhase(prev => {
|
||||
const next = { ...prev };
|
||||
for (const phaseKey of Object.keys(next)) {
|
||||
if (next[phaseKey] === id) {
|
||||
next[phaseKey] = null;
|
||||
}
|
||||
}
|
||||
return next;
|
||||
});
|
||||
setSelectedDetailsByPhase(prev => {
|
||||
const next = { ...prev };
|
||||
for (const phaseKey of Object.keys(next)) {
|
||||
if (selectedWorkItemIdByPhase[phaseKey] === id) {
|
||||
next[phaseKey] = [];
|
||||
}
|
||||
}
|
||||
return next;
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("작업 항목 삭제 실패", err);
|
||||
}
|
||||
},
|
||||
[selection.routingDetailId, selectedWorkItemId, fetchWorkItems]
|
||||
[selection.routingDetailId, selectedWorkItemIdByPhase, fetchWorkItems]
|
||||
);
|
||||
|
||||
// 상세 추가
|
||||
const createDetail = useCallback(
|
||||
async (workItemId: string, data: Partial<WorkItemDetail>) => {
|
||||
async (workItemId: string, data: Partial<WorkItemDetail>, phaseKey: string) => {
|
||||
try {
|
||||
const res = await apiClient.post(`${API_BASE}/work-item-details`, {
|
||||
work_item_id: workItemId,
|
||||
...data,
|
||||
});
|
||||
if (res.data?.success) {
|
||||
await fetchWorkItemDetails(workItemId);
|
||||
await fetchWorkItemDetails(workItemId, phaseKey);
|
||||
if (selection.routingDetailId) {
|
||||
await fetchWorkItems(selection.routingDetailId);
|
||||
}
|
||||
@@ -268,32 +284,36 @@ export function useProcessWorkStandard(config: ProcessWorkStandardConfig) {
|
||||
|
||||
// 상세 수정
|
||||
const updateDetail = useCallback(
|
||||
async (id: string, data: Partial<WorkItemDetail>) => {
|
||||
async (id: string, data: Partial<WorkItemDetail>, phaseKey: string) => {
|
||||
try {
|
||||
const res = await apiClient.put(
|
||||
`${API_BASE}/work-item-details/${id}`,
|
||||
data
|
||||
);
|
||||
if (res.data?.success && selectedWorkItemId) {
|
||||
await fetchWorkItemDetails(selectedWorkItemId);
|
||||
if (res.data?.success) {
|
||||
const workItemId = selectedWorkItemIdByPhase[phaseKey];
|
||||
if (workItemId) {
|
||||
await fetchWorkItemDetails(workItemId, phaseKey);
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("상세 수정 실패", err);
|
||||
}
|
||||
},
|
||||
[selectedWorkItemId, fetchWorkItemDetails]
|
||||
[selectedWorkItemIdByPhase, fetchWorkItemDetails]
|
||||
);
|
||||
|
||||
// 상세 삭제
|
||||
const deleteDetail = useCallback(
|
||||
async (id: string) => {
|
||||
async (id: string, phaseKey: string) => {
|
||||
try {
|
||||
const res = await apiClient.delete(
|
||||
`${API_BASE}/work-item-details/${id}`
|
||||
);
|
||||
if (res.data?.success) {
|
||||
if (selectedWorkItemId) {
|
||||
await fetchWorkItemDetails(selectedWorkItemId);
|
||||
const workItemId = selectedWorkItemIdByPhase[phaseKey];
|
||||
if (workItemId) {
|
||||
await fetchWorkItemDetails(workItemId, phaseKey);
|
||||
}
|
||||
if (selection.routingDetailId) {
|
||||
await fetchWorkItems(selection.routingDetailId);
|
||||
@@ -304,7 +324,7 @@ export function useProcessWorkStandard(config: ProcessWorkStandardConfig) {
|
||||
}
|
||||
},
|
||||
[
|
||||
selectedWorkItemId,
|
||||
selectedWorkItemIdByPhase,
|
||||
selection.routingDetailId,
|
||||
fetchWorkItemDetails,
|
||||
fetchWorkItems,
|
||||
@@ -315,8 +335,8 @@ export function useProcessWorkStandard(config: ProcessWorkStandardConfig) {
|
||||
items,
|
||||
routings,
|
||||
workItems,
|
||||
selectedWorkItemDetails,
|
||||
selectedWorkItemId,
|
||||
selectedWorkItemIdByPhase,
|
||||
selectedDetailsByPhase,
|
||||
selection,
|
||||
loading,
|
||||
saving,
|
||||
@@ -325,7 +345,6 @@ export function useProcessWorkStandard(config: ProcessWorkStandardConfig) {
|
||||
selectProcess,
|
||||
fetchWorkItems,
|
||||
fetchWorkItemDetails,
|
||||
setSelectedWorkItemId,
|
||||
createWorkItem,
|
||||
updateWorkItem,
|
||||
deleteWorkItem,
|
||||
|
||||
Reference in New Issue
Block a user