Styling updates.

2020-10-22 20:17:42 -07:00
parent 5ef32c5465
commit dc086cb5eb
10 changed files with 121 additions and 89 deletions
--- 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>
--- 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>
--- 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}
--- 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%;
  }
-  
+
+  cursor: pointer;
+  &:hover {
+    background-color: #e6f7ff;
+  }
+}
--- 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>
  );
 }
--- 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;
+  }
 }
--- 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} />