Replaced null coalescence. Updated dates components.

This commit is contained in:
Patrick Fic
2020-01-24 09:41:35 -08:00
parent fbf8931f68
commit 32ce90ec9c
17 changed files with 550 additions and 87 deletions

View File

@@ -63,7 +63,7 @@ export default function CurrentUserDropdown() {
</Col>
<Col span={16}>
<Link to='/manage/profile'>
{currentUser?.displayName ?? t("general.labels.unknown")}
{currentUser?.displayName || t("general.labels.unknown")}
</Link>
</Col>
</Row>

View File

@@ -1,26 +1,24 @@
import React, { useState } from "react";
import { Link } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { useQuery } from "@apollo/react-hooks";
import AlertComponent from "../alert/alert.component";
import { Button, Icon, PageHeader, Tag } from "antd";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import { QUERY_JOB_CARD_DETAILS } from "../../graphql/jobs.queries";
import { PageHeader, Button, Descriptions, Tag, Icon } from "antd";
import AlertComponent from "../alert/alert.component";
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
import NoteUpsertModal from "../note-upsert-modal/note-upsert-modal.container";
//import JobDetailCardsHeaderComponent from "./job-detail-cards.header.component";
import JobDetailCardsCustomerComponent from "./job-detail-cards.customer.component";
import JobDetailCardsVehicleComponent from "./job-detail-cards.vehicle.component";
import JobDetailCardsInsuranceComponent from "./job-detail-cards.insurance.component";
import JobDetailCardsDatesComponent from "./job-detail-cards.dates.component";
import JobDetailCardsPartsComponent from "./job-detail-cards.parts.component";
import JobDetailCardsNotesComponent from "./job-detail-cards.notes.component";
import JobDetailCardsDamageComponent from "./job-detail-cards.damage.component";
import JobDetailCardsTotalsComponent from "./job-detail-cards.totals.component";
import JobDetailCardsDatesComponent from "./job-detail-cards.dates.component";
import JobDetailCardsDocumentsComponent from "./job-detail-cards.documents.component";
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
import JobDetailCardsInsuranceComponent from "./job-detail-cards.insurance.component";
import JobDetailCardsNotesComponent from "./job-detail-cards.notes.component";
import JobDetailCardsPartsComponent from "./job-detail-cards.parts.component";
import "./job-detail-cards.styles.scss";
import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
import NoteUpsertModal from "../note-upsert-modal/note-upsert-modal.container";
import JobDetailCardsTotalsComponent from "./job-detail-cards.totals.component";
export default function JobDetailCards({ selectedJob }) {
const { loading, error, data, refetch } = useQuery(QUERY_JOB_CARD_DETAILS, {
@@ -95,33 +93,38 @@ export default function JobDetailCards({ selectedJob }) {
{t("jobs.actions.postInvoices")}
</Button>
]}>
{loading ? (
<LoadingSkeleton />
) : (
<Descriptions size='small' column={3}>
<Descriptions.Item label='Created'>Lili Qu</Descriptions.Item>
<Descriptions.Item label='Association'>421421</Descriptions.Item>
<Descriptions.Item label='Creation Time'>
2017-01-10
</Descriptions.Item>
<Descriptions.Item label='Effective Time'>
2017-10-10
</Descriptions.Item>
<Descriptions.Item label='Remarks'>
Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
</Descriptions.Item>
</Descriptions>
)}
{
// loading ? (
// <LoadingSkeleton />
// ) : (
// <Descriptions size='small' column={3}>
// <Descriptions.Item label='Created'>Lili Qu</Descriptions.Item>
// <Descriptions.Item label='Association'>421421</Descriptions.Item>
// <Descriptions.Item label='Creation Time'>
// 2017-01-10
// </Descriptions.Item>
// <Descriptions.Item label='Effective Time'>
// 2017-10-10
// </Descriptions.Item>
// <Descriptions.Item label='Remarks'>
// Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
// </Descriptions.Item>
// </Descriptions>
// )
}
<section className='job-cards'>
<JobDetailCardsCustomerComponent
loading={loading}
data={data ? data.jobs_by_pk : null}
/>
<JobDetailCardsVehicleComponent
loading={loading}
data={data ? data.jobs_by_pk : null}
/>
{
// <JobDetailCardsVehicleComponent
// loading={loading}
// data={data ? data.jobs_by_pk : null}
// />
}
<JobDetailCardsInsuranceComponent
loading={loading}
data={data ? data.jobs_by_pk : null}

View File

@@ -1,7 +1,8 @@
import React from "react";
import { useTranslation } from "react-i18next";
import CardTemplate from "./job-detail-cards.template.component";
import { Link } from "react-router-dom";
import PhoneFormatter from "../../utils/PhoneFormatter";
import CardTemplate from "./job-detail-cards.template.component";
export default function JobDetailCardsCustomerComponent({ loading, data }) {
const { t } = useTranslation();
@@ -10,28 +11,34 @@ export default function JobDetailCardsCustomerComponent({ loading, data }) {
<CardTemplate
loading={loading}
title={t("jobs.labels.cards.customer")}
extraLink={data?.owner ? `/manage/owners/${data?.owner?.id}` : null}>
extraLink={data && data.owner ? `/manage/owners/${data.owner.id}` : null}>
{data ? (
<span>
<div>{`${data?.ownr_fn ?? ""} ${data.ownr_ln ?? ""}`}</div>
<div>{`${data.ownr_fn || ""} ${data.ownr_ln || ""}`}</div>
<div>
{t("jobs.fields.phoneshort")}:
<PhoneFormatter>{`${data?.ownr_ph1 ??
<PhoneFormatter>{`${data.ownr_ph1 ||
t("general.labels.na")}`}</PhoneFormatter>
</div>
<div>
{t("jobs.fields.ownr_ea")}:
{data?.ownr_ea ? (
{data.ownr_ea ? (
<a href={`mailto:${data.ownr_ea}`}>
<span>{`${data?.ownr_ea ?? ""}`}</span>
<span>{`${data.ownr_ea || ""}`}</span>
</a>
) : (
t("general.labels.na")
)}
</div>
<div>{`${data?.owner?.preferred_contact ?? ""}`}</div>
<div>{`${(data.owner && data.owner.preferred_contact) || ""}`}</div>
{data.vehicle ? (
<Link to={`/manage/vehicles/${data.vehicle.id}`}>
{`${data.vehicle.v_model_yr || ""} ${data.vehicle.v_make_desc ||
""} ${data.vehicle.v_model_desc || ""}`}
</Link>
) : (
<span>{t("jobs.errors.novehicle")}</span>
)}
</span>
) : null}
</CardTemplate>

View File

@@ -11,13 +11,112 @@ export default function JobDetailCardsDatesComponent({ loading, data }) {
<CardTemplate loading={loading} title={t("jobs.labels.cards.dates")}>
{data ? (
<Timeline>
<Timeline.Item>
Actual In <Moment format='MM/DD/YYYY'>{data?.actual_in}</Moment>
</Timeline.Item>
<Timeline.Item>
Scheduled Completion
<Moment format='MM/DD/YYYY'>{data?.scheduled_completion}</Moment>
</Timeline.Item>
{!(
data.actual_in ||
data.scheduled_completion ||
data.scheduled_in ||
data.actual_completion ||
data.scheduled_delivery ||
data.actual_delivery ||
data.date_estimated ||
data.date_open ||
data.date_scheduled ||
data.date_invoiced ||
data.date_closed ||
data.date_exported
) ? (
<div>{t("jobs.errors.nodates")}</div>
) : null}
{data.actual_in ? (
<Timeline.Item>
{t("jobs.fields.actual_in")}
<Moment format='MM/DD/YYYY'>{data.actual_in || ""}</Moment>
</Timeline.Item>
) : null}
{data.scheduled_completion ? (
<Timeline.Item>
{t("jobs.fields.scheduled_completion")}
<Moment format='MM/DD/YYYY'>
{data.scheduled_completion || ""}
</Moment>
</Timeline.Item>
) : null}
{data.scheduled_in ? (
<Timeline.Item>
{t("jobs.fields.scheduled_in")}
<Moment format='MM/DD/YYYY'>{data.scheduled_in || ""}</Moment>
</Timeline.Item>
) : null}
{data.actual_completion ? (
<Timeline.Item>
{t("jobs.fields.actual_completion")}
<Moment format='MM/DD/YYYY'>
{data.actual_completion || ""}
</Moment>
</Timeline.Item>
) : null}
{data.scheduled_delivery ? (
<Timeline.Item>
{t("jobs.fields.scheduled_delivery")}
<Moment format='MM/DD/YYYY'>
{data.scheduled_delivery || ""}
</Moment>
</Timeline.Item>
) : null}
{data.actual_delivery ? (
<Timeline.Item>
{t("jobs.fields.actual_delivery")}
<Moment format='MM/DD/YYYY'>{data.actual_delivery || ""}</Moment>
</Timeline.Item>
) : null}
{data.date_estimated ? (
<Timeline.Item>
{t("jobs.fields.date_estimated")}
<Moment format='MM/DD/YYYY'>{data.date_estimated || ""}</Moment>
</Timeline.Item>
) : null}
{data.date_open ? (
<Timeline.Item>
{t("jobs.fields.date_open")}
<Moment format='MM/DD/YYYY'>{data.date_open || ""}</Moment>
</Timeline.Item>
) : null}
{data.date_scheduled ? (
<Timeline.Item>
{t("jobs.fields.date_scheduled")}
<Moment format='MM/DD/YYYY'>{data.date_scheduled || ""}</Moment>
</Timeline.Item>
) : null}
{data.date_invoiced ? (
<Timeline.Item>
{t("jobs.fields.date_invoiced")}
<Moment format='MM/DD/YYYY'>{data.date_invoiced || ""}</Moment>
</Timeline.Item>
) : null}
{data.date_closed ? (
<Timeline.Item>
{t("jobs.fields.date_closed")}
<Moment format='MM/DD/YYYY'>{data.date_closed || ""}</Moment>
</Timeline.Item>
) : null}
{data.date_exported ? (
<Timeline.Item>
{t("jobs.fields.date_exported")}
<Moment format='MM/DD/YYYY'>{data.date_exported || ""}</Moment>
</Timeline.Item>
) : null}
</Timeline>
) : null}
</CardTemplate>

View File

@@ -10,16 +10,16 @@ export default function JobDetailCardsInsuranceComponent({ loading, data }) {
<CardTemplate loading={loading} title={t("jobs.labels.cards.insurance")}>
{data ? (
<span>
<div>{data?.ins_co_nm ?? t("general.labels.unknown")}</div>
<div>{data?.clm_no ?? t("general.labels.unknown")}</div>
<div>{data?.ins_co_nm || t("general.labels.unknown")}</div>
<div>{data?.clm_no || t("general.labels.unknown")}</div>
<div>
{t("jobs.labels.cards.filehandler")}
{data?.ins_ea ? (
<a href={`mailto:${data.ins_ea}`}>
<div>{`${data?.ins_ct_fn ?? ""} ${data?.ins_ct_ln ?? ""}`}</div>
<div>{`${data?.ins_ct_fn || ""} ${data?.ins_ct_ln || ""}`}</div>
</a>
) : (
<div>{`${data?.ins_ct_fn ?? ""} ${data?.ins_ct_ln ?? ""}`}</div>
<div>{`${data?.ins_ct_fn || ""} ${data?.ins_ct_ln || ""}`}</div>
)}
{data?.ins_ph1 ? (
<PhoneFormatter>{data?.ins_ph1}</PhoneFormatter>
@@ -31,10 +31,10 @@ export default function JobDetailCardsInsuranceComponent({ loading, data }) {
{t("jobs.labels.cards.appraiser")}
{data?.est_ea ? (
<a href={`mailto:${data.est_ea}`}>
<div>{`${data?.ins_ct_fn ?? ""} ${data?.ins_ct_ln ?? ""}`}</div>
<div>{`${data?.ins_ct_fn || ""} ${data?.ins_ct_ln || ""}`}</div>
</a>
) : (
<div>{`${data?.ins_ct_fn ?? ""} ${data?.ins_ct_ln ?? ""}`}</div>
<div>{`${data?.ins_ct_fn || ""} ${data?.ins_ct_ln || ""}`}</div>
)}
</div>
@@ -42,10 +42,10 @@ export default function JobDetailCardsInsuranceComponent({ loading, data }) {
{t("jobs.labels.cards.estimator")}
{data?.est_ea ? (
<a href={`mailto:${data.est_ea}`}>
<div>{`${data?.est_ct_fn ?? ""} ${data?.est_ct_ln ?? ""}`}</div>
<div>{`${data?.est_ct_fn || ""} ${data?.est_ct_ln || ""}`}</div>
</a>
) : (
<div>{`${data?.est_ct_fn ?? ""} ${data?.est_ct_ln ?? ""}`}</div>
<div>{`${data?.est_ct_fn || ""} ${data?.est_ct_ln || ""}`}</div>
)}
{data?.est_ph1 ? (
<PhoneFormatter>{data?.est_ph1}</PhoneFormatter>

View File

@@ -13,9 +13,9 @@ export default function JobDetailCardsVehicleComponent({ loading, data }) {
>
{data ? (
<span>
{data.vehicle?.v_model_yr ?? t("general.labels.na")}{" "}
{data.vehicle?.v_make_desc ?? t("general.labels.na")}{" "}
{data.vehicle?.v_model_desc ?? t("general.labels.na")}
{data.vehicle?.v_model_yr || t("general.labels.na")}{" "}
{data.vehicle?.v_make_desc || t("general.labels.na")}{" "}
{data.vehicle?.v_model_desc || t("general.labels.na")}
</span>
) : null}
</CardTemplate>

View File

@@ -91,9 +91,9 @@ function JobTombstone({ job, ...otherProps }) {
title={tombstoneTitle}
subTitle={
jobContext.owner
? (jobContext.owner?.first_name ?? "") +
? (jobContext.owner?.first_name || "") +
" " +
(jobContext.owner?.last_name ?? "")
(jobContext.owner?.last_name || "")
: t("jobs.errors.noowner")
}
tags={
@@ -133,10 +133,10 @@ function JobTombstone({ job, ...otherProps }) {
<Descriptions size='small' column={5}>
<Descriptions.Item label={t("jobs.fields.vehicle")}>
<Link to={`/manage/vehicles/${jobContext.vehicle?.id}`}>
{jobContext.vehicle?.v_model_yr ?? t("general.labels.na")}{" "}
{jobContext.vehicle?.v_make_desc ?? t("general.labels.na")}{" "}
{jobContext.vehicle?.v_model_desc ?? t("general.labels.na")} |{" "}
{jobContext.vehicle?.plate_no ?? t("general.labels.na")}
{jobContext.vehicle?.v_model_yr || t("general.labels.na")}{" "}
{jobContext.vehicle?.v_make_desc || t("general.labels.na")}{" "}
{jobContext.vehicle?.v_model_desc || t("general.labels.na")} |{" "}
{jobContext.vehicle?.plate_no || t("general.labels.na")}
</Link>
</Descriptions.Item>

View File

@@ -91,7 +91,7 @@ export default withRouter(function JobsList({
sortOrder:
state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
render: (text, record) => {
return record.job_status?.name ?? t("general.labels.na");
return record.job_status?.name || t("general.labels.na");
}
},

View File

@@ -16,10 +16,5 @@ export default function SignoutComponent() {
const { t } = useTranslation();
return (
<div>
{this.renderRedirect()}
<div onClick={signOut}>{t("user.actions.signout")}</div>
</div>
);
return <div onClick={signOut}>{t("user.actions.signout")}</div>;
}

View File

@@ -63,11 +63,11 @@ export default function WhiteBoardCard({ metadata }) {
<div>
<Card
title={
(metadata.ro_number ?? metadata.est_number) +
(metadata.ro_number || metadata.est_number) +
" | " +
(metadata.owner?.first_name ?? "") +
(metadata.owner?.first_name || "") +
" " +
(metadata.owner?.last_name ?? "")
(metadata.owner?.last_name || "")
}
style={{ width: 300, marginTop: 10 }}
bodyStyle={{ padding: 10 }}
@@ -87,15 +87,15 @@ export default function WhiteBoardCard({ metadata }) {
<Col span={18}>
<Row>
<WrappedSpan>
{metadata.vehicle?.v_model_yr ?? t("general.labels.na")}{" "}
{metadata.vehicle?.v_make_desc ?? t("general.labels.na")}{" "}
{metadata.vehicle?.v_model_desc ?? t("general.labels.na")}
{metadata.vehicle?.v_model_yr || t("general.labels.na")}{" "}
{metadata.vehicle?.v_make_desc || t("general.labels.na")}{" "}
{metadata.vehicle?.v_model_desc || t("general.labels.na")}
</WrappedSpan>
</Row>
{metadata.vehicle?.v_vin ? (
<Row>
<WrappedSpan>
VIN: {metadata.vehicle?.v_vin ?? t("general.labels.na")}
VIN: {metadata.vehicle?.v_vin || t("general.labels.na")}
</WrappedSpan>
</Row>
) : null}