From 8f8c26af54ec8855d88450203e62785cccfcdd87 Mon Sep 17 00:00:00 2001 From: Patrick Fic Date: Wed, 22 Jul 2020 10:46:34 -0700 Subject: [PATCH] Begin addign loading state to mutations BOD-134 --- .../courtesy-car-return-modal.container.jsx | 31 ++++++------ .../invoice-detail-edit.container.jsx | 8 +-- .../job-intake-form.component.jsx | 29 +++++++---- .../job-lines-upsert-modal.component.jsx | 8 +-- .../job-lines-upsert-modal.container.jsx | 50 +++++++++++-------- ...obs-documents-gallery.delete.component.jsx | 12 +++-- .../jobs-notes/jobs-notes.container.jsx | 42 +++++++++++----- .../jobs-notes/jobs.notes.component.jsx | 33 +++++------- 8 files changed, 125 insertions(+), 88 deletions(-) diff --git a/client/src/components/courtesy-car-return-modal/courtesy-car-return-modal.container.jsx b/client/src/components/courtesy-car-return-modal/courtesy-car-return-modal.container.jsx index 587205ad6..0135cb756 100644 --- a/client/src/components/courtesy-car-return-modal/courtesy-car-return-modal.container.jsx +++ b/client/src/components/courtesy-car-return-modal/courtesy-car-return-modal.container.jsx @@ -1,5 +1,5 @@ import { Form, Modal, notification } from "antd"; -import React from "react"; +import React, { useState } from "react"; import { useTranslation } from "react-i18next"; import { connect } from "react-redux"; import { createStructuredSelector } from "reselect"; @@ -13,48 +13,51 @@ import { useMutation } from "@apollo/react-hooks"; const mapStateToProps = createStructuredSelector({ courtesyCarReturnModal: selectCourtesyCarReturn, - bodyshop: selectBodyshop + bodyshop: selectBodyshop, }); -const mapDispatchToProps = dispatch => ({ - toggleModalVisible: () => dispatch(toggleModalVisible("courtesyCarReturn")) +const mapDispatchToProps = (dispatch) => ({ + toggleModalVisible: () => dispatch(toggleModalVisible("courtesyCarReturn")), }); export function InvoiceEnterModalContainer({ courtesyCarReturnModal, toggleModalVisible, - bodyshop + bodyshop, }) { + const [loading, setLoading] = useState(false); const { visible, context, actions } = courtesyCarReturnModal; const { t } = useTranslation(); const [form] = Form.useForm(); const [updateContract] = useMutation(RETURN_CONTRACT); - const handleFinish = values => { + const handleFinish = (values) => { + setLoading(true); updateContract({ variables: { contractId: context.contractId, cccontract: { kmend: values.kmend, actualreturn: values.actualreturn, - status: "contracts.status.returned" + status: "contracts.status.returned", }, courtesycarid: context.courtesyCarId, courtesycar: { status: "courtesycars.status.in", fuel: values.fuel, - mileage: values.kmend - } - } + mileage: values.kmend, + }, + }, }) - .then(r => { + .then((r) => { if (actions.refetch) actions.refetch(); toggleModalVisible(); }) - .catch(error => { + .catch((error) => { notification["error"]({ - message: t("contracts.errors.returning", { error: error }) + message: t("contracts.errors.returning", { error: error }), }); }); + setLoading(false); }; return ( @@ -65,7 +68,7 @@ export function InvoiceEnterModalContainer({ width={"90%"} okText={t("general.actions.save")} onOk={() => form.submit()} - okButtonProps={{ htmlType: "submit" }} + okButtonProps={{ htmlType: "submit", loading: loading }} >
{ + setUpdateLoading(true); const { invoicelines, upload, ...invoice } = values; const updates = []; - console.log("Start"); updates.push( updateInvoice({ variables: { invoiceId: search.invoiceid, invoice: invoice }, @@ -54,6 +55,7 @@ export function InvoiceDetailEditContainer({ bodyshop }) { }); await Promise.all(updates); + setUpdateLoading(false); }; useEffect(() => { @@ -99,7 +101,7 @@ export function InvoiceDetailEditContainer({ bodyshop }) { : {} } > - diff --git a/client/src/components/job-intake/components/job-intake-form/job-intake-form.component.jsx b/client/src/components/job-intake/components/job-intake-form/job-intake-form.component.jsx index c9ad59410..0f404c3b1 100644 --- a/client/src/components/job-intake/components/job-intake-form/job-intake-form.component.jsx +++ b/client/src/components/job-intake/components/job-intake-form/job-intake-form.component.jsx @@ -1,7 +1,7 @@ import { useMutation } from "@apollo/react-hooks"; import { Button, Form, notification, Switch } from "antd"; import queryString from "query-string"; -import React from "react"; +import React, { useState } from "react"; import { useTranslation } from "react-i18next"; import { connect } from "react-redux"; import { useHistory, useLocation, useParams } from "react-router-dom"; @@ -23,6 +23,7 @@ const mapDispatchToProps = (dispatch) => ({ export function JobIntakeForm({ formItems, bodyshop }) { const { t } = useTranslation(); const [intakeJob] = useMutation(UPDATE_JOB); + const [loading, setLoading] = useState(false); const [markAptArrived] = useMutation(MARK_LATEST_APPOINTMENT_AS_ARRIVED); const { jobId } = useParams(); const history = useHistory(); @@ -30,6 +31,7 @@ export function JobIntakeForm({ formItems, bodyshop }) { const handleFinish = async (values) => { console.log("values", values); + setLoading(true); logImEXEvent("job_complete_intake"); const result = await intakeJob({ @@ -70,6 +72,7 @@ export function JobIntakeForm({ formItems, bodyshop }) { }); } console.log("handleFinish -> result", result); + setLoading(false); }; const [form] = Form.useForm(); @@ -78,34 +81,40 @@ export function JobIntakeForm({ formItems, bodyshop }) { + initialValues={{ addToProduction: true }} + > {t("intake.labels.checklist")} + name="addToProduction" + valuePropName="checked" + label={t("intake.labels.addtoproduction")} + > + ]} + > + name="scheduledDelivery" + label={t("jobs.fields.scheduled_delivery")} + > - + ); } diff --git a/client/src/components/job-lines-upsert-modal/job-lines-upsert-modal.component.jsx b/client/src/components/job-lines-upsert-modal/job-lines-upsert-modal.component.jsx index 338d5d8bf..e0db322dd 100644 --- a/client/src/components/job-lines-upsert-modal/job-lines-upsert-modal.component.jsx +++ b/client/src/components/job-lines-upsert-modal/job-lines-upsert-modal.component.jsx @@ -7,7 +7,8 @@ export default function JobLinesUpsertModalComponent({ visible, jobLine, handleCancel, - handleFinish + handleFinish, + loading, }) { const { t } = useTranslation(); const [form] = Form.useForm(); @@ -32,6 +33,7 @@ export default function JobLinesUpsertModalComponent({ visible={visible} okText={t("general.actions.save")} onOk={() => form.submit()} + okButtonProps={{ loading: loading }} onCancel={handleCancel} > diff --git a/client/src/components/job-lines-upsert-modal/job-lines-upsert-modal.container.jsx b/client/src/components/job-lines-upsert-modal/job-lines-upsert-modal.container.jsx index e3e47a6b2..8db6c5182 100644 --- a/client/src/components/job-lines-upsert-modal/job-lines-upsert-modal.container.jsx +++ b/client/src/components/job-lines-upsert-modal/job-lines-upsert-modal.container.jsx @@ -1,73 +1,78 @@ import { notification } from "antd"; -import React from "react"; +import React, { useState } from "react"; import { useMutation } from "@apollo/react-hooks"; import { useTranslation } from "react-i18next"; import { connect } from "react-redux"; import { createStructuredSelector } from "reselect"; -import { INSERT_NEW_JOB_LINE, UPDATE_JOB_LINE } from "../../graphql/jobs-lines.queries"; +import { + INSERT_NEW_JOB_LINE, + UPDATE_JOB_LINE, +} from "../../graphql/jobs-lines.queries"; import { toggleModalVisible } from "../../redux/modals/modals.actions"; import { selectJobLineEditModal } from "../../redux/modals/modals.selectors"; import JobLinesUpdsertModal from "./job-lines-upsert-modal.component"; const mapStateToProps = createStructuredSelector({ - jobLineEditModal: selectJobLineEditModal + jobLineEditModal: selectJobLineEditModal, }); -const mapDispatchToProps = dispatch => ({ - toggleModalVisible: () => dispatch(toggleModalVisible("jobLineEdit")) +const mapDispatchToProps = (dispatch) => ({ + toggleModalVisible: () => dispatch(toggleModalVisible("jobLineEdit")), }); function JobLinesUpsertModalContainer({ jobLineEditModal, - toggleModalVisible + toggleModalVisible, }) { const { t } = useTranslation(); const [insertJobLine] = useMutation(INSERT_NEW_JOB_LINE); const [updateJobLine] = useMutation(UPDATE_JOB_LINE); - - const handleFinish = values => { + const [loading, setLoading] = useState(false); + const handleFinish = (values) => { + setLoading(true); if (!jobLineEditModal.context.id) { insertJobLine({ variables: { - lineInput: [{ jobid: jobLineEditModal.context.jobid, ...values }] - } + lineInput: [{ jobid: jobLineEditModal.context.jobid, ...values }], + }, }) - .then(r => { + .then((r) => { if (jobLineEditModal.actions.refetch) jobLineEditModal.actions.refetch(); toggleModalVisible(); notification["success"]({ - message: t("joblines.successes.created") + message: t("joblines.successes.created"), }); }) - .catch(error => { + .catch((error) => { notification["error"]({ message: t("joblines.errors.creating", { - message: error.message - }) + message: error.message, + }), }); }); } else { updateJobLine({ variables: { lineId: jobLineEditModal.context.id, - line: values - } + line: values, + }, }) - .then(r => { + .then((r) => { notification["success"]({ - message: t("joblines.successes.updated") + message: t("joblines.successes.updated"), }); }) - .catch(error => { + .catch((error) => { notification["success"]({ message: t("joblines.errors.updating", { - message: error.message - }) + message: error.message, + }), }); }); if (jobLineEditModal.actions.refetch) jobLineEditModal.actions.refetch(); toggleModalVisible(); } + setLoading(false); }; const handleCancel = () => { @@ -80,6 +85,7 @@ function JobLinesUpsertModalContainer({ jobLine={jobLineEditModal.context} handleFinish={handleFinish} handleCancel={handleCancel} + loading={loading} /> ); } diff --git a/client/src/components/jobs-documents-gallery/jobs-documents-gallery.delete.component.jsx b/client/src/components/jobs-documents-gallery/jobs-documents-gallery.delete.component.jsx index bab8a4849..7142170f0 100644 --- a/client/src/components/jobs-documents-gallery/jobs-documents-gallery.delete.component.jsx +++ b/client/src/components/jobs-documents-gallery/jobs-documents-gallery.delete.component.jsx @@ -1,5 +1,5 @@ import { Button, notification } from "antd"; -import React from "react"; +import React, { useState } from "react"; import { useTranslation } from "react-i18next"; import axios from "axios"; import { useMutation } from "@apollo/react-hooks"; @@ -13,9 +13,10 @@ export default function JobsDocumentsDeleteButton({ const { t } = useTranslation(); const [deleteDocument] = useMutation(DELETE_DOCUMENT); const imagesToDelete = galleryImages.filter((image) => image.isSelected); + const [loading, setLoading] = useState(false); const handleDelete = () => { logImEXEvent("job_documents_delete", { count: imagesToDelete.length }); - + setLoading(true); imagesToDelete.forEach((image) => { let timestamp = Math.floor(Date.now() / 1000); let public_id = image.key; @@ -65,10 +66,15 @@ export default function JobsDocumentsDeleteButton({ }); }); }); + setLoading(false); }; return ( - ); diff --git a/client/src/components/jobs-notes/jobs-notes.container.jsx b/client/src/components/jobs-notes/jobs-notes.container.jsx index 2270e13f6..a3efaa482 100644 --- a/client/src/components/jobs-notes/jobs-notes.container.jsx +++ b/client/src/components/jobs-notes/jobs-notes.container.jsx @@ -1,31 +1,49 @@ -import React from "react"; -import JobNotesComponent from "./jobs.notes.component"; -import { useQuery, useMutation } from "@apollo/react-hooks"; -import AlertComponent from "../../components/alert/alert.component"; +import { useMutation, useQuery } from "@apollo/react-hooks"; +import { notification } from "antd"; +import React, { useState } from "react"; //import SpinComponent from "../../components/loading-spinner/loading-spinner.component"; -import { - QUERY_NOTES_BY_JOB_PK, - DELETE_NOTE -} from "../../graphql/notes.queries"; +import { useTranslation } from "react-i18next"; +import AlertComponent from "../../components/alert/alert.component"; +import { logImEXEvent } from "../../firebase/firebase.utils"; +import { DELETE_NOTE, QUERY_NOTES_BY_JOB_PK } from "../../graphql/notes.queries"; +import JobNotesComponent from "./jobs.notes.component"; + export default function JobNotesContainer({ jobId }) { const { loading, error, data, refetch } = useQuery(QUERY_NOTES_BY_JOB_PK, { variables: { id: jobId }, - fetchPolicy: "network-only" + fetchPolicy: "network-only", }); - const [deleteNote] = useMutation(DELETE_NOTE); + const { t } = useTranslation(); + const [deleteLoading, setDeleteLoading] = useState(false); + const handleNoteDelete = (id) => { + logImEXEvent("job_note_delete"); + setDeleteLoading(true); + deleteNote({ + variables: { + noteId: id, + }, + }).then((r) => { + refetch(); + notification["success"]({ + message: t("notes.successes.deleted"), + }); + }); + setDeleteLoading(false); + }; //if (loading) return ; - if (error) return ; + if (error) return ; return ( ); } diff --git a/client/src/components/jobs-notes/jobs.notes.component.jsx b/client/src/components/jobs-notes/jobs.notes.component.jsx index 2058048c1..6c9300742 100644 --- a/client/src/components/jobs-notes/jobs.notes.component.jsx +++ b/client/src/components/jobs-notes/jobs.notes.component.jsx @@ -4,12 +4,11 @@ import { EyeInvisibleFilled, WarningFilled } from "@ant-design/icons"; -import { Button, notification, Table } from "antd"; +import { Button, Table } from "antd"; import React from "react"; import { useTranslation } from "react-i18next"; import Moment from "react-moment"; import { connect } from "react-redux"; -import { logImEXEvent } from "../../firebase/firebase.utils"; import { setModalContext } from "../../redux/modals/modals.actions"; import NoteUpsertModal from "../note-upsert-modal/note-upsert-modal.container"; @@ -22,9 +21,10 @@ export function JobNotesComponent({ loading, data, refetch, - deleteNote, + handleNoteDelete, jobId, setNoteUpsertContext, + deleteLoading, }) { const { t } = useTranslation(); @@ -59,7 +59,7 @@ export function JobNotesComponent({ sorter: (a, b) => new Date(a.updated_at) - new Date(b.updated_at), render: (text, record) => ( - {record.updated_at} + {record.updated_at} ), }, @@ -77,20 +77,9 @@ export function JobNotesComponent({ render: (text, record) => ( @@ -121,14 +111,15 @@ export function JobNotesComponent({ jobId: jobId, }, }); - }}> + }} + > {t("notes.actions.new")} ({ ...item }))} - rowKey='id' + rowKey="id" dataSource={data} />