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

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 <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}

client/src/components/print-center-modal/print-center-modal.component.jsx

@@ -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>;
+}

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 (
+    <Modal
+      visible={visible}
+      onCancel={() => toggleModalVisible()}
+      width='90%'
+      title={t("printcenter.labels.title")}
+      destroyOnClose>
+      <PrintCenterModalComponent context={context} />
+    </Modal>
+  );
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(PrintCenterModalContainer);