All files / src/components/Playbooks/create TaskDetailsDrawer.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { CircularProgress } from "@mui/material";
import { updateCardById } from "../../../utils/execution/updateCardById.ts";
import { useEffect, useRef } from "react";
import Task from "../task/Task.tsx";
import useIsPrefetched from "../../../hooks/playbooks/useIsPrefetched.ts";
import CustomInput from "../../Inputs/CustomInput.tsx";
import { InputTypes } from "../../../types/inputs/inputTypes.ts";
import useCurrentTask from "../../../hooks/playbooks/task/useCurrentTask.ts";
 
function TaskDetailsDrawer() {
  const [task, currentTaskId] = useCurrentTask();
  const taskRef = useRef<HTMLDivElement>(null);
  const isPrefetched = useIsPrefetched();
 
  const handleUpdateStepName = (val: string) => {
    updateCardById("description", val, currentTaskId);
    Iif (val.trim())
      updateCardById("userEnteredDescription", true, currentTaskId);
  };
 
  useEffect(() => {
    taskRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
  }, [taskRef, currentTaskId]);
 
  Iif (Object.keys(task ?? {}).length === 0) return <>No Task Found</>;
 
  return (
    <div ref={taskRef} className="p-2 min-h-screen mb-16 w-full">
      <h2 className="font-bold mb-2 flex items-center gap-2 justify-between mr-2">
        Title{" "}
        {task?.ui_requirement?.outputLoading && <CircularProgress size={20} />}
      </h2>
 
      <CustomInput
        inputType={InputTypes.TEXT}
        value={task?.description ?? ""}
        handleChange={handleUpdateStepName}
        disabled={!!isPrefetched}
        className="!w-full"
        containerClassName="w-full"
        placeholder="Enter task name"
      />
      {currentTaskId && <Task id={currentTaskId} />}
    </div>
  );
}
 
export default TaskDetailsDrawer;