admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Signed-off-by: Dave Richer <dave@imexsystems.ca>
This commit is contained in:
Dave Richer
2024-01-12 15:07:52 -05:00
parent 9fc586434e
commit 7d6e61043e
1 changed files with 68 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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 ? (
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>
)
label: t("menus.jobsactions.cancelallappointments")
},
{
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>