107 lines
3.5 KiB
TypeScript
107 lines
3.5 KiB
TypeScript
import type { VerifyDetailResponseDto } from "@/entities/statistics/model/general-verification-interface";
|
|
import { Button, Input } from "@common/components";
|
|
|
|
import OperatorsComponents from "./OperatorsComponents";
|
|
|
|
type ClauseZone = "" | "zone-condition" | "zone-result";
|
|
|
|
interface FormulaComponentsProps {
|
|
data?: VerifyDetailResponseDto | null;
|
|
index?: number;
|
|
zone?: ClauseZone;
|
|
groupBy?: boolean;
|
|
onGroupByChange?: (checked: boolean) => void;
|
|
onDelete?: () => void;
|
|
onOperatorChange?: (value: string) => void;
|
|
handleFomulaDialog?: (
|
|
show: boolean,
|
|
data?: VerifyDetailResponseDto | null,
|
|
index?: number,
|
|
) => void;
|
|
vrfcClsfCd?: string;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
const zoneClassName: Record<ClauseZone, string> = {
|
|
"": "bg-[#f9fafb]",
|
|
"zone-condition": "bg-[#eef4ff]",
|
|
"zone-result": "bg-[#fff4ea]",
|
|
};
|
|
|
|
/** 저장용 백틱 래핑은 숨기고 사용자에게만 표시 */
|
|
const stripBacktickWrap = (value: string) => {
|
|
if (value.length >= 2 && value.startsWith("`") && value.endsWith("`")) {
|
|
return value.slice(1, -1);
|
|
}
|
|
return value;
|
|
};
|
|
|
|
const FormulaComponents = ({
|
|
data,
|
|
index,
|
|
zone = "",
|
|
groupBy = false,
|
|
onGroupByChange,
|
|
onDelete,
|
|
onOperatorChange,
|
|
handleFomulaDialog,
|
|
vrfcClsfCd,
|
|
disabled = false,
|
|
}: FormulaComponentsProps) => {
|
|
const cmprOpert = data?.cmprOpert;
|
|
const displayFormula = data
|
|
? stripBacktickWrap(data.kornArtopnEqtnCn ?? "")
|
|
: "";
|
|
|
|
return (
|
|
<div
|
|
className={`mb-1.5 flex items-center gap-2.5 rounded-md px-2.5 py-2 ${zoneClassName[zone]}`}
|
|
>
|
|
<Button
|
|
type="button"
|
|
size="icon"
|
|
className="formulaDeleteBtn size-[2.6rem] shrink-0 rounded-full !bg-[#f24e5b] hover:!bg-[#d63c48]"
|
|
color="red"
|
|
disabled={disabled}
|
|
onClick={onDelete}
|
|
>
|
|
<i className="ri-subtract-fill text-[16px]" />
|
|
</Button>
|
|
<Input
|
|
className="h-[3.6rem] flex-1 !cursor-pointer rounded-md border-[#d8dce3] text-[13px]"
|
|
placeholder="클릭하여 수식을 등록해주세요."
|
|
id={`formulaInput-${index ?? 0}`}
|
|
value={displayFormula}
|
|
title={displayFormula}
|
|
onClick={() => {
|
|
if (disabled) return;
|
|
handleFomulaDialog?.(true, data, index);
|
|
}}
|
|
readOnly
|
|
disabled={disabled}
|
|
/>
|
|
<div className="w-[200px] shrink-0 [&_button]:!h-[3.6rem] [&_button]:!w-[200px] [&_button]:min-w-[200px] [&_button]:max-w-[200px]">
|
|
<OperatorsComponents
|
|
cmprOpert={cmprOpert}
|
|
onValueChange={onOperatorChange}
|
|
disabled={disabled}
|
|
/>
|
|
</div>
|
|
{vrfcClsfCd !== "TOTAL" &&
|
|
<label className={`flex w-[96px] shrink-0 items-center justify-end gap-1.5 text-[#4b5563] ${disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"}`}>
|
|
<input
|
|
type="checkbox"
|
|
className="cursor-pointer accent-[#3a6df0]"
|
|
checked={groupBy}
|
|
disabled={disabled}
|
|
onChange={(e) => onGroupByChange?.(e.target.checked)}
|
|
/>
|
|
group by
|
|
</label>
|
|
}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default FormulaComponents;
|