All files / src/components/AddCondition Condition.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import CustomInput from "../Inputs/CustomInput";
import { ConditionRule, InputTypes, Task } from "../../types";
import handleTaskTypeLabels from "../../utils/conditionals/handleTaskTypeLabels";
import HandleResultTypeForm from "./HandleResultTypeForm";
import {
  ResultTypeType,
  ResultTypeTypes,
} from "../../utils/conditionals/resultTypeOptions";
import useIsPrefetched from "../../hooks/playbooks/useIsPrefetched";
import { useSelector } from "react-redux";
import { currentPlaybookSelector } from "../../store/features/playbook/selectors";
import useEdgeConditions from "../../hooks/playbooks/useEdgeConditions";
import { additionalStateSelector } from "../../store/features/drawers/selectors";
import DeleteRuleButton from "../common/Conditions/DeleteRuleButton";
import { RuleType } from "../common/Conditions/types";
 
type ConditionProps = {
  i: number;
  condition: ConditionRule;
  taskTypeOptions: Task[];
  showDelete?: boolean;
};
 
function Condition({
  i,
  condition,
  taskTypeOptions,
  showDelete = true,
}: ConditionProps) {
  const { id } = useSelector(additionalStateSelector);
  const isPrefetched = useIsPrefetched();
  const currentPlaybook = useSelector(currentPlaybookSelector);
  const tasks = currentPlaybook?.ui_requirement.tasks ?? [];
  const { handleRule } = useEdgeConditions(id);
 
  const handleTaskChange = (id: string, i: number) => {
    const task = tasks?.find((task) => task.id === id);
    Iif (!task) return;
    handleRule("task.id", id, i, RuleType.RULE);
    handleRule("task.reference_id", task?.reference_id ?? "", i, RuleType.RULE);
    handleRule(
      "type",
      (task?.ui_requirement.resultType ??
        ResultTypeTypes.OTHERS) as ResultTypeType,
      i,
      RuleType.RULE,
    );
  };
 
  return (
    <div key={i} className="mt-2 border p-1 rounded-md flex flex-col gap-2">
      <p className="text-xs text-violet-500 font-semibold">Condition-{i + 1}</p>
      <div className="flex flex-col gap-2 flex-wrap">
        <div className="flex items-center gap-1">
          <CustomInput
            inputType={InputTypes.DROPDOWN}
            error={undefined}
            options={taskTypeOptions?.map((task) => ({
              id: task?.id,
              label: handleTaskTypeLabels(task).label,
            }))}
            value={condition?.task?.id ?? ""}
            placeholder={`Select Task`}
            handleChange={(id: string) => handleTaskChange(id, i)}
            disabled={!!isPrefetched}
          />
        </div>
        <div className="flex flex-wrap gap-2">
          <HandleResultTypeForm
            resultType={
              (tasks?.find((task) => task.id === condition?.task?.id)
                ?.ui_requirement.resultType ??
                ResultTypeTypes.OTHERS) as ResultTypeType
            }
            condition={condition}
            conditionIndex={i}
          />
        </div>
 
        {showDelete && (
          <DeleteRuleButton ruleType={RuleType.RULE} ruleIndex={i} />
        )}
      </div>
    </div>
  );
}
 
export default Condition;