More UI Fixes & Print Center IO-587

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"
       />
-      <div style={{ color: "red" }}>
-        DEVELOPER NOTE: Any edits made in the editor below will not be sent or
-        saved due to css inlining issues.
-      </div>
-      <Editor
-        value={messageOptions.html}
-        apiKey="f3s2mjsd77ya5qvqkee9vgh612cm6h41e85efqakn2d0kknk"
-        init={{
-          height: 500,
-          //menubar: false,
-          encoding: "raw",
-          extended_valid_elements: "span",
-          //entity_encoding: "raw",
-          plugins: [
-            "advlist autolink lists link image charmap print preview anchor",
-            "searchreplace visualblocks code fullscreen",
-            "insertdatetime media table paste code help wordcount",
-          ],
-          toolbar:
-            "undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help",
+      <Divider>{t("emails.labels.preview")}</Divider>
+      <div
+        style={{
+          padding: "1rem",
+
+          backgroundColor: "lightgray",
+          borderLeft: "6px solid #2196F3",
         }}
-        onEditorChange={handleHtmlChange}
+        dangerouslySetInnerHTML={{ __html: messageOptions.html }}
       />
+      <Divider>
+        <Divider>{t("emails.labels.preview")}</Divider>
+      </Divider>
       <Card title={t("emails.labels.attachments")}>
         <Upload
           fileList={messageOptions.fileList}

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

@@ -1,5 +1,5 @@
 import { MailOutlined, PrinterOutlined } from "@ant-design/icons";
-import { Spin } from "antd";
+import { Space, Spin } from "antd";
 import React, { useState } from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -40,22 +40,24 @@ export function PrintCenterItemComponent({
 
   if (disabled) return <li className="print-center-item">{item.title} </li>;
   return (
-    <li className="print-center-item">
-      {item.title}
-      <PrinterOutlined onClick={renderToNewWindow} />
-      <MailOutlined
-        onClick={() => {
-          GenerateDocument(
-            {
-              name: item.key,
-              variables: { id: id },
-            },
-            { to: context.job && context.job.ownr_ea, subject: item.subject },
-            "e"
-          );
-        }}
-      />
-      {loading && <Spin />}
+    <li>
+      <Space wrap>
+        {item.title}
+        <PrinterOutlined onClick={renderToNewWindow} />
+        <MailOutlined
+          onClick={() => {
+            GenerateDocument(
+              {
+                name: item.key,
+                variables: { id: id },
+              },
+              { to: context.job && context.job.ownr_ea, subject: item.subject },
+              "e"
+            );
+          }}
+        />
+        {loading && <Spin />}
+      </Space>
     </li>
   );
 }

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 (
     <div>
       <Row gutter={[16, 16]}>
-        <Col {...colSpan}>
+        <Col lg={8} md={12} sm={24}>
           <PrintCenterSpeedPrint jobId={jobId} />
         </Col>
-        <Col {...colSpan}>
-          <Collapse accordion>
-            <Collapse.Panel header={t("printcenter.labels.repairorder")}>
-              <ul style={{ columns: "2 auto" }}>
-                {JobsReportsList.map((item) => (
-                  <PrintCenterItem
-                    key={item.key}
-                    item={item}
-                    id={jobId}
-                    disabled={item.disabled}
-                  />
-                ))}
-              </ul>
-            </Collapse.Panel>
-            <Jobd3RdPartyModal jobId={jobId} />
-          </Collapse>
+        <Col lg={16} md={12} sm={24} className="print-center-list">
+          <Card
+            extra={
+              <Input.Search
+                onChange={(e) => setSearch(e.target.value)}
+                value={search}
+              />
+            }
+          >
+            <Row gutter={[16, 16]}>
+              {Object.keys(grouped).map((key) => (
+                <Col md={12} sm={24}>
+                  <Card.Grid
+                    key={key}
+                    style={{ width: "100%", height: "100%" }}
+                  >
+                    <Typography.Title level={4}>
+                      {t(`printcenter.labels.groups.${key}`)}
+                    </Typography.Title>
+                    <ul //style={{ columns: "3 auto" }}
+                    >
+                      {grouped[key].map((item) => (
+                        <PrintCenterItem
+                          key={item.key}
+                          item={item}
+                          id={jobId}
+                          disabled={item.disabled}
+                        />
+                      ))}
+                    </ul>
+                  </Card.Grid>
+                </Col>
+              ))}
+            </Row>
+          </Card>
+          <Jobd3RdPartyModal jobId={jobId} />
         </Col>
       </Row>
     </div>

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

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 (
     <div>
-      <Typography.Title level={2}>
-        {t("printcenter.labels.speedprint")}
-      </Typography.Title>
+      <PageHeader title={t("printcenter.labels.speedprint")} />
 
       <List
         itemLayout="horizontal"