marco.pms.web/src/components/master/CreateActivity.jsx

import React, { useState, useEffect,useCallback } from "react";
import { useFieldArray, useForm } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";

import { MasterRespository } from "../../repositories/MastersRepository";
import { clearApiCacheKey } from "../../slices/apiCacheSlice";
import { getCachedData, cacheData } from "../../slices/apiDataManager";
import showToast from "../../services/toastService";
import {useCreateActivity} from "../../hooks/masterHook/useMaster";

const schema = z.object({
  activityName: z.string().min(1, { message: "Activity Name is required" }),
  unitOfMeasurement: z.string().min(1, { message: "Unit of Measurement is required" }),
  checkList: z
    .array(
      z.object({
        description: z.string().min(1, { message: "descriptionlist item cannot be empty" }),
        isMandatory: z.boolean().default(false),
        id: z.any().default(null),
      })
    )
    .optional(),
});

const CreateActivity = ({ onClose }) => {
const maxDescriptionLength = 255;
const { mutate: createActivity, isPending: isLoading } = useCreateActivity(() => onClose?.());

const {
  register,
  handleSubmit,
  control,
  setValue,
  clearErrors,
  setError,
  getValues,
  reset,
  formState: { errors },
} = useForm({
  resolver: zodResolver(schema),
  defaultValues: {
    activityName: "",
    unitOfMeasurement: "",
    checkList: [],
  },
});

const {
  fields: checkListItems,
  append,
  remove,
} = useFieldArray({
  control,
  name: "checkList",
});

const addChecklistItem = useCallback(() => {
  const values = getValues("checkList");
  const lastIndex = checkListItems.length - 1;

  if (
    checkListItems.length > 0 &&
    (!values?.[lastIndex] || values[lastIndex].description.trim() === "")
  ) {
    setError(`checkList.${lastIndex}.description`, {
      type: "manual",
      message: "Please fill this checklist item before adding another.",
    });
    return;
  }

  clearErrors(`checkList.${lastIndex}.description`);
  append({ id: null, description: "", isMandatory: false });
}, [checkListItems, getValues, append, setError, clearErrors]);

const removeChecklistItem = useCallback((index) => {
  remove(index);
}, [remove]);

const handleChecklistChange = useCallback((index, value) => {
  setValue(`checkList.${index}`, value);
}, [setValue]);

const onSubmit = (formData) => {
  createActivity(formData);
};
  // const onSubmit = (data) => {
  //   setIsLoading(true);

  //   MasterRespository.createActivity(data)
  //     .then( ( resp ) =>
  //     {
        
  //       const cachedData = getCachedData("Activity");
  //       const updatedData = [ ...cachedData, resp?.data ];
  //       cacheData("Activity", updatedData);
  //       showToast("Activity Successfully Added.", "success");
  //       setIsLoading(false);
  //       handleClose()
  //     })
  //     .catch((error) => {
  //       showToast(error.message, "error");
  //       setIsLoading(false);
  //     });
  // };
const handleClose = useCallback(() => {
  reset();
  onClose();
}, [reset, onClose]);

useEffect(() => {
  const tooltipTriggerList = Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
  tooltipTriggerList.forEach((el) => new bootstrap.Tooltip(el));
}, []);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* <h6>Create Activity</h6> */}
      <div className="row">
        <div className="col-6">
          <label className="form-label">Activity</label>
          <input
            type="text"
            {...register("activityName")}
            className={`form-control form-control-sm ${
              errors.activityName ? "is-invalid" : ""
            }`}
          />
          {errors.activityName && (
            <p className="danger-text">{errors.activityName.message}</p>
          )}
        </div>

        <div className="col-6">
          <label className="form-label">Measurement</label>
          <input
            type="text"
            {...register("unitOfMeasurement")}
            className={`form-control form-control-sm ${
              errors.unitOfMeasurement ? "is-invalid" : ""
            }`}
          />
          {errors.unitOfMeasurement && (
            <p className="danger-text">{errors.unitOfMeasurement.message}</p>
          )}
        </div>

        <div className="col-md-12 text-start mt-1">
          <p className="py-1 my-0">{checkListItems.length > 0 ? "Check List" : "Add Check List" }</p>
          {checkListItems.length > 0 && (
          <table className="table mt-1  border-0">
            <thead className="py-0 my-0 table-border-top-0">
              <tr className="py-1">
                <th colSpan={2} className="py-1">
                  <small>Name</small>
                </th>
                <th colSpan={2} className="py-1 text-center">
                  <small>Is Mandatory</small>
                </th>
                <th className="text-center py-1">Action</th>
              </tr>
            </thead>
            <tbody className="table-border-bottom-0 ">
              {checkListItems.map((item, index) => (
                <tr key={index} className="border-top-0">
                  <td colSpan={2} className="border-top-0 border-0">
                    <input
                      className="d-none"
                      {...register(`checkList.${index}.id`)}
                    ></input>
                    <input
                      {...register(`checkList.${index}.description`)}
                      className="form-control form-control-sm"
                      placeholder={`Checklist item ${index + 1}`}
                      onChange={(e) =>
                        handleChecklistChange(index, e.target.value)
                      }
                    />
                    {errors.checkList?.[index]?.description && (
                      <small
                        style={{ fontSize: "10px" }}
                        className="danger-text"
                      >
                        {errors.checkList[index]?.description?.message}
                      </small>
                    )}
                  </td>
                  <td colSpan={2} className="text-center border-0">
                    <input
                      className="form-check-input"
                      type="checkbox"
                      {...register(`checkList.${index}.isMandatory`)}
                      defaultChecked={item.isMandatory}
                    />
                  </td>
                  <td className="text-center border-0">
                    <button
                      type="button"
                      onClick={() => removeChecklistItem(index)}
                      className="btn btn-xs btn-icon btn-text-secondary"
                    >
                      <i className="bx bxs-minus-circle text-danger"  data-bs-toggle="tooltip"
                title="Remove Check"
                data-bs-original-title="Remove check"></i>
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
          )}
          <button
            type="button"
            className="btn btn-xs btn-primary mt-2"
            onClick={addChecklistItem}
          >
            <i className="bx bx-plus-circle" data-bs-toggle="tooltip"
                title="Add Check"
                data-bs-original-title="Add check" ></i>
          </button>
        </div>

        <div className="col-12 text-center mt-3">
          <button type="submit" className="btn btn-sm btn-primary me-3">
            {isLoading ? "Please Wait" : "Submit"}
          </button>
          <button
            type="reset"
            className="btn btn-sm btn-label-secondary"
            onClick={handleClose}
          >
            Cancel
          </button>
        </div>
      </div>
    </form>
  );
};

export default CreateActivity;