Merge branch 'Service_Project_Managment' of https://git.marcoaiot.com/admin/marco.pms.web into Service_Project_Managment

src/components/ServiceProject/ManageJob.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import Breadcrumb from "../common/Breadcrumb";
 import Label from "../common/Label";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -8,6 +8,7 @@ import {
   useJobTags,
   useServiceProjectJobDetails,
   useServiceProjects,
+  useUpdateServiceProjectJob,
 } from "../../hooks/useServiceProject";
 import { ITEMS_PER_PAGE } from "../../utils/constants";
 import DatePicker from "../common/DatePicker";
@@ -21,9 +22,11 @@ import {
   useAppForm,
 } from "../../hooks/appHooks/useAppForm";
 import { useParams } from "react-router-dom";
+import { useDispatch } from "react-redux";
 
 const ManageJob = ({ Job }) => {
   const { projectId } = useParams();
+  const dispatch = useDispatch()
   const methods = useAppForm({
     resolver: zodResolver(jobSchema),
     defaultValues: defaultJobValue,
@@ -52,8 +55,62 @@ const ManageJob = ({ Job }) => {
   const { mutate: CreateJob, isPending } = useCreateServiceProjectJob(() => {
     reset();
   });
-
+  const { mutate: UpdateJob, isPending: Updating } = useUpdateServiceProjectJob(
+    () => { dispatch()}
+  );
   const onSubmit = (formData) => {
+    if (Job) {
+      const existingEmployeeIds = JobData?.assignees?.map((e) => e.id) || [];
+
+      const oldEmployees = JobData.assignees.map((e) => ({
+        employeeId: e.id,
+        isActive: formData.assignees.includes(e.id),
+      }));
+
+      const newEmployees = formData.assignees
+        .filter((id) => !existingEmployeeIds.includes(id))
+        .map((id) => ({
+          employeeId: id,
+          isActive: true,
+        }));
+
+      const updatedEmployees = [...oldEmployees, ...newEmployees];
+
+      const payload = [
+        {
+          op: "replace",
+          path: "/title",
+          value: formData.title,
+        },
+        {
+          op: "replace",
+          path: "/description",
+          value: formData.description,
+        },
+        {
+          op: "replace",
+          path: "/startDate",
+          value: localToUtc(formData.startDate) ?? JobData.startDate,
+        },
+        {
+          op: "replace",
+          path: "/dueDate",
+          value: localToUtc(formData.dueDate) ?? JobData.dueDate,
+        },
+        {
+          op: "replace",
+          path: "/tags",
+          value: formData.tags,
+        },
+
+        {
+          op: "replace",
+          path: "/assignees",
+          value: updatedEmployees,
+        },
+      ];
+      UpdateJob({ id: Job, payload });
+    } else {
       formData.assignees = formData.assignees.map((emp) => ({
         employeeId: emp,
         isActive: true,
@@ -62,7 +119,9 @@ const ManageJob = ({ Job }) => {
       formData.startDate = localToUtc(formData.startDate);
       formData.dueDate = localToUtc(formData.dueDate);
       formData.projectId = projectId;
-    CreateJob(formData);
+
+      // CreateJob(formData);
+    }
   };
 
   useEffect(() => {
@@ -152,9 +211,13 @@ const ManageJob = ({ Job }) => {
             <button
               type="submit"
               className="btn btn-sm btn-primary"
-              disabled={isPending}
+              disabled={isPending || Updating}
             >
-              {isPending ? "Please wait..." : "Submit"}
+              {isPending || Updating
+                ? "Please wait..."
+                : Job
+                ? "Update"
+                : "Submit"}
             </button>
           </div>
         </form>