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

BOD-34 Basics of print center => redux setup, container/base component.

Browse Source
This commit is contained in:
Patrick Fic
2020-04-28 09:04:47 -07:00
parent 0e12ae35c9
commit b47767e86c
15 changed files with 335 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
bodyshop_translations.babel
View File

@@ -11357,6 +11357,37 @@
</folder_node>
</children>
</folder_node>
<folder_node>
<name>printcenter</name>
<children>
<folder_node>
<name>labels</name>
<children>
<concept_node>
<name>title</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>
</children>
</folder_node>
<folder_node>
<name>production</name>
<children>

2
client/package.json
View File

@@ -1,6 +1,6 @@
{
"name": "bodyshop",
"version": "0.1.0",
"version": "0.1.0001",
"private": true,
"proxy": "https://localhost:5000",
"dependencies": {

112
client/src/components/job-detail-cards/job-detail-cards.component.jsx
View File

@@ -2,11 +2,11 @@ import {
EditFilled,
FileImageFilled,
PrinterFilled,
ShoppingFilled
ShoppingFilled,
} from "@ant-design/icons";
import { useQuery } from "@apollo/react-hooks";
import { Button, PageHeader, Tag } from "antd";
import React, { useState } from "react";
import React from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
@@ -15,7 +15,6 @@ import { setModalContext } from "../../redux/modals/modals.actions";
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 ScheduleJobModalContainer from "../schedule-job-modal/schedule-job-modal.container";
import JobDetailCardsCustomerComponent from "./job-detail-cards.customer.component";
import JobDetailCardsDamageComponent from "./job-detail-cards.damage.component";
import JobDetailCardsDatesComponent from "./job-detail-cards.dates.component";
@@ -26,46 +25,44 @@ import JobDetailCardsPartsComponent from "./job-detail-cards.parts.component";
import "./job-detail-cards.styles.scss";
import JobDetailCardsTotalsComponent from "./job-detail-cards.totals.component";
const mapDispatchToProps = dispatch => ({
setInvoiceEnterContext: context =>
const mapDispatchToProps = (dispatch) => ({
setInvoiceEnterContext: (context) =>
dispatch(setModalContext({ context: context, modal: "invoiceEnter" })),
setNoteUpsertContext: context =>
dispatch(setModalContext({ context: context, modal: "noteUpsert" }))
setNoteUpsertContext: (context) =>
dispatch(setModalContext({ context: context, modal: "noteUpsert" })),
setPrintCenterContext: (context) =>
dispatch(setModalContext({ context: context, modal: "printCenter" })),
});
export function JobDetailCards({
selectedJob,
setInvoiceEnterContext,
setNoteUpsertContext
setNoteUpsertContext,
setPrintCenterContext,
}) {
const { loading, error, data, refetch } = useQuery(QUERY_JOB_CARD_DETAILS, {
fetchPolicy: "network-only",
variables: { id: selectedJob },
skip: !selectedJob
skip: !selectedJob,
});
const scheduleModalState = useState(false);
const { t } = useTranslation();
if (!selectedJob) {
return <div>{t("jobs.errors.nojobselected")}</div>;
}
if (loading) return <LoadingSpinner />;
if (error) return <AlertComponent message={error.message} type="error" />;
if (error) return <AlertComponent message={error.message} type='error' />;
return (
<div className="job-cards-container">
<div className='job-cards-container'>
<NoteUpsertModal />
<ScheduleJobModalContainer
scheduleModalState={scheduleModalState}
jobId={data.jobs_by_pk.id}
refetch={refetch}
/>
<PageHeader
ghost={false}
tags={
<span key="job-status">
<span key='job-status'>
{data.jobs_by_pk.status ? (
<Tag color="blue">{data.jobs_by_pk.status}</Tag>
<Tag color='blue'>{data.jobs_by_pk.status}</Tag>
) : null}
</span>
}
@@ -84,89 +81,66 @@ export function JobDetailCards({
}
extra={[
<Button
key="schedule"
key='schedule'
//TODO Enabled logic based on status.
onClick={() => {
scheduleModalState[1](true);
}}
>
onClick={() => {}}>
{t("jobs.actions.schedule")}
</Button>,
<Link
key="documents"
to={`/manage/jobs/${data.jobs_by_pk.id}?documents`}
>
key='documents'
to={`/manage/jobs/${data.jobs_by_pk.id}?documents`}>
<Button>
<FileImageFilled />
{t("jobs.actions.addDocuments")}
</Button>
</Link>,
<Button key="printing">
<Button
onClick={() => {
setPrintCenterContext({
actions: { refetch: refetch },
context: {
id: data.jobs_by_pk.id,
type: "job",
},
});
}}
key='printing'>
<PrinterFilled />
{t("jobs.actions.printCenter")}
</Button>,
<Button
key="notes"
actiontype="addNote"
key='notes'
actiontype='addNote'
onClick={() => {
setNoteUpsertContext({
actions: { refetch: refetch },
context: {
jobId: data.jobs_by_pk.id
}
jobId: data.jobs_by_pk.id,
},
});
}}
>
}}>
<EditFilled />
{t("jobs.actions.addNote")}
</Button>,
<Button
key="postinvoices"
key='postinvoices'
onClick={() => {
setInvoiceEnterContext({
actions: { refetch: refetch },
context: {
job: data.jobs_by_pk
}
job: data.jobs_by_pk,
},
});
}}
>
}}>
<ShoppingFilled />
{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>
// )
}
<section className="job-cards">
</Button>,
]}>
<section className='job-cards'>
<JobDetailCardsCustomerComponent
loading={loading}
data={data ? data.jobs_by_pk : null}
/>
{
// <JobDetailCardsVehicleComponent
// loading={loading}
// data={data ? data.jobs_by_pk : null}
// />
}
<JobDetailCardsInsuranceComponent
loading={loading}

8
client/src/components/print-center-modal/print-center-modal.component.jsx Normal file
View File

@@ -0,0 +1,8 @@
import React from "react";
import { useTranslation } from "react-i18next";
export default function PrintCenterModalComponent({ context }) {
const { t } = useTranslation();
const { type, id } = context;
return <div>{`${type} - ${id}`}</div>;
}

54
client/src/components/print-center-modal/print-center-modal.container.jsx Normal file
View File

@@ -0,0 +1,54 @@
import { Modal } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { setEmailOptions } from "../../redux/email/email.actions";
import { toggleModalVisible } from "../../redux/modals/modals.actions";
import { selectPrintCenter } from "../../redux/modals/modals.selectors";
import {
selectBodyshop,
selectCurrentUser,
} from "../../redux/user/user.selectors";
import PrintCenterModalComponent from "./print-center-modal.component";
const mapStateToProps = createStructuredSelector({
currentUser: selectCurrentUser,
bodyshop: selectBodyshop,
printCenterModal: selectPrintCenter,
});
const mapDispatchToProps = (dispatch) => ({
setEmailOptions: (e) => dispatch(setEmailOptions(e)),
toggleModalVisible: () => dispatch(toggleModalVisible("printCenter")),
});
export function PrintCenterModalContainer({
printCenterModal,
toggleModalVisible,
currentUser,
bodyshop,
setEmailOptions,
}) {
const { t } = useTranslation();
const { visible, context, actions } = printCenterModal;
// const { jobId, linesToOrder } = context;
// const { refetch } = actions;
return (
<Modal
visible={visible}
onCancel={() => toggleModalVisible()}
width='90%'
title={t("printcenter.labels.title")}
destroyOnClose>
<PrintCenterModalComponent context={context} />
</Modal>
);
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(PrintCenterModalContainer);

18
client/src/pages/manage/manage.page.component.jsx
View File

@@ -9,6 +9,7 @@ import HeaderContainer from "../../components/header/header.container";
import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
import "./manage.page.styles.scss";
import BreadCrumbs from "../../components/breadcrumbs/breadcrumbs.component";
import PrintCenterModalContainer from "../../components/print-center-modal/print-center-modal.container";
const ManageRootPage = lazy(() =>
import("../manage-root/manage-root.page.container")
@@ -99,19 +100,18 @@ export default function Manage({ match }) {
</Header>
<Layout>
<Content
className="content-container"
style={{ padding: "0em 4em 4em" }}
>
className='content-container'
style={{ padding: "0em 4em 4em" }}>
<ErrorBoundary>
<Suspense
fallback={
<LoadingSpinner message={t("general.labels.loadingapp")} />
}
>
}>
<BreadCrumbs />
<EnterInvoiceModalContainer />
<EmailOverlayContainer />
<TimeTicketModalContainer />
<PrintCenterModalContainer />
<Route exact path={`${match.path}`} component={ManageRootPage} />
<Route exact path={`${match.path}/jobs`} component={JobsPage} />
<Switch>
@@ -177,10 +177,10 @@ export default function Manage({ match }) {
component={ProductionListPage}
/>
<Route
exact
path={`${match.path}/production/board`}
component={ProductionBoardPage}
/>
exact
path={`${match.path}/production/board`}
component={ProductionBoardPage}
/>
<Route
exact
path={`${match.path}/vehicles/:vehId`}

1
client/src/redux/modals/modals.reducer.js
View File

@@ -16,6 +16,7 @@ const INITIAL_STATE = {
schedule: { ...baseModal },
partsOrder: { ...baseModal },
timeTicket: { ...baseModal },
printCenter: {...baseModal}
};
const modalsReducer = (state = INITIAL_STATE, action) => {

3
client/src/redux/modals/modals.selectors.js
View File

@@ -35,4 +35,7 @@ export const selectPartsOrder = createSelector(
export const selectTimeTicket = createSelector(
[selectModals],
modals => modals.timeTicket
);export const selectPrintCenter = createSelector(
[selectModals],
modals => modals.printCenter
);

5
client/src/translations/en_us/common.json
View File

@@ -732,6 +732,11 @@
"created": "Parts order created successfully. "
}
},
"printcenter": {
"labels": {
"title": "Print Center"
}
},
"production": {
"actions": {
"addcolumns": "Add Columns",

5
client/src/translations/es/common.json
View File

@@ -732,6 +732,11 @@
"created": "Pedido de piezas creado con éxito."
}
},
"printcenter": {
"labels": {
"title": ""
}
},
"production": {
"actions": {
"addcolumns": "",

5
client/src/translations/fr/common.json
View File

@@ -732,6 +732,11 @@
"created": "Commande de pièces créée avec succès."
}
},
"printcenter": {
"labels": {
"title": ""
}
},
"production": {
"actions": {
"addcolumns": "",

11
client/templates/appointment_reminder/appointment_reminder.query.gql Normal file
View File

@@ -0,0 +1,11 @@
query EMAIL_APPOINTMENT_CONFIRMATION($id: uuid!) {
appointments_by_pk(id: $id) {
start
title
job {
ownr_fn
ownr_ln
ownr_ea
}
}
}

8
client/templates/appointment_reminder/appointment_reminder.template.html Normal file
View File

@@ -0,0 +1,8 @@
<div style="font-family: Arial, Helvetica, sans-serif;">
<p style="text-align: center;">Hello {{appointments_by_pk.job.ownr_fn}},</p>
<p style="text-align: center;">
This is a reminder that you have an appointment at
{{appointments_by_pk.start}} to bring your car in for repair. Please email
us at {{bodyshop.email}} if you can't make it.&nbsp;
</p>
</div>

29
client/templates/parts_order_confirmation/parts_order_confirmation.query.gql Normal file
View File

@@ -0,0 +1,29 @@
query REPORT_QUERY_PARTS_ORDER_BY_PK($id: uuid!) {
parts_orders_by_pk(id: $id) {
job {
id
vehicle {
id
v_model_desc
v_make_desc
v_model_yr
v_vin
}
ro_number
est_number
}
id
deliver_by
parts_order_lines {
id
db_price
act_price
line_desc
line_remarks
oem_partno
status
}
status
user_email
}
}

122
client/templates/parts_order_confirmation/parts_order_confirmation.template.html Normal file
View File

@@ -0,0 +1,122 @@
<div style="font-family: Arial, Helvetica, sans-serif;">
<p style="text-align: center;">
<span><strong>Deliver By: {{parts_orders_by_pk.deliver_by}}</strong></span>
</p>
<table
style="
border-collapse: collapse;
width: 85%;
height: 86px;
border-color: initial;
border-style: solid;
margin-left: auto;
margin-right: auto;
"
>
<tbody>
<tr style="height: 22px;">
<td
style="
width: 33.7389%;
text-align: center;
padding: 7px;
height: 22px;
"
>
<strong>Line Description</strong>
</td>
<td
style="
width: 22.0208%;
text-align: center;
padding-top: 7px;
padding-right: 7px;
padding-bottom: 7px;
height: 22px;
"
>
<strong>Part #</strong>
</td>
<td
style="
width: 12.1897%;
text-align: center;
padding: 7px;
height: 22px;
"
>
<strong>Price</strong>
</td>
<td
style="
width: 32.0506%;
text-align: center;
padding: 7px;
height: 22px;
"
>
<strong>Line Remarks</strong>
</td>
</tr>
<tr style="height: 21px; display: none;">
<td style="height: 21px; display: none; width: 33.7389%;">
<span>{{#each parts_orders_by_pk.parts_order_lines}}</span>
</td>
</tr>
<tr style="height: 22px;">
<td
style="
width: 33.7389%;
text-align: center;
padding: 7px;
height: 22px;
border-style: solid;
border-width: 1px;
"
>
<span>{{this.line_desc}}</span>
</td>
<td
style="
width: 22.0208%;
text-align: center;
padding: 7px;
height: 22px;
border-style: solid;
border-width: 1px;
"
>
<span>{{this.oem_partno}}</span>
</td>
<td
style="
width: 12.1897%;
text-align: center;
padding: 7px;
height: 22px;
border-style: solid;
border-width: 1px;
"
>
<span>${{this.act_price}}</span>
</td>
<td
style="
width: 32.0506%;
text-align: center;
padding: 7px;
height: 22px;
border-style: solid;
border-width: 1px;
"
>
<span>{{this.line_remarks}}</span>
</td>
</tr>
<tr style="height: 21px; display: none;">
<td style="height: 21px; width: 33.7389%;"><span>{{/each}}</span></td>
</tr>
</tbody>
</table>
<p>Order Placed by {{parts_orders_by_pk.user_email}}.</p>
</div>