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>
   );
 }