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

import React, { useState, useEffect } 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";

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" }),
  serviceId: z.string().min(1, { message: "A service selection is required." }),
  actitvityGroupId: z
    .string()
    .min(1, { message: "A activity group selection is required." }),
  checkList: z
    .array(
      z.object({
        description: z
          .string()
          .min(1, { message: "description list item cannot be empty" }),
        isMandatory: z.boolean().default(false),
        id: z.any().default(null),
      })
    )
    .optional(),
});

const CreateActivity = ({ onClose }) => {
  const [isLoading, setIsLoading] = useState(false);
  const [services, setServices] = useState(getCachedData("Services"));
  const [selectedService, setSelectedService] = useState(null);
  const [activityGroups, setActivityGroups] = useState(
    getCachedData("Activity Group")
  );
  const [activityGroupList, setActivityGroupList] = useState(null);

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

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

  // Form submission handler
  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);
        reset({
          activityName: "",
          unitOfMeasurement: "",
          checkList: [],
          serviceId: "",
          actitvityGroupId: "",
        });
        setSelectedService(null)
        // handleClose();
      })
      .catch((error) => {
        showToast(error.message, "error");
        setIsLoading(false);
      });
  };

  const addChecklistItem = () => {
    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,
    });
  };

  const handleServicesChange = (e) => {
    const { value } = e.target;
    const service = services.find((b) => b.id === String(value));
    const selectedActivityGroups = activityGroups.filter(
      (ag) => ag.serviceId == service.id
    );
    setSelectedService(service.id);
    setActivityGroupList(selectedActivityGroups);
    reset((prev) => ({
      ...prev,
      serviceId: String(value),
    }));
  };

  const handleActivityGroupsChange = (e) => {
    const { value } = e.target;
    const service = services.find((b) => b.id === String(value));
    reset((prev) => ({
      ...prev,
      actitvityGroupId: String(value),
    }));
  };

  const removeChecklistItem = (index) => {
    remove(index);
  };

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

  const handleClose = () => {
    reset();
    onClose();
  };

  // for tooltip
  useEffect(() => {
    if (!services) {
      MasterRespository.getServices().then((res) => {
        setServices(res?.data);
        cacheData("Services", res?.data);
      });
    }
    if (!activityGroups) {
      MasterRespository.getActivityGroups().then((res) => {
        setActivityGroups(res?.data);
        cacheData("Activity Group", res?.data);
      });
    }
    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">
        {/* Services */}
        <div className="col-12 col-md-12">
          <label className="form-label" htmlFor="serviceId">
            Select Service
          </label>
          <select
            id="serviceId"
            className="form-select form-select-sm"
            {...register("serviceId")}
            onChange={handleServicesChange}
          >
            <option value="" disabled>
              Select Service
            </option>
            {services
              ?.filter((service) => service?.name)
              ?.sort((a, b) => a.name?.localeCompare(b.name))
              ?.map((service) => (
                <option key={service.id} value={service.id}>
                  {service.name}
                </option>
              ))}

            {services?.filter((service) => service?.name).length === 0 && (
              <option disabled>No service found</option>
            )}
          </select>
          {errors.serviceId && (
            <p className="danger-text">{errors.serviceId.message}</p>
          )}
        </div>

        {selectedService && (
          <>
            {/* Actitvity Name */}
            <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>
            {/* Unit of Mesurement */}
            <div className="col-6">
              <label className="form-label">Unit of 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>

            {/* Actitvity Group */}
            <div className="col-12 col-md-12">
              <label className="form-label" htmlFor="actitvityGroupId">
                Select Activity Group
              </label>
              <select
                id="actitvityGroupId"
                className="form-select form-select-sm"
                {...register("actitvityGroupId")}
                onChange={handleActivityGroupsChange}
              >
                <option value="" disabled>
                  Select Activty Group
                </option>
                {activityGroupList
                  ?.filter((activityGroup) => activityGroup?.name)
                  ?.sort((a, b) => a.name?.localeCompare(b.name))
                  ?.map((activityGroup) => (
                    <option key={activityGroup.id} value={activityGroup.id}>
                      {activityGroup.name}
                    </option>
                  ))}

                {activityGroupList?.filter(
                  (activityGroup) => activityGroup?.name
                ).length === 0 && (
                  <option disabled>No activity group found</option>
                )}
              </select>
              {errors.actitvityGroupId && (
                <p className="danger-text">{errors.actitvityGroupId.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"
                disabled={isLoading || selectedService == null}
              >
                {isLoading ? "Please Wait" : "Submit"}
              </button>
              <button
                type="reset"
                className="btn btn-sm btn-label-secondary"
                onClick={handleClose}
                disabled={isLoading || selectedService == null}
              >
                Cancel
              </button>
            </div>
          </>
        )}
      </div>
    </form>
  );
};

export default CreateActivity;