More UI Fixes & Print Center IO-587

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>