From dc086cb5ebef8208ede43ff4bffaafb202b8e378 Mon Sep 17 00:00:00 2001
From: Patrick Fic <>
Date: Thu, 22 Oct 2020 20:17:42 -0700
Subject: [PATCH] Styling updates.

---
 src/App/App.styles.scss                       | 30 +++----
 .../atoms/delete-job/delete-job.atom.jsx      |  2 +-
 .../jobs-detail-description.molecule.jsx      |  8 +-
 .../jobs-lines-table.molecule.jsx             | 28 +++----
 .../jobs-list-item/jobs-list-item.styles.scss | 37 +++++----
 .../jobs-detail/jobs-detail.organism.jsx      | 80 +++++++++++--------
 .../jobs-detail.organism.styles.scss          |  4 +
 src/components/pages/routes/routes.page.jsx   |  2 +-
 src/index.js                                  | 11 +++
 src/ipc/ipc-estimate-utils.js                 |  8 +-
 10 files changed, 121 insertions(+), 89 deletions(-)

diff --git a/src/App/App.styles.scss b/src/App/App.styles.scss
index e7a0b20..4d1288d 100644
--- a/src/App/App.styles.scss
+++ b/src/App/App.styles.scss
@@ -47,23 +47,23 @@ body {
   overflow: hidden;
   white-space: nowrap;
 }
-::-webkit-scrollbar-track {
-  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-  border-radius: 0.2rem;
-  background-color: #f5f5f5;
-}
+// ::-webkit-scrollbar-track {
+//   -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+//   border-radius: 0.2rem;
+//   background-color: #f5f5f5;
+// }
 
-::-webkit-scrollbar {
-  width: 0.25rem;
-  max-height: 0.25rem;
-  background-color: #f5f5f5;
-}
+// ::-webkit-scrollbar {
+//   width: 0.25rem;
+//   max-height: 0.25rem;
+//   background-color: #f5f5f5;
+// }
 
-::-webkit-scrollbar-thumb {
-  border-radius: 0.2rem;
-  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-  background-color: #188fff;
-}
+// ::-webkit-scrollbar-thumb {
+//   border-radius: 0.2rem;
+//   -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+//   background-color: #188fff;
+// }
 .jobs-list-container {
   height: 100%;
 }
