- Change Delete Scheduled jobs to a modal and not a popover

Signed-off-by: Dave Richer <dave@imexsystems.ca>

client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx

@@ -1,6 +1,6 @@
 import {DownCircleFilled} from "@ant-design/icons";
 import {useApolloClient, useMutation} from "@apollo/client";
-import {Button, Card, Dropdown, Form, Input, notification, Popconfirm, Popover, Select, Space,} from "antd";
+import {Button, Card, Dropdown, Form, Input, Modal, notification, Popconfirm, Popover, Select, Space,} from "antd";
 import React, {useMemo, useState} from "react";
 import {useTranslation} from "react-i18next";
 import {connect} from "react-redux";
@@ -77,6 +77,7 @@ export function JobsDetailHeaderActions({
     const history = useNavigate();
     const [form] = Form.useForm();
     const [loading, setLoading] = useState(false);
+    const [isCancelScheduleModalVisible, setIsCancelScheduleModalVisible] = useState(false);
     const [insertAppointment] = useMutation(INSERT_MANUAL_APPT);
     const [deleteJob] = useMutation(DELETE_JOB);
     const [insertCsi] = useMutation(INSERT_CSI);
@@ -106,6 +107,17 @@ export function JobsDetailHeaderActions({
         );
     }, [job.status, bodyshop.md_ro_statuses.post_production_statuses]);
 
+    // Function to show modal
+    const showCancelScheduleModal = () => {
+        setIsCancelScheduleModalVisible(true);
+    };
+
+
+    // Function to handle Cancel
+    const handleCancelScheduleModalCancel = () => {
+        setIsCancelScheduleModalVisible(false);
+    };
+
     const handleDuplicate = () =>
         DuplicateJob(
             client,
@@ -149,7 +161,6 @@ export function JobsDetailHeaderActions({
                 message: t("appointments.successes.created"),
             });
         } catch (error) {
-            console.log(error);
         } finally {
             setLoading(false);
             setVisibility(false);
@@ -459,6 +470,13 @@ export function JobsDetailHeaderActions({
         });
     };
 
+
+    // Function to handle OK
+    const handleCancelScheduleOK = async () => {
+        await form.submit(); // Assuming 'form' is the Form instance from useForm()
+        setIsCancelScheduleModalVisible(false);
+    };
+
     const handleLostSaleFinish = async ({lost_sale_reason}) => {
         const jobUpdate = await cancelAllAppointments({
             variables: {
@@ -605,49 +623,14 @@ export function JobsDetailHeaderActions({
         },
         {
             key: 'cancelallappointments',
+            onClick: () => {
+                if ( job.status !== bodyshop.md_ro_statuses.default_scheduled) {
+                    return;
+                }
+                showCancelScheduleModal()
+            },
             disabled: job.status !== bodyshop.md_ro_statuses.default_scheduled,
-            label: job.status !== bodyshop.md_ro_statuses.default_scheduled ? (
+            label: t("menus.jobsactions.cancelallappointments")
-                t("menus.jobsactions.cancelallappointments")
-            ) : (
-                <Popover
-                    trigger="click"
-                    disabled={job.status !== bodyshop.md_ro_statuses.default_scheduled}
-                    content={
-                        <Form
-                            layout="vertical"
-                            onFinish={handleLostSaleFinish}
-                        >
-                            <Form.Item
-                                name="lost_sale_reason"
-                                label={t("jobs.fields.lost_sale_reason")}
-                                rules={[
-                                    {
-                                        required: true,
-                                        //message: t("general.validation.required"),
-                                    },
-                                ]}
-                            >
-                                <Select
-                                    options={bodyshop.md_lost_sale_reasons.map((lsr) => ({
-                                        label: lsr,
-                                        value: lsr,
-                                    }))}
-                                />
-                            </Form.Item>
-                            <Button
-                                htmlType="submit"
-                                disabled={
-                                    job.status !== bodyshop.md_ro_statuses.default_scheduled
-                                }
-                            >
-                                {t("appointments.actions.cancel")}
-                            </Button>
-                        </Form>
-                    }
-                >
-                    {t("menus.jobsactions.cancelallappointments")}
-                </Popover>
-            )
         },
         {
             key: 'intake',
@@ -1004,6 +987,47 @@ export function JobsDetailHeaderActions({
 
     return (
         <>
+            <Modal
+                title={t("menus.jobsactions.cancelallappointments")}
+                open={isCancelScheduleModalVisible}
+                onOk={handleCancelScheduleOK}
+                onCancel={handleCancelScheduleModalCancel}
+                footer={[
+                    <Button form="cancelScheduleForm" key="back"  onClick={handleCancelScheduleModalCancel}>
+                        {t("general.actions.cancel")}
+                    </Button>,
+                    <Button  form="cancelScheduleForm" htmlType="submit" key="submit" type="primary" loading={loading} onClick={handleCancelScheduleOK}>
+                        {t("appointments.actions.cancel")}
+                    </Button>,
+                ]}
+            >
+                <Form
+                    layout="vertical"
+                    id="cancelScheduleForm"
+                    onFinish={s =>{
+                        console.log(s);
+                        handleLostSaleFinish(s);
+                    }}
+                >
+                    <Form.Item
+                        name="lost_sale_reason"
+                        label={t("jobs.fields.lost_sale_reason")}
+                        rules={[
+                            {
+                                required: true,
+                                //message: t("general.validation.required"),
+                            },
+                        ]}
+                    >
+                        <Select
+                            options={bodyshop.md_lost_sale_reasons.map((lsr) => ({
+                                label: lsr,
+                                value: lsr,
+                            }))}
+                        />
+                    </Form.Item>
+                </Form>
+            </Modal>
             <Dropdown menu={menu} trigger={["click"]} key="changestatus">
                 <Button>
                     <span>{t("general.labels.actions")}</span>