84 lines
2.8 KiB
TypeScript
84 lines
2.8 KiB
TypeScript
import { Button, Input } from "@common/components";
|
|
|
|
import type { VerifyDetailResponseDto } from "@/entities/statistics/model/general-verification-interface";
|
|
|
|
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;
|
|
}
|
|
|
|
const zoneClassName: Record<ClauseZone, string> = {
|
|
"": "bg-[#f9fafb]",
|
|
"zone-condition": "bg-[#eef4ff]",
|
|
"zone-result": "bg-[#fff4ea]",
|
|
};
|
|
|
|
const FormulaComponents = ({
|
|
data,
|
|
index,
|
|
zone = "",
|
|
groupBy = false,
|
|
onGroupByChange,
|
|
onDelete,
|
|
onOperatorChange,
|
|
handleFomulaDialog,
|
|
}: FormulaComponentsProps) => {
|
|
const cmprOpert = data?.cmprOpert;
|
|
|
|
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"
|
|
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={data ? data.kornArtopnEqtnCn : ""}
|
|
title={data ? data.kornArtopnEqtnCn : ""}
|
|
onClick={() => handleFomulaDialog?.(true, data, index)}
|
|
readOnly
|
|
/>
|
|
<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}
|
|
/>
|
|
</div>
|
|
<label className="flex w-[96px] shrink-0 items-center justify-end gap-1.5 text-[#4b5563] cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
className="cursor-pointer accent-[#3a6df0]"
|
|
checked={groupBy}
|
|
onChange={(e) => onGroupByChange?.(e.target.checked)}
|
|
/>
|
|
group by
|
|
</label>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default FormulaComponents;
|