From d515db6fc98bbd8ef46bd8d9fc64fa7ff6273943 Mon Sep 17 00:00:00 2001 From: Patrick Fic <> Date: Thu, 1 Apr 2021 14:48:55 -0700 Subject: [PATCH] More UI Fixes & Print Center IO-587 --- bodyshop_translations.babel | 173 ++++++++++++++ client/package.json | 1 - .../email-overlay/email-overlay.component.jsx | 35 +-- .../print-center-item.component.jsx | 36 +-- .../print-center-jobs.component.jsx | 77 ++++-- .../print-center-modal.styles.scss | 8 +- .../print-center-speed-print.component.jsx | 6 +- client/src/translations/en_us/common.json | 28 ++- client/src/translations/es/common.json | 12 +- client/src/translations/fr/common.json | 12 +- client/src/utils/TemplateConstants.js | 223 ++++++++++-------- 11 files changed, 434 insertions(+), 177 deletions(-) diff --git a/bodyshop_translations.babel b/bodyshop_translations.babel index 88008c551..365f84061 100644 --- a/bodyshop_translations.babel +++ b/bodyshop_translations.babel @@ -10357,6 +10357,27 @@ + + preview + false + + + + + + en-US + false + + + es-MX + false + + + fr-CA + false + + + @@ -26274,6 +26295,27 @@ + + csi_invitation + false + + + + + + en-US + false + + + es-MX + false + + + fr-CA + false + + + diagnostic_authorization false @@ -26972,6 +27014,137 @@ labels + + groups + + + authorization + false + + + + + + en-US + false + + + es-MX + false + + + fr-CA + false + + + + + financial + false + + + + + + en-US + false + + + es-MX + false + + + fr-CA + false + + + + + post + false + + + + + + en-US + false + + + es-MX + false + + + fr-CA + false + + + + + pre + false + + + + + + en-US + false + + + es-MX + false + + + fr-CA + false + + + + + ro + false + + + + + + en-US + false + + + es-MX + false + + + fr-CA + false + + + + + worksheet + false + + + + + + en-US + false + + + es-MX + false + + + fr-CA + false + + + + + misc false diff --git a/client/package.json b/client/package.json index 6622e8562..f3cba1809 100644 --- a/client/package.json +++ b/client/package.json @@ -13,7 +13,6 @@ "@stripe/react-stripe-js": "^1.4.0", "@stripe/stripe-js": "^1.12.1", "@tanem/react-nprogress": "^3.0.57", - "@tinymce/tinymce-react": "^3.10.3", "antd": "^4.13.1", "apollo-link-logger": "^2.0.0", "axios": "^0.21.1", diff --git a/client/src/components/email-overlay/email-overlay.component.jsx b/client/src/components/email-overlay/email-overlay.component.jsx index 2f7d18192..ff229cccf 100644 --- a/client/src/components/email-overlay/email-overlay.component.jsx +++ b/client/src/components/email-overlay/email-overlay.component.jsx @@ -1,6 +1,5 @@ import { UploadOutlined } from "@ant-design/icons"; -import { Editor } from "@tinymce/tinymce-react"; -import { Button, Card, Input, Select, Upload } from "antd"; +import { Button, Card, Divider, Input, Select, Upload } from "antd"; import React from "react"; import { useTranslation } from "react-i18next"; @@ -38,29 +37,19 @@ export default function EmailOverlayComponent({ onChange={(e) => handleConfigChange("subject", e.target.value)} name="subject" /> -
- DEVELOPER NOTE: Any edits made in the editor below will not be sent or - saved due to css inlining issues. -
- {t("emails.labels.preview")} +
+ + {t("emails.labels.preview")} + {item.title} ; return ( -
  • - {item.title} - - { - GenerateDocument( - { - name: item.key, - variables: { id: id }, - }, - { to: context.job && context.job.ownr_ea, subject: item.subject }, - "e" - ); - }} - /> - {loading && } +
  • + + {item.title} + + { + GenerateDocument( + { + name: item.key, + variables: { id: id }, + }, + { to: context.job && context.job.ownr_ea, subject: item.subject }, + "e" + ); + }} + /> + {loading && } +
  • ); } diff --git a/client/src/components/print-center-jobs/print-center-jobs.component.jsx b/client/src/components/print-center-jobs/print-center-jobs.component.jsx index 83f04819a..2422934aa 100644 --- a/client/src/components/print-center-jobs/print-center-jobs.component.jsx +++ b/client/src/components/print-center-jobs/print-center-jobs.component.jsx @@ -1,6 +1,6 @@ -import { Col, Collapse, Row } from "antd"; -import React from "react"; -import { useTranslation } from "react-i18next"; +import { Card, Col, Input, Row, Typography } from "antd"; +import _ from "lodash"; +import React, { useState } from "react"; import { connect } from "react-redux"; import { createStructuredSelector } from "reselect"; import { selectPrintCenter } from "../../redux/modals/modals.selectors"; @@ -8,45 +8,74 @@ import { TemplateList } from "../../utils/TemplateConstants"; import Jobd3RdPartyModal from "../job-3rd-party-modal/job-3rd-party-modal.component"; import PrintCenterItem from "../print-center-item/print-center-item.component"; import PrintCenterSpeedPrint from "../print-center-speed-print/print-center-speed-print.component"; - +import { useTranslation } from "react-i18next"; const mapStateToProps = createStructuredSelector({ printCenterModal: selectPrintCenter, }); const mapDispatchToProps = (dispatch) => ({}); -const colSpan = { md: { span: 24 }, lg: { span: 12 } }; - export function PrintCenterJobsComponent({ printCenterModal }) { - const { t } = useTranslation(); + const [search, setSearch] = useState(""); const { id: jobId } = printCenterModal.context; const tempList = TemplateList("job", {}); + const { t } = useTranslation(); const JobsReportsList = Object.keys(tempList).map((key) => { return tempList[key]; }); + const filteredJobsReportsList = + search !== "" + ? JobsReportsList.filter((r) => r.title.toLowerCase().includes(search)) + : JobsReportsList; + + //Group it, create cards, and then filter out. + + const grouped = _.groupBy(filteredJobsReportsList, "group"); + console.log("grouped :>> ", grouped); + return (
    - + - - - -
      - {JobsReportsList.map((item) => ( - - ))} -
    -
    - -
    + + setSearch(e.target.value)} + value={search} + /> + } + > + + {Object.keys(grouped).map((key) => ( + + + + {t(`printcenter.labels.groups.${key}`)} + +
      + {grouped[key].map((item) => ( + + ))} +
    +
    + + ))} +
    +
    +
    diff --git a/client/src/components/print-center-modal/print-center-modal.styles.scss b/client/src/components/print-center-modal/print-center-modal.styles.scss index 0303e1da3..73ff334d9 100644 --- a/client/src/components/print-center-modal/print-center-modal.styles.scss +++ b/client/src/components/print-center-modal/print-center-modal.styles.scss @@ -1,3 +1,7 @@ -.print-center-item > * { - padding: 0em 8px; +.print-center-list { + ul { + list-style-type: none; + margin: 0; + padding: 0; + } } diff --git a/client/src/components/print-center-speed-print/print-center-speed-print.component.jsx b/client/src/components/print-center-speed-print/print-center-speed-print.component.jsx index 090faee38..e2f6eadac 100644 --- a/client/src/components/print-center-speed-print/print-center-speed-print.component.jsx +++ b/client/src/components/print-center-speed-print/print-center-speed-print.component.jsx @@ -1,4 +1,4 @@ -import { Button, List, Typography } from "antd"; +import { Button, List, PageHeader } from "antd"; import React, { useState } from "react"; import { useTranslation } from "react-i18next"; import { connect } from "react-redux"; @@ -33,9 +33,7 @@ export function PrintCenterSpeedPrint({ bodyshop, jobId }) { return (
    - - {t("printcenter.labels.speedprint")} - + { subject: i18n.t("printcenter.jobs.casl_authorization"), key: "casl_authorization", disabled: false, + group: "authorization", }, diagnostic_authorization: { title: i18n.t("printcenter.jobs.diagnostic_authorization"), @@ -25,34 +26,7 @@ export const TemplateList = (type, context) => { subject: i18n.t("printcenter.jobs.diagnostic_authorization"), key: "diagnostic_authorization", disabled: false, - }, - job_notes: { - title: i18n.t("printcenter.jobs.job_notes"), - description: "All Jobs Notes", - subject: i18n.t("printcenter.jobs.job_notes"), - key: "job_notes", - disabled: false, - }, - ro_with_description: { - title: i18n.t("printcenter.jobs.ro_with_description"), - description: "All Jobs Notes", - subject: i18n.t("printcenter.jobs.ro_with_description"), - key: "ro_with_description", - disabled: false, - }, - window_tag: { - title: i18n.t("printcenter.jobs.window_tag"), - description: "All Jobs Notes", - subject: i18n.t("printcenter.jobs.window_tag"), - key: "window_tag", - disabled: false, - }, - payments_by_job: { - title: i18n.t("printcenter.jobs.payments_by_job"), - description: "All Jobs Notes", - subject: i18n.t("printcenter.jobs.payments_by_job"), - key: "payments_by_job", - disabled: false, + group: "authorization", }, appointment_reminder: { title: i18n.t("printcenter.jobs.appointment_reminder"), @@ -60,6 +34,112 @@ export const TemplateList = (type, context) => { subject: i18n.t("printcenter.jobs.appointment_reminder"), key: "appointment_reminder", disabled: false, + group: "pre", + }, + estimate_followup: { + title: i18n.t("printcenter.jobs.estimate_followup"), + description: "All Jobs Notes", + subject: i18n.t("printcenter.jobs.estimate_followup"), + key: "estimate_followup", + disabled: false, + group: "pre", + }, + express_repair_checklist: { + title: i18n.t("printcenter.jobs.express_repair_checklist"), + description: "All Jobs Notes", + subject: i18n.t("printcenter.jobs.express_repair_checklist"), + key: "express_repair_checklist", + disabled: false, + group: "pre", + }, + glass_express_checklist: { + title: i18n.t("printcenter.jobs.glass_express_checklist"), + description: "All Jobs Notes", + subject: i18n.t("printcenter.jobs.glass_express_checklist"), + key: "glass_express_checklist", + disabled: false, + group: "pre", + }, + vehicle_check_in: { + title: i18n.t("printcenter.jobs.vehicle_check_in"), + description: "All Jobs Notes", + subject: i18n.t("printcenter.jobs.vehicle_check_in"), + key: "vehicle_check_in", + disabled: false, + group: "pre", + }, + parts_order_history: { + title: i18n.t("printcenter.jobs.parts_order_history"), + description: "All Jobs Notes", + subject: i18n.t("printcenter.jobs.parts_order_history"), + key: "parts_order_history", + disabled: false, + group: "ro", + }, + + job_notes: { + title: i18n.t("printcenter.jobs.job_notes"), + description: "All Jobs Notes", + subject: i18n.t("printcenter.jobs.job_notes"), + key: "job_notes", + disabled: false, + group: "ro", + }, + ro_with_description: { + title: i18n.t("printcenter.jobs.ro_with_description"), + description: "All Jobs Notes", + subject: i18n.t("printcenter.jobs.ro_with_description"), + key: "ro_with_description", + disabled: false, + group: "ro", + }, + window_tag: { + title: i18n.t("printcenter.jobs.window_tag"), + description: "All Jobs Notes", + subject: i18n.t("printcenter.jobs.window_tag"), + key: "window_tag", + disabled: false, + group: "ro", + }, + supplement_request: { + title: i18n.t("printcenter.jobs.supplement_request"), + description: "All Jobs Notes", + subject: i18n.t("printcenter.jobs.supplement_request"), + key: "supplement_request", + disabled: false, + group: "ro", + }, + estimate: { + title: i18n.t("printcenter.jobs.estimate"), + description: "All Jobs Notes", + subject: i18n.t("printcenter.jobs.estimate"), + key: "estimate", + disabled: false, + group: "ro", + }, + parts_list: { + title: i18n.t("printcenter.jobs.parts_list"), + description: "All Jobs Notes", + subject: i18n.t("printcenter.jobs.parts_list"), + key: "parts_list", + disabled: false, + group: "ro", + }, + coversheet_portrait: { + title: i18n.t("printcenter.jobs.coversheet_portrait"), + description: "All Jobs Notes", + subject: i18n.t("printcenter.jobs.coversheet_portrait"), + key: "coversheet_portrait", + disabled: false, + group: "ro", + }, + coversheet_landscape: { + title: i18n.t("printcenter.jobs.coversheet_landscape"), + description: "All Jobs Notes", + subject: i18n.t("printcenter.jobs.coversheet_landscape"), + key: "coversheet_landscape", + disabled: false, + group: "ro", }, worksheet_by_line_number: { title: i18n.t("printcenter.jobs.worksheet_by_line_number"), @@ -67,6 +147,7 @@ export const TemplateList = (type, context) => { subject: i18n.t("printcenter.jobs.worksheet_by_line_number"), key: "worksheet_by_line_number", disabled: false, + group: "worksheet", }, worksheet_sorted_by_operation: { title: i18n.t("printcenter.jobs.worksheet_sorted_by_operation"), @@ -74,6 +155,7 @@ export const TemplateList = (type, context) => { subject: i18n.t("printcenter.jobs.worksheet_sorted_by_operation"), key: "worksheet_sorted_by_operation", disabled: false, + group: "worksheet", }, worksheet_sorted_by_operation_no_hours: { title: i18n.t( @@ -85,6 +167,7 @@ export const TemplateList = (type, context) => { ), key: "worksheet_sorted_by_operation_no_hours", disabled: false, + group: "worksheet", }, worksheet_sorted_by_operation_part_type: { title: i18n.t( @@ -96,13 +179,15 @@ export const TemplateList = (type, context) => { ), key: "worksheet_sorted_by_operation_part_type", disabled: false, + group: "worksheet", }, - supplement_request: { - title: i18n.t("printcenter.jobs.supplement_request"), + payments_by_job: { + title: i18n.t("printcenter.jobs.payments_by_job"), description: "All Jobs Notes", - subject: i18n.t("printcenter.jobs.supplement_request"), - key: "supplement_request", + subject: i18n.t("printcenter.jobs.payments_by_job"), + key: "payments_by_job", disabled: false, + group: "financial", }, final_invoice: { title: i18n.t("printcenter.jobs.final_invoice"), @@ -110,6 +195,7 @@ export const TemplateList = (type, context) => { subject: i18n.t("printcenter.jobs.final_invoice"), key: "final_invoice", disabled: false, + group: "financial", }, payment_request: { title: i18n.t("printcenter.jobs.payment_request"), @@ -117,6 +203,7 @@ export const TemplateList = (type, context) => { subject: i18n.t("printcenter.jobs.payment_request"), key: "payment_request", disabled: false, + group: "financial", }, invoice_total_payable: { title: i18n.t("printcenter.jobs.invoice_total_payable"), @@ -124,6 +211,7 @@ export const TemplateList = (type, context) => { subject: i18n.t("printcenter.jobs.invoice_total_payable"), key: "invoice_total_payable", disabled: false, + group: "financial", }, invoice_customer_payable: { title: i18n.t("printcenter.jobs.invoice_customer_payable"), @@ -131,55 +219,16 @@ export const TemplateList = (type, context) => { subject: i18n.t("printcenter.jobs.invoice_customer_payable"), key: "invoice_customer_payable", disabled: false, + group: "financial", }, - parts_order_history: { - title: i18n.t("printcenter.jobs.parts_order_history"), - description: "All Jobs Notes", - subject: i18n.t("printcenter.jobs.parts_order_history"), - key: "parts_order_history", - disabled: false, - }, - glass_express_checklist: { - title: i18n.t("printcenter.jobs.glass_express_checklist"), - description: "All Jobs Notes", - subject: i18n.t("printcenter.jobs.glass_express_checklist"), - key: "glass_express_checklist", - disabled: false, - }, - estimate: { - title: i18n.t("printcenter.jobs.estimate"), - description: "All Jobs Notes", - subject: i18n.t("printcenter.jobs.estimate"), - key: "estimate", - disabled: false, - }, - parts_list: { - title: i18n.t("printcenter.jobs.parts_list"), - description: "All Jobs Notes", - subject: i18n.t("printcenter.jobs.parts_list"), - key: "parts_list", - disabled: false, - }, - coversheet_portrait: { - title: i18n.t("printcenter.jobs.coversheet_portrait"), - description: "All Jobs Notes", - subject: i18n.t("printcenter.jobs.coversheet_portrait"), - key: "coversheet_portrait", - disabled: false, - }, - coversheet_landscape: { - title: i18n.t("printcenter.jobs.coversheet_landscape"), - description: "All Jobs Notes", - subject: i18n.t("printcenter.jobs.coversheet_landscape"), - key: "coversheet_landscape", - disabled: false, - }, + filing_coversheet_portrait: { title: i18n.t("printcenter.jobs.filing_coversheet_portrait"), description: "All Jobs Notes", subject: i18n.t("printcenter.jobs.filing_coversheet_portrait"), key: "filing_coversheet_portrait", disabled: false, + group: "post", }, qc_sheet: { title: i18n.t("printcenter.jobs.qc_sheet"), @@ -187,41 +236,25 @@ export const TemplateList = (type, context) => { subject: i18n.t("printcenter.jobs.qc_sheet"), key: "qc_sheet", disabled: false, + group: "post", }, - estimate_followup: { - title: i18n.t("printcenter.jobs.estimate_followup"), - description: "All Jobs Notes", - subject: i18n.t("printcenter.jobs.estimate_followup"), - key: "estimate_followup", - disabled: false, - }, + vehicle_delivery_check: { title: i18n.t("printcenter.jobs.vehicle_delivery_check"), description: "All Jobs Notes", subject: i18n.t("printcenter.jobs.vehicle_delivery_check"), key: "vehicle_delivery_check", disabled: false, + group: "post", }, - express_repair_checklist: { - title: i18n.t("printcenter.jobs.express_repair_checklist"), - description: "All Jobs Notes", - subject: i18n.t("printcenter.jobs.express_repair_checklist"), - key: "express_repair_checklist", - disabled: false, - }, + guarantee: { title: i18n.t("printcenter.jobs.guarantee"), description: "All Jobs Notes", subject: i18n.t("printcenter.jobs.guarantee"), key: "guarantee", disabled: false, - }, - vehicle_check_in: { - title: i18n.t("printcenter.jobs.vehicle_check_in"), - description: "All Jobs Notes", - subject: i18n.t("printcenter.jobs.vehicle_check_in"), - key: "vehicle_check_in", - disabled: false, + group: "post", }, } : {}),