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

import React, { useEffect, useState } from "react";
import { 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({
  name: z.string().min(1, { message: "Service Name is required" }),
  description: z
    .string()
    .min(1, { message: "Description is required" })
    .max(255, { message: "Description cannot exceed 255 characters" }),
  serviceId: z.string().min(1, { message: "A service selection is required." }),
});

const CreateActivityGroup = ({ onClose }) => {
  const [isLoading, setIsLoading] = useState(false);
  const [services, setServices] = useState(getCachedData("Services"));


  const {
    register,
    handleSubmit,
    formState: { errors },
    reset,
  } = useForm({
    resolver: zodResolver(schema),
    defaultValues: {
      name: "",
      description: "",
      serviceId: "",
    },
  });

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

  const onSubmit = (data) => {
    setIsLoading(true);
    const result = {
      name: data.name,
      description: data.description,
      serviceId: data.serviceId,
    };

    MasterRespository.createActivityGroup(result)
      .then((resp) => {
        setIsLoading(false);
        resetForm();
        const cachedData = getCachedData("Activity Group");
        const updatedData = [...cachedData, resp?.data];
        cacheData("Activity Group", updatedData);
        showToast("Activity Group Added successfully.", "success");

        onClose();
      })
      .catch((error) => {
        showToast(error.message, "error");
        setIsLoading(false);
      });
  };
  const resetForm = () => {
    reset({
      name: "",
      description: "",
      serviceId: "",
    });
    setDescriptionLength(0);
  };

  useEffect(() => {
    if (!services) {
      MasterRespository.getServices().then((res) => {
        setServices(res?.data);
        cacheData("Services", res?.data);
      });
    }
    return () => resetForm();
  }, []);
  const [descriptionLength, setDescriptionLength] = useState(0);
  const maxDescriptionLength = 255;
  return (
    <>
      <form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
        {/* <div className="col-12 col-md-12">
        <label className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">Create Job Role</label>
      </div> */}
        <div className="col-12 col-md-12">
          <label className="form-label">Activity Group Name</label>
          <input
            type="text"
            {...register("name")}
            className={`form-control ${errors.name ? "is-invalids" : ""}`}
          />
          {errors.name && <p className="text-danger">{errors.name.message}</p>}
        </div>
        <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="">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 services found</option>
            )}
          </select>
          {errors.serviceId && (
            <p className="danger-text">{errors.serviceId.message}</p>
          )}
        </div>
        <div className="col-12 col-md-12">
          <label className="form-label" htmlFor="description">
            Description
          </label>
          <textarea
            rows="3"
            {...register("description")}
            className={`form-control ${
              errors.description ? "is-invalids" : ""
            }`}
            onChange={(e) => {
              setDescriptionLength(e.target.value.length);
              register("description").onChange(e);
            }}
          ></textarea>
          <div className="text-end small text-muted">
            {maxDescriptionLength - descriptionLength} characters left
          </div>
          {errors.description && (
            <p className="text-danger">{errors.description.message}</p>
          )}
        </div>
        <div className="col-12 text-center">
          <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 "
            data-bs-dismiss="modal"
            aria-label="Close"
          >
            Cancel
          </button>
        </div>
      </form>
    </>
  );
};

export default CreateActivityGroup;