Further refinement on jobs detail screen on header. BOD-155

client/src/components/jobs-detail-header/jobs-detail-header.component.jsx

@@ -1,7 +1,5 @@
 import { DownCircleFilled, PrinterFilled } from "@ant-design/icons";
 import {
-  Avatar,
-  Badge,
   Button,
   Checkbox,
   Descriptions,
@@ -9,7 +7,7 @@ import {
   Menu,
   notification,
   PageHeader,
-  Tag,
+  Tag
 } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
@@ -17,20 +15,19 @@ import Moment from "react-moment";
 import { connect } from "react-redux";
 import { Link } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
-import CarImage from "../../assets/car.svg";
+import { setModalContext } from "../../redux/modals/modals.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
-import BarcodePopup from "../barcode-popup/barcode-popup.component";
+import JobsDetailHeaderActions from "../jobs-detail-header-actions/jobs-detail-header-actions.component";
 import OwnerTagPopoverComponent from "../owner-tag-popover/owner-tag-popover.component";
 import VehicleTagPopoverComponent from "../vehicle-tag-popover/vehicle-tag-popover.component";
-import JobsDetailHeaderActions from "../jobs-detail-header-actions/jobs-detail-header-actions.component";
-import { setModalContext } from "../../redux/modals/modals.actions";
+import "./jobs-detail-header.styles.scss";
+
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
 });
+
 const mapDispatchToProps = (dispatch) => ({
-  setScheduleContext: (context) =>
-    dispatch(setModalContext({ context: context, modal: "schedule" })),
   setPrintCenterContext: (context) =>
     dispatch(setModalContext({ context: context, modal: "printCenter" })),
 });
@@ -46,143 +43,124 @@ export function JobsDetailHeader({
 }) {
   const { t } = useTranslation();
 
-  const tombstoneTitle = (
-    <div>
-      <Avatar size="large" alt="Vehicle Image" src={CarImage} />
-      {job.ro_number
-        ? `${t("jobs.fields.ro_number")} ${job.ro_number}`
-        : `EST-${job.est_number}`}
-    </div>
-  );
-
   const statusmenu = (
     <Menu
       onClick={(e) => {
         updateJobStatus(e.key);
-      }}
-    >
+      }}>
       {bodyshop.md_ro_statuses.statuses.map((item) => (
         <Menu.Item key={item}>{item}</Menu.Item>
       ))}
     </Menu>
   );
 
