Begin job details cards.

client/src/components/current-user-dropdown/current-user-dropdown.component.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Link } from "react-router-dom";
-import { Dropdown, Menu, Icon, Avatar, Typography, Row, Col } from "antd";
+import { Dropdown, Menu, Icon, Avatar, Row, Col } from "antd";
 import { useTranslation } from "react-i18next";
 import i18next from "i18next";
 import { useQuery } from "@apollo/react-hooks";
@@ -22,25 +22,24 @@ export default function CurrentUserDropdown() {
     }
   };
   const menu = (
-    <Menu mode="vertical" onClick={handleMenuClick}>
+    <Menu mode='vertical' onClick={handleMenuClick}>
       <Menu.Item>
-        <Link to="/manage/profile"> {t("menus.currentuser.profile")}</Link>
+        <Link to='/manage/profile'> {t("menus.currentuser.profile")}</Link>
       </Menu.Item>
       <Menu.SubMenu
         title={
           <span>
-            <Icon type="global" />
+            <Icon type='global' />
             <span>{t("menus.currentuser.languageselector")}</span>
           </span>
-        }
+        }>
-      >
+        <Menu.Item actiontype='lang-select' key='en_us'>
-        <Menu.Item actiontype="lang-select" key="en_us">
           {t("general.languages.english")}
         </Menu.Item>
-        <Menu.Item actiontype="lang-select" key="fr">
+        <Menu.Item actiontype='lang-select' key='fr'>
           {t("general.languages.french")}
         </Menu.Item>
-        <Menu.Item actiontype="lang-select" key="es">
+        <Menu.Item actiontype='lang-select' key='es'>
           {t("general.languages.spanish")}
         </Menu.Item>
       </Menu.SubMenu>
@@ -56,10 +55,10 @@ export default function CurrentUserDropdown() {
     <Dropdown overlay={menu}>
       <Row>
         <Col span={8}>
-          <Avatar size="large" alt="Avatar" src={UserImage} />
+          <Avatar size='large' alt='Avatar' src={UserImage} />
         </Col>
         <Col span={16}>
-          <Link to="/manage/profile">
+          <Link to='/manage/profile'>
             {currentUser?.displayName ?? t("general.labels.unknown")}
           </Link>
         </Col>

client/src/components/job-detail-cards/job-detail-cards.component.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+import JobDetailCardsCustomerContainer from "./job-detail-cards.customer.container";
+import { useTranslation } from "react-i18next";
+
+export default function JobDetailCards({ selectedJob }) {
+  const { t } = useTranslation();
+
+  if (!selectedJob) {
+    return <div>{t("jobs.errors.nojobselected")}</div>;
+  }
+  return (
+    <div>
+      <JobDetailCardsCustomerContainer selectedJob={selectedJob} />
+    </div>
+  );
+}

client/src/components/job-detail-cards/job-detail-cards.customer.component.jsx

@@ -0,0 +1,8 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Card } from "antd";
+export default function JobDetailCardsCustomerComponent({ loading, data }) {
+  const { t } = useTranslation();
+
+  return <Card loading={loading}>Card has loaded.</Card>;
+}

client/src/components/job-detail-cards/job-detail-cards.customer.container.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+import JobDetailCardsCustomerComponent from "./job-detail-cards.customer.component";
+import { useQuery } from "@apollo/react-hooks";
+import AlertComponent from "../alert/alert.component";
+import { QUERY_JOBS_IN_PRODUCTION } from "../../graphql/jobs.queries";
+
+export default function JobDetailCardsCustomerContainer({ selectedJob }) {
+  const { loading, error, data } = useQuery(QUERY_JOBS_IN_PRODUCTION, {
+    fetchPolicy: "network-only"
+  });
+
+  if (error) return <AlertComponent message={error.message} type='error' />;
+
+  return <JobDetailCardsCustomerComponent loading={loading} data={data} />;
+}

client/src/components/jobs-list/jobs-list.component.jsx

@@ -4,37 +4,43 @@ import { Table, Icon, Input, Dropdown, Menu } from "antd";
 import { alphaSort } from "../../utils/sorters";
 import { useTranslation } from "react-i18next";
 
