From b47767e86c564b8554ef77c43bd29f997569dd5e Mon Sep 17 00:00:00 2001 From: Patrick Fic Date: Tue, 28 Apr 2020 09:04:47 -0700 Subject: [PATCH] BOD-34 Basics of print center => redux setup, container/base component. --- bodyshop_translations.babel | 31 +++++ client/package.json | 2 +- .../job-detail-cards.component.jsx | 112 ++++++---------- .../print-center-modal.component.jsx | 8 ++ .../print-center-modal.container.jsx | 54 ++++++++ .../pages/manage/manage.page.component.jsx | 18 +-- client/src/redux/modals/modals.reducer.js | 1 + client/src/redux/modals/modals.selectors.js | 3 + client/src/translations/en_us/common.json | 5 + client/src/translations/es/common.json | 5 + client/src/translations/fr/common.json | 5 + .../appointment_reminder.query.gql | 11 ++ .../appointment_reminder.template.html | 8 ++ .../parts_order_confirmation.query.gql | 29 +++++ .../parts_order_confirmation.template.html | 122 ++++++++++++++++++ 15 files changed, 335 insertions(+), 79 deletions(-) create mode 100644 client/src/components/print-center-modal/print-center-modal.component.jsx create mode 100644 client/src/components/print-center-modal/print-center-modal.container.jsx create mode 100644 client/templates/appointment_reminder/appointment_reminder.query.gql create mode 100644 client/templates/appointment_reminder/appointment_reminder.template.html create mode 100644 client/templates/parts_order_confirmation/parts_order_confirmation.query.gql create mode 100644 client/templates/parts_order_confirmation/parts_order_confirmation.template.html diff --git a/bodyshop_translations.babel b/bodyshop_translations.babel index 8e8fc91e1..eda276430 100644 --- a/bodyshop_translations.babel +++ b/bodyshop_translations.babel @@ -11357,6 +11357,37 @@ + + printcenter + + + labels + + + title + false + + + + + + en-US + false + + + es-MX + false + + + fr-CA + false + + + + + + + production diff --git a/client/package.json b/client/package.json index 42403ed35..144ccfb3e 100644 --- a/client/package.json +++ b/client/package.json @@ -1,6 +1,6 @@ { "name": "bodyshop", - "version": "0.1.0", + "version": "0.1.0001", "private": true, "proxy": "https://localhost:5000", "dependencies": { diff --git a/client/src/components/job-detail-cards/job-detail-cards.component.jsx b/client/src/components/job-detail-cards/job-detail-cards.component.jsx index d6a9cef70..b00f73d94 100644 --- a/client/src/components/job-detail-cards/job-detail-cards.component.jsx +++ b/client/src/components/job-detail-cards/job-detail-cards.component.jsx @@ -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
{t("jobs.errors.nojobselected")}
; } if (loading) return ; - if (error) return ; + if (error) return ; return ( -
+
- + {data.jobs_by_pk.status ? ( - {data.jobs_by_pk.status} + {data.jobs_by_pk.status} ) : null} } @@ -84,89 +81,66 @@ export function JobDetailCards({ } extra={[ , + key='documents' + to={`/manage/jobs/${data.jobs_by_pk.id}?documents`}> , - , , - ]} - > - { - // loading ? ( - // - // ) : ( - // - // Lili Qu - // 421421 - // - // 2017-01-10 - // - // - // 2017-10-10 - // - // - // Gonghu Road, Xihu District, Hangzhou, Zhejiang, China - // - // - // ) - } - -
+ , + ]}> +
- { - // - } {`${type} - ${id}`}
; +} diff --git a/client/src/components/print-center-modal/print-center-modal.container.jsx b/client/src/components/print-center-modal/print-center-modal.container.jsx new file mode 100644 index 000000000..77826e76f --- /dev/null +++ b/client/src/components/print-center-modal/print-center-modal.container.jsx @@ -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 ( + toggleModalVisible()} + width='90%' + title={t("printcenter.labels.title")} + destroyOnClose> + + + ); +} + +export default connect( + mapStateToProps, + mapDispatchToProps +)(PrintCenterModalContainer); diff --git a/client/src/pages/manage/manage.page.component.jsx b/client/src/pages/manage/manage.page.component.jsx index 32bd51ae2..b77550d79 100644 --- a/client/src/pages/manage/manage.page.component.jsx +++ b/client/src/pages/manage/manage.page.component.jsx @@ -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 }) { + className='content-container' + style={{ padding: "0em 4em 4em" }}> - } - > + }> + @@ -177,10 +177,10 @@ export default function Manage({ match }) { component={ProductionListPage} /> + exact + path={`${match.path}/production/board`} + component={ProductionBoardPage} + /> { diff --git a/client/src/redux/modals/modals.selectors.js b/client/src/redux/modals/modals.selectors.js index 9f40c9f83..9c21e00dd 100644 --- a/client/src/redux/modals/modals.selectors.js +++ b/client/src/redux/modals/modals.selectors.js @@ -35,4 +35,7 @@ export const selectPartsOrder = createSelector( export const selectTimeTicket = createSelector( [selectModals], modals => modals.timeTicket +);export const selectPrintCenter = createSelector( + [selectModals], + modals => modals.printCenter ); \ No newline at end of file diff --git a/client/src/translations/en_us/common.json b/client/src/translations/en_us/common.json index 9a8bc618a..7b5f502f9 100644 --- a/client/src/translations/en_us/common.json +++ b/client/src/translations/en_us/common.json @@ -732,6 +732,11 @@ "created": "Parts order created successfully. " } }, + "printcenter": { + "labels": { + "title": "Print Center" + } + }, "production": { "actions": { "addcolumns": "Add Columns", diff --git a/client/src/translations/es/common.json b/client/src/translations/es/common.json index 233ceb192..d17fd6ef8 100644 --- a/client/src/translations/es/common.json +++ b/client/src/translations/es/common.json @@ -732,6 +732,11 @@ "created": "Pedido de piezas creado con éxito." } }, + "printcenter": { + "labels": { + "title": "" + } + }, "production": { "actions": { "addcolumns": "", diff --git a/client/src/translations/fr/common.json b/client/src/translations/fr/common.json index 0fb48b177..29a4a84bb 100644 --- a/client/src/translations/fr/common.json +++ b/client/src/translations/fr/common.json @@ -732,6 +732,11 @@ "created": "Commande de pièces créée avec succès." } }, + "printcenter": { + "labels": { + "title": "" + } + }, "production": { "actions": { "addcolumns": "", diff --git a/client/templates/appointment_reminder/appointment_reminder.query.gql b/client/templates/appointment_reminder/appointment_reminder.query.gql new file mode 100644 index 000000000..6e1c4f5a9 --- /dev/null +++ b/client/templates/appointment_reminder/appointment_reminder.query.gql @@ -0,0 +1,11 @@ +query EMAIL_APPOINTMENT_CONFIRMATION($id: uuid!) { + appointments_by_pk(id: $id) { + start + title + job { + ownr_fn + ownr_ln + ownr_ea + } + } +} diff --git a/client/templates/appointment_reminder/appointment_reminder.template.html b/client/templates/appointment_reminder/appointment_reminder.template.html new file mode 100644 index 000000000..705bb3e20 --- /dev/null +++ b/client/templates/appointment_reminder/appointment_reminder.template.html @@ -0,0 +1,8 @@ +
+

Hello {{appointments_by_pk.job.ownr_fn}},

+

+ 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.  +

+
diff --git a/client/templates/parts_order_confirmation/parts_order_confirmation.query.gql b/client/templates/parts_order_confirmation/parts_order_confirmation.query.gql new file mode 100644 index 000000000..6558056b0 --- /dev/null +++ b/client/templates/parts_order_confirmation/parts_order_confirmation.query.gql @@ -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 + } +} diff --git a/client/templates/parts_order_confirmation/parts_order_confirmation.template.html b/client/templates/parts_order_confirmation/parts_order_confirmation.template.html new file mode 100644 index 000000000..c17866942 --- /dev/null +++ b/client/templates/parts_order_confirmation/parts_order_confirmation.template.html @@ -0,0 +1,122 @@ +
+

+ Deliver By: {{parts_orders_by_pk.deliver_by}} +

+ + + + + + + + + + + + + + + + + + + + + +
+ Line Description + + Part # + + Price + + Line Remarks +
+ {{#each parts_orders_by_pk.parts_order_lines}} +
+ {{this.line_desc}} + + {{this.oem_partno}} + + ${{this.act_price}} + + {{this.line_remarks}} +
{{/each}}
+

Order Placed by {{parts_orders_by_pk.user_email}}.

+