-  const menuExtra = [
-    <Dropdown overlay={statusmenu} trigger={["click"]} key="changestatus">
-      <Button>
-        {t("jobs.actions.changestatus")} <DownCircleFilled />
-      </Button>
-    </Dropdown>,
-    <Button
-      onClick={() => {
-        setPrintCenterContext({
-          actions: { refetch: refetch },
-          context: {
-            id: job.id,
-            type: "job",
-          },
-        });
-      }}
-      key="printing"
-    >
-      <PrinterFilled />
-      {t("jobs.actions.printCenter")}
-    </Button>,
-    <Badge key="schedule" count={job.appointments_aggregate.aggregate.count}>
+  const menuExtra = (
+    <div className='imex-flex-row'>
+      <Dropdown
+        className='imex-flex-row__margin'
+        overlay={statusmenu}
+        trigger={["click"]}
+        key='changestatus'>
+        <Button>
+          {t("jobs.actions.changestatus")} <DownCircleFilled />
+        </Button>
+      </Dropdown>
+
       <Button
-        //TODO Enabled logic based on status.
+        className='imex-flex-row__margin'
         onClick={() => {
-          setScheduleContext({
+          setPrintCenterContext({
             actions: { refetch: refetch },
             context: {
-              jobId: job.id,
-              job: job,
+              id: job.id,
+              type: "job",
             },
           });
         }}
-      >
-        {t("jobs.actions.schedule")}
+        key='printing'>
+        <PrinterFilled />
+        {t("jobs.actions.printCenter")}
       </Button>
-    </Badge>,
-    <Button
-      key="convert"
-      type="dashed"
-      disabled={job.converted}
-      onClick={() => {
-        mutationConvertJob({
-          variables: { jobId: job.id },
-        }).then((r) => {
-          refetch();
+      <Button
+        key='convert'
+        className='imex-flex-row__margin'
+        type='danger'
+        style={{ display: job.converted ? "none" : "" }}
+        disabled={job.converted}
+        onClick={() => {
+          mutationConvertJob({
+            variables: { jobId: job.id },
+          }).then((r) => {
+            refetch();
 
-          notification["success"]({
-            message: t("jobs.successes.converted"),
+            notification["success"]({
+              message: t("jobs.successes.converted"),
+            });
           });
-        });
-      }}
-    >
-      {t("jobs.actions.convert")}
-    </Button>,
-    <JobsDetailHeaderActions key="actions" job={job} refetch={refetch} />,
-    <Button type="primary" key="submit" htmlType="submit">
-      {t("general.actions.save")}
-    </Button>,
-  ];
+        }}>
+        {t("jobs.actions.convert")}
+      </Button>
+      <JobsDetailHeaderActions key='actions' job={job} refetch={refetch} />
+      <Button
+        type='primary'
+        className='imex-flex-row__margin'
+        key='submit'
+        htmlType='submit'>
+        {t("general.actions.save")}
+      </Button>
+    </div>
+  );
 
   return (
     <PageHeader
-      style={{
-        border: "1px solid rgb(235, 237, 240)",
-      }}
-      title={tombstoneTitle}
-      //subTitle={tombstoneSubtitle}
-      tags={
-        <span key="job-status">
-          {job.status ? <Tag color="blue">{job.status}</Tag> : null}
-          {job.inproduction ? (
-            <Tag color="#f50">{t("jobs.labels.inproduction")}</Tag>
-          ) : null}
-          <OwnerTagPopoverComponent job={job} />
-          <VehicleTagPopoverComponent job={job} />
-          <BarcodePopup value={job.id} />
-        </span>
+      title={
+        job.ro_number
+          ? `${t("jobs.fields.ro_number")} ${job.ro_number}`
+          : `${t("jobs.fields.est_number")} ${job.est_number}`
       }
-      extra={menuExtra}
-    >
-      <Descriptions size="small" column={5}>
-        <Descriptions.Item key="total" label={t("jobs.fields.repairtotal")}>
+      subTitle={job.status}
+      tags={[
+        <OwnerTagPopoverComponent key='owner' job={job} />,
+        <VehicleTagPopoverComponent key='vehicle' job={job} />,
+        <Tag
+          color='#f50'
+          key='production'
+          style={{ display: job.inproduction ? "" : "none" }}>
+          {t("jobs.labels.inproduction")}
+        </Tag>,
+      ]}
+      extra={menuExtra}>
+      <Descriptions size='small' column={5}>
+        <Descriptions.Item key='total' label={t("jobs.fields.repairtotal")}>
           <CurrencyFormatter>{job.clm_total}</CurrencyFormatter>
         </Descriptions.Item>
 
         <Descriptions.Item
-          key="custowing"
-          label={t("jobs.fields.customerowing")}
-        >
+          key='custowing'
+          label={t("jobs.fields.customerowing")}>
           <CurrencyFormatter>{job.owner_owing}</CurrencyFormatter>
         </Descriptions.Item>
 
         <Descriptions.Item
-          key="scp"
-          label={t("jobs.fields.specialcoveragepolicy")}
-        >
+          key='scp'
+          label={t("jobs.fields.specialcoveragepolicy")}>
           <Checkbox checked={job.special_coverage_policy} />
         </Descriptions.Item>
 
         <Descriptions.Item
-          key="sched_comp"
-          label={t("jobs.fields.scheduled_completion")}
-        >
+          key='sched_comp'
+          label={t("jobs.fields.scheduled_completion")}>
           {job.scheduled_completion ? (
-            <Moment format="MM/DD/YYYY">{job.scheduled_completion}</Moment>
+            <Moment format='MM/DD/YYYY'>{job.scheduled_completion}</Moment>
           ) : null}
         </Descriptions.Item>
 
-        <Descriptions.Item key="servicecar" label={t("jobs.fields.servicecar")}>
+        <Descriptions.Item key='servicecar' label={t("jobs.fields.servicecar")}>
           {job.cccontracts &&
             job.cccontracts.map((item) => (
               <Link
                 key={item.id}
-                to={`/manage/courtesycars/contracts/${item.id}`}
-              >
+                to={`/manage/courtesycars/contracts/${item.id}`}>
                 <div>{`${item.agreementnumber} - ${item.start} - ${item.scheduledreturn}`}</div>
               </Link>
             ))}

client/src/components/jobs-detail-header/jobs-detail-header.styles.scss

@@ -0,0 +1,8 @@
+.jobs-title-container {
+  display: block;
+}
+
+.jobs-subtitle-tags {
+  display: flex;
+  flex-wrap: wrap;
+}