marco.pms.web/src/components/Activities/SubTask.jsx

import React, { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { string, z } from "zod";
import {
  useActivitiesMaster,
  useWorkCategoriesMaster,
} from "../../hooks/masterHook/useMaster";
import showToast from "../../services/toastService";
import ProjectRepository from "../../repositories/ProjectRepository";
import { useTaskById } from "../../hooks/useTasks";
import {useManageTask} from "../../hooks/useProjects";

const subTaskSchema = z.object({
  activityId: z.string().min(1, "Activity is required"),
  workCategoryId: z.string().min(1, "Category is required"),
  plannedWork: z.number().min(1, "Planned work is required"),
  completedWork: z.number().min(0, "Completed work cannot be negative"),
  comment: z.string().min(1, "Comment is required"),
});

const SubTask = ({ activity, onClose }) => {
  const [selectedCategory, setSelectedCategory] = useState(null);
  const [categoryData, setCategoryData] = useState([]);
  const { activities, loading } = useActivitiesMaster();
  const { categories, categoryLoading } = useWorkCategoriesMaster();
  const { Task, loading: TaskLoading } = useTaskById(activity?.id);
  const {
    register,
    handleSubmit,
    formState: { errors },
    reset,
    setValue,
    watch,
  } = useForm({
    resolver: zodResolver(subTaskSchema),
  });
  const selectedActivityId = watch("activityId");
  const selectedActivity = activities?.find((a) => a.id === selectedActivityId);
  const {mutate:createSubTask,isPending } = useManageTask( {
    onSuccessCallback: () =>
    {
      showToast("Sub Task Created Successfully","success")
      reset();
      onClose();
    }
  } )

  useEffect(() => {
    setCategoryData(categories);
  }, [categories]);

  useEffect(() => {
    if (!TaskLoading && (Task?.workItem || activity)) {
      reset({
        workCategoryId: Task?.workItem?.workCategoryId || "",
        activityId:
          Task?.workItem?.activityId || activity?.workItem?.activityId,
        plannedWork: Number(
          Task?.notApprovedTask || Task?.workItem?.plannedWork || 0
        ),
        completedWork: 0,
        comment: "",
      });
    }
  }, [TaskLoading, Task, activity, reset, loading]);

  const handleCategoryChange = (e) => {
    const value = e.target.value;
    const category = categoryData.find((b) => b.id === String(value));
    setSelectedCategory(category);
    setValue("workCategoryId", value);
  };

  const onSubmitForm = async (formData) => {
    let payload = {
      workAreaID: Task.workItem.workAreaId,
      workCategoryId: formData.workCategoryId,
      activityID: formData.activityId,
      plannedWork: formData.plannedWork,
      completedWork: formData.completedWork,
      parentTaskId: activity?.id,
      comment: formData.comment,
    };
  
    createSubTask([payload])
  };
  return (
    <div className="container-xxl my-1">
      <p className="fw-semibold">Create Sub Task</p>
      <form className="row g-2" onSubmit={handleSubmit(onSubmitForm)}>
        <div className="col-6">
          <label className="form-label">Building</label>
          <input
            type="text"
            className="form-control form-control-sm"
            value={activity?.workItem?.workArea?.floor?.building?.name || ""}
            disabled
          />
        </div>

        <div className="col-6">
          <label className="form-label">Floor</label>
          <input
            type="text"
            className="form-control form-control-sm"
            value={activity?.workItem?.workArea?.floor?.floorName || ""}
            disabled
          />
        </div>

        <div className="col-12">
          <label className="form-label">Work Area</label>
          <input
            type="text"
            className="form-control form-control-sm"
            value={activity?.workItem?.workArea?.areaName || ""}
            disabled
          />
        </div>

        <div className="col-12">
          <label className="form-label">Work Category</label>
          <select
            className="form-select form-select-sm"
            {...register("workCategoryId")}
            onChange={handleCategoryChange}
          >
            <option value="">
              {categoryLoading ? "Loading..." : "-- Select Category --"}
            </option>
            {categoryData.map((category) => (
              <option key={category.id} value={category.id}>
                {category.name}
              </option>
            ))}
          </select>
          {errors.workCategoryId && (
            <div className="danger-text">{errors.workCategoryId.message}</div>
          )}
        </div>
        <div className="col-12">
          <label className="form-label">Select Activity</label>
          <select
            className="form-select form-select-sm"
            {...register("activityId")}
            disabled
          >
            <option value="">
      {loading ? "Loading..." : "-- Select Activity --"}
    </option>

    {!loading &&
      activities?.map((activity) => (
        <option key={activity.id} value={activity.id}>
          {activity.activityName}
        </option>
      ))}
          </select>
          {errors.activityId && (
            <div className="danger-text">{errors.activityId.message}</div>
          )}
        </div>

        <div className="col-4">
          <label className="form-label">Planned Work</label>
          <input
            type="number"
            className="form-control form-control-sm"
            {...register("plannedWork", { valueAsNumber: true })}
          />
          {errors.plannedWork && (
            <div className="danger-text">{errors.plannedWork.message}</div>
          )}
        </div>

        <div className="col-4">
          <label className="form-label">Completed Work</label>
          <input
            type="number"
            className="form-control form-control-sm"
            {...register("completedWork")}
            disabled
          />
          {errors.completedWork && (
            <div className="danger-text">{errors.completedWork.message}</div>
          )}
        </div>

        <div className="col-4">
          <label className="form-label">Unit</label>
          <input
            type="text"
            className="form-control form-control-sm"
            value={selectedActivity?.unitOfMeasurement || ""}
            disabled
          />
        </div>

        <div className="col-12">
          <label className="form-label">Comment</label>
          <textarea
            className="form-control"
            rows="2"
            {...register("comment")}
          />
          {errors.comment && (
            <div className="danger-text">{errors.comment.message}</div>
          )}
        </div>

        <div className="col-12 text-center">
          <button
            type="submit"
            className="btn btn-sm btn-primary me-2"
            disabled={isPending}
          >
            {isPending ? "Please wait..." : "Submit"}
          </button>
          <button
            type="button"
            className="btn btn-sm btn-secondary"
            onClick={() => onClose()}
            disabled={isPending}
          >
            Cancel
          </button>
        </div>
      </form>
    </div>
  );
};

export default SubTask;