From 886c7e9cb9779c8fe24b30fc7615e9e80508335e Mon Sep 17 00:00:00 2001 From: Patrick Fic Date: Thu, 11 Jun 2020 10:17:53 -0700 Subject: [PATCH] Added formrow components and for fields changed components + reformatted couple of job detail screens. BOD-160 BOD-155 --- bodyshop_translations.babel | 110 +++++++++ .../breadcrumbs/breadcrumbs.styles.scss | 2 +- .../chat-affix/chat-affix.container.jsx | 4 +- .../chat-affix/chat-affix.styles.scss | 4 + .../form-fields-changed-alert.component.jsx | 50 ++++ .../email-form-item.component.jsx | 4 +- .../job-damage-visual.component.jsx | 1 + .../jobs-detail-claims.component.jsx | 71 +++--- .../jobs-detail-insurance.component.jsx | 222 ++++++++++-------- .../layout-form-row.component.jsx | 39 +++ .../scheduler-calendar-wrapper.component.jsx | 2 - .../schedule-calendar.component.jsx | 1 - .../schedule-day-view.component.jsx | 1 - .../sign-in-form/sign-in-form.component.jsx | 4 - .../jobs-detail.page.component.jsx | 16 +- .../pages/manage/manage.page.component.jsx | 4 +- .../src/pages/manage/manage.page.styles.scss | 5 +- client/src/translations/en_us/common.json | 13 +- client/src/translations/es/common.json | 13 +- client/src/translations/fr/common.json | 13 +- 20 files changed, 405 insertions(+), 174 deletions(-) create mode 100644 client/src/components/chat-affix/chat-affix.styles.scss create mode 100644 client/src/components/form-fields-changed-alert/form-fields-changed-alert.component.jsx create mode 100644 client/src/components/layout-form-row/layout-form-row.component.jsx diff --git a/bodyshop_translations.babel b/bodyshop_translations.babel index 02df1806a..31be82e0b 100644 --- a/bodyshop_translations.babel +++ b/bodyshop_translations.babel @@ -5831,6 +5831,27 @@ + + unsavedchangespopup + false + + + + + + en-US + false + + + es-MX + false + + + fr-CA + false + + + @@ -10709,6 +10730,95 @@ + + forms + + + appraiserinfo + false + + + + + + en-US + false + + + es-MX + false + + + fr-CA + false + + + + + claiminfo + false + + + + + + en-US + false + + + es-MX + false + + + fr-CA + false + + + + + inscoinfo + false + + + + + + en-US + false + + + es-MX + false + + + fr-CA + false + + + + + lossinfo + false + + + + + + en-US + false + + + es-MX + false + + + fr-CA + false + + + + + labels diff --git a/client/src/components/breadcrumbs/breadcrumbs.styles.scss b/client/src/components/breadcrumbs/breadcrumbs.styles.scss index 6a84a55e0..e5a1661df 100644 --- a/client/src/components/breadcrumbs/breadcrumbs.styles.scss +++ b/client/src/components/breadcrumbs/breadcrumbs.styles.scss @@ -1,3 +1,3 @@ .breadcrumb-container { - margin: 1rem 4rem; + margin: 0.5rem 4rem; } diff --git a/client/src/components/chat-affix/chat-affix.container.jsx b/client/src/components/chat-affix/chat-affix.container.jsx index 4787c6d90..6b6db1ecd 100644 --- a/client/src/components/chat-affix/chat-affix.container.jsx +++ b/client/src/components/chat-affix/chat-affix.container.jsx @@ -5,7 +5,7 @@ import AlertComponent from "../alert/alert.component"; import LoadingSpinner from "../loading-spinner/loading-spinner.component"; import ChatAffixComponent from "./chat-affix.component"; import { Affix } from "antd"; - +import "./chat-affix.styles.scss"; export default function ChatAffixContainer() { const { loading, error, data } = useSubscription( CONVERSATION_LIST_SUBSCRIPTION @@ -14,7 +14,7 @@ export default function ChatAffixContainer() { if (error) return ; return ( - +
{ + form.resetFields(); + }; + const loc = useLocation(); + + return ( + + {() => { + if (form.isFieldsTouched()) + return ( +
+ { + console.log("location", location); + if (loc.pathname === location.pathname) return false; + return t("general.messages.unsavedchangespopup"); + }} + /> + + {t("general.messages.unsavedchanges")} + + {t("general.actions.reset")} + +
+ } + /> +
+ ); + return null; + }} + + ); +} diff --git a/client/src/components/form-items-formatted/email-form-item.component.jsx b/client/src/components/form-items-formatted/email-form-item.component.jsx index db87c6b33..2874245bb 100644 --- a/client/src/components/form-items-formatted/email-form-item.component.jsx +++ b/client/src/components/form-items-formatted/email-form-item.component.jsx @@ -6,8 +6,8 @@ function FormItemEmail(props, ref) { + props.defaultValue || props.value ? ( + ) : ( diff --git a/client/src/components/job-damage-visual/job-damage-visual.component.jsx b/client/src/components/job-damage-visual/job-damage-visual.component.jsx index 3af1910ab..558d4eefe 100644 --- a/client/src/components/job-damage-visual/job-damage-visual.component.jsx +++ b/client/src/components/job-damage-visual/job-damage-visual.component.jsx @@ -1,6 +1,7 @@ import React from "react"; export default ({ dmg1, dmg2 }) => ( - - - - - - - TODO How to handle different taxes and marking them as exempt? - { - // - // {getFieldDecorator("exempt", { - // initialValue: job.exempt - // })()} - // - } - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/client/src/components/jobs-detail-insurance/jobs-detail-insurance.component.jsx b/client/src/components/jobs-detail-insurance/jobs-detail-insurance.component.jsx index 4fb2f4e14..d460ce4f9 100644 --- a/client/src/components/jobs-detail-insurance/jobs-detail-insurance.component.jsx +++ b/client/src/components/jobs-detail-insurance/jobs-detail-insurance.component.jsx @@ -1,117 +1,133 @@ -import { DatePicker, Divider, Form, Input } from "antd"; +import { DatePicker, Divider, Form, Input, Typography } from "antd"; import React from "react"; import { useTranslation } from "react-i18next"; import FormItemEmail from "../form-items-formatted/email-form-item.component"; import FormItemPhone from "../form-items-formatted/phone-form-item.component"; +import FormRow from "../layout-form-row/layout-form-row.component"; +import Car from "../job-damage-visual/job-damage-visual.component"; export default function JobsDetailInsurance({ job, form }) { const { getFieldValue } = form; const { t } = useTranslation(); - //initialValue: job.loss_date ? moment(job.loss_date) : null return (
- - - - - - - - - - - - - TODO: missing KOL field??? - - - - DAMAGE {JSON.stringify(job.area_of_damage)} - CAA # seems not correct based on field mapping Class seems not correct - based on field mapping - - - - - - - - - - - - - - - - - - - - - - - Appraiser Info - - - - - - - - - - TODO: Field is pay date but title is inspection date. Likely incorrect? - - - - - - - - - - - - - - - - - - - - - - TODO: Adding servicing/selling dealer contact info? + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ {job.area_of_damage ? ( + + ) : ( + t("jobs.errors.nodamage") + )} +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + TODO: Adding servicing/selling dealer contact info? +
); } diff --git a/client/src/components/layout-form-row/layout-form-row.component.jsx b/client/src/components/layout-form-row/layout-form-row.component.jsx new file mode 100644 index 000000000..4d2b79672 --- /dev/null +++ b/client/src/components/layout-form-row/layout-form-row.component.jsx @@ -0,0 +1,39 @@ +import React from "react"; +import { Row, Col, Typography } from "antd"; + +export default function LayoutFormRow({ header, children }) { + if (!!!children.length) { + //We have only one element. It's going to get the whole thing. + return children; + } + const rowGutter = { gutter: [32, 32] }; + const colSpan = (maxspan) => { + console.log("maxspan", maxspan); + return { + xs: { + span: 24, + }, + md: { + span: !!maxspan ? Math.min(12, maxspan) : 12, + }, + lg: { + span: !!maxspan + ? Math.min(Math.max(24 / children.length, 6), maxspan) + : Math.max(24 / children.length, 6), + }, + }; + }; + + return ( +
+ {header ? {header} : null} + + {children.map((c, idx) => ( + + {c} + + ))} + +
+ ); +} diff --git a/client/src/components/schedule-calendar-wrapper/scheduler-calendar-wrapper.component.jsx b/client/src/components/schedule-calendar-wrapper/scheduler-calendar-wrapper.component.jsx index 5c42ae3b6..3a57864f4 100644 --- a/client/src/components/schedule-calendar-wrapper/scheduler-calendar-wrapper.component.jsx +++ b/client/src/components/schedule-calendar-wrapper/scheduler-calendar-wrapper.component.jsx @@ -5,7 +5,6 @@ import { Calendar, momentLocalizer } from "react-big-calendar"; import { useHistory, useLocation } from "react-router-dom"; import Event from "../schedule-event/schedule-event.container"; import HeaderComponent from "./schedule-calendar-header.component"; -//import "react-big-calendar/lib/css/react-big-calendar.css"; import "./schedule-calendar.styles.scss"; const localizer = momentLocalizer(moment); @@ -45,7 +44,6 @@ export default function ScheduleCalendarWrapperComponent({ components={{ event: (e) => Event({ event: e.event, refetch: refetch }), header: HeaderComponent, - toolbar: null, }} {...otherProps} /> diff --git a/client/src/components/schedule-calendar/schedule-calendar.component.jsx b/client/src/components/schedule-calendar/schedule-calendar.component.jsx index 50127ae6d..85ecf8cdd 100644 --- a/client/src/components/schedule-calendar/schedule-calendar.component.jsx +++ b/client/src/components/schedule-calendar/schedule-calendar.component.jsx @@ -4,7 +4,6 @@ import React from "react"; import { useTranslation } from "react-i18next"; import { connect } from "react-redux"; import { setModalContext } from "../../redux/modals/modals.actions"; -//import "react-big-calendar/lib/css/react-big-calendar.css"; import ScheduleCalendarWrapperComponent from "../schedule-calendar-wrapper/scheduler-calendar-wrapper.component"; import ScheduleModal from "../schedule-job-modal/schedule-job-modal.container"; diff --git a/client/src/components/schedule-day-view/schedule-day-view.component.jsx b/client/src/components/schedule-day-view/schedule-day-view.component.jsx index e9eb03a55..7c8203029 100644 --- a/client/src/components/schedule-day-view/schedule-day-view.component.jsx +++ b/client/src/components/schedule-day-view/schedule-day-view.component.jsx @@ -1,5 +1,4 @@ import React from "react"; -import "react-big-calendar/lib/css/react-big-calendar.css"; import { useTranslation } from "react-i18next"; import ScheduleCalendarWrapperComponent from "../schedule-calendar-wrapper/scheduler-calendar-wrapper.component"; diff --git a/client/src/components/sign-in-form/sign-in-form.component.jsx b/client/src/components/sign-in-form/sign-in-form.component.jsx index bf71b18bf..dff6b3d6e 100644 --- a/client/src/components/sign-in-form/sign-in-form.component.jsx +++ b/client/src/components/sign-in-form/sign-in-form.component.jsx @@ -54,10 +54,6 @@ export function SignInComponent({ }); } - const handleLogin = () => { - form.submit(); - }; - if (currentUser.authorized === true) return ; return (
diff --git a/client/src/pages/jobs-detail/jobs-detail.page.component.jsx b/client/src/pages/jobs-detail/jobs-detail.page.component.jsx index 86762d7fc..6908dc753 100644 --- a/client/src/pages/jobs-detail/jobs-detail.page.component.jsx +++ b/client/src/pages/jobs-detail/jobs-detail.page.component.jsx @@ -23,6 +23,7 @@ import { createStructuredSelector } from "reselect"; import { CalculateJob } from "../../components/job-totals-table/job-totals.utility"; import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component"; import { selectBodyshop } from "../../redux/user/user.selectors"; +import FormFieldsChanged from "../../components/form-fields-changed-alert/form-fields-changed-alert.component"; const JobsLinesContainer = lazy(() => import("../../components/job-detail-lines/job-lines.container") @@ -96,14 +97,8 @@ export function JobsDetailPage({ const search = queryString.parse(useLocation().search); const formItemLayout = { - labelCol: { - xs: { span: 12 }, - sm: { span: 5 }, - }, - wrapperCol: { - xs: { span: 24 }, - sm: { span: 12 }, - }, + layout: "vertical", + // size: "small", }; const handleFinish = (values) => { @@ -134,7 +129,6 @@ export function JobsDetailPage({
console.log("a,b", a, b)} name='JobDetailForm' onFinish={handleFinish} {...formItemLayout} @@ -143,6 +137,8 @@ export function JobsDetailPage({ ...job, loss_date: job.loss_date ? moment(job.loss_date) : null, }}> + + } key='dates'> - } + import("../shop-csi/shop-csi.container.page") ); -const { Content, Footer } = Layout; +const { Content } = Layout; const stripePromise = new Promise((resolve, reject) => { client.query({ query: QUERY_STRIPE_ID }).then((resp) => { diff --git a/client/src/pages/manage/manage.page.styles.scss b/client/src/pages/manage/manage.page.styles.scss index 3d998e600..c52165882 100644 --- a/client/src/pages/manage/manage.page.styles.scss +++ b/client/src/pages/manage/manage.page.styles.scss @@ -1,7 +1,8 @@ .content-container { overflow-y: auto; - margin: 0.5rem 1.5rem; - padding: 1.5rem; + margin: 0rem 1.5rem; + padding: 0.5rem 1.5rem; + border-radius: 12px; background: #fff; } diff --git a/client/src/translations/en_us/common.json b/client/src/translations/en_us/common.json index 09e39dc10..542dee8c6 100644 --- a/client/src/translations/en_us/common.json +++ b/client/src/translations/en_us/common.json @@ -347,7 +347,7 @@ "edit": "Edit", "login": "Login", "refresh": "Refresh", - "reset": "Reset to original.", + "reset": " Reset your changes.", "save": "Save", "saveandnew": "Save and New", "submit": "Submit", @@ -385,7 +385,8 @@ }, "messages": { "exception": "$t(titles.app) has encountered an error. Please try again. If the problem persists, please submit a support ticket or contact us.", - "unsavedchanges": "You have unsaved changes." + "unsavedchanges": "You have unsaved changes.", + "unsavedchangespopup": "You have unsaved changes. Are you sure you want to leave?" }, "validation": { "invalidemail": "Please enter a valid email.", @@ -617,7 +618,7 @@ "pap": "EOM Partial", "par": "Re-cored", "pas": "Sublet", - "pay_date": "Inspection Date", + "pay_date": "Pay Date", "phoneshort": "PH", "policy_no": "Policy #", "ponumber": "PO Number", @@ -665,6 +666,12 @@ "uploaded_by": "Uploaded By", "vehicle": "Vehicle" }, + "forms": { + "appraiserinfo": "Appraiser Info", + "claiminfo": "Claim Information", + "inscoinfo": "Insurance Company Information", + "lossinfo": "Loss Information" + }, "labels": { "allocations": "Allocations", "appointmentconfirmation": "Send confirmation to customer?", diff --git a/client/src/translations/es/common.json b/client/src/translations/es/common.json index e6e105c7b..f71a919ec 100644 --- a/client/src/translations/es/common.json +++ b/client/src/translations/es/common.json @@ -347,7 +347,7 @@ "edit": "Editar", "login": "", "refresh": "", - "reset": "Restablecer a original.", + "reset": " Restablecer a original.", "save": "Salvar", "saveandnew": "", "submit": "", @@ -385,7 +385,8 @@ }, "messages": { "exception": "", - "unsavedchanges": "Usted tiene cambios no guardados." + "unsavedchanges": "Usted tiene cambios no guardados.", + "unsavedchangespopup": "" }, "validation": { "invalidemail": "Por favor introduzca una dirección de correo electrónico válida.", @@ -617,7 +618,7 @@ "pap": "", "par": "", "pas": "", - "pay_date": "Fecha de inspección", + "pay_date": "Fecha de Pay", "phoneshort": "PH", "policy_no": "Política #", "ponumber": "numero postal", @@ -665,6 +666,12 @@ "uploaded_by": "Subido por", "vehicle": "Vehículo" }, + "forms": { + "appraiserinfo": "", + "claiminfo": "", + "inscoinfo": "", + "lossinfo": "" + }, "labels": { "allocations": "", "appointmentconfirmation": "¿Enviar confirmación al cliente?", diff --git a/client/src/translations/fr/common.json b/client/src/translations/fr/common.json index ff5b34210..8727fa5c0 100644 --- a/client/src/translations/fr/common.json +++ b/client/src/translations/fr/common.json @@ -347,7 +347,7 @@ "edit": "modifier", "login": "", "refresh": "", - "reset": "Rétablir l'original.", + "reset": " Rétablir l'original.", "save": "sauvegarder", "saveandnew": "", "submit": "", @@ -385,7 +385,8 @@ }, "messages": { "exception": "", - "unsavedchanges": "Vous avez des changements non enregistrés." + "unsavedchanges": "Vous avez des changements non enregistrés.", + "unsavedchangespopup": "" }, "validation": { "invalidemail": "S'il vous plaît entrer un email valide.", @@ -617,7 +618,7 @@ "pap": "", "par": "", "pas": "", - "pay_date": "Date d'inspection", + "pay_date": "Date d'Pay", "phoneshort": "PH", "policy_no": "Politique #", "ponumber": "Numéro de bon de commande", @@ -665,6 +666,12 @@ "uploaded_by": "Telechargé par", "vehicle": "Véhicule" }, + "forms": { + "appraiserinfo": "", + "claiminfo": "", + "inscoinfo": "", + "lossinfo": "" + }, "labels": { "allocations": "", "appointmentconfirmation": "Envoyer une confirmation au client?",