Removed job status table. Added existing appointments timeline to modal. Refetching on calendar on delete.

client/src/components/schedule-job-modal/schedule-job-modal.component.jsx

@@ -1,8 +1,11 @@
-import { Checkbox, DatePicker, Modal, Tabs, TimePicker, Col, Row } from "antd";
+import { Checkbox, Col, DatePicker, Modal, Row, Tabs, TimePicker } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import ScheduleDayViewContainer from "../schedule-day-view/schedule-day-view.container";
+import ScheduleExistingAppointmentsList from "../schedule-existing-appointments-list/schedule-existing-appointments-list.component";
+
 export default function ScheduleJobModalComponent({
+  existingAppointments,
   appData,
   setAppData,
   formData,
@@ -10,8 +13,18 @@ export default function ScheduleJobModalComponent({
   ...props
 }) {
   const { t } = useTranslation();
+  //TODO: Existing appointments list only refreshes sometimes after modal close. May have to do with the container class.
   return (
-    <Modal {...props} width={"80%"} maskClosable={false}>
+    <Modal
+      {...props}
+      width={"80%"}
+      maskClosable={false}
+      destroyOnClose={true}
+      okButtonProps={{ disabled: appData.start ? false : true }}
+    >
+      <ScheduleExistingAppointmentsList
+        existingAppointments={existingAppointments}
+      />
       <Tabs defaultActiveKey="1">
         <Tabs.TabPane tab="SMART Scheduling" key="auto">
           Automatic Job Selection.

client/src/components/schedule-job-modal/schedule-job-modal.container.jsx

@@ -1,7 +1,10 @@
 import React, { useState } from "react";
 import ScheduleJobModalComponent from "./schedule-job-modal.component";
-import { useMutation } from "react-apollo";
-import { INSERT_APPOINTMENT } from "../../graphql/appointments.queries";
+import { useMutation, useQuery } from "react-apollo";
+import {
+  INSERT_APPOINTMENT,
+  QUERY_APPOINTMENTS_BY_JOBID
+} from "../../graphql/appointments.queries";
 import moment from "moment";
 import { notification } from "antd";
 import { useTranslation } from "react-i18next";
@@ -9,6 +12,10 @@ export default function ScheduleJobModalContainer({
   scheduleModalState,
   jobId
 }) {
+  const existingAppointments = useQuery(QUERY_APPOINTMENTS_BY_JOBID, {
+    variables: { jobid: jobId },
+    fetchPolicy: "network-only"
+  });
   const [scheduleModalVisible, setscheduleModalVisible] = scheduleModalState;
   const [appData, setAppData] = useState({ jobid: jobId, start: null });
   const [insertAppointment] = useMutation(INSERT_APPOINTMENT);
@@ -17,6 +24,7 @@ export default function ScheduleJobModalContainer({
 
   return (
     <ScheduleJobModalComponent
+      existingAppointments={existingAppointments}
       appData={appData}
       setAppData={setAppData}
       formData={formData}