체크박스 컴포넌트 추가

This commit is contained in:
dohyeons
2025-12-19 18:06:25 +09:00
parent ea01309158
commit 8d34b73a45
7 changed files with 365 additions and 3 deletions

View File

@@ -1364,6 +1364,45 @@ export class ReportController {
}
}
// Checkbox 컴포넌트
else if (component.type === "checkbox") {
// 체크 상태 결정 (쿼리 바인딩 또는 고정값)
let isChecked = component.checkboxChecked === true;
if (component.checkboxFieldName && component.queryId && queryResultsMapRef[component.queryId]) {
const qResult = queryResultsMapRef[component.queryId];
if (qResult.rows && qResult.rows.length > 0) {
const row = qResult.rows[0];
const val = row[component.checkboxFieldName];
// truthy/falsy 값 판정
if (val === true || val === "true" || val === "Y" || val === 1 || val === "1") {
isChecked = true;
} else {
isChecked = false;
}
}
}
const checkboxSymbol = isChecked ? "☑" : "☐";
const checkboxLabel = component.checkboxLabel || "";
const labelPosition = component.checkboxLabelPosition || "right";
const displayText = labelPosition === "left"
? `${checkboxLabel} ${checkboxSymbol}`
: `${checkboxSymbol} ${checkboxLabel}`;
result.push(
new ParagraphRef({
children: [
new TextRunRef({
text: displayText.trim(),
size: pxToHalfPtFn(component.fontSize || 14),
font: "맑은 고딕",
color: (component.fontColor || "#374151").replace("#", ""),
}),
],
})
);
}
// Divider - 테이블 셀로 감싸서 정확한 너비 적용
else if (
component.type === "divider" &&
@@ -2809,6 +2848,58 @@ export class ReportController {
lastBottomY = adjustedY + component.height;
}
// Checkbox 컴포넌트
else if (component.type === "checkbox") {
// 체크 상태 결정 (쿼리 바인딩 또는 고정값)
let isChecked = component.checkboxChecked === true;
if (component.checkboxFieldName && component.queryId && queryResultsMap[component.queryId]) {
const qResult = queryResultsMap[component.queryId];
if (qResult.rows && qResult.rows.length > 0) {
const row = qResult.rows[0];
const val = row[component.checkboxFieldName];
// truthy/falsy 값 판정
if (val === true || val === "true" || val === "Y" || val === 1 || val === "1") {
isChecked = true;
} else {
isChecked = false;
}
}
}
const checkboxSymbol = isChecked ? "☑" : "☐";
const checkboxLabel = component.checkboxLabel || "";
const labelPosition = component.checkboxLabelPosition || "right";
const displayText = labelPosition === "left"
? `${checkboxLabel} ${checkboxSymbol}`
: `${checkboxSymbol} ${checkboxLabel}`;
// spacing을 위한 빈 paragraph
if (spacingBefore > 0) {
children.push(
new Paragraph({
spacing: { before: spacingBefore, after: 0 },
children: [],
})
);
}
children.push(
new Paragraph({
indent: { left: indentLeft },
children: [
new TextRun({
text: displayText.trim(),
size: pxToHalfPt(component.fontSize || 14),
font: "맑은 고딕",
color: (component.fontColor || "#374151").replace("#", ""),
}),
],
})
);
lastBottomY = adjustedY + component.height;
}
// Table 컴포넌트
else if (component.type === "table" && component.queryId) {
const queryResult = queryResultsMap[component.queryId];

View File

@@ -260,4 +260,12 @@ export interface ComponentConfig {
barcodeBackground?: string;
barcodeMargin?: number;
qrErrorCorrectionLevel?: "L" | "M" | "Q" | "H";
// 체크박스 컴포넌트 전용
checkboxChecked?: boolean; // 체크 상태 (고정값)
checkboxFieldName?: string; // 쿼리 필드 바인딩 (truthy/falsy 값)
checkboxLabel?: string; // 체크박스 옆 레이블 텍스트
checkboxSize?: number; // 체크박스 크기 (px)
checkboxColor?: string; // 체크 색상
checkboxBorderColor?: string; // 테두리 색상
checkboxLabelPosition?: "left" | "right"; // 레이블 위치
}