-export default function JobsPage({ loading, jobs }) {
+export default function JobsPage({
+  loading,
+  jobs,
+  selectedJob,
+  setSelectedJob
+}) {
   const [state, setState] = useState({
     sortedInfo: {},
     filteredInfo: { text: "" }
   });
+
   const { t } = useTranslation();
 
   const actionMenu = (
     <Menu>
-      <Menu.Item key="images">
+      <Menu.Item key='images'>
-        <Icon type="file-image" />
+        <Icon type='file-image' />
         {t("jobs.actions.viewJobImages")}
       </Menu.Item>
-      <Menu.Item key="printing">
+      <Menu.Item key='printing'>
-        <Icon type="printer" />
+        <Icon type='printer' />
         {t("jobs.actions.printCenter")}
       </Menu.Item>
-      <Menu.Item key="notes">
+      <Menu.Item key='notes'>
-        <Icon type="edit" />
+        <Icon type='edit' />
         {t("jobs.actions.notes")}
       </Menu.Item>
-      <Menu.Item key="postinvoices">
+      <Menu.Item key='postinvoices'>
-        <Icon type="shopping-cart" />
+        <Icon type='shopping-cart' />
         {t("jobs.actions.postInvoices")}
       </Menu.Item>
-      <Menu.Item key="receiveparts">
+      <Menu.Item key='receiveparts'>
-        <Icon type="inbox" />
+        <Icon type='inbox' />
         {t("jobs.actions.receiveParts")}
       </Menu.Item>
-      <Menu.Item key="partstatus">
+      <Menu.Item key='partstatus'>
-        <Icon type="tool" />
+        <Icon type='tool' />
         {t("jobs.actions.partStatus")}
       </Menu.Item>
     </Menu>
@@ -108,7 +114,7 @@ export default function JobsPage({ loading, jobs }) {
       key: "action",
       render: (text, record) => (
         <Dropdown overlay={actionMenu} trigger={["click"]}>
-          <Icon type="ellipsis" />
+          <Icon type='ellipsis' />
         </Dropdown>
       )
     }
@@ -123,16 +129,37 @@ export default function JobsPage({ loading, jobs }) {
     setState({ ...state, filterinfo: { text: [value] } });
   };
 
+  const handleOnRowClick = record => {
+    if (record) {
+      if (record.id) {
+        setSelectedJob(record.id);
+        return;
+      }
+    }
+    setSelectedJob(null);
+  };
+
   return (
     <div>
-      <Input name="searchCriteria" onChange={handleChange} />
+      <Input name='searchCriteria' onChange={handleChange} />
       <Table
         loading={loading}
         pagination={{ position: "bottom" }}
         columns={columns.map(item => ({ ...item }))}
-        rowKey="id"
+        rowKey='id'
         dataSource={jobs}
         onChange={handleTableChange}
+        onRow={(record, rowIndex) => {
+          return {
+            onClick: event => {
+              handleOnRowClick(record);
+            }, // click row
+            onDoubleClick: event => {}, // double click row
+            onContextMenu: event => {}, // right button click row
+            onMouseEnter: event => {}, // mouse enter row
+            onMouseLeave: event => {} // mouse leave row
+          };
+        }}
       />
     </div>
   );

client/src/graphql/jobs.queries.js

@@ -60,7 +60,6 @@ export const QUERY_JOBS_IN_PRODUCTION = gql`
       updated_at
       est_number
       ro_number
-      status
       scheduled_completion
       scheduled_delivery
       vehicle {

client/src/pages/jobs/jobs.page.jsx

@@ -1,11 +1,13 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { useSubscription } from "@apollo/react-hooks";
 import AlertComponent from "../../components/alert/alert.component";
 import { Col } from "antd";
 import { SUBSCRIPTION_ALL_OPEN_JOBS } from "../../graphql/jobs.queries";
 import { useTranslation } from "react-i18next";
 import JobsList from "../../components/jobs-list/jobs-list.component";
+import JobDetailCards from "../../components/job-detail-cards/job-detail-cards.component";
 
+//TODO: Implement pagination for this.
 export default function JobsPage() {
   const { loading, error, data } = useSubscription(SUBSCRIPTION_ALL_OPEN_JOBS, {
     fetchPolicy: "network-only"
@@ -16,11 +18,19 @@ export default function JobsPage() {
     document.title = t("titles.jobs");
   }, [t]);
 
-  if (error) return <AlertComponent message={error.message} />;
+  const [selectedJob, setSelectedJob] = useState(null);
 
+  if (error) return <AlertComponent message={error.message} />;
+  console.log(selectedJob);
   return (
     <Col span={22} offset={1}>
-      <JobsList loading={loading} jobs={data ? data.jobs : null} />
+      <JobsList
+        loading={loading}
+        selectedJob={selectedJob}
+        setSelectedJob={setSelectedJob}
+        jobs={data ? data.jobs : null}
+      />
+      <JobDetailCards selectedJob={selectedJob} />
     </Col>
   );
 }

client/src/pages/profile/profile.page.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Layout, Menu, Icon } from "antd";
+import { Layout } from "antd";
 import ProfileSideBar from "../../components/profile-sidebar/profile-sidebar.component";
 import ProfileContent from "../../components/profile-content/profile-content.component";
 

client/src/translations/en_us/common.json

@@ -57,7 +57,8 @@
         "noaccess": "This job does not exist or you do not have access to it.",
         "validationtitle": "Validation Error",
         "validation": "Please ensure all fields are entered correctly.",
-        "saving": "Error encountered while saving record."
+        "saving": "Error encountered while saving record.",
+        "nojobselected": "No job is selected."
       },
       "actions": {
         "viewJobImages": "View Job Images",
@@ -69,7 +70,5 @@
         "card": {}
       }
     }
-
-
   }
 }