diff --git a/src/components/atoms/delete-job/delete-job.atom.jsx b/src/components/atoms/delete-job/delete-job.atom.jsx
index 2f2ed26..9648b41 100644
--- a/src/components/atoms/delete-job/delete-job.atom.jsx
+++ b/src/components/atoms/delete-job/delete-job.atom.jsx
@@ -43,7 +43,7 @@ export function DeleteJobAtom({ setSelectedJobId, jobId }) {
         onConfirm={handleDelete}
       >
         <Button loading={loading}>
-          <DeleteFilled />
+          <DeleteFilled /> <span>Delete</span>
         </Button>
       </Popconfirm>
     </div>
diff --git a/src/components/molecules/jobs-detail-description/jobs-detail-description.molecule.jsx b/src/components/molecules/jobs-detail-description/jobs-detail-description.molecule.jsx
index 0076de5..d03346a 100644
--- a/src/components/molecules/jobs-detail-description/jobs-detail-description.molecule.jsx
+++ b/src/components/molecules/jobs-detail-description/jobs-detail-description.molecule.jsx
@@ -5,6 +5,7 @@ import ErrorResultAtom from "../../atoms/error-result/error-result.atom";
 import TimeAgoFormatter from "../../atoms/time-ago-formatter/time-ago-formatter.atom";
 import CloseDateDisplayMolecule from "../close-date-display/close-date-display.molecule";
 import JobGroupMolecule from "../job-group/job-group.molecule";
+import DeleteJobAtom from "../../atoms/delete-job/delete-job.atom";
 
 export default function JobsDetailDescriptionMolecule({ loading, job }) {
   if (loading) return <Skeleton active />;
@@ -13,7 +14,12 @@ export default function JobsDetailDescriptionMolecule({ loading, job }) {
 
   return (
     <div>
-      <PageHeader ghost={false} title={job.clm_no} subTitle={job.ins_co_nm}>
+      <PageHeader
+        ghost={false}
+        title={job.clm_no}
+        subTitle={job.ins_co_nm}
+        extra={[<DeleteJobAtom jobId={job.id} />]}
+      >
         <Descriptions column={{ xxl: 5, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }}>
           <Descriptions.Item label="Owner">{`${job.ownr_fn} ${job.ownr_ln}`}</Descriptions.Item>
           <Descriptions.Item label="Vehicle">{`${job.v_model_yr} ${job.v_makedesc} ${job.v_model} (${job.v_type})`}</Descriptions.Item>
diff --git a/src/components/molecules/jobs-lines-table/jobs-lines-table.molecule.jsx b/src/components/molecules/jobs-lines-table/jobs-lines-table.molecule.jsx
index fb362d0..a7c47ad 100644
--- a/src/components/molecules/jobs-lines-table/jobs-lines-table.molecule.jsx
+++ b/src/components/molecules/jobs-lines-table/jobs-lines-table.molecule.jsx
@@ -1,3 +1,4 @@
+import { CalculatorOutlined } from "@ant-design/icons";
 import { Input, Table } from "antd";
 import React, { useState } from "react";
 import ipcTypes from "../../../ipc.types";
@@ -6,7 +7,6 @@ import CurrencyFormatterAtom from "../../atoms/currency-formatter/currency-forma
 import IgnoreJobLine from "../../atoms/ignore-job-line/ignore-job-line.atom";
 import partTypeConverterAtom from "../../atoms/part-type-converter/part-type-converter.atom";
 import PriceDiffPcFormatterAtom from "../../atoms/price-diff-pc-formatter/price-diff-pc-formatter.atom";
-import { CalculatorOutlined } from "@ant-design/icons";
 const { ipcRenderer } = window;
 
 export default function JobLinesTableMolecule({ loading, job }) {
@@ -130,21 +130,19 @@ export default function JobLinesTableMolecule({ loading, job }) {
 
   return (
     <div>
+      <Input.Search
+        placeholder="Search"
+        onSearch={(val) => {
+          ipcRenderer.send(ipcTypes.default.app.toMain.track, {
+            event: "JOB_LINES_SEARCH",
+            query: val,
+          });
+          setSearchText(val);
+        }}
+        enterButton
+        allowClear
+      />
       <Table
-        title={() => (
-          <Input.Search
-            placeholder="Search"
-            onSearch={(val) => {
-              ipcRenderer.send(ipcTypes.default.app.toMain.track, {
-                event: "JOB_LINES_SEARCH",
-                query: val,
-              });
-              setSearchText(val);
-            }}
-            enterButton
-            allowClear
-          />
-        )}
         columns={columns}
         rowKey="id"
         loading={loading}
diff --git a/src/components/molecules/jobs-list-item/jobs-list-item.styles.scss b/src/components/molecules/jobs-list-item/jobs-list-item.styles.scss
index 6f209f1..d320abc 100644
--- a/src/components/molecules/jobs-list-item/jobs-list-item.styles.scss
+++ b/src/components/molecules/jobs-list-item/jobs-list-item.styles.scss
@@ -1,22 +1,21 @@
-
 .jobs-list-item {
-    padding: 0;
-    margin: 0;
-  
-    .jobs-list-item-content {
-      &-selected {
-        border-left: 3px solid #1890ff;
-      }
-  
-      display: inline;
-      margin: 0.5rem;
-      padding: 0.5rem;
-      width: 100%;
-    }
-  
-    cursor: pointer;
-    &:hover {
-      background-color: #e6f7ff;
+  padding: 0.1rem !important;
+  margin: 0;
+  border-bottom: 0.8rem solid #f0f0f0 !important;
+
+  .jobs-list-item-content {
+    &-selected {
+      border-left: 3px solid #1890ff;
     }
+
+    display: inline;
+    margin: 0.5rem;
+    padding: 0.5rem;
+    width: 100%;
   }
-  
\ No newline at end of file
+
+  cursor: pointer;
+  &:hover {
+    background-color: #e6f7ff;
+  }
+}
diff --git a/src/components/organisms/jobs-detail/jobs-detail.organism.jsx b/src/components/organisms/jobs-detail/jobs-detail.organism.jsx
index ce21f92..d24b598 100644
--- a/src/components/organisms/jobs-detail/jobs-detail.organism.jsx
+++ b/src/components/organisms/jobs-detail/jobs-detail.organism.jsx
@@ -1,12 +1,11 @@
 import { useQuery } from "@apollo/client";
-import { Divider, Result } from "antd";
+import { Card, Result } from "antd";
 import React, { useEffect } from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { QUERY_JOB_BY_PK } from "../../../graphql/jobs.queries";
 import { setSelectedJobTargetPc } from "../../../redux/application/application.actions";
 import { selectSelectedJobId } from "../../../redux/application/application.selectors";
-import DeleteJobAtom from "../../atoms/delete-job/delete-job.atom";
 import ErrorResultAtom from "../../atoms/error-result/error-result.atom";
 import JobsPartsGraphAtom from "../../atoms/jobs-parts-graph/jobs-parts-graph.atom";
 import JobsDetailDescriptionMolecule from "../../molecules/jobs-detail-description/jobs-detail-description.molecule";
@@ -37,7 +36,19 @@ export function JobsDetailOrganism({ selectedJobId, setSelectedJobTargetPc }) {
       });
   }, [data, setSelectedJobTargetPc]);
 
-  if (!selectedJobId) return <Result title="No job selected." />;
+  if (!selectedJobId)
+    return (
+      <div
+        style={{
+          display: "flex",
+          height: "100%",
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+      >
+        <Result title="No job selected." />
+      </div>
+    );
   if (error)
     return (
       <ErrorResultAtom
@@ -48,39 +59,42 @@ export function JobsDetailOrganism({ selectedJobId, setSelectedJobTargetPc }) {
 
   return (
     <div className="jobs-detail-container">
-      <JobsDetailDescriptionMolecule
-        loading={loading}
-        job={data ? data.jobs_by_pk : null}
-      />
-      <JobsLinesTableMolecule
-        loading={loading}
-        job={data ? data.jobs_by_pk : {}}
-      />
-      <JobsTargetsStatsMolecule
-        loading={loading}
-        job={data ? data.jobs_by_pk : null}
-      />
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "space-evenly",
-          minHeight: "20rem",
-          width: "100%",
-        }}
-      >
-        <JobsPartsGraphAtom
-          job={data ? data.jobs_by_pk : null}
+      <Card>
+        <JobsDetailDescriptionMolecule
           loading={loading}
-          price="db_price"
-        />
-        <JobsPartsGraphAtom
           job={data ? data.jobs_by_pk : null}
-          loading={loading}
         />
-      </div>
-      <DeleteJobAtom
-        jobId={data ? data.jobs_by_pk && data.jobs_by_pk.id : null}
-      />
+      </Card>
+      <Card>
+        <JobsLinesTableMolecule
+          loading={loading}
+          job={data ? data.jobs_by_pk : {}}
+        />
+      </Card>
+      <Card>
+        <JobsTargetsStatsMolecule
+          loading={loading}
+          job={data ? data.jobs_by_pk : null}
+        />
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-evenly",
+            minHeight: "20rem",
+            width: "100%",
+          }}
+        >
+          <JobsPartsGraphAtom
+            job={data ? data.jobs_by_pk : null}
+            loading={loading}
+            price="db_price"
+          />
+          <JobsPartsGraphAtom
+            job={data ? data.jobs_by_pk : null}
+            loading={loading}
+          />
+        </div>
+      </Card>
     </div>
   );
 }
diff --git a/src/components/organisms/jobs-detail/jobs-detail.organism.styles.scss b/src/components/organisms/jobs-detail/jobs-detail.organism.styles.scss
index ec34fd5..a1f9c80 100644
--- a/src/components/organisms/jobs-detail/jobs-detail.organism.styles.scss
+++ b/src/components/organisms/jobs-detail/jobs-detail.organism.styles.scss
@@ -1,4 +1,8 @@
 .jobs-detail-container {
   height: 100%;
   overflow-y: auto;
+  background-color: rgb(244, 244, 244);
+  & > * {
+    margin: 0.7rem;
+  }
 }
diff --git a/src/components/pages/routes/routes.page.jsx b/src/components/pages/routes/routes.page.jsx
index 94a5c5b..166c716 100644
--- a/src/components/pages/routes/routes.page.jsx
+++ b/src/components/pages/routes/routes.page.jsx
@@ -33,7 +33,7 @@ export function RoutesPage({ bodyshop }) {
         <SiderMenuOrganism />
       </Layout.Sider>
       <Layout style={{ background: "#fff" }}>
-        <Layout.Content style={{ margin: "1rem", height: "100%" }}>
+        <Layout.Content style={{ marginLeft: "1rem", height: "100%" }}>
           <Route exact path="/settings" component={SettingsPage} />
           <Route exact path="/reporting" component={ReportingPage} />
           <Route exact path="/scan" component={ScanPage} />
diff --git a/src/index.js b/src/index.js
index e6db681..9994526 100644
--- a/src/index.js
+++ b/src/index.js
@@ -21,3 +21,14 @@ ReactDOM.render(
   </Provider>,
   document.getElementById("root")
 );
+
+window.onkeydown = function (evt) {
+  // disable zooming
+  if (
+    (evt.code === "Minus" || evt.code === "Equal") &&
+    (evt.ctrlKey || evt.metaKey)
+  ) {
+    console.log("Preventing zoom!");
+    evt.preventDefault();
+  }
+};
diff --git a/src/ipc/ipc-estimate-utils.js b/src/ipc/ipc-estimate-utils.js
index ef7e7dc..8d50846 100644
--- a/src/ipc/ipc-estimate-utils.js
+++ b/src/ipc/ipc-estimate-utils.js
@@ -1,3 +1,4 @@
+import { message } from "antd";
 import gql from "graphql-tag";
 import _ from "lodash";
 import moment from "moment";
@@ -5,7 +6,7 @@ import client from "../graphql/GraphQLClient";
 import {
   INSERT_NEW_JOB,
   QUERY_JOB_BY_CLM_NO,
-  UPDATE_JOB
+  UPDATE_JOB,
 } from "../graphql/jobs.queries";
 import { QUERY_GROUPS_BY_MAKE_TYPE } from "../graphql/veh_group.queries";
 import { store } from "../redux/store";
@@ -56,7 +57,7 @@ export async function UpsertEstimate(job) {
   } else {
     logger.info("Attemping to insert job record.");
 
-    const result = await client.mutate({
+    await client.mutate({
       mutation: INSERT_NEW_JOB,
       variables: {
         job: { ...job, bodyshopid: shopId },
@@ -64,9 +65,8 @@ export async function UpsertEstimate(job) {
       refetchQueries: ["QUERY_ALL_JOBS_PAGINATED"],
     });
     logger.info("Job inserted succesfully.");
-
-    console.log("UpsertEstimate -> result", result);
   }
+  message.success("Job uploaded successfully!");
 }
 
 export const GetSupplementDelta = async (jobId, existingLinesO, newLines) => {