Compare commits
	
		
			No commits in common. "e847a714e3167e1c288c8397045d03df3cf9f74e" and "c1295447d639434d0fc9713d17515a9236c48e70" have entirely different histories.
		
	
	
		
			e847a714e3
			...
			c1295447d6
		
	
		
@ -1,174 +0,0 @@
 | 
			
		||||
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;
 | 
			
		||||
@ -1,123 +0,0 @@
 | 
			
		||||
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" }),
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
const CreateServices = ({onClose}) => {
 | 
			
		||||
 | 
			
		||||
  const[isLoading,setIsLoading] = useState(false)
 | 
			
		||||
     const {
 | 
			
		||||
      register,
 | 
			
		||||
      handleSubmit,
 | 
			
		||||
      formState: { errors },reset
 | 
			
		||||
      
 | 
			
		||||
    } = useForm({
 | 
			
		||||
      resolver: zodResolver(schema),
 | 
			
		||||
      defaultValues: {
 | 
			
		||||
        name: "",
 | 
			
		||||
        description: "",
 | 
			
		||||
      
 | 
			
		||||
      },
 | 
			
		||||
    });
 | 
			
		||||
    
 | 
			
		||||
    const onSubmit = (data) => {
 | 
			
		||||
      setIsLoading(true)
 | 
			
		||||
      const result = {
 | 
			
		||||
        name: data.name,
 | 
			
		||||
        description: data.description,
 | 
			
		||||
      };
 | 
			
		||||
    
 | 
			
		||||
      MasterRespository.createService(result).then((resp)=>{ 
 | 
			
		||||
        setIsLoading(false)
 | 
			
		||||
        resetForm()
 | 
			
		||||
        const cachedData = getCachedData("Services"); 
 | 
			
		||||
        const updatedData = [...cachedData, resp?.data]; 
 | 
			
		||||
        cacheData("Services", updatedData); 
 | 
			
		||||
        showToast("Service Added successfully.", "success");
 | 
			
		||||
 | 
			
		||||
        onClose()
 | 
			
		||||
      }).catch((error)=>{
 | 
			
		||||
        showToast(error.message, "error");
 | 
			
		||||
        setIsLoading(false)
 | 
			
		||||
      })
 | 
			
		||||
   
 | 
			
		||||
     
 | 
			
		||||
    };
 | 
			
		||||
    const resetForm = () => {
 | 
			
		||||
      reset({
 | 
			
		||||
        name: "",
 | 
			
		||||
        description: ""
 | 
			
		||||
      });
 | 
			
		||||
      setDescriptionLength(0);
 | 
			
		||||
    }    
 | 
			
		||||
 | 
			
		||||
    useEffect(()=>{
 | 
			
		||||
        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">Service 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="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 CreateServices;
 | 
			
		||||
@ -1,187 +0,0 @@
 | 
			
		||||
import React, { useEffect, useState } from "react";
 | 
			
		||||
import { useForm, Controller } from "react-hook-form";
 | 
			
		||||
import { set, z } from "zod";
 | 
			
		||||
import { zodResolver } from "@hookform/resolvers/zod";
 | 
			
		||||
import { MasterRespository } from "../../repositories/MastersRepository";
 | 
			
		||||
import { cacheData, getCachedData } 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 EditActivityGroup = ({ data, onClose }) => {
 | 
			
		||||
  const [isLoading, setIsLoading] = useState(false);
 | 
			
		||||
  const [services, setServices] = useState(getCachedData("Services"));
 | 
			
		||||
  const [formData, setFormData] = useState({
 | 
			
		||||
    name: data?.name || "",
 | 
			
		||||
    description: data?.description || "",
 | 
			
		||||
    serviceId: data.serviceId || "",
 | 
			
		||||
  });
 | 
			
		||||
  const {
 | 
			
		||||
    register,
 | 
			
		||||
    handleSubmit,
 | 
			
		||||
    formState: { errors },
 | 
			
		||||
    reset,
 | 
			
		||||
    watch,
 | 
			
		||||
  } = useForm({
 | 
			
		||||
    resolver: zodResolver(schema),
 | 
			
		||||
    defaultValues: {
 | 
			
		||||
      name: data?.name || "",
 | 
			
		||||
      description: data?.description || "",
 | 
			
		||||
      serviceId: data.serviceId || "",
 | 
			
		||||
    },
 | 
			
		||||
  });
 | 
			
		||||
  const selectedServiceId = watch("serviceId");
 | 
			
		||||
  const selectedName = watch("name");
 | 
			
		||||
  const selectedDescription = watch("description");
 | 
			
		||||
 | 
			
		||||
  // const handleServicesChange = (e) => {
 | 
			
		||||
  //   const { value } = e.target;
 | 
			
		||||
  //   const service = services.find((b) => b.id === String(value));
 | 
			
		||||
  //   reset((prev) => ({
 | 
			
		||||
  //     ...prev,
 | 
			
		||||
  //     serviceId: String(value),
 | 
			
		||||
  //   }));
 | 
			
		||||
  // };
 | 
			
		||||
 | 
			
		||||
  const onSubmit = (formdata) => {
 | 
			
		||||
    setIsLoading(true);
 | 
			
		||||
    const result = {
 | 
			
		||||
      id: data?.id,
 | 
			
		||||
      name: formdata?.name,
 | 
			
		||||
      description: formdata.description,
 | 
			
		||||
      serviceId: formdata?.serviceId,
 | 
			
		||||
    };
 | 
			
		||||
 | 
			
		||||
    MasterRespository.updateActivityGroup(data?.id, result)
 | 
			
		||||
      .then((resp) => {
 | 
			
		||||
        setIsLoading(false);
 | 
			
		||||
        showToast("Activity Group Update successfully.", "success");
 | 
			
		||||
        const cachedData = getCachedData("Activity Group");
 | 
			
		||||
        if (cachedData) {
 | 
			
		||||
          const updatedData = cachedData.map((service) =>
 | 
			
		||||
            service.id === data?.id ? { ...service, ...resp.data } : service
 | 
			
		||||
          );
 | 
			
		||||
          cacheData("Activity Group", updatedData);
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        onClose();
 | 
			
		||||
      })
 | 
			
		||||
      .catch((error) => {
 | 
			
		||||
        showToast(error.message, "error");
 | 
			
		||||
        setIsLoading(false);
 | 
			
		||||
      });
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  useEffect(() => {
 | 
			
		||||
    if (!services) {
 | 
			
		||||
      MasterRespository.getServices().then((res) => {
 | 
			
		||||
        setServices(res?.data);
 | 
			
		||||
        cacheData("Services", res?.data);
 | 
			
		||||
      });
 | 
			
		||||
    }
 | 
			
		||||
    reset({
 | 
			
		||||
      name: data?.name,
 | 
			
		||||
      description: data?.description,
 | 
			
		||||
      serviceId: data?.serviceId,
 | 
			
		||||
    });
 | 
			
		||||
    setDescriptionLength(data?.description?.length || 0);
 | 
			
		||||
  }, [data, reset]);
 | 
			
		||||
 | 
			
		||||
  const [descriptionLength, setDescriptionLength] = useState(
 | 
			
		||||
    data?.description?.length || 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">Edit Job Role</label>        
 | 
			
		||||
      </div> */}
 | 
			
		||||
        <div className="col-12 col-md-12">
 | 
			
		||||
          <label className="form-label">Service Name</label>
 | 
			
		||||
          <input
 | 
			
		||||
            type="text"
 | 
			
		||||
            {...register("name")}
 | 
			
		||||
            value={selectedName}
 | 
			
		||||
            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">Select Service</label>
 | 
			
		||||
          <select
 | 
			
		||||
            id="serviceId"
 | 
			
		||||
            className="form-select form-select-sm"
 | 
			
		||||
            {...register("serviceId")}
 | 
			
		||||
            value={selectedServiceId}
 | 
			
		||||
            // onChange={handleServicesChange}
 | 
			
		||||
            disabled
 | 
			
		||||
          >
 | 
			
		||||
            {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>
 | 
			
		||||
        <div className="col-12 col-md-12">
 | 
			
		||||
          <label className="form-label" htmlFor="description">
 | 
			
		||||
            Description
 | 
			
		||||
          </label>
 | 
			
		||||
          <textarea
 | 
			
		||||
            rows="3"
 | 
			
		||||
            {...register("description")}
 | 
			
		||||
            value={selectedDescription}
 | 
			
		||||
            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 EditActivityGroup;
 | 
			
		||||
@ -1,135 +0,0 @@
 | 
			
		||||
import React, { useEffect, useState } from "react";
 | 
			
		||||
import { useForm, Controller } from "react-hook-form";
 | 
			
		||||
import { set, z } from "zod";
 | 
			
		||||
import { zodResolver } from "@hookform/resolvers/zod";
 | 
			
		||||
import { MasterRespository } from "../../repositories/MastersRepository";
 | 
			
		||||
import { cacheData, getCachedData } 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" }),
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
const EditServices = ({ data, onClose }) => {
 | 
			
		||||
  const [isLoading, setIsLoading] = useState(false);
 | 
			
		||||
  const {
 | 
			
		||||
    register,
 | 
			
		||||
    handleSubmit,
 | 
			
		||||
    formState: { errors },
 | 
			
		||||
    reset,
 | 
			
		||||
    watch,
 | 
			
		||||
  } = useForm({
 | 
			
		||||
    resolver: zodResolver(schema),
 | 
			
		||||
    defaultValues: {
 | 
			
		||||
      name: data?.name || "",
 | 
			
		||||
      description: data?.description || "",
 | 
			
		||||
    },
 | 
			
		||||
  });
 | 
			
		||||
 | 
			
		||||
  const selectedName = watch("name")
 | 
			
		||||
  const selectedDescription = watch("description")
 | 
			
		||||
 | 
			
		||||
  const onSubmit = (formdata) => {
 | 
			
		||||
    setIsLoading(true);
 | 
			
		||||
    const result = {
 | 
			
		||||
      id: data?.id,
 | 
			
		||||
      name: formdata?.name,
 | 
			
		||||
      description: formdata.description,
 | 
			
		||||
    };
 | 
			
		||||
 | 
			
		||||
    MasterRespository.updateService(data?.id, result)
 | 
			
		||||
      .then((resp) => {
 | 
			
		||||
        setIsLoading(false);
 | 
			
		||||
        showToast("Service Update successfully.", "success");
 | 
			
		||||
        const cachedData = getCachedData("Services");
 | 
			
		||||
        if (cachedData) {
 | 
			
		||||
          const updatedData = cachedData.map((service) =>
 | 
			
		||||
            service.id === data?.id ? { ...service, ...resp.data } : service
 | 
			
		||||
          );
 | 
			
		||||
          cacheData("Services", updatedData);
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        onClose();
 | 
			
		||||
      })
 | 
			
		||||
      .catch((error) => {
 | 
			
		||||
        showToast(error.message, "error");
 | 
			
		||||
        setIsLoading(false);
 | 
			
		||||
      });
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  useEffect(() => {
 | 
			
		||||
    reset({
 | 
			
		||||
      name: data?.name,
 | 
			
		||||
      description: data?.description,
 | 
			
		||||
    });
 | 
			
		||||
    setDescriptionLength(data?.description?.length || 0);
 | 
			
		||||
  }, [data, reset]);
 | 
			
		||||
 | 
			
		||||
  const [descriptionLength, setDescriptionLength] = useState(
 | 
			
		||||
    data?.description?.length || 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">Edit Job Role</label>        
 | 
			
		||||
      </div> */}
 | 
			
		||||
        <div className="col-12 col-md-12">
 | 
			
		||||
          <label className="form-label">Service Name</label>
 | 
			
		||||
          <input
 | 
			
		||||
            type="text"
 | 
			
		||||
            {...register("name")}
 | 
			
		||||
            value={selectedName}
 | 
			
		||||
            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="description">
 | 
			
		||||
            Description
 | 
			
		||||
          </label>
 | 
			
		||||
          <textarea
 | 
			
		||||
            rows="3"
 | 
			
		||||
            {...register("description")}
 | 
			
		||||
            value={selectedDescription}
 | 
			
		||||
            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 EditServices;
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user