Added formrow components and for fields changed components + reformatted couple of job detail screens. BOD-160 BOD-155

This commit is contained in:
Patrick Fic
2020-06-11 10:17:53 -07:00
parent cec3fec481
commit 886c7e9cb9
20 changed files with 405 additions and 174 deletions

View File

@@ -5831,6 +5831,27 @@
</translation>
</translations>
</concept_node>
<concept_node>
<name>unsavedchangespopup</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
</children>
</folder_node>
<folder_node>
@@ -10709,6 +10730,95 @@
</concept_node>
</children>
</folder_node>
<folder_node>
<name>forms</name>
<children>
<concept_node>
<name>appraiserinfo</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>claiminfo</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>inscoinfo</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>lossinfo</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
</children>
</folder_node>
<folder_node>
<name>labels</name>
<children>

View File

@@ -1,3 +1,3 @@
.breadcrumb-container {
margin: 1rem 4rem;
margin: 0.5rem 4rem;
}

View File

@@ -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 <AlertComponent message={error.message} type='error' />;
return (
<Affix offsetBottom={5}>
<Affix className='chat-affix'>
<div>
<ChatAffixComponent
conversationList={(data && data.conversations) || []}

View File

@@ -0,0 +1,4 @@
.chat-affix {
position: absolute;
bottom: 2vh;
}

View File

@@ -0,0 +1,50 @@
import React from "react";
import { Form } from "antd";
import { useTranslation } from "react-i18next";
import AlertComponent from "../alert/alert.component";
import { Prompt, useLocation } from "react-router-dom";
export default function FormsFieldChanged({ form }) {
const { t } = useTranslation();
const handleReset = () => {
form.resetFields();
};
const loc = useLocation();
return (
<Form.Item shouldUpdate style={{ margin: 0, padding: 0 }}>
{() => {
if (form.isFieldsTouched())
return (
<div>
<Prompt
when={true}
message={(location) => {
console.log("location", location);
if (loc.pathname === location.pathname) return false;
return t("general.messages.unsavedchangespopup");
}}
/>
<AlertComponent
type='warning'
message={
<div>
<span>{t("general.messages.unsavedchanges")}</span>
<span
onClick={handleReset}
style={{
cursor: "pointer",
textDecoration: "underline",
}}>
{t("general.actions.reset")}
</span>
</div>
}
/>
</div>
);
return null;
}}
</Form.Item>
);
}

View File

@@ -6,8 +6,8 @@ function FormItemEmail(props, ref) {
<Input
{...props}
addonAfter={
props.defaultValue ? (
<a href={`mailto:${props.defaultValue}`}>
props.defaultValue || props.value ? (
<a href={`mailto:${props.defaultValue || props.value}`}>
<MailFilled />
</a>
) : (

View File

@@ -1,6 +1,7 @@
import React from "react";
export default ({ dmg1, dmg2 }) => (
<svg
style={{ maxHeight: "100%", display: "inline-block" }}
id='svg166'
version='1.1'
viewBox='0 0 1668 1160'

View File

@@ -1,46 +1,47 @@
import { Form, Input, Switch } from "antd";
import { Form, Input, Switch, InputNumber, Typography } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import FormRow from "../layout-form-row/layout-form-row.component";
export default function JobsDetailClaims({ job }) {
const { t } = useTranslation();
return (
<div>
<Form.Item label={t("jobs.fields.csr")} name="csr">
<Input />
</Form.Item>
<Form.Item label={t("jobs.fields.loss_desc")} name="loss_desc">
<Input />
</Form.Item>
TODO How to handle different taxes and marking them as exempt?
{
// <Form.Item label={t("jobs.fields.exempt")}>
// {getFieldDecorator("exempt", {
// initialValue: job.exempt
// })(<Input name='exempt' />)}
// </Form.Item>
}
<Form.Item label={t("jobs.fields.ponumber")} name="po_number">
<Input />
</Form.Item>
<Form.Item label={t("jobs.fields.unitnumber")} name="unit_number">
<Input />
</Form.Item>
<Form.Item
label={t("jobs.fields.specialcoveragepolicy")}
valuePropName="checked"
name="special_coverage_policy"
>
<Switch />
</Form.Item>
<Form.Item label={t("jobs.fields.kmin")} name="kmin">
<Input />
</Form.Item>
<Form.Item label={t("jobs.fields.kmout")} name="kmout">
<Input />
</Form.Item>
<Form.Item label={t("jobs.fields.referralsource")} name="referral_source">
<FormRow>
<Form.Item label={t("jobs.fields.csr")} name='csr'>
<Input />
</Form.Item>
<Form.Item label={t("jobs.fields.ponumber")} name='po_number'>
<Input />
</Form.Item>
<Form.Item label={t("jobs.fields.unitnumber")} name='unit_number'>
<Input />
</Form.Item>
</FormRow>
<FormRow>
<Form.Item label={t("jobs.fields.kmin")} name='kmin'>
<InputNumber precision={1} />
</Form.Item>
<Form.Item label={t("jobs.fields.kmout")} name='kmout'>
<InputNumber precision={1} />
</Form.Item>
<Form.Item
label={t("jobs.fields.exempt")}
valuePropName='checked'
name='exempt'>
<Switch />
</Form.Item>
<Form.Item
label={t("jobs.fields.specialcoveragepolicy")}
valuePropName='checked'
name='special_coverage_policy'>
<Switch />
</Form.Item>
</FormRow>
<Form.Item label={t("jobs.fields.referralsource")} name='referral_source'>
<Input />
</Form.Item>
</div>

View File

@@ -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 (
<div>
<Form.Item label={t("jobs.fields.ins_co_id")} name="ins_co_id">
<Input />
</Form.Item>
<Form.Item label={t("jobs.fields.policy_no")} name="policy_no">
<Input />
</Form.Item>
<Form.Item label={t("jobs.fields.clm_no")} name="clm_no">
<Input />
</Form.Item>
<Form.Item label={t("jobs.fields.regie_number")} name="regie_number">
<Input />
</Form.Item>
TODO: missing KOL field???
<Form.Item label={t("jobs.fields.loss_date")} name="loss_date">
<DatePicker />
</Form.Item>
DAMAGE {JSON.stringify(job.area_of_damage)}
CAA # seems not correct based on field mapping Class seems not correct
based on field mapping
<Form.Item label={t("jobs.fields.ins_co_nm")} name="ins_co_nm">
<Input />
</Form.Item>
<Form.Item label={t("jobs.fields.ins_addr1")} name="ins_addr1">
<Input />
</Form.Item>
<Form.Item label={t("jobs.fields.ins_city")} name="ins_city">
<Input />
</Form.Item>
<Form.Item label={t("jobs.fields.ins_ct_ln")} name="ins_ct_ln">
<Input />
</Form.Item>
<Form.Item label={t("jobs.fields.ins_ct_fn")} name="ins_ct_fn">
<Input />
</Form.Item>
<Form.Item label={t("jobs.fields.ins_ph1")} name="ins_ph1">
<FormItemPhone customInput={Input} />
</Form.Item>
<Form.Item
label={t("jobs.fields.ins_ea")}
name="ins_ea"
rules={[
{
type: "email",
message: "This is not a valid email address.",
},
]}
>
<FormItemEmail email={getFieldValue("ins_ea")} />
</Form.Item>
<Divider />
Appraiser Info
<Form.Item label={t("jobs.fields.est_co_nm")} name="est_co_nm">
<Input />
</Form.Item>
<Form.Item label={t("jobs.fields.est_ct_fn")} name="est_ct_fn">
<Input />
</Form.Item>
<Form.Item label={t("jobs.fields.est_ct_ln")} name="est_ct_ln">
<Input />
</Form.Item>
TODO: Field is pay date but title is inspection date. Likely incorrect?
<Form.Item label={t("jobs.fields.pay_date")} name="pay_date">
<Input />
</Form.Item>
<Form.Item label={t("jobs.fields.est_ph1")} name="est_ph1">
<Input />
</Form.Item>
<Form.Item
label={t("jobs.fields.est_ea")}
name="est_ea"
rules={[
{
type: "email",
message: "This is not a valid email address.",
},
]}
>
<FormItemEmail email={getFieldValue("est_ea")} />
</Form.Item>
<Form.Item label={t("jobs.fields.selling_dealer")} name="selling_dealer">
<Input />
</Form.Item>
<Form.Item
label={t("jobs.fields.servicing_dealer")}
name="servicing_dealer"
>
<Input />
</Form.Item>
<Form.Item
label={t("jobs.fields.selling_dealer_contact")}
name="selling_dealer_contact"
>
<Input />
</Form.Item>
<Form.Item
label={t("jobs.fields.servicing_dealer_contact")}
name="servicing_dealer_contact"
>
<Input />
</Form.Item>
TODO: Adding servicing/selling dealer contact info?
<FormRow header={t("jobs.forms.inscoinfo")}>
<Form.Item label={t("jobs.fields.ins_co_id")} name='ins_co_id'>
<Input />
</Form.Item>
<Form.Item label={t("jobs.fields.ins_co_nm")} name='ins_co_nm'>
<Input />
</Form.Item>
<Form.Item label={t("jobs.fields.ins_addr1")} name='ins_addr1'>
<Input />
</Form.Item>
<Form.Item label={t("jobs.fields.ins_city")} name='ins_city'>
<Input />
</Form.Item>
</FormRow>
<FormRow>
<Form.Item label={t("jobs.fields.ins_ct_ln")} name='ins_ct_ln'>
<Input />
</Form.Item>
<Form.Item label={t("jobs.fields.ins_ct_fn")} name='ins_ct_fn'>
<Input />
</Form.Item>
<Form.Item label={t("jobs.fields.ins_ph1")} name='ins_ph1'>
<FormItemPhone customInput={Input} />
</Form.Item>
<Form.Item
label={t("jobs.fields.ins_ea")}
name='ins_ea'
rules={[
{
type: "email",
message: "This is not a valid email address.",
},
]}>
<FormItemEmail email={getFieldValue("ins_ea")} />
</Form.Item>
</FormRow>
<FormRow header={t("jobs.forms.claiminfo")}>
<Form.Item label={t("jobs.fields.clm_no")} name='clm_no'>
<Input />
</Form.Item>
<Form.Item label={t("jobs.fields.policy_no")} name='policy_no'>
<Input />
</Form.Item>
<Form.Item label={t("jobs.fields.regie_number")} name='regie_number'>
<Input />
</Form.Item>
</FormRow>
<FormRow header={t("jobs.forms.lossinfo")}>
<div style={{ display: "inline", height: "8rem" }}>
{job.area_of_damage ? (
<Car
dmg1={job.area_of_damage.impact1 || null}
dmg2={job.area_of_damage.impact2 || null}
/>
) : (
t("jobs.errors.nodamage")
)}
</div>
<Form.Item label={t("jobs.fields.loss_desc")} name='loss_desc'>
<Input />
</Form.Item>
<Form.Item label={t("jobs.fields.loss_date")} name='loss_date'>
<DatePicker />
</Form.Item>
</FormRow>
<FormRow header={t("jobs.forms.appraiserinfo")}>
<Form.Item label={t("jobs.fields.est_co_nm")} name='est_co_nm'>
<Input />
</Form.Item>
<Form.Item label={t("jobs.fields.est_ct_fn")} name='est_ct_fn'>
<Input />
</Form.Item>
<Form.Item label={t("jobs.fields.est_ct_ln")} name='est_ct_ln'>
<Input />
</Form.Item>
<Form.Item label={t("jobs.fields.est_ph1")} name='est_ph1'>
<Input />
</Form.Item>
<Form.Item
label={t("jobs.fields.est_ea")}
name='est_ea'
rules={[
{
type: "email",
message: "This is not a valid email address.",
},
]}>
<FormItemEmail email={getFieldValue("est_ea")} />
</Form.Item>
</FormRow>
<FormRow header='TODO: TO BE PLACED'>
<Form.Item label={t("jobs.fields.pay_date")} name='pay_date'>
<Input />
</Form.Item>
<Form.Item
label={t("jobs.fields.selling_dealer")}
name='selling_dealer'>
<Input />
</Form.Item>
<Form.Item
label={t("jobs.fields.servicing_dealer")}
name='servicing_dealer'>
<Input />
</Form.Item>
<Form.Item
label={t("jobs.fields.selling_dealer_contact")}
name='selling_dealer_contact'>
<Input />
</Form.Item>
<Form.Item
label={t("jobs.fields.servicing_dealer_contact")}
name='servicing_dealer_contact'>
<Input />
</Form.Item>
TODO: Adding servicing/selling dealer contact info?
</FormRow>
</div>
);
}

View File

@@ -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 (
<div>
{header ? <Typography.Title level={4}>{header}</Typography.Title> : null}
<Row {...rowGutter}>
{children.map((c, idx) => (
<Col key={idx} {...colSpan(c.props && c.props.maxspan)}>
{c}
</Col>
))}
</Row>
</div>
);
}

View File

@@ -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}
/>

View File

@@ -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";

View File

@@ -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";

View File

@@ -54,10 +54,6 @@ export function SignInComponent({
});
}
const handleLogin = () => {
form.submit();
};
if (currentUser.authorized === true) return <Redirect to='/manage' />;
return (
<div className='login-container'>

View File

@@ -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({
<JobLineUpsertModalContainer />
<Form
form={form}
//onFieldsChange={(a, b) => 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,
}}>
<FormFieldsChanged form={form} />
<JobsDetailHeader
job={job}
mutationConvertJob={mutationConvertJob}
@@ -221,7 +217,7 @@ export function JobsDetailPage({
</span>
}
key='dates'>
<JobsDetailDatesComponent job={job} />}
<JobsDetailDatesComponent job={job} />
</Tabs.TabPane>
<Tabs.TabPane
tab={

View File

@@ -12,7 +12,7 @@ import ChatAffixContainer from "../../components/chat-affix/chat-affix.container
import ConflictComponent from "../../components/conflict/conflict.component";
import ErrorBoundary from "../../components/error-boundary/error-boundary.component";
import FcmNotification from "../../components/fcm-notification/fcm-notification.component";
import FooterComponent from "../../components/footer/footer.component";
//import FooterComponent from "../../components/footer/footer.component";
//Component Imports
import HeaderContainer from "../../components/header/header.container";
import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
@@ -110,7 +110,7 @@ const ShopCsiPageContainer = lazy(() =>
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) => {

View File

@@ -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;
}

View File

@@ -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?",

View File

@@ -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?",

View File

@@ -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?",