Merge branch 'ksh-partial-quantity-flow' into ksh-v2-work
BLOCK DETAIL Phase 2~3 + 낙관적 잠금 기능을 ksh-v2-work에 통합한다. 주요 병합 내용: - BLOCK DETAIL Phase 2: 생산 공정 관리 백엔드 API (create-work-processes, timer) - BLOCK DETAIL Phase 3: pop-work-detail 컴포넌트 + 모달 캔버스 시스템 - 낙관적 잠금 + 소유자 기반 액션 제어 + 디자이너 설정 UI - LOCK-OWNER 카드 비활성화 UI 누락분 반영 충돌 해결: 0건 (자동 병합 완료)
This commit is contained in:
SeongHyun Kim
commit
138f309c09
|
|
@ -124,6 +124,7 @@ import entitySearchRoutes, {
|
|||
import screenEmbeddingRoutes from "./routes/screenEmbeddingRoutes"; // 화면 임베딩 및 데이터 전달
|
||||
import screenGroupRoutes from "./routes/screenGroupRoutes"; // 화면 그룹 관리
|
||||
import popActionRoutes from "./routes/popActionRoutes"; // POP 액션 실행
|
||||
import popProductionRoutes from "./routes/popProductionRoutes"; // POP 생산 관리 (공정 생성/타이머)
|
||||
import vehicleTripRoutes from "./routes/vehicleTripRoutes"; // 차량 운행 이력 관리
|
||||
import approvalRoutes from "./routes/approvalRoutes"; // 결재 시스템
|
||||
import driverRoutes from "./routes/driverRoutes"; // 공차중계 운전자 관리
|
||||
|
|
@ -259,6 +260,7 @@ app.use("/api/table-management", entityJoinRoutes); // 🎯 Entity 조인 기능
|
|||
app.use("/api/screen-management", screenManagementRoutes);
|
||||
app.use("/api/screen-groups", screenGroupRoutes); // 화면 그룹 관리
|
||||
app.use("/api/pop", popActionRoutes); // POP 액션 실행
|
||||
app.use("/api/pop/production", popProductionRoutes); // POP 생산 관리
|
||||
app.use("/api/common-codes", commonCodeRoutes);
|
||||
app.use("/api/dynamic-form", dynamicFormRoutes);
|
||||
app.use("/api/files", fileRoutes);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,291 @@
|
|||
import { Response } from "express";
|
||||
import { getPool } from "../database/db";
|
||||
import logger from "../utils/logger";
|
||||
import { AuthenticatedRequest } from "../middleware/authMiddleware";
|
||||
|
||||
/**
|
||||
* D-BE1: 작업지시 공정 일괄 생성
|
||||
* PC에서 작업지시 생성 후 호출. 1 트랜잭션으로 work_order_process + process_work_result 일괄 생성.
|
||||
*/
|
||||
export const createWorkProcesses = async (
|
||||
req: AuthenticatedRequest,
|
||||
res: Response
|
||||
) => {
|
||||
const pool = getPool();
|
||||
const client = await pool.connect();
|
||||
|
||||
try {
|
||||
const companyCode = req.user!.companyCode;
|
||||
const userId = req.user!.userId;
|
||||
|
||||
const { work_instruction_id, item_code, routing_version_id, plan_qty } =
|
||||
req.body;
|
||||
|
||||
if (!work_instruction_id || !routing_version_id) {
|
||||
return res.status(400).json({
|
||||
success: false,
|
||||
message:
|
||||
"work_instruction_id와 routing_version_id는 필수입니다.",
|
||||
});
|
||||
}
|
||||
|
||||
logger.info("[pop/production] create-work-processes 요청", {
|
||||
companyCode,
|
||||
userId,
|
||||
work_instruction_id,
|
||||
item_code,
|
||||
routing_version_id,
|
||||
plan_qty,
|
||||
});
|
||||
|
||||
await client.query("BEGIN");
|
||||
|
||||
// 중복 호출 방지: 이미 생성된 공정이 있는지 확인
|
||||
const existCheck = await client.query(
|
||||
`SELECT COUNT(*) as cnt FROM work_order_process
|
||||
WHERE wo_id = $1 AND company_code = $2`,
|
||||
[work_instruction_id, companyCode]
|
||||
);
|
||||
if (parseInt(existCheck.rows[0].cnt, 10) > 0) {
|
||||
await client.query("ROLLBACK");
|
||||
return res.status(409).json({
|
||||
success: false,
|
||||
message: "이미 공정이 생성된 작업지시입니다.",
|
||||
});
|
||||
}
|
||||
|
||||
// 1. item_routing_detail + process_mng JOIN (공정 목록 + 공정명)
|
||||
const routingDetails = await client.query(
|
||||
`SELECT rd.id, rd.seq_no, rd.process_code,
|
||||
COALESCE(pm.process_name, rd.process_code) as process_name,
|
||||
rd.is_required, rd.is_fixed_order, rd.standard_time
|
||||
FROM item_routing_detail rd
|
||||
LEFT JOIN process_mng pm ON pm.process_code = rd.process_code
|
||||
AND pm.company_code = rd.company_code
|
||||
WHERE rd.routing_version_id = $1 AND rd.company_code = $2
|
||||
ORDER BY CAST(rd.seq_no AS int) NULLS LAST`,
|
||||
[routing_version_id, companyCode]
|
||||
);
|
||||
|
||||
if (routingDetails.rows.length === 0) {
|
||||
await client.query("ROLLBACK");
|
||||
return res.status(404).json({
|
||||
success: false,
|
||||
message: "라우팅 버전에 등록된 공정이 없습니다.",
|
||||
});
|
||||
}
|
||||
|
||||
const processes: Array<{
|
||||
id: string;
|
||||
seq_no: string;
|
||||
process_name: string;
|
||||
checklist_count: number;
|
||||
}> = [];
|
||||
let totalChecklists = 0;
|
||||
|
||||
for (const rd of routingDetails.rows) {
|
||||
// 2. work_order_process INSERT
|
||||
const wopResult = await client.query(
|
||||
`INSERT INTO work_order_process (
|
||||
company_code, wo_id, seq_no, process_code, process_name,
|
||||
is_required, is_fixed_order, standard_time, plan_qty,
|
||||
status, routing_detail_id, writer
|
||||
) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12)
|
||||
RETURNING id`,
|
||||
[
|
||||
companyCode,
|
||||
work_instruction_id,
|
||||
rd.seq_no,
|
||||
rd.process_code,
|
||||
rd.process_name,
|
||||
rd.is_required,
|
||||
rd.is_fixed_order,
|
||||
rd.standard_time,
|
||||
plan_qty || null,
|
||||
"waiting",
|
||||
rd.id,
|
||||
userId,
|
||||
]
|
||||
);
|
||||
const wopId = wopResult.rows[0].id;
|
||||
|
||||
// 3. process_work_result INSERT (스냅샷 복사)
|
||||
// process_work_item + process_work_item_detail에서 해당 routing_detail의 항목 조회 후 복사
|
||||
const snapshotResult = await client.query(
|
||||
`INSERT INTO process_work_result (
|
||||
company_code, work_order_process_id,
|
||||
source_work_item_id, source_detail_id,
|
||||
work_phase, item_title, item_sort_order,
|
||||
detail_content, detail_type, detail_sort_order, is_required,
|
||||
inspection_code, inspection_method, unit, lower_limit, upper_limit,
|
||||
input_type, lookup_target, display_fields, duration_minutes,
|
||||
status, writer
|
||||
)
|
||||
SELECT
|
||||
pwi.company_code, $1,
|
||||
pwi.id, pwd.id,
|
||||
pwi.work_phase, pwi.title, pwi.sort_order::text,
|
||||
pwd.content, pwd.detail_type, pwd.sort_order::text, pwd.is_required,
|
||||
pwd.inspection_code, pwd.inspection_method, pwd.unit, pwd.lower_limit, pwd.upper_limit,
|
||||
pwd.input_type, pwd.lookup_target, pwd.display_fields, pwd.duration_minutes::text,
|
||||
'pending', $2
|
||||
FROM process_work_item pwi
|
||||
JOIN process_work_item_detail pwd ON pwd.work_item_id = pwi.id
|
||||
AND pwd.company_code = pwi.company_code
|
||||
WHERE pwi.routing_detail_id = $3
|
||||
AND pwi.company_code = $4
|
||||
ORDER BY pwi.sort_order, pwd.sort_order`,
|
||||
[wopId, userId, rd.id, companyCode]
|
||||
);
|
||||
|
||||
const checklistCount = snapshotResult.rowCount ?? 0;
|
||||
totalChecklists += checklistCount;
|
||||
|
||||
processes.push({
|
||||
id: wopId,
|
||||
seq_no: rd.seq_no,
|
||||
process_name: rd.process_name,
|
||||
checklist_count: checklistCount,
|
||||
});
|
||||
|
||||
logger.info("[pop/production] 공정 생성 완료", {
|
||||
wopId,
|
||||
processName: rd.process_name,
|
||||
checklistCount,
|
||||
});
|
||||
}
|
||||
|
||||
await client.query("COMMIT");
|
||||
|
||||
logger.info("[pop/production] create-work-processes 완료", {
|
||||
companyCode,
|
||||
work_instruction_id,
|
||||
total_processes: processes.length,
|
||||
total_checklists: totalChecklists,
|
||||
});
|
||||
|
||||
return res.json({
|
||||
success: true,
|
||||
data: {
|
||||
processes,
|
||||
total_processes: processes.length,
|
||||
total_checklists: totalChecklists,
|
||||
},
|
||||
});
|
||||
} catch (error: any) {
|
||||
await client.query("ROLLBACK");
|
||||
logger.error("[pop/production] create-work-processes 오류:", error);
|
||||
return res.status(500).json({
|
||||
success: false,
|
||||
message: error.message || "공정 생성 중 오류가 발생했습니다.",
|
||||
});
|
||||
} finally {
|
||||
client.release();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* D-BE2: 타이머 API (시작/일시정지/재시작)
|
||||
*/
|
||||
export const controlTimer = async (
|
||||
req: AuthenticatedRequest,
|
||||
res: Response
|
||||
) => {
|
||||
const pool = getPool();
|
||||
|
||||
try {
|
||||
const companyCode = req.user!.companyCode;
|
||||
const userId = req.user!.userId;
|
||||
|
||||
const { work_order_process_id, action } = req.body;
|
||||
|
||||
if (!work_order_process_id || !action) {
|
||||
return res.status(400).json({
|
||||
success: false,
|
||||
message: "work_order_process_id와 action은 필수입니다.",
|
||||
});
|
||||
}
|
||||
|
||||
if (!["start", "pause", "resume"].includes(action)) {
|
||||
return res.status(400).json({
|
||||
success: false,
|
||||
message: "action은 start, pause, resume 중 하나여야 합니다.",
|
||||
});
|
||||
}
|
||||
|
||||
logger.info("[pop/production] timer 요청", {
|
||||
companyCode,
|
||||
userId,
|
||||
work_order_process_id,
|
||||
action,
|
||||
});
|
||||
|
||||
let result;
|
||||
|
||||
switch (action) {
|
||||
case "start":
|
||||
// 최초 1회만 설정, 이미 있으면 무시
|
||||
result = await pool.query(
|
||||
`UPDATE work_order_process
|
||||
SET started_at = CASE WHEN started_at IS NULL THEN NOW()::text ELSE started_at END,
|
||||
status = CASE WHEN status = 'waiting' THEN 'in_progress' ELSE status END,
|
||||
updated_date = NOW()
|
||||
WHERE id = $1 AND company_code = $2
|
||||
RETURNING id, started_at, status`,
|
||||
[work_order_process_id, companyCode]
|
||||
);
|
||||
break;
|
||||
|
||||
case "pause":
|
||||
result = await pool.query(
|
||||
`UPDATE work_order_process
|
||||
SET paused_at = NOW()::text,
|
||||
updated_date = NOW()
|
||||
WHERE id = $1 AND company_code = $2 AND paused_at IS NULL
|
||||
RETURNING id, paused_at`,
|
||||
[work_order_process_id, companyCode]
|
||||
);
|
||||
break;
|
||||
|
||||
case "resume":
|
||||
// 일시정지 시간 누적 후 paused_at 초기화
|
||||
result = await pool.query(
|
||||
`UPDATE work_order_process
|
||||
SET total_paused_time = (
|
||||
COALESCE(total_paused_time::int, 0)
|
||||
+ EXTRACT(EPOCH FROM NOW() - paused_at::timestamp)::int
|
||||
)::text,
|
||||
paused_at = NULL,
|
||||
updated_date = NOW()
|
||||
WHERE id = $1 AND company_code = $2 AND paused_at IS NOT NULL
|
||||
RETURNING id, total_paused_time`,
|
||||
[work_order_process_id, companyCode]
|
||||
);
|
||||
break;
|
||||
}
|
||||
|
||||
if (!result || result.rowCount === 0) {
|
||||
return res.status(404).json({
|
||||
success: false,
|
||||
message: "대상 공정을 찾을 수 없거나 현재 상태에서 수행할 수 없습니다.",
|
||||
});
|
||||
}
|
||||
|
||||
logger.info("[pop/production] timer 완료", {
|
||||
action,
|
||||
work_order_process_id,
|
||||
result: result.rows[0],
|
||||
});
|
||||
|
||||
return res.json({
|
||||
success: true,
|
||||
data: result.rows[0],
|
||||
});
|
||||
} catch (error: any) {
|
||||
logger.error("[pop/production] timer 오류:", error);
|
||||
return res.status(500).json({
|
||||
success: false,
|
||||
message: error.message || "타이머 처리 중 오류가 발생했습니다.",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
|
@ -104,6 +104,11 @@ interface TaskBody {
|
|||
manualItemField?: string;
|
||||
manualPkColumn?: string;
|
||||
cartScreenId?: string;
|
||||
preCondition?: {
|
||||
column: string;
|
||||
expectedValue: string;
|
||||
failMessage?: string;
|
||||
};
|
||||
}
|
||||
|
||||
function resolveStatusValue(
|
||||
|
|
@ -334,14 +339,30 @@ router.post("/execute-action", authenticateToken, async (req: Request, res: Resp
|
|||
const item = items[i] ?? {};
|
||||
const resolved = resolveStatusValue("conditional", task.fixedValue ?? "", task.conditionalValue, item);
|
||||
const autoUpdated = task.targetColumn !== "updated_date" ? `, "updated_date" = NOW()` : "";
|
||||
await client.query(
|
||||
`UPDATE "${task.targetTable}" SET "${task.targetColumn}" = $1${autoUpdated} WHERE company_code = $2 AND "${pkColumn}" = $3`,
|
||||
[resolved, companyCode, lookupValues[i]],
|
||||
let condWhere = `WHERE company_code = $2 AND "${pkColumn}" = $3`;
|
||||
const condParams: unknown[] = [resolved, companyCode, lookupValues[i]];
|
||||
if (task.preCondition?.column && task.preCondition?.expectedValue) {
|
||||
if (!isSafeIdentifier(task.preCondition.column)) throw new Error(`유효하지 않은 preCondition 컬럼명: ${task.preCondition.column}`);
|
||||
condWhere += ` AND "${task.preCondition.column}" = $4`;
|
||||
condParams.push(task.preCondition.expectedValue);
|
||||
}
|
||||
const condResult = await client.query(
|
||||
`UPDATE "${task.targetTable}" SET "${task.targetColumn}" = $1${autoUpdated} ${condWhere}`,
|
||||
condParams,
|
||||
);
|
||||
if (task.preCondition && condResult.rowCount === 0) {
|
||||
const err = new Error(task.preCondition.failMessage || "조건이 일치하지 않아 처리할 수 없습니다.");
|
||||
(err as any).isPreConditionFail = true;
|
||||
throw err;
|
||||
}
|
||||
processedCount++;
|
||||
}
|
||||
} else if (opType === "db-conditional") {
|
||||
// DB 컬럼 간 비교 후 값 판정 (CASE WHEN col_a >= col_b THEN '완료' ELSE '진행중')
|
||||
if (task.preCondition) {
|
||||
logger.warn("[pop/execute-action] db-conditional에는 preCondition 미지원, 무시됨", {
|
||||
taskId: task.id, preCondition: task.preCondition,
|
||||
});
|
||||
}
|
||||
if (!task.compareColumn || !task.compareOperator || !task.compareWith) break;
|
||||
if (!isSafeIdentifier(task.compareColumn) || !isSafeIdentifier(task.compareWith)) break;
|
||||
|
||||
|
|
@ -392,10 +413,24 @@ router.post("/execute-action", authenticateToken, async (req: Request, res: Resp
|
|||
}
|
||||
|
||||
const autoUpdatedDate = task.targetColumn !== "updated_date" ? `, "updated_date" = NOW()` : "";
|
||||
await client.query(
|
||||
`UPDATE "${task.targetTable}" SET ${setSql}${autoUpdatedDate} WHERE company_code = $2 AND "${pkColumn}" = $3`,
|
||||
[value, companyCode, lookupValues[i]],
|
||||
let whereSql = `WHERE company_code = $2 AND "${pkColumn}" = $3`;
|
||||
const queryParams: unknown[] = [value, companyCode, lookupValues[i]];
|
||||
if (task.preCondition?.column && task.preCondition?.expectedValue) {
|
||||
if (!isSafeIdentifier(task.preCondition.column)) {
|
||||
throw new Error(`유효하지 않은 preCondition 컬럼명: ${task.preCondition.column}`);
|
||||
}
|
||||
whereSql += ` AND "${task.preCondition.column}" = $4`;
|
||||
queryParams.push(task.preCondition.expectedValue);
|
||||
}
|
||||
const updateResult = await client.query(
|
||||
`UPDATE "${task.targetTable}" SET ${setSql}${autoUpdatedDate} ${whereSql}`,
|
||||
queryParams,
|
||||
);
|
||||
if (task.preCondition && updateResult.rowCount === 0) {
|
||||
const err = new Error(task.preCondition.failMessage || "조건이 일치하지 않아 처리할 수 없습니다.");
|
||||
(err as any).isPreConditionFail = true;
|
||||
throw err;
|
||||
}
|
||||
processedCount++;
|
||||
}
|
||||
}
|
||||
|
|
@ -746,6 +781,16 @@ router.post("/execute-action", authenticateToken, async (req: Request, res: Resp
|
|||
});
|
||||
} catch (error: any) {
|
||||
await client.query("ROLLBACK");
|
||||
|
||||
if (error.isPreConditionFail) {
|
||||
logger.warn("[pop/execute-action] preCondition 실패", { message: error.message });
|
||||
return res.status(409).json({
|
||||
success: false,
|
||||
message: error.message,
|
||||
errorCode: "PRE_CONDITION_FAIL",
|
||||
});
|
||||
}
|
||||
|
||||
logger.error("[pop/execute-action] 오류:", error);
|
||||
return res.status(500).json({
|
||||
success: false,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
import { Router } from "express";
|
||||
import { authenticateToken } from "../middleware/authMiddleware";
|
||||
import {
|
||||
createWorkProcesses,
|
||||
controlTimer,
|
||||
} from "../controllers/popProductionController";
|
||||
|
||||
const router = Router();
|
||||
|
||||
router.use(authenticateToken);
|
||||
|
||||
router.post("/create-work-processes", createWorkProcesses);
|
||||
router.post("/timer", controlTimer);
|
||||
|
||||
export default router;
|
||||
|
|
@ -403,7 +403,7 @@ export default function PopCanvas({
|
|||
// 이동 중인 컴포넌트의 현재 유효 위치에서 colSpan/rowSpan 가져오기
|
||||
// 숨김 컴포넌트는 effectivePositions에 없으므로 원본 사용
|
||||
const currentEffectivePos = effectivePositions.get(dragItem.componentId);
|
||||
const componentData = layout.components[dragItem.componentId];
|
||||
const componentData = activeLayout.components[dragItem.componentId];
|
||||
|
||||
if (!currentEffectivePos && !componentData) return;
|
||||
|
||||
|
|
|
|||
|
|
@ -389,97 +389,156 @@ export default function PopDesigner({
|
|||
|
||||
const handleMoveComponent = useCallback(
|
||||
(componentId: string, newPosition: PopGridPosition) => {
|
||||
const component = layout.components[componentId];
|
||||
if (!component) return;
|
||||
|
||||
// 기본 모드(tablet_landscape, 12칸)인 경우: 원본 position 직접 수정
|
||||
if (currentMode === "tablet_landscape") {
|
||||
const newLayout = {
|
||||
...layout,
|
||||
components: {
|
||||
...layout.components,
|
||||
[componentId]: {
|
||||
...component,
|
||||
position: newPosition,
|
||||
},
|
||||
},
|
||||
};
|
||||
setLayout(newLayout);
|
||||
saveToHistory(newLayout);
|
||||
setHasChanges(true);
|
||||
} else {
|
||||
// 다른 모드인 경우: 오버라이드에 저장
|
||||
// 숨김 상태였던 컴포넌트를 이동하면 숨김 해제도 함께 처리
|
||||
const currentHidden = layout.overrides?.[currentMode]?.hidden || [];
|
||||
const isHidden = currentHidden.includes(componentId);
|
||||
const newHidden = isHidden
|
||||
? currentHidden.filter(id => id !== componentId)
|
||||
: currentHidden;
|
||||
|
||||
const newLayout = {
|
||||
...layout,
|
||||
overrides: {
|
||||
...layout.overrides,
|
||||
[currentMode]: {
|
||||
...layout.overrides?.[currentMode],
|
||||
positions: {
|
||||
...layout.overrides?.[currentMode]?.positions,
|
||||
[componentId]: newPosition,
|
||||
setLayout((prev) => {
|
||||
if (activeCanvasId === "main") {
|
||||
const component = prev.components[componentId];
|
||||
if (!component) return prev;
|
||||
|
||||
if (currentMode === "tablet_landscape") {
|
||||
const newLayout = {
|
||||
...prev,
|
||||
components: {
|
||||
...prev.components,
|
||||
[componentId]: { ...component, position: newPosition },
|
||||
},
|
||||
// 숨김 배열 업데이트 (빈 배열이면 undefined로)
|
||||
hidden: newHidden.length > 0 ? newHidden : undefined,
|
||||
},
|
||||
},
|
||||
};
|
||||
setLayout(newLayout);
|
||||
saveToHistory(newLayout);
|
||||
setHasChanges(true);
|
||||
}
|
||||
};
|
||||
saveToHistory(newLayout);
|
||||
return newLayout;
|
||||
} else {
|
||||
const currentHidden = prev.overrides?.[currentMode]?.hidden || [];
|
||||
const newHidden = currentHidden.filter(id => id !== componentId);
|
||||
const newLayout = {
|
||||
...prev,
|
||||
overrides: {
|
||||
...prev.overrides,
|
||||
[currentMode]: {
|
||||
...prev.overrides?.[currentMode],
|
||||
positions: {
|
||||
...prev.overrides?.[currentMode]?.positions,
|
||||
[componentId]: newPosition,
|
||||
},
|
||||
hidden: newHidden.length > 0 ? newHidden : undefined,
|
||||
},
|
||||
},
|
||||
};
|
||||
saveToHistory(newLayout);
|
||||
return newLayout;
|
||||
}
|
||||
} else {
|
||||
// 모달 캔버스
|
||||
const newLayout = {
|
||||
...prev,
|
||||
modals: (prev.modals || []).map(m => {
|
||||
if (m.id !== activeCanvasId) return m;
|
||||
const component = m.components[componentId];
|
||||
if (!component) return m;
|
||||
|
||||
if (currentMode === "tablet_landscape") {
|
||||
return {
|
||||
...m,
|
||||
components: {
|
||||
...m.components,
|
||||
[componentId]: { ...component, position: newPosition },
|
||||
},
|
||||
};
|
||||
} else {
|
||||
const currentHidden = m.overrides?.[currentMode]?.hidden || [];
|
||||
const newHidden = currentHidden.filter(id => id !== componentId);
|
||||
return {
|
||||
...m,
|
||||
overrides: {
|
||||
...m.overrides,
|
||||
[currentMode]: {
|
||||
...m.overrides?.[currentMode],
|
||||
positions: {
|
||||
...m.overrides?.[currentMode]?.positions,
|
||||
[componentId]: newPosition,
|
||||
},
|
||||
hidden: newHidden.length > 0 ? newHidden : undefined,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
}),
|
||||
};
|
||||
saveToHistory(newLayout);
|
||||
return newLayout;
|
||||
}
|
||||
});
|
||||
setHasChanges(true);
|
||||
},
|
||||
[layout, saveToHistory, currentMode]
|
||||
[saveToHistory, currentMode, activeCanvasId]
|
||||
);
|
||||
|
||||
const handleResizeComponent = useCallback(
|
||||
(componentId: string, newPosition: PopGridPosition) => {
|
||||
const component = layout.components[componentId];
|
||||
if (!component) return;
|
||||
|
||||
// 기본 모드(tablet_landscape, 12칸)인 경우: 원본 position 직접 수정
|
||||
if (currentMode === "tablet_landscape") {
|
||||
const newLayout = {
|
||||
...layout,
|
||||
components: {
|
||||
...layout.components,
|
||||
[componentId]: {
|
||||
...component,
|
||||
position: newPosition,
|
||||
},
|
||||
},
|
||||
};
|
||||
setLayout(newLayout);
|
||||
// 리사이즈는 드래그 중 계속 호출되므로 히스토리는 마우스업 시에만 저장
|
||||
// 현재는 간단히 매번 저장 (최적화 가능)
|
||||
setHasChanges(true);
|
||||
} else {
|
||||
// 다른 모드인 경우: 오버라이드에 저장
|
||||
const newLayout = {
|
||||
...layout,
|
||||
overrides: {
|
||||
...layout.overrides,
|
||||
[currentMode]: {
|
||||
...layout.overrides?.[currentMode],
|
||||
positions: {
|
||||
...layout.overrides?.[currentMode]?.positions,
|
||||
[componentId]: newPosition,
|
||||
setLayout((prev) => {
|
||||
if (activeCanvasId === "main") {
|
||||
const component = prev.components[componentId];
|
||||
if (!component) return prev;
|
||||
|
||||
if (currentMode === "tablet_landscape") {
|
||||
return {
|
||||
...prev,
|
||||
components: {
|
||||
...prev.components,
|
||||
[componentId]: { ...component, position: newPosition },
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
setLayout(newLayout);
|
||||
setHasChanges(true);
|
||||
}
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
...prev,
|
||||
overrides: {
|
||||
...prev.overrides,
|
||||
[currentMode]: {
|
||||
...prev.overrides?.[currentMode],
|
||||
positions: {
|
||||
...prev.overrides?.[currentMode]?.positions,
|
||||
[componentId]: newPosition,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
} else {
|
||||
// 모달 캔버스
|
||||
return {
|
||||
...prev,
|
||||
modals: (prev.modals || []).map(m => {
|
||||
if (m.id !== activeCanvasId) return m;
|
||||
const component = m.components[componentId];
|
||||
if (!component) return m;
|
||||
|
||||
if (currentMode === "tablet_landscape") {
|
||||
return {
|
||||
...m,
|
||||
components: {
|
||||
...m.components,
|
||||
[componentId]: { ...component, position: newPosition },
|
||||
},
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
...m,
|
||||
overrides: {
|
||||
...m.overrides,
|
||||
[currentMode]: {
|
||||
...m.overrides?.[currentMode],
|
||||
positions: {
|
||||
...m.overrides?.[currentMode]?.positions,
|
||||
[componentId]: newPosition,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
}),
|
||||
};
|
||||
}
|
||||
});
|
||||
setHasChanges(true);
|
||||
},
|
||||
[layout, currentMode]
|
||||
[currentMode, activeCanvasId]
|
||||
);
|
||||
|
||||
const handleResizeEnd = useCallback(
|
||||
|
|
@ -493,51 +552,87 @@ export default function PopDesigner({
|
|||
// 컴포넌트가 자신의 rowSpan/colSpan을 동적으로 변경 요청 (CardList 확장 등)
|
||||
const handleRequestResize = useCallback(
|
||||
(componentId: string, newRowSpan: number, newColSpan?: number) => {
|
||||
const component = layout.components[componentId];
|
||||
if (!component) return;
|
||||
setLayout((prev) => {
|
||||
const buildPosition = (comp: PopComponentDefinition) => ({
|
||||
...comp.position,
|
||||
rowSpan: newRowSpan,
|
||||
...(newColSpan !== undefined ? { colSpan: newColSpan } : {}),
|
||||
});
|
||||
|
||||
const newPosition = {
|
||||
...component.position,
|
||||
rowSpan: newRowSpan,
|
||||
...(newColSpan !== undefined ? { colSpan: newColSpan } : {}),
|
||||
};
|
||||
|
||||
// 기본 모드(tablet_landscape)인 경우: 원본 position 직접 수정
|
||||
if (currentMode === "tablet_landscape") {
|
||||
const newLayout = {
|
||||
...layout,
|
||||
components: {
|
||||
...layout.components,
|
||||
[componentId]: {
|
||||
...component,
|
||||
position: newPosition,
|
||||
},
|
||||
},
|
||||
};
|
||||
setLayout(newLayout);
|
||||
saveToHistory(newLayout);
|
||||
setHasChanges(true);
|
||||
} else {
|
||||
// 다른 모드인 경우: 오버라이드에 저장
|
||||
const newLayout = {
|
||||
...layout,
|
||||
overrides: {
|
||||
...layout.overrides,
|
||||
[currentMode]: {
|
||||
...layout.overrides?.[currentMode],
|
||||
positions: {
|
||||
...layout.overrides?.[currentMode]?.positions,
|
||||
[componentId]: newPosition,
|
||||
if (activeCanvasId === "main") {
|
||||
const component = prev.components[componentId];
|
||||
if (!component) return prev;
|
||||
const newPosition = buildPosition(component);
|
||||
|
||||
if (currentMode === "tablet_landscape") {
|
||||
const newLayout = {
|
||||
...prev,
|
||||
components: {
|
||||
...prev.components,
|
||||
[componentId]: { ...component, position: newPosition },
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
setLayout(newLayout);
|
||||
saveToHistory(newLayout);
|
||||
setHasChanges(true);
|
||||
}
|
||||
};
|
||||
saveToHistory(newLayout);
|
||||
return newLayout;
|
||||
} else {
|
||||
const newLayout = {
|
||||
...prev,
|
||||
overrides: {
|
||||
...prev.overrides,
|
||||
[currentMode]: {
|
||||
...prev.overrides?.[currentMode],
|
||||
positions: {
|
||||
...prev.overrides?.[currentMode]?.positions,
|
||||
[componentId]: newPosition,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
saveToHistory(newLayout);
|
||||
return newLayout;
|
||||
}
|
||||
} else {
|
||||
// 모달 캔버스
|
||||
const newLayout = {
|
||||
...prev,
|
||||
modals: (prev.modals || []).map(m => {
|
||||
if (m.id !== activeCanvasId) return m;
|
||||
const component = m.components[componentId];
|
||||
if (!component) return m;
|
||||
const newPosition = buildPosition(component);
|
||||
|
||||
if (currentMode === "tablet_landscape") {
|
||||
return {
|
||||
...m,
|
||||
components: {
|
||||
...m.components,
|
||||
[componentId]: { ...component, position: newPosition },
|
||||
},
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
...m,
|
||||
overrides: {
|
||||
...m.overrides,
|
||||
[currentMode]: {
|
||||
...m.overrides?.[currentMode],
|
||||
positions: {
|
||||
...m.overrides?.[currentMode]?.positions,
|
||||
[componentId]: newPosition,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
}),
|
||||
};
|
||||
saveToHistory(newLayout);
|
||||
return newLayout;
|
||||
}
|
||||
});
|
||||
setHasChanges(true);
|
||||
},
|
||||
[layout, currentMode, saveToHistory]
|
||||
[currentMode, saveToHistory, activeCanvasId]
|
||||
);
|
||||
|
||||
// ========================================
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
import { useDrag } from "react-dnd";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { PopComponentType } from "../types/pop-layout";
|
||||
import { Square, FileText, MousePointer, BarChart3, LayoutGrid, MousePointerClick, List, Search, TextCursorInput, ScanLine, UserCircle, BarChart2 } from "lucide-react";
|
||||
import { Square, FileText, MousePointer, BarChart3, LayoutGrid, MousePointerClick, List, Search, TextCursorInput, ScanLine, UserCircle, BarChart2, ClipboardCheck } from "lucide-react";
|
||||
import { DND_ITEM_TYPES } from "../constants";
|
||||
|
||||
// 컴포넌트 정의
|
||||
|
|
@ -93,6 +93,12 @@ const PALETTE_ITEMS: PaletteItem[] = [
|
|||
icon: UserCircle,
|
||||
description: "사용자 프로필 / PC 전환 / 로그아웃",
|
||||
},
|
||||
{
|
||||
type: "pop-work-detail",
|
||||
label: "작업 상세",
|
||||
icon: ClipboardCheck,
|
||||
description: "공정별 체크리스트/검사/실적 상세 작업 화면",
|
||||
},
|
||||
];
|
||||
|
||||
// 드래그 가능한 컴포넌트 아이템
|
||||
|
|
|
|||
|
|
@ -84,6 +84,7 @@ const COMPONENT_TYPE_LABELS: Record<PopComponentType, string> = {
|
|||
"pop-field": "입력",
|
||||
"pop-scanner": "스캐너",
|
||||
"pop-profile": "프로필",
|
||||
"pop-work-detail": "작업 상세",
|
||||
};
|
||||
|
||||
// ========================================
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
/**
|
||||
* POP 컴포넌트 타입
|
||||
*/
|
||||
export type PopComponentType = "pop-sample" | "pop-text" | "pop-icon" | "pop-dashboard" | "pop-card-list" | "pop-card-list-v2" | "pop-button" | "pop-string-list" | "pop-search" | "pop-status-bar" | "pop-field" | "pop-scanner" | "pop-profile";
|
||||
export type PopComponentType = "pop-sample" | "pop-text" | "pop-icon" | "pop-dashboard" | "pop-card-list" | "pop-card-list-v2" | "pop-button" | "pop-string-list" | "pop-search" | "pop-status-bar" | "pop-field" | "pop-scanner" | "pop-profile" | "pop-work-detail";
|
||||
|
||||
/**
|
||||
* 데이터 흐름 정의
|
||||
|
|
@ -377,6 +377,7 @@ export const DEFAULT_COMPONENT_GRID_SIZE: Record<PopComponentType, { colSpan: nu
|
|||
"pop-field": { colSpan: 19, rowSpan: 6 },
|
||||
"pop-scanner": { colSpan: 2, rowSpan: 2 },
|
||||
"pop-profile": { colSpan: 2, rowSpan: 2 },
|
||||
"pop-work-detail": { colSpan: 38, rowSpan: 26 },
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -42,12 +42,15 @@ interface PopViewerWithModalsProps {
|
|||
overrideGap?: number;
|
||||
/** Padding 오버라이드 */
|
||||
overridePadding?: number;
|
||||
/** 부모 화면에서 선택된 행 데이터 (모달 내부 컴포넌트가 sharedData로 조회) */
|
||||
parentRow?: Record<string, unknown>;
|
||||
}
|
||||
|
||||
/** 열린 모달 상태 */
|
||||
interface OpenModal {
|
||||
definition: PopModalDefinition;
|
||||
returnTo?: string;
|
||||
fullscreen?: boolean;
|
||||
}
|
||||
|
||||
// ========================================
|
||||
|
|
@ -61,10 +64,17 @@ export default function PopViewerWithModals({
|
|||
currentMode,
|
||||
overrideGap,
|
||||
overridePadding,
|
||||
parentRow,
|
||||
}: PopViewerWithModalsProps) {
|
||||
const router = useRouter();
|
||||
const [modalStack, setModalStack] = useState<OpenModal[]>([]);
|
||||
const { subscribe, publish } = usePopEvent(screenId);
|
||||
const { subscribe, publish, setSharedData } = usePopEvent(screenId);
|
||||
|
||||
useEffect(() => {
|
||||
if (parentRow) {
|
||||
setSharedData("parentRow", parentRow);
|
||||
}
|
||||
}, [parentRow, setSharedData]);
|
||||
|
||||
// 연결 해석기: layout에 정의된 connections를 이벤트 라우팅으로 변환
|
||||
const stableConnections = useMemo(
|
||||
|
|
@ -96,6 +106,7 @@ export default function PopViewerWithModals({
|
|||
title?: string;
|
||||
mode?: string;
|
||||
returnTo?: string;
|
||||
fullscreen?: boolean;
|
||||
};
|
||||
|
||||
if (data?.modalId) {
|
||||
|
|
@ -104,6 +115,7 @@ export default function PopViewerWithModals({
|
|||
setModalStack(prev => [...prev, {
|
||||
definition: modalDef,
|
||||
returnTo: data.returnTo,
|
||||
fullscreen: data.fullscreen,
|
||||
}]);
|
||||
}
|
||||
}
|
||||
|
|
@ -173,7 +185,7 @@ export default function PopViewerWithModals({
|
|||
|
||||
{/* 모달 스택 렌더링 */}
|
||||
{modalStack.map((modal, index) => {
|
||||
const { definition } = modal;
|
||||
const { definition, fullscreen } = modal;
|
||||
const isTopModal = index === modalStack.length - 1;
|
||||
const closeOnOverlay = definition.frameConfig?.closeOnOverlay !== false;
|
||||
const closeOnEsc = definition.frameConfig?.closeOnEsc !== false;
|
||||
|
|
@ -185,10 +197,15 @@ export default function PopViewerWithModals({
|
|||
overrides: definition.overrides,
|
||||
};
|
||||
|
||||
const detectedMode = currentMode || detectGridMode(viewportWidth);
|
||||
const modalWidth = resolveModalWidth(definition.sizeConfig, detectedMode, viewportWidth);
|
||||
const isFull = modalWidth >= viewportWidth;
|
||||
const rendererWidth = isFull ? viewportWidth : modalWidth - 32;
|
||||
const isFull = fullscreen || (() => {
|
||||
const detectedMode = currentMode || detectGridMode(viewportWidth);
|
||||
const modalWidth = resolveModalWidth(definition.sizeConfig, detectedMode, viewportWidth);
|
||||
return modalWidth >= viewportWidth;
|
||||
})();
|
||||
const rendererWidth = isFull
|
||||
? viewportWidth
|
||||
: resolveModalWidth(definition.sizeConfig, currentMode || detectGridMode(viewportWidth), viewportWidth) - 32;
|
||||
const modalWidth = isFull ? viewportWidth : resolveModalWidth(definition.sizeConfig, currentMode || detectGridMode(viewportWidth), viewportWidth);
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
|
|
@ -200,7 +217,7 @@ export default function PopViewerWithModals({
|
|||
>
|
||||
<DialogContent
|
||||
className={isFull
|
||||
? "h-dvh max-h-dvh w-screen max-w-[100vw] overflow-auto rounded-none border-none p-0"
|
||||
? "flex h-dvh max-h-dvh w-screen max-w-[100vw] flex-col gap-0 overflow-hidden rounded-none border-none p-0"
|
||||
: "max-h-[90vh] overflow-auto p-0"
|
||||
}
|
||||
style={isFull ? undefined : {
|
||||
|
|
@ -208,14 +225,13 @@ export default function PopViewerWithModals({
|
|||
width: `${modalWidth}px`,
|
||||
}}
|
||||
onInteractOutside={(e) => {
|
||||
// 최상위 모달이 아니면 overlay 클릭 무시 (하위 모달이 먼저 닫히는 것 방지)
|
||||
if (!isTopModal || !closeOnOverlay) e.preventDefault();
|
||||
}}
|
||||
onEscapeKeyDown={(e) => {
|
||||
if (!isTopModal || !closeOnEsc) e.preventDefault();
|
||||
}}
|
||||
>
|
||||
<DialogHeader className={isFull ? "px-4 pt-3 pb-2" : "px-4 pt-4 pb-2"}>
|
||||
<DialogHeader className={isFull ? "shrink-0 border-b px-4 py-2" : "px-4 pt-4 pb-2"}>
|
||||
<DialogTitle className="text-base">
|
||||
{definition.title}
|
||||
</DialogTitle>
|
||||
|
|
|
|||
|
|
@ -26,3 +26,4 @@ import "./pop-status-bar";
|
|||
import "./pop-field";
|
||||
import "./pop-scanner";
|
||||
import "./pop-profile";
|
||||
import "./pop-work-detail";
|
||||
|
|
|
|||
|
|
@ -34,6 +34,7 @@ import type {
|
|||
TimelineDataSource,
|
||||
ActionButtonUpdate,
|
||||
ActionButtonClickAction,
|
||||
QuantityInputConfig,
|
||||
StatusValueMapping,
|
||||
SelectModeConfig,
|
||||
SelectModeButtonConfig,
|
||||
|
|
@ -47,6 +48,7 @@ import { screenApi } from "@/lib/api/screen";
|
|||
import { apiClient } from "@/lib/api/client";
|
||||
import { usePopEvent } from "@/hooks/pop/usePopEvent";
|
||||
import { useCartSync } from "@/hooks/pop/useCartSync";
|
||||
import { useAuth } from "@/hooks/useAuth";
|
||||
import { NumberInputModal } from "../pop-card-list/NumberInputModal";
|
||||
import { renderCellV2 } from "./cell-renderers";
|
||||
import type { PopLayoutData } from "@/components/pop/designer/types/pop-layout";
|
||||
|
|
@ -56,6 +58,32 @@ const PopViewerWithModals = dynamic(() => import("@/components/pop/viewer/PopVie
|
|||
|
||||
type RowData = Record<string, unknown>;
|
||||
|
||||
function calculateMaxQty(
|
||||
row: RowData,
|
||||
processId: string | number | undefined,
|
||||
cfg?: QuantityInputConfig,
|
||||
): number {
|
||||
if (!cfg) return 999999;
|
||||
const maxVal = cfg.maxColumn ? Number(row[cfg.maxColumn]) || 999999 : 999999;
|
||||
if (!cfg.currentColumn) return maxVal;
|
||||
|
||||
const processFlow = row.__processFlow__ as Array<{
|
||||
isCurrent: boolean;
|
||||
processId?: string | number;
|
||||
rawData?: Record<string, unknown>;
|
||||
}> | undefined;
|
||||
|
||||
const currentProcess = processId
|
||||
? processFlow?.find((p) => String(p.processId) === String(processId))
|
||||
: processFlow?.find((p) => p.isCurrent);
|
||||
|
||||
if (currentProcess?.rawData) {
|
||||
const currentVal = Number(currentProcess.rawData[cfg.currentColumn]) || 0;
|
||||
return Math.max(0, maxVal - currentVal);
|
||||
}
|
||||
return maxVal;
|
||||
}
|
||||
|
||||
// cart_items 행 파싱 (pop-card-list에서 그대로 차용)
|
||||
function parseCartRow(dbRow: Record<string, unknown>): Record<string, unknown> {
|
||||
let rowData: Record<string, unknown> = {};
|
||||
|
|
@ -111,8 +139,9 @@ export function PopCardListV2Component({
|
|||
currentColSpan,
|
||||
onRequestResize,
|
||||
}: PopCardListV2ComponentProps) {
|
||||
const { subscribe, publish } = usePopEvent(screenId || "default");
|
||||
const { subscribe, publish, setSharedData } = usePopEvent(screenId || "default");
|
||||
const router = useRouter();
|
||||
const { userId: currentUserId } = useAuth();
|
||||
|
||||
const isCartListMode = config?.cartListMode?.enabled === true;
|
||||
const [inheritedConfig, setInheritedConfig] = useState<Partial<PopCardListV2Config> | null>(null);
|
||||
|
|
@ -221,6 +250,13 @@ export function PopCardListV2Component({
|
|||
const [popModalRow, setPopModalRow] = useState<RowData | null>(null);
|
||||
|
||||
const openPopModal = useCallback(async (screenIdStr: string, row: RowData) => {
|
||||
// 내부 모달 캔버스 (디자이너에서 생성한 modal-*)인 경우 이벤트 발행
|
||||
if (screenIdStr.startsWith("modal-")) {
|
||||
setSharedData("parentRow", row);
|
||||
publish("__pop_modal_open__", { modalId: screenIdStr, fullscreen: true });
|
||||
return;
|
||||
}
|
||||
// 외부 POP 화면 ID인 경우 기존 fetch 방식
|
||||
try {
|
||||
const sid = parseInt(screenIdStr, 10);
|
||||
if (isNaN(sid)) {
|
||||
|
|
@ -239,7 +275,7 @@ export function PopCardListV2Component({
|
|||
} catch {
|
||||
toast.error("POP 화면을 불러오는데 실패했습니다.");
|
||||
}
|
||||
}, []);
|
||||
}, [publish, setSharedData]);
|
||||
|
||||
const handleCardSelect = useCallback((row: RowData) => {
|
||||
|
||||
|
|
@ -469,7 +505,7 @@ export function PopCardListV2Component({
|
|||
type: "data-update" as const,
|
||||
targetTable: btnConfig.targetTable!,
|
||||
targetColumn: u.column,
|
||||
operationType: "assign" as const,
|
||||
operationType: (u.operationType || "assign") as "assign" | "add" | "subtract",
|
||||
valueSource: "fixed" as const,
|
||||
fixedValue: u.valueType === "static" ? (u.value ?? "") :
|
||||
u.valueType === "currentUser" ? "__CURRENT_USER__" :
|
||||
|
|
@ -619,11 +655,28 @@ export function PopCardListV2Component({
|
|||
|
||||
const scrollAreaRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const ownerSortColumn = config?.ownerSortColumn;
|
||||
|
||||
const displayCards = useMemo(() => {
|
||||
if (!isExpanded) return filteredRows.slice(0, visibleCardCount);
|
||||
let source = filteredRows;
|
||||
|
||||
if (ownerSortColumn && currentUserId) {
|
||||
const mine: RowData[] = [];
|
||||
const others: RowData[] = [];
|
||||
for (const row of source) {
|
||||
if (String(row[ownerSortColumn] ?? "") === currentUserId) {
|
||||
mine.push(row);
|
||||
} else {
|
||||
others.push(row);
|
||||
}
|
||||
}
|
||||
source = [...mine, ...others];
|
||||
}
|
||||
|
||||
if (!isExpanded) return source.slice(0, visibleCardCount);
|
||||
const start = (currentPage - 1) * expandedCardsPerPage;
|
||||
return filteredRows.slice(start, start + expandedCardsPerPage);
|
||||
}, [filteredRows, isExpanded, visibleCardCount, currentPage, expandedCardsPerPage]);
|
||||
return source.slice(start, start + expandedCardsPerPage);
|
||||
}, [filteredRows, isExpanded, visibleCardCount, currentPage, expandedCardsPerPage, ownerSortColumn, currentUserId]);
|
||||
|
||||
const totalPages = isExpanded ? Math.ceil(filteredRows.length / expandedCardsPerPage) : 1;
|
||||
const needsPagination = isExpanded && totalPages > 1;
|
||||
|
|
@ -756,10 +809,17 @@ export function PopCardListV2Component({
|
|||
if (firstPending) { firstPending.isCurrent = true; }
|
||||
}
|
||||
|
||||
return fetchedRows.map((row) => ({
|
||||
...row,
|
||||
__processFlow__: processMap.get(String(row.id)) || [],
|
||||
}));
|
||||
return fetchedRows.map((row) => {
|
||||
const steps = processMap.get(String(row.id)) || [];
|
||||
const current = steps.find((s) => s.isCurrent);
|
||||
const processFields: Record<string, unknown> = {};
|
||||
if (current?.rawData) {
|
||||
for (const [key, val] of Object.entries(current.rawData)) {
|
||||
processFields[`__process_${key}`] = val;
|
||||
}
|
||||
}
|
||||
return { ...row, __processFlow__: steps, ...processFields };
|
||||
});
|
||||
}, []);
|
||||
|
||||
const fetchData = useCallback(async () => {
|
||||
|
|
@ -1014,35 +1074,42 @@ export function PopCardListV2Component({
|
|||
className={`min-h-0 flex-1 grid ${scrollClassName}`}
|
||||
style={{ ...cardAreaStyle, alignContent: "start", justifyContent: isHorizontalMode ? "start" : "center" }}
|
||||
>
|
||||
{displayCards.map((row, index) => (
|
||||
<CardV2
|
||||
key={`card-${index}`}
|
||||
row={row}
|
||||
cardGrid={cardGrid}
|
||||
spec={spec}
|
||||
config={effectiveConfig}
|
||||
onSelect={handleCardSelect}
|
||||
cart={cart}
|
||||
publish={publish}
|
||||
parentComponentId={componentId}
|
||||
isCartListMode={isCartListMode}
|
||||
isSelected={selectedKeys.has(String(row.__cart_id ?? ""))}
|
||||
onToggleSelect={() => {
|
||||
const cartId = row.__cart_id != null ? String(row.__cart_id) : "";
|
||||
if (!cartId) return;
|
||||
setSelectedKeys((prev) => { const next = new Set(prev); if (next.has(cartId)) next.delete(cartId); else next.add(cartId); return next; });
|
||||
}}
|
||||
onDeleteItem={handleDeleteItem}
|
||||
onUpdateQuantity={handleUpdateQuantity}
|
||||
onRefresh={fetchData}
|
||||
selectMode={selectMode}
|
||||
isSelectModeSelected={selectedRowIds.has(String(row.id ?? row.pk ?? ""))}
|
||||
isSelectable={isRowSelectable(row)}
|
||||
onToggleRowSelect={() => toggleRowSelection(row)}
|
||||
onEnterSelectMode={enterSelectMode}
|
||||
onOpenPopModal={openPopModal}
|
||||
/>
|
||||
))}
|
||||
{displayCards.map((row, index) => {
|
||||
const locked = !!ownerSortColumn
|
||||
&& !!String(row[ownerSortColumn] ?? "")
|
||||
&& String(row[ownerSortColumn] ?? "") !== (currentUserId ?? "");
|
||||
return (
|
||||
<CardV2
|
||||
key={`card-${index}`}
|
||||
row={row}
|
||||
cardGrid={cardGrid}
|
||||
spec={spec}
|
||||
config={effectiveConfig}
|
||||
onSelect={handleCardSelect}
|
||||
cart={cart}
|
||||
publish={publish}
|
||||
parentComponentId={componentId}
|
||||
isCartListMode={isCartListMode}
|
||||
isSelected={selectedKeys.has(String(row.__cart_id ?? ""))}
|
||||
onToggleSelect={() => {
|
||||
const cartId = row.__cart_id != null ? String(row.__cart_id) : "";
|
||||
if (!cartId) return;
|
||||
setSelectedKeys((prev) => { const next = new Set(prev); if (next.has(cartId)) next.delete(cartId); else next.add(cartId); return next; });
|
||||
}}
|
||||
onDeleteItem={handleDeleteItem}
|
||||
onUpdateQuantity={handleUpdateQuantity}
|
||||
onRefresh={fetchData}
|
||||
selectMode={selectMode}
|
||||
isSelectModeSelected={selectedRowIds.has(String(row.id ?? row.pk ?? ""))}
|
||||
isSelectable={isRowSelectable(row)}
|
||||
onToggleRowSelect={() => toggleRowSelection(row)}
|
||||
onEnterSelectMode={enterSelectMode}
|
||||
onOpenPopModal={openPopModal}
|
||||
currentUserId={currentUserId}
|
||||
isLockedByOther={locked}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* 선택 모드 하단 액션 바 */}
|
||||
|
|
@ -1116,6 +1183,7 @@ export function PopCardListV2Component({
|
|||
viewportWidth={typeof window !== "undefined" ? window.innerWidth : 1024}
|
||||
screenId={popModalScreenId}
|
||||
currentMode={detectGridMode(typeof window !== "undefined" ? window.innerWidth : 1024)}
|
||||
parentRow={popModalRow ?? undefined}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -1148,6 +1216,8 @@ interface CardV2Props {
|
|||
onToggleRowSelect?: () => void;
|
||||
onEnterSelectMode?: (whenStatus: string, buttonConfig: Record<string, unknown>) => void;
|
||||
onOpenPopModal?: (screenId: string, row: RowData) => void;
|
||||
currentUserId?: string;
|
||||
isLockedByOther?: boolean;
|
||||
}
|
||||
|
||||
function CardV2({
|
||||
|
|
@ -1155,7 +1225,7 @@ function CardV2({
|
|||
parentComponentId, isCartListMode, isSelected, onToggleSelect,
|
||||
onDeleteItem, onUpdateQuantity, onRefresh,
|
||||
selectMode, isSelectModeSelected, isSelectable, onToggleRowSelect, onEnterSelectMode,
|
||||
onOpenPopModal,
|
||||
onOpenPopModal, currentUserId, isLockedByOther,
|
||||
}: CardV2Props) {
|
||||
const inputField = config?.inputField;
|
||||
const cartAction = config?.cartAction;
|
||||
|
|
@ -1167,6 +1237,72 @@ function CardV2({
|
|||
const [packageEntries, setPackageEntries] = useState<PackageEntry[]>([]);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
|
||||
const [qtyModalState, setQtyModalState] = useState<{
|
||||
open: boolean;
|
||||
row: RowData;
|
||||
processId?: string | number;
|
||||
action: ActionButtonClickAction;
|
||||
} | null>(null);
|
||||
|
||||
const handleQtyConfirm = useCallback(async (value: number) => {
|
||||
if (!qtyModalState) return;
|
||||
const { row: actionRow, processId: qtyProcessId, action } = qtyModalState;
|
||||
setQtyModalState(null);
|
||||
if (!action.targetTable || !action.updates) return;
|
||||
|
||||
const rowId = qtyProcessId ?? actionRow.id ?? actionRow.pk;
|
||||
if (!rowId) { toast.error("대상 레코드 ID를 찾을 수 없습니다."); return; }
|
||||
|
||||
const lookupValue = action.joinConfig
|
||||
? String(actionRow[action.joinConfig.sourceColumn] ?? rowId)
|
||||
: rowId;
|
||||
const lookupColumn = action.joinConfig?.targetColumn || "id";
|
||||
|
||||
const tasks = action.updates.map((u, idx) => ({
|
||||
id: `qty-update-${idx}`,
|
||||
type: "data-update" as const,
|
||||
targetTable: action.targetTable!,
|
||||
targetColumn: u.column,
|
||||
operationType: (u.operationType || "assign") as "assign" | "add" | "subtract",
|
||||
valueSource: "fixed" as const,
|
||||
fixedValue: u.valueType === "userInput" ? String(value) :
|
||||
u.valueType === "static" ? (u.value ?? "") :
|
||||
u.valueType === "currentUser" ? "__CURRENT_USER__" :
|
||||
u.valueType === "currentTime" ? "__CURRENT_TIME__" :
|
||||
u.valueType === "columnRef" ? String(actionRow[u.value ?? ""] ?? "") :
|
||||
(u.value ?? ""),
|
||||
lookupMode: "manual" as const,
|
||||
manualItemField: lookupColumn,
|
||||
manualPkColumn: lookupColumn,
|
||||
...(idx === 0 && action.preCondition ? { preCondition: action.preCondition } : {}),
|
||||
}));
|
||||
|
||||
const targetRow = action.joinConfig
|
||||
? { ...actionRow, [lookupColumn]: lookupValue }
|
||||
: qtyProcessId ? { ...actionRow, id: qtyProcessId } : actionRow;
|
||||
|
||||
try {
|
||||
const result = await apiClient.post("/pop/execute-action", {
|
||||
tasks,
|
||||
data: { items: [targetRow], fieldValues: {} },
|
||||
mappings: {},
|
||||
});
|
||||
if (result.data?.success) {
|
||||
toast.success(result.data.message || "처리 완료");
|
||||
onRefresh?.();
|
||||
} else {
|
||||
toast.error(result.data?.message || "처리 실패");
|
||||
}
|
||||
} catch (err: unknown) {
|
||||
if ((err as any)?.response?.status === 409) {
|
||||
toast.error((err as any).response?.data?.message || "이미 다른 사용자가 처리한 작업입니다.");
|
||||
onRefresh?.();
|
||||
} else {
|
||||
toast.error(err instanceof Error ? err.message : "처리 중 오류 발생");
|
||||
}
|
||||
}
|
||||
}, [qtyModalState, onRefresh]);
|
||||
|
||||
const rowKey = keyColumnName && row[keyColumnName] ? String(row[keyColumnName]) : "";
|
||||
const isCarted = cart.isItemInCart(rowKey);
|
||||
const existingCartItem = cart.getCartItem(rowKey);
|
||||
|
|
@ -1272,16 +1408,24 @@ function CardV2({
|
|||
|
||||
return (
|
||||
<div
|
||||
className={`relative flex cursor-pointer flex-col rounded-lg border bg-card shadow-sm transition-all duration-150 hover:shadow-md ${borderClass}`}
|
||||
className={cn(
|
||||
"relative flex flex-col rounded-lg border bg-card shadow-sm transition-all duration-150",
|
||||
isLockedByOther
|
||||
? "cursor-not-allowed opacity-50"
|
||||
: "cursor-pointer hover:shadow-md",
|
||||
borderClass,
|
||||
)}
|
||||
style={{ minHeight: `${spec.height}px` }}
|
||||
onClick={() => {
|
||||
if (isLockedByOther) return;
|
||||
if (selectMode && isSelectable) { onToggleRowSelect?.(); return; }
|
||||
if (!selectMode) onSelect?.(row);
|
||||
}}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
tabIndex={isLockedByOther ? -1 : 0}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
if (isLockedByOther) return;
|
||||
if (selectMode && isSelectable) { onToggleRowSelect?.(); return; }
|
||||
if (!selectMode) onSelect?.(row);
|
||||
}
|
||||
|
|
@ -1365,7 +1509,11 @@ function CardV2({
|
|||
}
|
||||
|
||||
for (const action of actionsToRun) {
|
||||
if (action.type === "immediate" && action.updates && action.updates.length > 0 && action.targetTable) {
|
||||
if (action.type === "quantity-input" && action.targetTable && action.updates) {
|
||||
if (action.confirmMessage && !window.confirm(action.confirmMessage)) return;
|
||||
setQtyModalState({ open: true, row: actionRow, processId, action });
|
||||
return;
|
||||
} else if (action.type === "immediate" && action.updates && action.updates.length > 0 && action.targetTable) {
|
||||
if (action.confirmMessage) {
|
||||
if (!window.confirm(action.confirmMessage)) return;
|
||||
}
|
||||
|
|
@ -1381,7 +1529,7 @@ function CardV2({
|
|||
type: "data-update" as const,
|
||||
targetTable: action.targetTable!,
|
||||
targetColumn: u.column,
|
||||
operationType: "assign" as const,
|
||||
operationType: (u.operationType || "assign") as "assign" | "add" | "subtract",
|
||||
valueSource: "fixed" as const,
|
||||
fixedValue: u.valueType === "static" ? (u.value ?? "") :
|
||||
u.valueType === "currentUser" ? "__CURRENT_USER__" :
|
||||
|
|
@ -1391,6 +1539,7 @@ function CardV2({
|
|||
lookupMode: "manual" as const,
|
||||
manualItemField: lookupColumn,
|
||||
manualPkColumn: lookupColumn,
|
||||
...(idx === 0 && action.preCondition ? { preCondition: action.preCondition } : {}),
|
||||
}));
|
||||
const targetRow = action.joinConfig
|
||||
? { ...actionRow, [lookupColumn]: lookupValue }
|
||||
|
|
@ -1408,7 +1557,12 @@ function CardV2({
|
|||
return;
|
||||
}
|
||||
} catch (err: unknown) {
|
||||
toast.error(err instanceof Error ? err.message : "처리 중 오류 발생");
|
||||
if ((err as any)?.response?.status === 409) {
|
||||
toast.error((err as any).response?.data?.message || "이미 다른 사용자가 처리한 작업입니다.");
|
||||
onRefresh?.();
|
||||
} else {
|
||||
toast.error(err instanceof Error ? err.message : "처리 중 오류 발생");
|
||||
}
|
||||
return;
|
||||
}
|
||||
} else if (action.type === "modal-open" && action.modalScreenId) {
|
||||
|
|
@ -1418,6 +1572,7 @@ function CardV2({
|
|||
},
|
||||
packageEntries,
|
||||
inputUnit: inputField?.unit,
|
||||
currentUserId,
|
||||
})}
|
||||
</div>
|
||||
))}
|
||||
|
|
@ -1437,6 +1592,17 @@ function CardV2({
|
|||
/>
|
||||
)}
|
||||
|
||||
{qtyModalState?.open && (
|
||||
<NumberInputModal
|
||||
open={true}
|
||||
onOpenChange={(open) => { if (!open) setQtyModalState(null); }}
|
||||
unit={qtyModalState.action.quantityInput?.unit || "EA"}
|
||||
maxValue={calculateMaxQty(qtyModalState.row, qtyModalState.processId, qtyModalState.action.quantityInput)}
|
||||
showPackageUnit={qtyModalState.action.quantityInput?.enablePackage ?? false}
|
||||
onConfirm={(value) => handleQtyConfirm(value)}
|
||||
/>
|
||||
)}
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ import { useState, useEffect, useRef, useCallback, useMemo, Fragment } from "rea
|
|||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { usePopDesignerContext } from "@/components/pop/designer/PopDesignerContext";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import {
|
||||
Select,
|
||||
|
|
@ -65,6 +66,33 @@ import {
|
|||
type ColumnInfo,
|
||||
} from "../pop-dashboard/utils/dataFetcher";
|
||||
|
||||
// ===== 컬럼 옵션 그룹 =====
|
||||
|
||||
interface ColumnOptionGroup {
|
||||
groupLabel: string;
|
||||
options: { value: string; label: string }[];
|
||||
}
|
||||
|
||||
function renderColumnOptionGroups(groups: ColumnOptionGroup[]) {
|
||||
if (groups.length <= 1) {
|
||||
return groups.flatMap((g) =>
|
||||
g.options.map((o) => (
|
||||
<SelectItem key={o.value} value={o.value} className="text-[10px]">{o.label}</SelectItem>
|
||||
))
|
||||
);
|
||||
}
|
||||
return groups
|
||||
.filter((g) => g.options.length > 0)
|
||||
.map((g) => (
|
||||
<SelectGroup key={g.groupLabel}>
|
||||
<SelectLabel className="text-[9px] font-semibold text-muted-foreground px-2 py-1">{g.groupLabel}</SelectLabel>
|
||||
{g.options.map((o) => (
|
||||
<SelectItem key={o.value} value={o.value} className="text-[10px]">{o.label}</SelectItem>
|
||||
))}
|
||||
</SelectGroup>
|
||||
));
|
||||
}
|
||||
|
||||
// ===== Props =====
|
||||
|
||||
interface ConfigPanelProps {
|
||||
|
|
@ -271,6 +299,7 @@ export function PopCardListV2ConfigPanel({ config, onUpdate }: ConfigPanelProps)
|
|||
<TabActions
|
||||
cfg={cfg}
|
||||
onUpdate={update}
|
||||
columns={columns}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -759,10 +788,36 @@ function TabCardDesign({
|
|||
sourceTable: j.targetTable,
|
||||
}))
|
||||
);
|
||||
const allColumnOptions = [
|
||||
...availableColumns.map((c) => ({ value: c.name, label: c.name })),
|
||||
...joinedColumns.map((c) => ({ value: c.name, label: `${c.displayName} (${c.sourceTable})` })),
|
||||
|
||||
const [processColumns, setProcessColumns] = useState<ColumnInfo[]>([]);
|
||||
const timelineCell = cfg.cardGrid.cells.find((c) => c.type === "timeline" && c.timelineSource?.processTable);
|
||||
const processTableName = timelineCell?.timelineSource?.processTable || "";
|
||||
useEffect(() => {
|
||||
if (!processTableName) { setProcessColumns([]); return; }
|
||||
fetchTableColumns(processTableName)
|
||||
.then(setProcessColumns)
|
||||
.catch(() => setProcessColumns([]));
|
||||
}, [processTableName]);
|
||||
|
||||
const columnOptionGroups: ColumnOptionGroup[] = [
|
||||
{
|
||||
groupLabel: `메인 (${cfg.dataSource.tableName || "테이블"})`,
|
||||
options: availableColumns.map((c) => ({ value: c.name, label: c.name })),
|
||||
},
|
||||
...(joinedColumns.length > 0
|
||||
? [{
|
||||
groupLabel: "조인",
|
||||
options: joinedColumns.map((c) => ({ value: c.name, label: `${c.displayName} (${c.sourceTable})` })),
|
||||
}]
|
||||
: []),
|
||||
...(processColumns.length > 0
|
||||
? [{
|
||||
groupLabel: `공정 (${processTableName})`,
|
||||
options: processColumns.map((c) => ({ value: `__process_${c.name}`, label: c.name })),
|
||||
}]
|
||||
: []),
|
||||
];
|
||||
const allColumnOptions = columnOptionGroups.flatMap((g) => g.options);
|
||||
|
||||
const [selectedCellId, setSelectedCellId] = useState<string | null>(null);
|
||||
const [mergeMode, setMergeMode] = useState(false);
|
||||
|
|
@ -1273,6 +1328,7 @@ function TabCardDesign({
|
|||
cell={selectedCell}
|
||||
allCells={grid.cells}
|
||||
allColumnOptions={allColumnOptions}
|
||||
columnOptionGroups={columnOptionGroups}
|
||||
columns={columns}
|
||||
selectedColumns={selectedColumns}
|
||||
tables={tables}
|
||||
|
|
@ -1291,6 +1347,7 @@ function CellDetailEditor({
|
|||
cell,
|
||||
allCells,
|
||||
allColumnOptions,
|
||||
columnOptionGroups,
|
||||
columns,
|
||||
selectedColumns,
|
||||
tables,
|
||||
|
|
@ -1301,6 +1358,7 @@ function CellDetailEditor({
|
|||
cell: CardCellDefinitionV2;
|
||||
allCells: CardCellDefinitionV2[];
|
||||
allColumnOptions: { value: string; label: string }[];
|
||||
columnOptionGroups: ColumnOptionGroup[];
|
||||
columns: ColumnInfo[];
|
||||
selectedColumns: string[];
|
||||
tables: TableInfo[];
|
||||
|
|
@ -1348,9 +1406,7 @@ function CellDetailEditor({
|
|||
<SelectTrigger className="h-7 flex-1 text-[10px]"><SelectValue placeholder="컬럼" /></SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="none" className="text-[10px]">미지정</SelectItem>
|
||||
{allColumnOptions.map((o) => (
|
||||
<SelectItem key={o.value} value={o.value} className="text-[10px]">{o.label}</SelectItem>
|
||||
))}
|
||||
{renderColumnOptionGroups(columnOptionGroups)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
|
|
@ -1417,9 +1473,9 @@ function CellDetailEditor({
|
|||
{/* 타입별 상세 설정 */}
|
||||
{cell.type === "status-badge" && <StatusMappingEditor cell={cell} allCells={allCells} onUpdate={onUpdate} />}
|
||||
{cell.type === "timeline" && <TimelineConfigEditor cell={cell} allColumnOptions={allColumnOptions} tables={tables} onUpdate={onUpdate} />}
|
||||
{cell.type === "action-buttons" && <ActionButtonsEditor cell={cell} allCells={allCells} allColumnOptions={allColumnOptions} availableTableOptions={availableTableOptions} onUpdate={onUpdate} />}
|
||||
{cell.type === "footer-status" && <FooterStatusEditor cell={cell} allColumnOptions={allColumnOptions} onUpdate={onUpdate} />}
|
||||
{cell.type === "field" && <FieldConfigEditor cell={cell} allColumnOptions={allColumnOptions} onUpdate={onUpdate} />}
|
||||
{cell.type === "action-buttons" && <ActionButtonsEditor cell={cell} allCells={allCells} allColumnOptions={allColumnOptions} columnOptionGroups={columnOptionGroups} availableTableOptions={availableTableOptions} onUpdate={onUpdate} />}
|
||||
{cell.type === "footer-status" && <FooterStatusEditor cell={cell} allColumnOptions={allColumnOptions} columnOptionGroups={columnOptionGroups} onUpdate={onUpdate} />}
|
||||
{cell.type === "field" && <FieldConfigEditor cell={cell} allColumnOptions={allColumnOptions} columnOptionGroups={columnOptionGroups} onUpdate={onUpdate} />}
|
||||
{cell.type === "number-input" && (
|
||||
<div className="space-y-1">
|
||||
<span className="text-[9px] font-medium text-muted-foreground">숫자 입력 설정</span>
|
||||
|
|
@ -1429,7 +1485,7 @@ function CellDetailEditor({
|
|||
<SelectTrigger className="h-7 flex-1 text-[10px]"><SelectValue placeholder="제한 컬럼" /></SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="__none__" className="text-[10px]">없음</SelectItem>
|
||||
{allColumnOptions.map((o) => <SelectItem key={o.value} value={o.value} className="text-[10px]">{o.label}</SelectItem>)}
|
||||
{renderColumnOptionGroups(columnOptionGroups)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
|
@ -1809,12 +1865,14 @@ function ActionButtonsEditor({
|
|||
cell,
|
||||
allCells,
|
||||
allColumnOptions,
|
||||
columnOptionGroups,
|
||||
availableTableOptions,
|
||||
onUpdate,
|
||||
}: {
|
||||
cell: CardCellDefinitionV2;
|
||||
allCells: CardCellDefinitionV2[];
|
||||
allColumnOptions: { value: string; label: string }[];
|
||||
columnOptionGroups: ColumnOptionGroup[];
|
||||
availableTableOptions: { value: string; label: string }[];
|
||||
onUpdate: (partial: Partial<CardCellDefinitionV2>) => void;
|
||||
}) {
|
||||
|
|
@ -1975,7 +2033,7 @@ function ActionButtonsEditor({
|
|||
|
||||
const isSectionOpen = (key: string) => expandedSections[key] !== false;
|
||||
|
||||
const ACTION_TYPE_LABELS: Record<string, string> = { immediate: "즉시 실행", "select-mode": "선택 후 실행", "modal-open": "모달 열기" };
|
||||
const ACTION_TYPE_LABELS: Record<string, string> = { immediate: "즉시 실행", "select-mode": "선택 후 실행", "modal-open": "모달 열기", "quantity-input": "수량 입력" };
|
||||
|
||||
const getCondSummary = (btn: ActionButtonDef) => {
|
||||
const c = btn.showCondition;
|
||||
|
|
@ -1985,6 +2043,7 @@ function ActionButtonsEditor({
|
|||
return opt ? opt.label : (c.value || "미설정");
|
||||
}
|
||||
if (c.type === "column-value") return `${c.column || "?"} = ${c.value || "?"}`;
|
||||
if (c.type === "owner-match") return `소유자(${c.column || "?"})`;
|
||||
return "항상";
|
||||
};
|
||||
|
||||
|
|
@ -2081,8 +2140,21 @@ function ActionButtonsEditor({
|
|||
<SelectItem value="always" className="text-[10px]">항상</SelectItem>
|
||||
<SelectItem value="timeline-status" className="text-[10px]">타임라인</SelectItem>
|
||||
<SelectItem value="column-value" className="text-[10px]">카드 컬럼</SelectItem>
|
||||
<SelectItem value="owner-match" className="text-[10px]">소유자 일치</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{condType === "owner-match" && (
|
||||
<Select
|
||||
value={btn.showCondition?.column || "__none__"}
|
||||
onValueChange={(v) => updateCondition(bi, { column: v === "__none__" ? "" : v })}
|
||||
>
|
||||
<SelectTrigger className="h-6 flex-1 text-[10px]"><SelectValue placeholder="컬럼" /></SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="__none__" className="text-[10px]">선택</SelectItem>
|
||||
{renderColumnOptionGroups(columnOptionGroups)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
{condType === "timeline-status" && (
|
||||
<Select
|
||||
value={btn.showCondition?.value || "__none__"}
|
||||
|
|
@ -2106,9 +2178,7 @@ function ActionButtonsEditor({
|
|||
<SelectTrigger className="h-6 w-24 text-[10px]"><SelectValue placeholder="컬럼" /></SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="__none__" className="text-[10px]">선택</SelectItem>
|
||||
{allColumnOptions.map((o) => (
|
||||
<SelectItem key={o.value} value={o.value} className="text-[10px]">{o.label}</SelectItem>
|
||||
))}
|
||||
{renderColumnOptionGroups(columnOptionGroups)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Input
|
||||
|
|
@ -2168,6 +2238,7 @@ function ActionButtonsEditor({
|
|||
<SelectTrigger className="h-6 flex-1 text-[10px]"><SelectValue /></SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="immediate" className="text-[10px]">즉시 실행</SelectItem>
|
||||
<SelectItem value="quantity-input" className="text-[10px]">수량 입력</SelectItem>
|
||||
<SelectItem value="select-mode" className="text-[10px]">선택 후 실행</SelectItem>
|
||||
<SelectItem value="modal-open" className="text-[10px]">모달 열기</SelectItem>
|
||||
</SelectContent>
|
||||
|
|
@ -2191,6 +2262,50 @@ function ActionButtonsEditor({
|
|||
/>
|
||||
)}
|
||||
|
||||
{aType === "quantity-input" && (
|
||||
<div className="space-y-1.5">
|
||||
<ImmediateActionEditor
|
||||
action={action}
|
||||
allColumnOptions={allColumnOptions}
|
||||
availableTableOptions={availableTableOptions}
|
||||
onAddUpdate={() => addActionUpdate(bi, ai)}
|
||||
onUpdateUpdate={(ui, p) => updateActionUpdate(bi, ai, ui, p)}
|
||||
onRemoveUpdate={(ui) => removeActionUpdate(bi, ai, ui)}
|
||||
onUpdateAction={(p) => updateAction(bi, ai, p)}
|
||||
/>
|
||||
<div className="rounded border bg-background/50 p-1.5 space-y-1">
|
||||
<span className="text-[8px] font-medium text-muted-foreground">수량 모달 설정</span>
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="w-14 shrink-0 text-[8px] text-muted-foreground">최대값 컬럼</span>
|
||||
<Input
|
||||
value={action.quantityInput?.maxColumn || ""}
|
||||
onChange={(e) => updateAction(bi, ai, { quantityInput: { ...action.quantityInput, maxColumn: e.target.value } })}
|
||||
placeholder="예: qty"
|
||||
className="h-6 flex-1 text-[10px]"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="w-14 shrink-0 text-[8px] text-muted-foreground">현재값 컬럼</span>
|
||||
<Input
|
||||
value={action.quantityInput?.currentColumn || ""}
|
||||
onChange={(e) => updateAction(bi, ai, { quantityInput: { ...action.quantityInput, currentColumn: e.target.value } })}
|
||||
placeholder="예: input_qty"
|
||||
className="h-6 flex-1 text-[10px]"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="w-14 shrink-0 text-[8px] text-muted-foreground">단위</span>
|
||||
<Input
|
||||
value={action.quantityInput?.unit || ""}
|
||||
onChange={(e) => updateAction(bi, ai, { quantityInput: { ...action.quantityInput, unit: e.target.value } })}
|
||||
placeholder="예: EA"
|
||||
className="h-6 w-20 text-[10px]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{aType === "select-mode" && (
|
||||
<div className="space-y-1.5">
|
||||
<div className="flex items-center justify-between">
|
||||
|
|
@ -2455,6 +2570,70 @@ function ImmediateActionEditor({
|
|||
className="h-6 flex-1 text-[10px]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 사전 조건 (중복 방지) */}
|
||||
<div className="rounded border bg-background/50 p-1.5 space-y-1">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-[8px] font-medium text-muted-foreground">사전 조건 (중복 방지)</span>
|
||||
<Switch
|
||||
checked={!!action.preCondition}
|
||||
onCheckedChange={(checked) => {
|
||||
if (checked) {
|
||||
onUpdateAction({ preCondition: { column: "", expectedValue: "", failMessage: "" } });
|
||||
} else {
|
||||
onUpdateAction({ preCondition: undefined });
|
||||
}
|
||||
}}
|
||||
className="h-3.5 w-7 [&>span]:h-2.5 [&>span]:w-2.5"
|
||||
/>
|
||||
</div>
|
||||
{action.preCondition && (
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="w-14 shrink-0 text-[8px] text-muted-foreground">검증 컬럼</span>
|
||||
<Select
|
||||
value={action.preCondition.column || "__none__"}
|
||||
onValueChange={(v) => onUpdateAction({ preCondition: { ...action.preCondition!, column: v === "__none__" ? "" : v } })}
|
||||
>
|
||||
<SelectTrigger className="h-6 flex-1 text-[10px]"><SelectValue placeholder="컬럼" /></SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="__none__" className="text-[10px]">선택</SelectItem>
|
||||
{businessCols.length > 0 && (
|
||||
<SelectGroup>
|
||||
<SelectLabel className="text-[8px] text-muted-foreground">{tableName}</SelectLabel>
|
||||
{businessCols.map((o) => (
|
||||
<SelectItem key={o.value} value={o.value} className="text-[10px]">{o.label}</SelectItem>
|
||||
))}
|
||||
</SelectGroup>
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="w-14 shrink-0 text-[8px] text-muted-foreground">기대값</span>
|
||||
<Input
|
||||
value={action.preCondition.expectedValue || ""}
|
||||
onChange={(e) => onUpdateAction({ preCondition: { ...action.preCondition!, expectedValue: e.target.value } })}
|
||||
placeholder="예: waiting"
|
||||
className="h-6 flex-1 text-[10px]"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="w-14 shrink-0 text-[8px] text-muted-foreground">실패 메시지</span>
|
||||
<Input
|
||||
value={action.preCondition.failMessage || ""}
|
||||
onChange={(e) => onUpdateAction({ preCondition: { ...action.preCondition!, failMessage: e.target.value } })}
|
||||
placeholder="이미 다른 사용자가 처리했습니다"
|
||||
className="h-6 flex-1 text-[10px]"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-[7px] text-muted-foreground/70 pl-0.5">
|
||||
실행 시 해당 컬럼의 현재 DB 값이 기대값과 일치할 때만 처리됩니다
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-[8px] font-medium text-muted-foreground">
|
||||
변경할 컬럼{tableName ? ` (${tableName})` : ""}
|
||||
|
|
@ -2491,11 +2670,22 @@ function ImmediateActionEditor({
|
|||
<SelectTrigger className="h-6 w-20 text-[10px]"><SelectValue /></SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="static" className="text-[10px]">직접입력</SelectItem>
|
||||
<SelectItem value="userInput" className="text-[10px]">사용자 입력</SelectItem>
|
||||
<SelectItem value="currentUser" className="text-[10px]">현재 사용자</SelectItem>
|
||||
<SelectItem value="currentTime" className="text-[10px]">현재 시간</SelectItem>
|
||||
<SelectItem value="columnRef" className="text-[10px]">컬럼 참조</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{u.valueType === "userInput" && (
|
||||
<Select value={u.operationType || "assign"} onValueChange={(v) => onUpdateUpdate(ui, { operationType: v as ActionButtonUpdate["operationType"] })}>
|
||||
<SelectTrigger className="h-6 w-16 text-[10px]"><SelectValue /></SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="assign" className="text-[10px]">대입</SelectItem>
|
||||
<SelectItem value="add" className="text-[10px]">합산</SelectItem>
|
||||
<SelectItem value="subtract" className="text-[10px]">차감</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
{(u.valueType === "static" || u.valueType === "columnRef") && (
|
||||
<Input
|
||||
value={u.value || ""}
|
||||
|
|
@ -2608,10 +2798,12 @@ function DbTableCombobox({
|
|||
function FooterStatusEditor({
|
||||
cell,
|
||||
allColumnOptions,
|
||||
columnOptionGroups,
|
||||
onUpdate,
|
||||
}: {
|
||||
cell: CardCellDefinitionV2;
|
||||
allColumnOptions: { value: string; label: string }[];
|
||||
columnOptionGroups: ColumnOptionGroup[];
|
||||
onUpdate: (partial: Partial<CardCellDefinitionV2>) => void;
|
||||
}) {
|
||||
const footerStatusMap = cell.footerStatusMap || [];
|
||||
|
|
@ -2644,7 +2836,7 @@ function FooterStatusEditor({
|
|||
<SelectTrigger className="h-7 flex-1 text-[10px]"><SelectValue placeholder="상태 컬럼" /></SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="__none__" className="text-[10px]">없음</SelectItem>
|
||||
{allColumnOptions.map((o) => <SelectItem key={o.value} value={o.value} className="text-[10px]">{o.label}</SelectItem>)}
|
||||
{renderColumnOptionGroups(columnOptionGroups)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
|
@ -2680,10 +2872,12 @@ function FooterStatusEditor({
|
|||
function FieldConfigEditor({
|
||||
cell,
|
||||
allColumnOptions,
|
||||
columnOptionGroups,
|
||||
onUpdate,
|
||||
}: {
|
||||
cell: CardCellDefinitionV2;
|
||||
allColumnOptions: { value: string; label: string }[];
|
||||
columnOptionGroups: ColumnOptionGroup[];
|
||||
onUpdate: (partial: Partial<CardCellDefinitionV2>) => void;
|
||||
}) {
|
||||
const valueType = cell.valueType || "column";
|
||||
|
|
@ -2706,7 +2900,7 @@ function FieldConfigEditor({
|
|||
<Select value={cell.formulaLeft || ""} onValueChange={(v) => onUpdate({ formulaLeft: v })}>
|
||||
<SelectTrigger className="h-7 flex-1 text-[10px]"><SelectValue placeholder="좌항" /></SelectTrigger>
|
||||
<SelectContent>
|
||||
{allColumnOptions.map((o) => <SelectItem key={o.value} value={o.value} className="text-[10px]">{o.label}</SelectItem>)}
|
||||
{renderColumnOptionGroups(columnOptionGroups)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Select value={cell.formulaOperator || "+"} onValueChange={(v) => onUpdate({ formulaOperator: v as "+" | "-" | "*" | "/" })}>
|
||||
|
|
@ -2726,7 +2920,7 @@ function FieldConfigEditor({
|
|||
<Select value={cell.formulaRight || ""} onValueChange={(v) => onUpdate({ formulaRight: v })}>
|
||||
<SelectTrigger className="h-7 flex-1 text-[10px]"><SelectValue placeholder="우항" /></SelectTrigger>
|
||||
<SelectContent>
|
||||
{allColumnOptions.map((o) => <SelectItem key={o.value} value={o.value} className="text-[10px]">{o.label}</SelectItem>)}
|
||||
{renderColumnOptionGroups(columnOptionGroups)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
|
|
@ -2741,16 +2935,62 @@ function FieldConfigEditor({
|
|||
function TabActions({
|
||||
cfg,
|
||||
onUpdate,
|
||||
columns,
|
||||
}: {
|
||||
cfg: PopCardListV2Config;
|
||||
onUpdate: (partial: Partial<PopCardListV2Config>) => void;
|
||||
columns: ColumnInfo[];
|
||||
}) {
|
||||
const designerCtx = usePopDesignerContext();
|
||||
const overflow = cfg.overflow || { mode: "loadMore" as const, visibleCount: 6 };
|
||||
const clickAction = cfg.cardClickAction || "none";
|
||||
const modalConfig = cfg.cardClickModalConfig || { screenId: "" };
|
||||
|
||||
const [processColumns, setProcessColumns] = useState<ColumnInfo[]>([]);
|
||||
const timelineCell = cfg.cardGrid?.cells?.find((c) => c.type === "timeline" && c.timelineSource?.processTable);
|
||||
const processTableName = timelineCell?.timelineSource?.processTable || "";
|
||||
useEffect(() => {
|
||||
if (!processTableName) { setProcessColumns([]); return; }
|
||||
fetchTableColumns(processTableName)
|
||||
.then(setProcessColumns)
|
||||
.catch(() => setProcessColumns([]));
|
||||
}, [processTableName]);
|
||||
|
||||
const ownerColumnGroups: ColumnOptionGroup[] = useMemo(() => [
|
||||
{
|
||||
groupLabel: `메인 (${cfg.dataSource?.tableName || "테이블"})`,
|
||||
options: columns.map((c) => ({ value: c.name, label: c.name })),
|
||||
},
|
||||
...(processColumns.length > 0
|
||||
? [{
|
||||
groupLabel: `공정 (${processTableName})`,
|
||||
options: processColumns.map((c) => ({ value: `__process_${c.name}`, label: c.name })),
|
||||
}]
|
||||
: []),
|
||||
], [columns, processColumns, processTableName, cfg.dataSource?.tableName]);
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{/* 소유자 우선 정렬 */}
|
||||
<div>
|
||||
<Label className="text-xs">소유자 우선 정렬</Label>
|
||||
<div className="mt-1 flex items-center gap-1">
|
||||
<Select
|
||||
value={cfg.ownerSortColumn || "__none__"}
|
||||
onValueChange={(v) => onUpdate({ ownerSortColumn: v === "__none__" ? undefined : v })}
|
||||
>
|
||||
<SelectTrigger className="h-7 flex-1 text-[10px]"><SelectValue placeholder="사용 안 함" /></SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="__none__" className="text-[10px]">사용 안 함</SelectItem>
|
||||
{renderColumnOptionGroups(ownerColumnGroups)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<p className="mt-0.5 text-[9px] text-muted-foreground">
|
||||
선택한 컬럼 값이 현재 로그인 사용자와 일치하는 카드가 맨 위에 표시됩니다
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 카드 선택 시 */}
|
||||
<div>
|
||||
<Label className="text-xs">카드 선택 시 동작</Label>
|
||||
|
|
@ -2775,15 +3015,52 @@ function TabActions({
|
|||
</div>
|
||||
{clickAction === "modal-open" && (
|
||||
<div className="mt-2 space-y-1.5 rounded border bg-muted/20 p-2">
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="w-16 shrink-0 text-[9px] text-muted-foreground">POP 화면 ID</span>
|
||||
<Input
|
||||
value={modalConfig.screenId || ""}
|
||||
onChange={(e) => onUpdate({ cardClickModalConfig: { ...modalConfig, screenId: e.target.value } })}
|
||||
placeholder="화면 ID (예: 4481)"
|
||||
className="h-7 flex-1 text-[10px]"
|
||||
/>
|
||||
</div>
|
||||
{/* 모달 캔버스 (디자이너 모드) */}
|
||||
{designerCtx && (
|
||||
<div>
|
||||
{modalConfig.screenId?.startsWith("modal-") ? (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="h-7 w-full text-[10px]"
|
||||
onClick={() => designerCtx.navigateToCanvas(modalConfig.screenId)}
|
||||
>
|
||||
모달 캔버스 열기
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="h-7 w-full text-[10px]"
|
||||
onClick={() => {
|
||||
const selectedId = designerCtx.selectedComponentId;
|
||||
if (!selectedId) return;
|
||||
const modalId = designerCtx.createModalCanvas(
|
||||
selectedId,
|
||||
modalConfig.modalTitle || "카드 상세"
|
||||
);
|
||||
onUpdate({
|
||||
cardClickModalConfig: { ...modalConfig, screenId: modalId },
|
||||
});
|
||||
}}
|
||||
>
|
||||
모달 캔버스 생성
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{/* 뷰어 모드 또는 직접 입력 폴백 */}
|
||||
{!designerCtx && (
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="w-16 shrink-0 text-[9px] text-muted-foreground">모달 ID</span>
|
||||
<Input
|
||||
value={modalConfig.screenId || ""}
|
||||
onChange={(e) => onUpdate({ cardClickModalConfig: { ...modalConfig, screenId: e.target.value } })}
|
||||
placeholder="모달 ID"
|
||||
className="h-7 flex-1 text-[10px]"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="w-16 shrink-0 text-[9px] text-muted-foreground">모달 제목</span>
|
||||
<Input
|
||||
|
|
|
|||
|
|
@ -70,6 +70,7 @@ export interface CellRendererProps {
|
|||
onEnterSelectMode?: (whenStatus: string, buttonConfig: Record<string, unknown>) => void;
|
||||
packageEntries?: PackageEntry[];
|
||||
inputUnit?: string;
|
||||
currentUserId?: string;
|
||||
}
|
||||
|
||||
// ===== 메인 디스패치 =====
|
||||
|
|
@ -592,7 +593,7 @@ function TimelineCell({ cell, row }: CellRendererProps) {
|
|||
|
||||
// ===== 11. action-buttons =====
|
||||
|
||||
function evaluateShowCondition(btn: ActionButtonDef, row: RowData): "visible" | "disabled" | "hidden" {
|
||||
function evaluateShowCondition(btn: ActionButtonDef, row: RowData, currentUserId?: string): "visible" | "disabled" | "hidden" {
|
||||
const cond = btn.showCondition;
|
||||
if (!cond || cond.type === "always") return "visible";
|
||||
|
||||
|
|
@ -603,6 +604,9 @@ function evaluateShowCondition(btn: ActionButtonDef, row: RowData): "visible" |
|
|||
matched = subStatus !== undefined && String(subStatus) === cond.value;
|
||||
} else if (cond.type === "column-value" && cond.column) {
|
||||
matched = String(row[cond.column] ?? "") === (cond.value ?? "");
|
||||
} else if (cond.type === "owner-match" && cond.column) {
|
||||
const ownerValue = String(row[cond.column] ?? "");
|
||||
matched = !!currentUserId && ownerValue === currentUserId;
|
||||
} else {
|
||||
return "visible";
|
||||
}
|
||||
|
|
@ -611,7 +615,7 @@ function evaluateShowCondition(btn: ActionButtonDef, row: RowData): "visible" |
|
|||
return cond.unmatchBehavior === "disabled" ? "disabled" : "hidden";
|
||||
}
|
||||
|
||||
function ActionButtonsCell({ cell, row, onActionButtonClick, onEnterSelectMode }: CellRendererProps) {
|
||||
function ActionButtonsCell({ cell, row, onActionButtonClick, onEnterSelectMode, currentUserId }: CellRendererProps) {
|
||||
const processFlow = row.__processFlow__ as { isCurrent: boolean; processId?: string | number }[] | undefined;
|
||||
const currentProcess = processFlow?.find((s) => s.isCurrent);
|
||||
const currentProcessId = currentProcess?.processId;
|
||||
|
|
@ -619,7 +623,7 @@ function ActionButtonsCell({ cell, row, onActionButtonClick, onEnterSelectMode }
|
|||
if (cell.actionButtons && cell.actionButtons.length > 0) {
|
||||
const evaluated = cell.actionButtons.map((btn) => ({
|
||||
btn,
|
||||
state: evaluateShowCondition(btn, row),
|
||||
state: evaluateShowCondition(btn, row, currentUserId),
|
||||
}));
|
||||
|
||||
const activeBtn = evaluated.find((e) => e.state === "visible");
|
||||
|
|
|
|||
|
|
@ -0,0 +1,832 @@
|
|||
"use client";
|
||||
|
||||
import React, { useEffect, useState, useMemo, useCallback } from "react";
|
||||
import {
|
||||
Loader2, Play, Pause, CheckCircle2, AlertCircle, Timer, Package,
|
||||
} from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { dataApi } from "@/lib/api/data";
|
||||
import { apiClient } from "@/lib/api/client";
|
||||
import { usePopEvent } from "@/hooks/pop/usePopEvent";
|
||||
import { useAuth } from "@/hooks/useAuth";
|
||||
import type { PopWorkDetailConfig } from "../types";
|
||||
import type { TimelineProcessStep } from "../types";
|
||||
|
||||
// ========================================
|
||||
// 타입
|
||||
// ========================================
|
||||
|
||||
type RowData = Record<string, unknown>;
|
||||
|
||||
interface WorkResultRow {
|
||||
id: string;
|
||||
work_order_process_id: string;
|
||||
source_work_item_id: string;
|
||||
source_detail_id: string;
|
||||
work_phase: string;
|
||||
item_title: string;
|
||||
item_sort_order: string;
|
||||
detail_type: string;
|
||||
detail_label: string;
|
||||
detail_sort_order: string;
|
||||
spec_value: string | null;
|
||||
lower_limit: string | null;
|
||||
upper_limit: string | null;
|
||||
input_type: string | null;
|
||||
result_value: string | null;
|
||||
status: string;
|
||||
is_passed: string | null;
|
||||
recorded_by: string | null;
|
||||
recorded_at: string | null;
|
||||
}
|
||||
|
||||
interface WorkGroup {
|
||||
phase: string;
|
||||
title: string;
|
||||
itemId: string;
|
||||
sortOrder: number;
|
||||
total: number;
|
||||
completed: number;
|
||||
}
|
||||
|
||||
type WorkPhase = "PRE" | "IN" | "POST";
|
||||
const PHASE_ORDER: Record<string, number> = { PRE: 1, IN: 2, POST: 3 };
|
||||
|
||||
interface ProcessTimerData {
|
||||
started_at: string | null;
|
||||
paused_at: string | null;
|
||||
total_paused_time: string | null;
|
||||
status: string;
|
||||
good_qty: string | null;
|
||||
defect_qty: string | null;
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// Props
|
||||
// ========================================
|
||||
|
||||
interface PopWorkDetailComponentProps {
|
||||
config?: PopWorkDetailConfig;
|
||||
screenId?: string;
|
||||
componentId?: string;
|
||||
currentRowSpan?: number;
|
||||
currentColSpan?: number;
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// 메인 컴포넌트
|
||||
// ========================================
|
||||
|
||||
export function PopWorkDetailComponent({
|
||||
config,
|
||||
screenId,
|
||||
componentId,
|
||||
}: PopWorkDetailComponentProps) {
|
||||
const { getSharedData } = usePopEvent(screenId || "default");
|
||||
const { user } = useAuth();
|
||||
|
||||
const cfg: PopWorkDetailConfig = {
|
||||
showTimer: config?.showTimer ?? true,
|
||||
showQuantityInput: config?.showQuantityInput ?? true,
|
||||
phaseLabels: config?.phaseLabels ?? { PRE: "작업 전", IN: "작업 중", POST: "작업 후" },
|
||||
};
|
||||
|
||||
// parentRow에서 현재 공정 정보 추출
|
||||
const parentRow = getSharedData<RowData>("parentRow");
|
||||
const processFlow = parentRow?.__processFlow__ as TimelineProcessStep[] | undefined;
|
||||
const currentProcess = processFlow?.find((p) => p.isCurrent);
|
||||
const workOrderProcessId = currentProcess?.processId
|
||||
? String(currentProcess.processId)
|
||||
: undefined;
|
||||
const processName = currentProcess?.processName ?? "공정 상세";
|
||||
|
||||
// ========================================
|
||||
// 상태
|
||||
// ========================================
|
||||
|
||||
const [allResults, setAllResults] = useState<WorkResultRow[]>([]);
|
||||
const [processData, setProcessData] = useState<ProcessTimerData | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [selectedGroupId, setSelectedGroupId] = useState<string | null>(null);
|
||||
const [tick, setTick] = useState(Date.now());
|
||||
const [savingIds, setSavingIds] = useState<Set<string>>(new Set());
|
||||
|
||||
// 수량 입력 로컬 상태
|
||||
const [goodQty, setGoodQty] = useState("");
|
||||
const [defectQty, setDefectQty] = useState("");
|
||||
|
||||
// ========================================
|
||||
// D-FE1: 데이터 로드
|
||||
// ========================================
|
||||
|
||||
const fetchData = useCallback(async () => {
|
||||
if (!workOrderProcessId) {
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
const [resultRes, processRes] = await Promise.all([
|
||||
dataApi.getTableData("process_work_result", {
|
||||
size: 500,
|
||||
filters: { work_order_process_id: workOrderProcessId },
|
||||
}),
|
||||
dataApi.getTableData("work_order_process", {
|
||||
size: 1,
|
||||
filters: { id: workOrderProcessId },
|
||||
}),
|
||||
]);
|
||||
|
||||
setAllResults((resultRes.data ?? []) as unknown as WorkResultRow[]);
|
||||
|
||||
const proc = (processRes.data?.[0] ?? null) as ProcessTimerData | null;
|
||||
setProcessData(proc);
|
||||
if (proc) {
|
||||
setGoodQty(proc.good_qty ?? "");
|
||||
setDefectQty(proc.defect_qty ?? "");
|
||||
}
|
||||
} catch {
|
||||
toast.error("데이터를 불러오는데 실패했습니다.");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [workOrderProcessId]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, [fetchData]);
|
||||
|
||||
// ========================================
|
||||
// D-FE2: 좌측 사이드바 - 작업항목 그룹핑
|
||||
// ========================================
|
||||
|
||||
const groups = useMemo<WorkGroup[]>(() => {
|
||||
const map = new Map<string, WorkGroup>();
|
||||
for (const row of allResults) {
|
||||
const key = row.source_work_item_id;
|
||||
if (!map.has(key)) {
|
||||
map.set(key, {
|
||||
phase: row.work_phase,
|
||||
title: row.item_title,
|
||||
itemId: key,
|
||||
sortOrder: parseInt(row.item_sort_order || "0", 10),
|
||||
total: 0,
|
||||
completed: 0,
|
||||
});
|
||||
}
|
||||
const g = map.get(key)!;
|
||||
g.total++;
|
||||
if (row.status === "completed") g.completed++;
|
||||
}
|
||||
return Array.from(map.values()).sort(
|
||||
(a, b) =>
|
||||
(PHASE_ORDER[a.phase] ?? 9) - (PHASE_ORDER[b.phase] ?? 9) ||
|
||||
a.sortOrder - b.sortOrder
|
||||
);
|
||||
}, [allResults]);
|
||||
|
||||
// phase별로 그룹핑
|
||||
const groupsByPhase = useMemo(() => {
|
||||
const result: Record<string, WorkGroup[]> = {};
|
||||
for (const g of groups) {
|
||||
if (!result[g.phase]) result[g.phase] = [];
|
||||
result[g.phase].push(g);
|
||||
}
|
||||
return result;
|
||||
}, [groups]);
|
||||
|
||||
// 첫 그룹 자동 선택
|
||||
useEffect(() => {
|
||||
if (groups.length > 0 && !selectedGroupId) {
|
||||
setSelectedGroupId(groups[0].itemId);
|
||||
}
|
||||
}, [groups, selectedGroupId]);
|
||||
|
||||
// ========================================
|
||||
// D-FE3: 우측 체크리스트
|
||||
// ========================================
|
||||
|
||||
const currentItems = useMemo(
|
||||
() =>
|
||||
allResults
|
||||
.filter((r) => r.source_work_item_id === selectedGroupId)
|
||||
.sort((a, b) => parseInt(a.detail_sort_order || "0", 10) - parseInt(b.detail_sort_order || "0", 10)),
|
||||
[allResults, selectedGroupId]
|
||||
);
|
||||
|
||||
const saveResultValue = useCallback(
|
||||
async (
|
||||
rowId: string,
|
||||
resultValue: string,
|
||||
isPassed: string | null,
|
||||
newStatus: string
|
||||
) => {
|
||||
setSavingIds((prev) => new Set(prev).add(rowId));
|
||||
try {
|
||||
await apiClient.post("/pop/execute-action", {
|
||||
tasks: [
|
||||
{ type: "data-update", targetTable: "process_work_result", targetColumn: "result_value", value: resultValue, items: [{ id: rowId }] },
|
||||
{ type: "data-update", targetTable: "process_work_result", targetColumn: "status", value: newStatus, items: [{ id: rowId }] },
|
||||
...(isPassed !== null
|
||||
? [{ type: "data-update", targetTable: "process_work_result", targetColumn: "is_passed", value: isPassed, items: [{ id: rowId }] }]
|
||||
: []),
|
||||
{ type: "data-update", targetTable: "process_work_result", targetColumn: "recorded_by", value: user?.userId ?? "", items: [{ id: rowId }] },
|
||||
{ type: "data-update", targetTable: "process_work_result", targetColumn: "recorded_at", value: new Date().toISOString(), items: [{ id: rowId }] },
|
||||
],
|
||||
data: { items: [{ id: rowId }], fieldValues: {} },
|
||||
});
|
||||
|
||||
setAllResults((prev) =>
|
||||
prev.map((r) =>
|
||||
r.id === rowId
|
||||
? {
|
||||
...r,
|
||||
result_value: resultValue,
|
||||
status: newStatus,
|
||||
is_passed: isPassed,
|
||||
recorded_by: user?.userId ?? null,
|
||||
recorded_at: new Date().toISOString(),
|
||||
}
|
||||
: r
|
||||
)
|
||||
);
|
||||
} catch {
|
||||
toast.error("저장에 실패했습니다.");
|
||||
} finally {
|
||||
setSavingIds((prev) => {
|
||||
const next = new Set(prev);
|
||||
next.delete(rowId);
|
||||
return next;
|
||||
});
|
||||
}
|
||||
},
|
||||
[user?.userId]
|
||||
);
|
||||
|
||||
// ========================================
|
||||
// D-FE4: 타이머
|
||||
// ========================================
|
||||
|
||||
useEffect(() => {
|
||||
if (!cfg.showTimer || !processData?.started_at) return;
|
||||
const id = setInterval(() => setTick(Date.now()), 1000);
|
||||
return () => clearInterval(id);
|
||||
}, [cfg.showTimer, processData?.started_at]);
|
||||
|
||||
const elapsedMs = useMemo(() => {
|
||||
if (!processData?.started_at) return 0;
|
||||
const now = tick;
|
||||
const totalMs = now - new Date(processData.started_at).getTime();
|
||||
const pausedSec = parseInt(processData.total_paused_time || "0", 10);
|
||||
const currentPauseMs = processData.paused_at
|
||||
? now - new Date(processData.paused_at).getTime()
|
||||
: 0;
|
||||
return Math.max(0, totalMs - pausedSec * 1000 - currentPauseMs);
|
||||
}, [processData?.started_at, processData?.paused_at, processData?.total_paused_time, tick]);
|
||||
|
||||
const formattedTime = useMemo(() => {
|
||||
const totalSec = Math.floor(elapsedMs / 1000);
|
||||
const h = String(Math.floor(totalSec / 3600)).padStart(2, "0");
|
||||
const m = String(Math.floor((totalSec % 3600) / 60)).padStart(2, "0");
|
||||
const s = String(totalSec % 60).padStart(2, "0");
|
||||
return `${h}:${m}:${s}`;
|
||||
}, [elapsedMs]);
|
||||
|
||||
const isPaused = !!processData?.paused_at;
|
||||
const isStarted = !!processData?.started_at;
|
||||
|
||||
const handleTimerAction = useCallback(
|
||||
async (action: "start" | "pause" | "resume") => {
|
||||
if (!workOrderProcessId) return;
|
||||
try {
|
||||
await apiClient.post("/api/pop/production/timer", {
|
||||
workOrderProcessId,
|
||||
action,
|
||||
});
|
||||
// 타이머 상태 새로고침
|
||||
const res = await dataApi.getTableData("work_order_process", {
|
||||
size: 1,
|
||||
filters: { id: workOrderProcessId },
|
||||
});
|
||||
const proc = (res.data?.[0] ?? null) as ProcessTimerData | null;
|
||||
if (proc) setProcessData(proc);
|
||||
} catch {
|
||||
toast.error("타이머 제어에 실패했습니다.");
|
||||
}
|
||||
},
|
||||
[workOrderProcessId]
|
||||
);
|
||||
|
||||
// ========================================
|
||||
// D-FE5: 수량 등록 + 완료
|
||||
// ========================================
|
||||
|
||||
const handleQuantityRegister = useCallback(async () => {
|
||||
if (!workOrderProcessId) return;
|
||||
try {
|
||||
await apiClient.post("/pop/execute-action", {
|
||||
tasks: [
|
||||
{ type: "data-update", targetTable: "work_order_process", targetColumn: "good_qty", value: goodQty || "0", items: [{ id: workOrderProcessId }] },
|
||||
{ type: "data-update", targetTable: "work_order_process", targetColumn: "defect_qty", value: defectQty || "0", items: [{ id: workOrderProcessId }] },
|
||||
],
|
||||
data: { items: [{ id: workOrderProcessId }], fieldValues: {} },
|
||||
});
|
||||
toast.success("수량이 등록되었습니다.");
|
||||
} catch {
|
||||
toast.error("수량 등록에 실패했습니다.");
|
||||
}
|
||||
}, [workOrderProcessId, goodQty, defectQty]);
|
||||
|
||||
const handleProcessComplete = useCallback(async () => {
|
||||
if (!workOrderProcessId) return;
|
||||
try {
|
||||
await apiClient.post("/pop/execute-action", {
|
||||
tasks: [
|
||||
{ type: "data-update", targetTable: "work_order_process", targetColumn: "status", value: "completed", items: [{ id: workOrderProcessId }] },
|
||||
{ type: "data-update", targetTable: "work_order_process", targetColumn: "completed_at", value: new Date().toISOString(), items: [{ id: workOrderProcessId }] },
|
||||
],
|
||||
data: { items: [{ id: workOrderProcessId }], fieldValues: {} },
|
||||
});
|
||||
toast.success("공정이 완료되었습니다.");
|
||||
setProcessData((prev) =>
|
||||
prev ? { ...prev, status: "completed" } : prev
|
||||
);
|
||||
} catch {
|
||||
toast.error("공정 완료 처리에 실패했습니다.");
|
||||
}
|
||||
}, [workOrderProcessId]);
|
||||
|
||||
// ========================================
|
||||
// 안전 장치
|
||||
// ========================================
|
||||
|
||||
if (!parentRow) {
|
||||
return (
|
||||
<div className="flex h-full items-center justify-center text-sm text-muted-foreground">
|
||||
<AlertCircle className="mr-2 h-4 w-4" />
|
||||
카드를 선택해주세요
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!workOrderProcessId) {
|
||||
return (
|
||||
<div className="flex h-full items-center justify-center text-sm text-muted-foreground">
|
||||
<AlertCircle className="mr-2 h-4 w-4" />
|
||||
공정 정보를 찾을 수 없습니다
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex h-full items-center justify-center">
|
||||
<Loader2 className="h-6 w-6 animate-spin text-primary" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (allResults.length === 0) {
|
||||
return (
|
||||
<div className="flex h-full items-center justify-center text-sm text-muted-foreground">
|
||||
<AlertCircle className="mr-2 h-4 w-4" />
|
||||
작업기준이 등록되지 않았습니다
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const isProcessCompleted = processData?.status === "completed";
|
||||
|
||||
// ========================================
|
||||
// 렌더링
|
||||
// ========================================
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col">
|
||||
{/* 헤더 */}
|
||||
<div className="flex items-center justify-between border-b px-3 py-2">
|
||||
<h3 className="text-sm font-semibold">{processName}</h3>
|
||||
{cfg.showTimer && (
|
||||
<div className="flex items-center gap-2">
|
||||
<Timer className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="font-mono text-sm font-medium tabular-nums">
|
||||
{formattedTime}
|
||||
</span>
|
||||
{!isProcessCompleted && (
|
||||
<>
|
||||
{!isStarted && (
|
||||
<Button size="sm" variant="outline" className="h-7 px-2 text-xs" onClick={() => handleTimerAction("start")}>
|
||||
<Play className="mr-1 h-3 w-3" />
|
||||
시작
|
||||
</Button>
|
||||
)}
|
||||
{isStarted && !isPaused && (
|
||||
<Button size="sm" variant="outline" className="h-7 px-2 text-xs" onClick={() => handleTimerAction("pause")}>
|
||||
<Pause className="mr-1 h-3 w-3" />
|
||||
정지
|
||||
</Button>
|
||||
)}
|
||||
{isStarted && isPaused && (
|
||||
<Button size="sm" variant="outline" className="h-7 px-2 text-xs" onClick={() => handleTimerAction("resume")}>
|
||||
<Play className="mr-1 h-3 w-3" />
|
||||
재개
|
||||
</Button>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 본문: 좌측 사이드바 + 우측 체크리스트 */}
|
||||
<div className="flex flex-1 overflow-hidden">
|
||||
{/* 좌측 사이드바 */}
|
||||
<div className="w-40 shrink-0 overflow-y-auto border-r bg-muted/30">
|
||||
{(["PRE", "IN", "POST"] as WorkPhase[]).map((phase) => {
|
||||
const phaseGroups = groupsByPhase[phase];
|
||||
if (!phaseGroups || phaseGroups.length === 0) return null;
|
||||
return (
|
||||
<div key={phase}>
|
||||
<div className="px-3 pb-1 pt-2 text-[10px] font-semibold uppercase text-muted-foreground">
|
||||
{cfg.phaseLabels[phase] ?? phase}
|
||||
</div>
|
||||
{phaseGroups.map((g) => (
|
||||
<button
|
||||
key={g.itemId}
|
||||
className={cn(
|
||||
"flex w-full flex-col px-3 py-1.5 text-left transition-colors",
|
||||
selectedGroupId === g.itemId
|
||||
? "bg-primary/10 text-primary"
|
||||
: "hover:bg-muted/60"
|
||||
)}
|
||||
onClick={() => setSelectedGroupId(g.itemId)}
|
||||
>
|
||||
<span className="text-xs font-medium leading-tight">
|
||||
{g.title}
|
||||
</span>
|
||||
<span className="text-[10px] text-muted-foreground">
|
||||
{g.completed}/{g.total} 완료
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* 우측 체크리스트 */}
|
||||
<div className="flex-1 overflow-y-auto p-3">
|
||||
{selectedGroupId && (
|
||||
<div className="space-y-2">
|
||||
{currentItems.map((item) => (
|
||||
<ChecklistItem
|
||||
key={item.id}
|
||||
item={item}
|
||||
saving={savingIds.has(item.id)}
|
||||
disabled={isProcessCompleted}
|
||||
onSave={saveResultValue}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 하단: 수량 입력 + 완료 */}
|
||||
{cfg.showQuantityInput && (
|
||||
<div className="flex items-center gap-2 border-t px-3 py-2">
|
||||
<Package className="h-4 w-4 shrink-0 text-muted-foreground" />
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="text-xs text-muted-foreground">양품</span>
|
||||
<Input
|
||||
type="number"
|
||||
className="h-7 w-20 text-xs"
|
||||
value={goodQty}
|
||||
onChange={(e) => setGoodQty(e.target.value)}
|
||||
disabled={isProcessCompleted}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="text-xs text-muted-foreground">불량</span>
|
||||
<Input
|
||||
type="number"
|
||||
className="h-7 w-20 text-xs"
|
||||
value={defectQty}
|
||||
onChange={(e) => setDefectQty(e.target.value)}
|
||||
disabled={isProcessCompleted}
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="h-7 text-xs"
|
||||
onClick={handleQuantityRegister}
|
||||
disabled={isProcessCompleted}
|
||||
>
|
||||
수량 등록
|
||||
</Button>
|
||||
<div className="flex-1" />
|
||||
{!isProcessCompleted && (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="default"
|
||||
className="h-7 text-xs"
|
||||
onClick={handleProcessComplete}
|
||||
>
|
||||
<CheckCircle2 className="mr-1 h-3 w-3" />
|
||||
공정 완료
|
||||
</Button>
|
||||
)}
|
||||
{isProcessCompleted && (
|
||||
<Badge variant="outline" className="text-xs text-green-600">
|
||||
완료됨
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// 체크리스트 개별 항목
|
||||
// ========================================
|
||||
|
||||
interface ChecklistItemProps {
|
||||
item: WorkResultRow;
|
||||
saving: boolean;
|
||||
disabled: boolean;
|
||||
onSave: (
|
||||
rowId: string,
|
||||
resultValue: string,
|
||||
isPassed: string | null,
|
||||
newStatus: string
|
||||
) => void;
|
||||
}
|
||||
|
||||
function ChecklistItem({ item, saving, disabled, onSave }: ChecklistItemProps) {
|
||||
const isSaving = saving;
|
||||
const isDisabled = disabled || isSaving;
|
||||
|
||||
switch (item.detail_type) {
|
||||
case "check":
|
||||
return <CheckItem item={item} disabled={isDisabled} saving={isSaving} onSave={onSave} />;
|
||||
case "inspect":
|
||||
return <InspectItem item={item} disabled={isDisabled} saving={isSaving} onSave={onSave} />;
|
||||
case "input":
|
||||
return <InputItem item={item} disabled={isDisabled} saving={isSaving} onSave={onSave} />;
|
||||
case "procedure":
|
||||
return <ProcedureItem item={item} disabled={isDisabled} saving={isSaving} onSave={onSave} />;
|
||||
case "material":
|
||||
return <MaterialItem item={item} disabled={isDisabled} saving={isSaving} onSave={onSave} />;
|
||||
default:
|
||||
return (
|
||||
<div className="rounded border p-2 text-xs text-muted-foreground">
|
||||
알 수 없는 유형: {item.detail_type}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// ===== check: 체크박스 =====
|
||||
|
||||
function CheckItem({
|
||||
item,
|
||||
disabled,
|
||||
saving,
|
||||
onSave,
|
||||
}: {
|
||||
item: WorkResultRow;
|
||||
disabled: boolean;
|
||||
saving: boolean;
|
||||
onSave: ChecklistItemProps["onSave"];
|
||||
}) {
|
||||
const checked = item.result_value === "Y";
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center gap-2 rounded border px-3 py-2",
|
||||
item.status === "completed" && "bg-green-50 border-green-200"
|
||||
)}
|
||||
>
|
||||
<Checkbox
|
||||
checked={checked}
|
||||
disabled={disabled}
|
||||
onCheckedChange={(v) => {
|
||||
const val = v ? "Y" : "N";
|
||||
onSave(item.id, val, v ? "Y" : "N", v ? "completed" : "pending");
|
||||
}}
|
||||
/>
|
||||
<span className="flex-1 text-xs">{item.detail_label}</span>
|
||||
{saving && <Loader2 className="h-3 w-3 animate-spin" />}
|
||||
{item.status === "completed" && !saving && (
|
||||
<Badge variant="outline" className="text-[10px] text-green-600">
|
||||
완료
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ===== inspect: 측정값 입력 (범위 판정) =====
|
||||
|
||||
function InspectItem({
|
||||
item,
|
||||
disabled,
|
||||
saving,
|
||||
onSave,
|
||||
}: {
|
||||
item: WorkResultRow;
|
||||
disabled: boolean;
|
||||
saving: boolean;
|
||||
onSave: ChecklistItemProps["onSave"];
|
||||
}) {
|
||||
const [inputVal, setInputVal] = useState(item.result_value ?? "");
|
||||
const lower = parseFloat(item.lower_limit ?? "");
|
||||
const upper = parseFloat(item.upper_limit ?? "");
|
||||
const hasRange = !isNaN(lower) && !isNaN(upper);
|
||||
|
||||
const handleBlur = () => {
|
||||
if (!inputVal || disabled) return;
|
||||
const numVal = parseFloat(inputVal);
|
||||
let passed: string | null = null;
|
||||
if (hasRange) {
|
||||
passed = numVal >= lower && numVal <= upper ? "Y" : "N";
|
||||
}
|
||||
onSave(item.id, inputVal, passed, "completed");
|
||||
};
|
||||
|
||||
const isPassed = item.is_passed;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"rounded border px-3 py-2",
|
||||
isPassed === "Y" && "bg-green-50 border-green-200",
|
||||
isPassed === "N" && "bg-red-50 border-red-200"
|
||||
)}
|
||||
>
|
||||
<div className="mb-1 flex items-center justify-between">
|
||||
<span className="text-xs font-medium">{item.detail_label}</span>
|
||||
{hasRange && (
|
||||
<span className="text-[10px] text-muted-foreground">
|
||||
기준: {item.lower_limit} ~ {item.upper_limit}
|
||||
{item.spec_value ? ` (표준: ${item.spec_value})` : ""}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Input
|
||||
type="number"
|
||||
className="h-7 w-28 text-xs"
|
||||
value={inputVal}
|
||||
onChange={(e) => setInputVal(e.target.value)}
|
||||
onBlur={handleBlur}
|
||||
disabled={disabled}
|
||||
placeholder="측정값 입력"
|
||||
/>
|
||||
{saving && <Loader2 className="h-3 w-3 animate-spin" />}
|
||||
{isPassed === "Y" && !saving && (
|
||||
<Badge variant="outline" className="text-[10px] text-green-600">합격</Badge>
|
||||
)}
|
||||
{isPassed === "N" && !saving && (
|
||||
<Badge variant="outline" className="text-[10px] text-red-600">불합격</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ===== input: 자유 입력 =====
|
||||
|
||||
function InputItem({
|
||||
item,
|
||||
disabled,
|
||||
saving,
|
||||
onSave,
|
||||
}: {
|
||||
item: WorkResultRow;
|
||||
disabled: boolean;
|
||||
saving: boolean;
|
||||
onSave: ChecklistItemProps["onSave"];
|
||||
}) {
|
||||
const [inputVal, setInputVal] = useState(item.result_value ?? "");
|
||||
const inputType = item.input_type === "number" ? "number" : "text";
|
||||
|
||||
const handleBlur = () => {
|
||||
if (!inputVal || disabled) return;
|
||||
onSave(item.id, inputVal, null, "completed");
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"rounded border px-3 py-2",
|
||||
item.status === "completed" && "bg-green-50 border-green-200"
|
||||
)}
|
||||
>
|
||||
<div className="mb-1 text-xs font-medium">{item.detail_label}</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Input
|
||||
type={inputType}
|
||||
className="h-7 flex-1 text-xs"
|
||||
value={inputVal}
|
||||
onChange={(e) => setInputVal(e.target.value)}
|
||||
onBlur={handleBlur}
|
||||
disabled={disabled}
|
||||
placeholder="값 입력"
|
||||
/>
|
||||
{saving && <Loader2 className="h-3 w-3 animate-spin" />}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ===== procedure: 절차 확인 (읽기 전용 + 체크) =====
|
||||
|
||||
function ProcedureItem({
|
||||
item,
|
||||
disabled,
|
||||
saving,
|
||||
onSave,
|
||||
}: {
|
||||
item: WorkResultRow;
|
||||
disabled: boolean;
|
||||
saving: boolean;
|
||||
onSave: ChecklistItemProps["onSave"];
|
||||
}) {
|
||||
const checked = item.result_value === "Y";
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"rounded border px-3 py-2",
|
||||
item.status === "completed" && "bg-green-50 border-green-200"
|
||||
)}
|
||||
>
|
||||
<div className="mb-1 text-xs text-muted-foreground">
|
||||
{item.spec_value || item.detail_label}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Checkbox
|
||||
checked={checked}
|
||||
disabled={disabled}
|
||||
onCheckedChange={(v) => {
|
||||
onSave(item.id, v ? "Y" : "N", null, v ? "completed" : "pending");
|
||||
}}
|
||||
/>
|
||||
<span className="text-xs">확인</span>
|
||||
{saving && <Loader2 className="h-3 w-3 animate-spin" />}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ===== material: 자재/LOT 입력 =====
|
||||
|
||||
function MaterialItem({
|
||||
item,
|
||||
disabled,
|
||||
saving,
|
||||
onSave,
|
||||
}: {
|
||||
item: WorkResultRow;
|
||||
disabled: boolean;
|
||||
saving: boolean;
|
||||
onSave: ChecklistItemProps["onSave"];
|
||||
}) {
|
||||
const [inputVal, setInputVal] = useState(item.result_value ?? "");
|
||||
|
||||
const handleBlur = () => {
|
||||
if (!inputVal || disabled) return;
|
||||
onSave(item.id, inputVal, null, "completed");
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"rounded border px-3 py-2",
|
||||
item.status === "completed" && "bg-green-50 border-green-200"
|
||||
)}
|
||||
>
|
||||
<div className="mb-1 text-xs font-medium">{item.detail_label}</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Input
|
||||
className="h-7 flex-1 text-xs"
|
||||
value={inputVal}
|
||||
onChange={(e) => setInputVal(e.target.value)}
|
||||
onBlur={handleBlur}
|
||||
disabled={disabled}
|
||||
placeholder="LOT 번호 입력"
|
||||
/>
|
||||
{saving && <Loader2 className="h-3 w-3 animate-spin" />}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
"use client";
|
||||
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import type { PopWorkDetailConfig } from "../types";
|
||||
|
||||
interface PopWorkDetailConfigPanelProps {
|
||||
config?: PopWorkDetailConfig;
|
||||
onChange?: (config: PopWorkDetailConfig) => void;
|
||||
}
|
||||
|
||||
const DEFAULT_PHASE_LABELS: Record<string, string> = {
|
||||
PRE: "작업 전",
|
||||
IN: "작업 중",
|
||||
POST: "작업 후",
|
||||
};
|
||||
|
||||
export function PopWorkDetailConfigPanel({
|
||||
config,
|
||||
onChange,
|
||||
}: PopWorkDetailConfigPanelProps) {
|
||||
const cfg: PopWorkDetailConfig = {
|
||||
showTimer: config?.showTimer ?? true,
|
||||
showQuantityInput: config?.showQuantityInput ?? true,
|
||||
phaseLabels: config?.phaseLabels ?? { ...DEFAULT_PHASE_LABELS },
|
||||
};
|
||||
|
||||
const update = (partial: Partial<PopWorkDetailConfig>) => {
|
||||
onChange?.({ ...cfg, ...partial });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label className="text-xs sm:text-sm">타이머 표시</Label>
|
||||
<Switch
|
||||
checked={cfg.showTimer}
|
||||
onCheckedChange={(v) => update({ showTimer: v })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<Label className="text-xs sm:text-sm">수량 입력 표시</Label>
|
||||
<Switch
|
||||
checked={cfg.showQuantityInput}
|
||||
onCheckedChange={(v) => update({ showQuantityInput: v })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs sm:text-sm">단계 라벨</Label>
|
||||
{(["PRE", "IN", "POST"] as const).map((phase) => (
|
||||
<div key={phase} className="flex items-center gap-2">
|
||||
<span className="w-12 text-xs font-medium text-muted-foreground">
|
||||
{phase}
|
||||
</span>
|
||||
<Input
|
||||
className="h-8 text-xs"
|
||||
value={cfg.phaseLabels[phase] ?? DEFAULT_PHASE_LABELS[phase]}
|
||||
onChange={(e) =>
|
||||
update({
|
||||
phaseLabels: { ...cfg.phaseLabels, [phase]: e.target.value },
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
"use client";
|
||||
|
||||
import { ClipboardCheck } from "lucide-react";
|
||||
import type { PopWorkDetailConfig } from "../types";
|
||||
|
||||
interface PopWorkDetailPreviewProps {
|
||||
config?: PopWorkDetailConfig;
|
||||
}
|
||||
|
||||
export function PopWorkDetailPreviewComponent({ config }: PopWorkDetailPreviewProps) {
|
||||
const labels = config?.phaseLabels ?? { PRE: "작업 전", IN: "작업 중", POST: "작업 후" };
|
||||
return (
|
||||
<div className="flex h-full w-full flex-col items-center justify-center gap-1 p-2">
|
||||
<ClipboardCheck className="h-6 w-6 text-muted-foreground" />
|
||||
<span className="text-[10px] font-medium text-muted-foreground">
|
||||
작업 상세
|
||||
</span>
|
||||
<div className="flex gap-1">
|
||||
{Object.values(labels).map((l) => (
|
||||
<span
|
||||
key={l}
|
||||
className="rounded bg-muted/60 px-1.5 py-0.5 text-[8px] text-muted-foreground"
|
||||
>
|
||||
{l}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
"use client";
|
||||
|
||||
import { PopComponentRegistry } from "../../PopComponentRegistry";
|
||||
import { PopWorkDetailComponent } from "./PopWorkDetailComponent";
|
||||
import { PopWorkDetailConfigPanel } from "./PopWorkDetailConfig";
|
||||
import { PopWorkDetailPreviewComponent } from "./PopWorkDetailPreview";
|
||||
import type { PopWorkDetailConfig } from "../types";
|
||||
|
||||
const defaultConfig: PopWorkDetailConfig = {
|
||||
showTimer: true,
|
||||
showQuantityInput: true,
|
||||
phaseLabels: { PRE: "작업 전", IN: "작업 중", POST: "작업 후" },
|
||||
};
|
||||
|
||||
PopComponentRegistry.registerComponent({
|
||||
id: "pop-work-detail",
|
||||
name: "작업 상세",
|
||||
description: "공정별 체크리스트/검사/실적 상세 작업 화면",
|
||||
category: "display",
|
||||
icon: "ClipboardCheck",
|
||||
component: PopWorkDetailComponent,
|
||||
configPanel: PopWorkDetailConfigPanel,
|
||||
preview: PopWorkDetailPreviewComponent,
|
||||
defaultProps: defaultConfig,
|
||||
connectionMeta: {
|
||||
sendable: [
|
||||
{
|
||||
key: "process_completed",
|
||||
label: "공정 완료",
|
||||
type: "event",
|
||||
category: "event",
|
||||
description: "공정 작업 전체 완료 이벤트",
|
||||
},
|
||||
],
|
||||
receivable: [],
|
||||
},
|
||||
touchOptimized: true,
|
||||
supportedDevices: ["mobile", "tablet"],
|
||||
});
|
||||
|
|
@ -851,7 +851,8 @@ export interface CardCellDefinitionV2 {
|
|||
export interface ActionButtonUpdate {
|
||||
column: string;
|
||||
value?: string;
|
||||
valueType: "static" | "currentUser" | "currentTime" | "columnRef";
|
||||
valueType: "static" | "currentUser" | "currentTime" | "columnRef" | "userInput";
|
||||
operationType?: "assign" | "add" | "subtract";
|
||||
}
|
||||
|
||||
// 액션 버튼 클릭 시 동작 모드
|
||||
|
|
@ -881,34 +882,49 @@ export interface SelectModeConfig {
|
|||
export interface SelectModeButtonConfig {
|
||||
label: string;
|
||||
variant: ButtonVariant;
|
||||
clickMode: "status-change" | "modal-open" | "cancel-select";
|
||||
clickMode: "status-change" | "modal-open" | "cancel-select" | "quantity-input";
|
||||
targetTable?: string;
|
||||
updates?: ActionButtonUpdate[];
|
||||
confirmMessage?: string;
|
||||
modalScreenId?: string;
|
||||
quantityInput?: QuantityInputConfig;
|
||||
}
|
||||
|
||||
// ===== 버튼 중심 구조 (신규) =====
|
||||
|
||||
export interface ActionButtonShowCondition {
|
||||
type: "timeline-status" | "column-value" | "always";
|
||||
type: "timeline-status" | "column-value" | "always" | "owner-match";
|
||||
value?: string;
|
||||
column?: string;
|
||||
unmatchBehavior?: "hidden" | "disabled";
|
||||
}
|
||||
|
||||
export interface ActionButtonClickAction {
|
||||
type: "immediate" | "select-mode" | "modal-open";
|
||||
type: "immediate" | "select-mode" | "modal-open" | "quantity-input";
|
||||
targetTable?: string;
|
||||
updates?: ActionButtonUpdate[];
|
||||
confirmMessage?: string;
|
||||
selectModeButtons?: SelectModeButtonConfig[];
|
||||
modalScreenId?: string;
|
||||
// 외부 테이블 조인 설정 (DB 직접 선택 시)
|
||||
joinConfig?: {
|
||||
sourceColumn: string; // 메인 테이블의 FK 컬럼
|
||||
targetColumn: string; // 외부 테이블의 매칭 컬럼
|
||||
sourceColumn: string;
|
||||
targetColumn: string;
|
||||
};
|
||||
quantityInput?: QuantityInputConfig;
|
||||
preCondition?: ActionPreCondition;
|
||||
}
|
||||
|
||||
export interface QuantityInputConfig {
|
||||
maxColumn?: string;
|
||||
currentColumn?: string;
|
||||
unit?: string;
|
||||
enablePackage?: boolean;
|
||||
}
|
||||
|
||||
export interface ActionPreCondition {
|
||||
column: string;
|
||||
expectedValue: string;
|
||||
failMessage?: string;
|
||||
}
|
||||
|
||||
export interface ActionButtonDef {
|
||||
|
|
@ -976,6 +992,7 @@ export interface PopCardListV2Config {
|
|||
cartAction?: CardCartActionConfig;
|
||||
cartListMode?: CartListModeConfig;
|
||||
saveMapping?: CardListSaveMapping;
|
||||
ownerSortColumn?: string;
|
||||
}
|
||||
|
||||
/** 카드 컴포넌트가 하위 필터 적용 시 주입하는 가상 컬럼 키 */
|
||||
|
|
@ -983,3 +1000,14 @@ export const VIRTUAL_SUB_STATUS = "__subStatus__" as const;
|
|||
export const VIRTUAL_SUB_SEMANTIC = "__subSemantic__" as const;
|
||||
export const VIRTUAL_SUB_PROCESS = "__subProcessName__" as const;
|
||||
export const VIRTUAL_SUB_SEQ = "__subSeqNo__" as const;
|
||||
|
||||
|
||||
// =============================================
|
||||
// pop-work-detail 전용 타입
|
||||
// =============================================
|
||||
|
||||
export interface PopWorkDetailConfig {
|
||||
showTimer: boolean;
|
||||
showQuantityInput: boolean;
|
||||
phaseLabels: Record<string, string>;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue