From dd1016eef3254c2673d7dc49dfe8c4bfd9853bb6 Mon Sep 17 00:00:00 2001 From: Patrick Fic <> Date: Fri, 21 Aug 2020 17:17:36 -0700 Subject: [PATCH] Added some additional save indiactors BOD-134 --- .../contract-status-select.component.jsx | 5 +- .../courtesy-car-form.component.jsx | 6 +- .../jobs-detail-header-actions.component.jsx | 61 +++++++++++------- .../owner-detail-form.component.jsx | 63 +++++++++++-------- .../owner-detail-form.container.jsx | 8 ++- .../vehicle-detail-form.component.jsx | 3 +- .../vehicle-detail-form.container.jsx | 7 ++- client/src/graphql/jobs.queries.js | 1 + .../contract-create.page.component.jsx | 5 +- .../contract-create.page.container.jsx | 5 ++ .../courtesy-car-detail.page.component.jsx | 8 ++- .../courtesy-car-detail.page.container.jsx | 33 ++++++---- client/src/utils/DateFormatter.jsx | 3 +- 13 files changed, 127 insertions(+), 81 deletions(-) diff --git a/client/src/components/contract-status-select/contract-status-select.component.jsx b/client/src/components/contract-status-select/contract-status-select.component.jsx index 5d675e6fd..609326542 100644 --- a/client/src/components/contract-status-select/contract-status-select.component.jsx +++ b/client/src/components/contract-status-select/contract-status-select.component.jsx @@ -3,10 +3,7 @@ import { Select } from "antd"; import { useTranslation } from "react-i18next"; const { Option } = Select; -const ContractStatusComponent = ( - { value = "contracts.status.new", onChange }, - ref -) => { +const ContractStatusComponent = ({ value, onChange }, ref) => { const [option, setOption] = useState(value); const { t } = useTranslation(); diff --git a/client/src/components/courtesy-car-form/courtesy-car-form.component.jsx b/client/src/components/courtesy-car-form/courtesy-car-form.component.jsx index 3a05ff69c..ad5f82602 100644 --- a/client/src/components/courtesy-car-form/courtesy-car-form.component.jsx +++ b/client/src/components/courtesy-car-form/courtesy-car-form.component.jsx @@ -3,15 +3,15 @@ import React from "react"; import { useTranslation } from "react-i18next"; import CourtesyCarFuelSlider from "../courtesy-car-fuel-select/courtesy-car-fuel-select.component"; import CourtesyCarStatus from "../courtesy-car-status-select/courtesy-car-status-select.component"; -import FormDatePicker from '../form-date-picker/form-date-picker.component'; +import FormDatePicker from "../form-date-picker/form-date-picker.component"; import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.component"; import CurrencyInput from "../form-items-formatted/currency-form-item.component"; -export default function CourtesyCarCreateFormComponent({ form }) { +export default function CourtesyCarCreateFormComponent({ form, saveLoading }) { const { t } = useTranslation(); return (
-
diff --git a/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx b/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx index a05bb03db..b86523e89 100644 --- a/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx +++ b/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx @@ -41,7 +41,7 @@ export function JobsDetailHeaderActions({ const client = useApolloClient(); const history = useHistory(); const statusmenu = ( - + { logImEXEvent("job_header_schedule"); @@ -53,16 +53,21 @@ export function JobsDetailHeaderActions({ job: job, }, }); - }}> + }} + > {t("jobs.actions.schedule")} - - - {t("jobs.actions.intake")} - + + {!!job.intakechecklist ? ( + t("jobs.actions.intake") + ) : ( + + {t("jobs.actions.intake")} + + )} { logImEXEvent("job_header_enter_payment"); @@ -70,29 +75,32 @@ export function JobsDetailHeaderActions({ actions: {}, context: { jobId: job.id }, }); - }}> + }} + > {t("menus.header.enterpayment")} - + + }} + > {t("menus.jobsactions.newcccontract")} AddToProduction(client, job.id, refetch)}> + onClick={() => AddToProduction(client, job.id, refetch)} + > {t("jobs.actions.addtoproduction")} - + e.stopPropagation()} onConfirm={() => DuplicateJob( @@ -104,12 +112,13 @@ export function JobsDetailHeaderActions({ } ) } - getPopupContainer={(trigger) => trigger.parentNode}> + getPopupContainer={(trigger) => trigger.parentNode} + > {t("menus.jobsactions.duplicate")} { logImEXEvent("job_header_enter_invoice"); @@ -119,20 +128,22 @@ export function JobsDetailHeaderActions({ job: job, }, }); - }}> + }} + > {t("jobs.actions.postInvoices")} - + + }} + > {t("menus.jobsactions.closejob")} { logImEXEvent("job_header_job_costing"); @@ -142,17 +153,19 @@ export function JobsDetailHeaderActions({ jobId: job.id, }, }); - }}> + }} + > {t("jobs.labels.jobcosting")} ); return ( + key="changestatus" + > diff --git a/client/src/components/owner-detail-form/owner-detail-form.component.jsx b/client/src/components/owner-detail-form/owner-detail-form.component.jsx index 0988028ba..ed260d1cc 100644 --- a/client/src/components/owner-detail-form/owner-detail-form.component.jsx +++ b/client/src/components/owner-detail-form/owner-detail-form.component.jsx @@ -6,35 +6,37 @@ import FormItemEmail from "../form-items-formatted/email-form-item.component"; import FormItemPhone from "../form-items-formatted/phone-form-item.component"; import LayoutFormRow from "../layout-form-row/layout-form-row.component"; -export default function OwnerDetailFormComponent({ form }) { +export default function OwnerDetailFormComponent({ form, loading }) { const { t } = useTranslation(); const { getFieldValue } = form; return (
-
+
-
+
- + - + - + - + @@ -42,52 +44,56 @@ export default function OwnerDetailFormComponent({ form }) { + ]} + > - + + ]} + > + ]} + > + ]} + > - + @@ -95,27 +101,30 @@ export default function OwnerDetailFormComponent({ form }) { + name="allow_text_message" + valuePropName="checked" + > + ]} + > - + + name="preferred_contact" + > diff --git a/client/src/components/owner-detail-form/owner-detail-form.container.jsx b/client/src/components/owner-detail-form/owner-detail-form.container.jsx index 00d1df689..5b601f7d2 100644 --- a/client/src/components/owner-detail-form/owner-detail-form.container.jsx +++ b/client/src/components/owner-detail-form/owner-detail-form.container.jsx @@ -1,5 +1,5 @@ import { Form, notification } from "antd"; -import React from "react"; +import React, { useState } from "react"; import { useMutation } from "@apollo/react-hooks"; import { useTranslation } from "react-i18next"; import { UPDATE_OWNER } from "../../graphql/owners.queries"; @@ -8,10 +8,11 @@ import OwnerDetailFormComponent from "./owner-detail-form.component"; function OwnerDetailFormContainer({ owner, refetch }) { const { t } = useTranslation(); const [form] = Form.useForm(); - + const [loading, setLoading] = useState(false); const [updateOwner] = useMutation(UPDATE_OWNER); const handleFinish = async (values) => { + setLoading(true); const result = await updateOwner({ variables: { ownerId: owner.id, owner: values }, }); @@ -32,6 +33,7 @@ function OwnerDetailFormContainer({ owner, refetch }) { if (refetch) await refetch(); form.resetFields(); form.resetFields(); + setLoading(false); }; return ( @@ -42,7 +44,7 @@ function OwnerDetailFormContainer({ owner, refetch }) { layout="vertical" initialValues={owner} > - + ); } diff --git a/client/src/components/vehicle-detail-form/vehicle-detail-form.component.jsx b/client/src/components/vehicle-detail-form/vehicle-detail-form.component.jsx index 55a06d689..e5a9b9142 100644 --- a/client/src/components/vehicle-detail-form/vehicle-detail-form.component.jsx +++ b/client/src/components/vehicle-detail-form/vehicle-detail-form.component.jsx @@ -5,7 +5,7 @@ import FormDatePicker from "../form-date-picker/form-date-picker.component"; import FormFieldsChanged from "../form-fields-changed-alert/form-fields-changed-alert.component"; import LayoutFormRow from "../layout-form-row/layout-form-row.component"; -export default function VehicleDetailFormComponent({ form }) { +export default function VehicleDetailFormComponent({ form, loading }) { const { t } = useTranslation(); return ( @@ -16,6 +16,7 @@ export default function VehicleDetailFormComponent({ form }) { type="primary" key="submit" htmlType="submit" + loading={loading} > {t("general.actions.save")} diff --git a/client/src/components/vehicle-detail-form/vehicle-detail-form.container.jsx b/client/src/components/vehicle-detail-form/vehicle-detail-form.container.jsx index 7fbfb2eb5..0b18735da 100644 --- a/client/src/components/vehicle-detail-form/vehicle-detail-form.container.jsx +++ b/client/src/components/vehicle-detail-form/vehicle-detail-form.container.jsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useState } from "react"; import { Form, notification } from "antd"; import { useMutation } from "@apollo/react-hooks"; import VehicleDetailFormComponent from "./vehicle-detail-form.component"; @@ -10,8 +10,10 @@ function VehicleDetailFormContainer({ vehicle, refetch }) { const { t } = useTranslation(); const [updateVehicle] = useMutation(UPDATE_VEHICLE); const [form] = Form.useForm(); + const [loading, setLoading] = useState(false); const handleFinish = async (values) => { + setLoading(true); const result = await updateVehicle({ variables: { vehId: vehicle.id, vehicle: values }, }); @@ -31,6 +33,7 @@ function VehicleDetailFormContainer({ vehicle, refetch }) { if (refetch) await refetch(); form.resetFields(); form.resetFields(); + setLoading(false); }; return ( @@ -44,7 +47,7 @@ function VehicleDetailFormContainer({ vehicle, refetch }) { v_prod_dt: vehicle.v_prod_dt ? moment(vehicle.v_prod_dt) : null, }} > - + ); } diff --git a/client/src/graphql/jobs.queries.js b/client/src/graphql/jobs.queries.js index 78f0e6209..3d89ceb4e 100644 --- a/client/src/graphql/jobs.queries.js +++ b/client/src/graphql/jobs.queries.js @@ -231,6 +231,7 @@ export const GET_JOB_BY_PK = gql` first_name last_name } + intakechecklist csr loss_desc kmin diff --git a/client/src/pages/contract-create/contract-create.page.component.jsx b/client/src/pages/contract-create/contract-create.page.component.jsx index 3e8a41e35..cf1bf09fe 100644 --- a/client/src/pages/contract-create/contract-create.page.component.jsx +++ b/client/src/pages/contract-create/contract-create.page.component.jsx @@ -9,11 +9,14 @@ export default function ContractCreatePageComponent({ form, selectedJobState, selectedCarState, + loading, }) { const { t } = useTranslation(); return (
- + diff --git a/client/src/pages/contract-create/contract-create.page.container.jsx b/client/src/pages/contract-create/contract-create.page.container.jsx index cd644fdb8..81ac0303b 100644 --- a/client/src/pages/contract-create/contract-create.page.container.jsx +++ b/client/src/pages/contract-create/contract-create.page.container.jsx @@ -23,6 +23,7 @@ export function ContractCreatePageContainer({ bodyshop, setBreadcrumbs }) { const { t } = useTranslation(); const history = useHistory(); const location = useLocation(); + const [loading, setLoading] = useState(false); const selectedCarState = useState(null); const selectedJobState = useState( (location.state && location.state.jobId) || null @@ -31,6 +32,7 @@ export function ContractCreatePageContainer({ bodyshop, setBreadcrumbs }) { const handleFinish = (values) => { if (!!selectedCarState[0] && !!selectedJobState[0]) { + setLoading(true); insertContract({ variables: { contract: { @@ -61,6 +63,7 @@ export function ContractCreatePageContainer({ bodyshop, setBreadcrumbs }) { message: t("contracts.errors.selectjobandcar"), }); } + setLoading(false); }; useEffect(() => { @@ -84,9 +87,11 @@ export function ContractCreatePageContainer({ bodyshop, setBreadcrumbs }) { form={form} layout="vertical" autoComplete="no" + initialValues={{ status: "contracts.status.new" }} onFinish={handleFinish} > - +
); diff --git a/client/src/pages/courtesy-car-detail/courtesy-car-detail.page.container.jsx b/client/src/pages/courtesy-car-detail/courtesy-car-detail.page.container.jsx index 30379ee15..98f6c5a2e 100644 --- a/client/src/pages/courtesy-car-detail/courtesy-car-detail.page.container.jsx +++ b/client/src/pages/courtesy-car-detail/courtesy-car-detail.page.container.jsx @@ -1,7 +1,7 @@ import { useMutation, useQuery } from "@apollo/react-hooks"; import { Form, notification } from "antd"; import moment from "moment"; -import React, { useEffect } from "react"; +import React, { useEffect, useState } from "react"; import { useTranslation } from "react-i18next"; import { connect } from "react-redux"; import { useParams } from "react-router-dom"; @@ -27,7 +27,7 @@ export function CourtesyCarDetailPageContainer({ const [insertCourtesyCar] = useMutation(UPDATE_CC); const [form] = Form.useForm(); const { ccId } = useParams(); - + const [saveLoading, setSaveLoading] = useState(false); const { loading, error, data } = useQuery(QUERY_CC_BY_PK, { variables: { id: ccId }, }); @@ -63,18 +63,24 @@ export function CourtesyCarDetailPageContainer({ ); }, [t, data, error, loading, setBreadcrumbs, ccId, addRecentItem]); - const handleFinish = (values) => { - insertCourtesyCar({ + const handleFinish = async (values) => { + setSaveLoading(true); + + const result = await insertCourtesyCar({ variables: { cc: { ...values }, ccId: ccId }, - }) - .then((response) => { - notification["success"]({ message: t("courtesycars.successes.saved") }); - }) - .catch((error) => - notification["error"]({ - message: t("courtesycars.errors.saving", { error: error }), - }) - ); + }); + + if (!!result.errors) { + notification["error"]({ + message: t("courtesycars.errors.saving", { error: error }), + }); + } + + notification["success"]({ + message: t("courtesycars.successes.saved"), + }); + + setSaveLoading(false); }; useEffect(() => { @@ -120,6 +126,7 @@ export function CourtesyCarDetailPageContainer({ diff --git a/client/src/utils/DateFormatter.jsx b/client/src/utils/DateFormatter.jsx index 88bda7b04..cddd773dc 100644 --- a/client/src/utils/DateFormatter.jsx +++ b/client/src/utils/DateFormatter.jsx @@ -8,9 +8,10 @@ export function DateFormatter(props) { {props.children} ) : null; } + export function DateTimeFormatter(props) { return props.children ? ( - {props.children} + {props.children} ) : null; }