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

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/breadcrumbs/breadcrumbs.styles.scss
View File

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

4
client/src/components/chat-affix/chat-affix.container.jsx
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) || []}

4
client/src/components/chat-affix/chat-affix.styles.scss Normal file
View File

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

50
client/src/components/form-fields-changed-alert/form-fields-changed-alert.component.jsx Normal file
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>
);
}

4
client/src/components/form-items-formatted/email-form-item.component.jsx
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>
) : (

1
client/src/components/job-damage-visual/job-damage-visual.component.jsx
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'

71
client/src/components/jobs-detail-claims/jobs-detail-claims.component.jsx
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>

222
client/src/components/jobs-detail-insurance/jobs-detail-insurance.component.jsx
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>
);
}

39
client/src/components/layout-form-row/layout-form-row.component.jsx Normal file
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>
);
}

2
client/src/components/schedule-calendar-wrapper/scheduler-calendar-wrapper.component.jsx
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}
/>

1
client/src/components/schedule-calendar/schedule-calendar.component.jsx
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";

1
client/src/components/schedule-day-view/schedule-day-view.component.jsx
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";

4
client/src/components/sign-in-form/sign-in-form.component.jsx
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'>