Jobs list page updates & note adding modal.

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useQuery } from "@apollo/react-hooks";
 import AlertComponent from "../alert/alert.component";
@@ -17,6 +17,8 @@ import JobDetailCardsTotalsComponent from "./job-detail-cards.totals.component";
 import JobDetailCardsDocumentsComponent from "./job-detail-cards.documents.component";
 
 import "./job-detail-cards.styles.scss";
+import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
+import NoteAddModal from "../note-add-modal/note-add-modal.component";
 
 export default function JobDetailCards({ selectedJob }) {
   const { loading, error, data } = useQuery(QUERY_JOB_CARD_DETAILS, {
@@ -24,6 +26,7 @@ export default function JobDetailCards({ selectedJob }) {
     variables: { id: selectedJob },
     skip: !selectedJob
   });
+  const [noteModalVisible, setNoteModalVisible] = useState(false);
 
   const { t } = useTranslation();
 
@@ -31,85 +34,106 @@ export default function JobDetailCards({ selectedJob }) {
     return <div>{t("jobs.errors.nojobselected")}</div>;
   }
 
-  if (error) return <AlertComponent message={error.message} type="error" />;
-  console.log("data", data);
-  return (
-    <PageHeader
-      ghost={false}
-      onBack={() => window.history.back()}
-      tags={<Tag color="blue">{data?.jobs_by_pk.job_status?.name}</Tag>}
-      title={
-        data?.jobs_by_pk.ro_number
-          ? `${t("jobs.fields.ro_number")} ${data?.jobs_by_pk.ro_number}`
-          : `${t("jobs.fields.est_number")} ${data?.jobs_by_pk.est_number}`
-      }
-      extra={[
-        <Button key="documents">
-          <Icon type="file-image" />
-          {t("jobs.actions.addDocuments")}
-        </Button>,
-        <Button key="printing">
-          <Icon type="printer" />
-          {t("jobs.actions.printCenter")}
-        </Button>,
-        <Button key="notes">
-          <Icon type="edit" />
-          {t("jobs.actions.addNote")}
-        </Button>,
-        <Button key="postinvoices">
-          <Icon type="shopping-cart" />
-          {t("jobs.actions.postInvoices")}
-        </Button>
-      ]}
-    >
-      <Descriptions size="small" column={3}>
-        <Descriptions.Item label="Created">Lili Qu</Descriptions.Item>
-        <Descriptions.Item label="Association">421421</Descriptions.Item>
-        <Descriptions.Item label="Creation Time">2017-01-10</Descriptions.Item>
-        <Descriptions.Item label="Effective Time">2017-10-10</Descriptions.Item>
-        <Descriptions.Item label="Remarks">
-          Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
-        </Descriptions.Item>
-      </Descriptions>
+  if (error) return <AlertComponent message={error.message} type='error' />;
 
-      <section className="job-cards">
-        <JobDetailCardsCustomerComponent
-          loading={loading}
-          data={data ? data.jobs_by_pk : null}
-        />
-        <JobDetailCardsVehicleComponent
-          loading={loading}
-          data={data ? data.jobs_by_pk : null}
-        />
-        <JobDetailCardsInsuranceComponent
-          loading={loading}
-          data={data ? data.jobs_by_pk : null}
-        />
-        <JobDetailCardsDatesComponent
-          loading={loading}
-          data={data ? data.jobs_by_pk : null}
-        />
-        <JobDetailCardsPartsComponent
-          loading={loading}
-          data={data ? data.jobs_by_pk : null}
-        />
-        <JobDetailCardsNotesComponent
-          loading={loading}
-          data={data ? data.jobs_by_pk : null}
-        />
-        <JobDetailCardsDamageComponent
-          loading={loading}
-          data={data ? data.jobs_by_pk : null}
-        />
-        <JobDetailCardsDocumentsComponent
-          loading={loading}
-          data={data ? data.jobs_by_pk : null}
-        />
-        <JobDetailCardsTotalsComponent
-          loading={loading}
-          data={data ? data.jobs_by_pk : null}
-        />
-      </section>
-    </PageHeader>
+  return (
+    <div className='job-cards-container'>
+      <NoteAddModal
+        jobId={data?.jobs_by_pk.id}
+        visible={noteModalVisible}
+        changeVisibility={setNoteModalVisible}
+      />
+      <PageHeader
+        ghost={false}
+        onBack={() => window.history.back()}
+        tags={<Tag color='blue'>{data?.jobs_by_pk.job_status?.name}</Tag>}
+        title={
+          loading
+            ? t("general.labels.loading")
+            : data?.jobs_by_pk.ro_number
+            ? `${t("jobs.fields.ro_number")} ${data?.jobs_by_pk.ro_number}`
+            : `${t("jobs.fields.est_number")} ${data?.jobs_by_pk.est_number}`
+        }
+        extra={[
+          <Button key='documents'>
+            <Icon type='file-image' />
+            {t("jobs.actions.addDocuments")}
+          </Button>,
+          <Button key='printing'>
+            <Icon type='printer' />
+            {t("jobs.actions.printCenter")}
+          </Button>,
+          <Button
+            key='notes'
+            actiontype='addNote'
+            onClick={() => {
+              setNoteModalVisible(!noteModalVisible);
+            }}>
+            <Icon type='edit' />
+            {t("jobs.actions.addNote")}
+          </Button>,
+          <Button key='postinvoices'>
+            <Icon type='shopping-cart' />
+            {t("jobs.actions.postInvoices")}
+          </Button>
+        ]}>
+        {loading ? (
+          <LoadingSkeleton />
+        ) : (
+          <Descriptions size='small' column={3}>
+            <Descriptions.Item label='Created'>Lili Qu</Descriptions.Item>
+            <Descriptions.Item label='Association'>421421</Descriptions.Item>
+            <Descriptions.Item label='Creation Time'>
+              2017-01-10
+            </Descriptions.Item>
+            <Descriptions.Item label='Effective Time'>
+              2017-10-10
+            </Descriptions.Item>
+            <Descriptions.Item label='Remarks'>
+              Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
+            </Descriptions.Item>
+          </Descriptions>
+        )}
+
+        <section className='job-cards'>
+          <JobDetailCardsCustomerComponent
+            loading={loading}
+            data={data ? data.jobs_by_pk : null}
+          />
+          <JobDetailCardsVehicleComponent
+            loading={loading}
+            data={data ? data.jobs_by_pk : null}
+          />
+          <JobDetailCardsInsuranceComponent
+            loading={loading}
+            data={data ? data.jobs_by_pk : null}
+          />
+          <JobDetailCardsDatesComponent
+            loading={loading}
+            data={data ? data.jobs_by_pk : null}
+          />
+          <JobDetailCardsPartsComponent
+            loading={loading}
+            data={data ? data.jobs_by_pk : null}
+          />
+          <JobDetailCardsNotesComponent
+            loading={loading}
+            data={data ? data.jobs_by_pk : null}
+          />
+          <JobDetailCardsDamageComponent
+            loading={loading}
+            data={data ? data.jobs_by_pk : null}
+          />
+          <JobDetailCardsDocumentsComponent
+            loading={loading}
+            data={data ? data.jobs_by_pk : null}
+          />
+          <JobDetailCardsTotalsComponent
+            loading={loading}
+            data={data ? data.jobs_by_pk : null}
+          />
+        </section>
+      </PageHeader>
+    </div>
   );
 }

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

@@ -1,6 +1,7 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import CardTemplate from "./job-detail-cards.template.component";
+import UnfoldedCar from "../../assets/unfolded_car.svg";
 
 export default function JobDetailCardsDamageComponent({ loading, data }) {
   const { t } = useTranslation();
@@ -9,7 +10,7 @@ export default function JobDetailCardsDamageComponent({ loading, data }) {
     <CardTemplate loading={loading} title={t("jobs.labels.cards.damage")}>
       {data ? (
         <span>
-            Damage stuff here.
+          <img src={UnfoldedCar} alt='Damaged Area' width={200} height={200} />
         </span>
       ) : null}
     </CardTemplate>

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

@@ -2,6 +2,7 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import CardTemplate from "./job-detail-cards.template.component";
 import Moment from "react-moment";
+import { Timeline } from "antd";
 
 export default function JobDetailCardsDatesComponent({ loading, data }) {
   const { t } = useTranslation();
@@ -9,11 +10,15 @@ export default function JobDetailCardsDatesComponent({ loading, data }) {
   return (
     <CardTemplate loading={loading} title={t("jobs.labels.cards.dates")}>
       {data ? (
-        <span>
-          Actual In <Moment format="MM/DD/YYYY">{data?.actual_in}</Moment>
-          Scheduled Completion
-          <Moment format="MM/DD/YYYY">{data?.scheduled_completion}</Moment>
-        </span>
+        <Timeline>
+          <Timeline.Item>
+            Actual In <Moment format='MM/DD/YYYY'>{data?.actual_in}</Moment>
+          </Timeline.Item>
+          <Timeline.Item>
+            Scheduled Completion
+            <Moment format='MM/DD/YYYY'>{data?.scheduled_completion}</Moment>
+          </Timeline.Item>
+        </Timeline>
       ) : null}
     </CardTemplate>
   );

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

@@ -1,6 +1,13 @@
+import { List, Icon } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import CardTemplate from "./job-detail-cards.template.component";
+import styled from "styled-components";
+
+const Container = styled.div`
+  height: 100%;
+  overflow-y: auto;
+`;
 
 export default function JobDetailCardsNotesComponent({ loading, data }) {
   const { t } = useTranslation();
@@ -8,9 +15,24 @@ export default function JobDetailCardsNotesComponent({ loading, data }) {
   return (
     <CardTemplate loading={loading} title={t("jobs.labels.cards.notes")}>
       {data ? (
-        <span>
-            notes stuff here.
-        </span>
+        <Container>
+          <List
+            size='small'
+            bordered
+            dataSource={data?.notes}
+            renderItem={item => (
+              <List.Item>
+                {item.critical ? (
+                  <Icon style={{ margin: 4, color: "red" }} type='warning' />
+                ) : null}
+                {item.private ? (
+                  <Icon style={{ margin: 4 }} type='eye-invisible' />
+                ) : null}
+                {item.text}
+              </List.Item>
+            )}
+          />
+        </Container>
       ) : null}
     </CardTemplate>
   );

client/src/components/job-detail-cards/job-detail-cards.styles.scss

@@ -1,32 +1,36 @@
+.job-cards-container {
+  height: 45vh;
+  overflow-y: auto;
+}
+
 .job-cards {
-    display: flex;
-    flex-wrap: wrap;
- }
+  display: flex;
+  flex-wrap: wrap;
+}
 
 .job-card {
-
-    margin: .5em;
+  margin: 0.5em;
 }
 
 @media screen and (min-width: 40em) {
-    .card {
-       max-width: calc(50% -  1em);
-    }
+  .card {
+    max-width: calc(50% - 1em);
+  }
 }
 
 @media screen and (min-width: 60em) {
-    .card {
-        max-width: calc(25% - 1em);
-    }
+  .card {
+    max-width: calc(25% - 1em);
+  }
 }
 
 .centered {
-    margin: 0 auto;
-    padding: 0 1em;
+  margin: 0 auto;
+  padding: 0 1em;
 }
 
 @media screen and (min-width: 52em) {
-    .centered {
-        max-width: 52em;
-    }
-}
+  .centered {
+    max-width: 52em;
+  }
+}

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

@@ -13,7 +13,7 @@ export default function JobDetailCardTemplate({
   return (
     <Card
       size="small"
-      style={{ width: 300 }}
+      style={{ width: 290 }}
       className="job-card"
       title={title}
       loading={loading}