88 lines
2.5 KiB
TypeScript
88 lines
2.5 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { PopComponentRegistry } from "../../PopComponentRegistry";
|
||
|
|
import { PopStatusBarComponent } from "./PopStatusBarComponent";
|
||
|
|
import { PopStatusBarConfigPanel } from "./PopStatusBarConfig";
|
||
|
|
import type { StatusBarConfig } from "./types";
|
||
|
|
import { DEFAULT_STATUS_BAR_CONFIG } from "./types";
|
||
|
|
|
||
|
|
function PopStatusBarPreviewComponent({
|
||
|
|
config,
|
||
|
|
label,
|
||
|
|
}: {
|
||
|
|
config?: StatusBarConfig;
|
||
|
|
label?: string;
|
||
|
|
}) {
|
||
|
|
const cfg = config || DEFAULT_STATUS_BAR_CONFIG;
|
||
|
|
const options = cfg.options || [];
|
||
|
|
const displayLabel = label || "상태 바";
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex h-full w-full flex-col items-center justify-center gap-1 p-2">
|
||
|
|
<span className="text-[10px] font-medium text-muted-foreground">
|
||
|
|
{displayLabel}
|
||
|
|
</span>
|
||
|
|
<div className="flex items-center gap-1">
|
||
|
|
{options.length === 0 ? (
|
||
|
|
<span className="text-[9px] text-muted-foreground">
|
||
|
|
옵션 없음
|
||
|
|
</span>
|
||
|
|
) : (
|
||
|
|
options.slice(0, 4).map((opt) => (
|
||
|
|
<div
|
||
|
|
key={opt.value}
|
||
|
|
className="flex flex-col items-center rounded bg-muted/60 px-2 py-0.5"
|
||
|
|
>
|
||
|
|
<span className="text-[10px] font-bold leading-tight">0</span>
|
||
|
|
<span className="text-[8px] leading-tight text-muted-foreground">
|
||
|
|
{opt.label}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
))
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
PopComponentRegistry.registerComponent({
|
||
|
|
id: "pop-status-bar",
|
||
|
|
name: "상태 바",
|
||
|
|
description: "상태별 건수 대시보드 + 필터",
|
||
|
|
category: "display",
|
||
|
|
icon: "BarChart3",
|
||
|
|
component: PopStatusBarComponent,
|
||
|
|
configPanel: PopStatusBarConfigPanel,
|
||
|
|
preview: PopStatusBarPreviewComponent,
|
||
|
|
defaultProps: DEFAULT_STATUS_BAR_CONFIG,
|
||
|
|
connectionMeta: {
|
||
|
|
sendable: [
|
||
|
|
{
|
||
|
|
key: "filter_value",
|
||
|
|
label: "필터 값",
|
||
|
|
type: "filter_value",
|
||
|
|
category: "filter",
|
||
|
|
description: "선택한 상태 칩 값을 카드에 필터로 전달",
|
||
|
|
},
|
||
|
|
],
|
||
|
|
receivable: [
|
||
|
|
{
|
||
|
|
key: "all_rows",
|
||
|
|
label: "전체 데이터",
|
||
|
|
type: "all_rows",
|
||
|
|
category: "data",
|
||
|
|
description: "연결된 카드의 전체 데이터를 받아 상태별 건수 집계",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: "set_value",
|
||
|
|
label: "값 설정",
|
||
|
|
type: "filter_value",
|
||
|
|
category: "filter",
|
||
|
|
description: "외부에서 선택 값 설정",
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
touchOptimized: true,
|
||
|
|
supportedDevices: ["mobile", "tablet"],
|
||
|
|
});
|