Table updates for appointments. Initial appointments screen + fetching.

client/src/components/header/header.component.jsx

@@ -29,6 +29,12 @@ export default ({ landingHeader, selectedNavItem }) => {
             </Link>
           </Menu.Item>
           <Menu.SubMenu title={t("menus.header.jobs")}>
+            <Menu.Item key="schedule">
+              <Link to="/manage/schedule">
+                <Icon type="calendar" />
+                {t("menus.header.schedule")}
+              </Link>
+            </Menu.Item>
             <Menu.Item key="activejobs">
               <Link to="/manage/jobs">
                 <Icon type="home" />

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

@@ -5,6 +5,7 @@ import { Link } from "react-router-dom";
 import PhoneFormatter from "../../utils/PhoneFormatter";
 import { alphaSort } from "../../utils/sorters";
 import { withRouter } from "react-router-dom";
+import CurrencyFormatter from "../../utils/CurrencyFormatter";
 
 export default withRouter(function JobsList({
   loading,
@@ -154,13 +155,13 @@ export default withRouter(function JobsList({
       title: t("jobs.fields.clm_total"),
       dataIndex: "clm_total",
       key: "clm_total",
-      width: "8%",
+      width: "10%",
       sorter: (a, b) => a.clm_total - b.clm_total,
       sortOrder:
         state.sortedInfo.columnKey === "clm_total" && state.sortedInfo.order,
       render: (text, record) => {
         return record.clm_total ? (
-          <span>{record.clm_total}</span>
+          <CurrencyFormatter>{record.clm_total}</CurrencyFormatter>
         ) : (
           t("general.labels.unknown")
         );

client/src/components/profile-shops/profile-shops.container.jsx

@@ -12,9 +12,7 @@ export default function ProfileShopsContainer() {
   const [updateAssocation] = useMutation(UPDATE_ASSOCIATION);
 
   const updateActiveShop = activeShopId => {
-    console.log("activeShopId", activeShopId);
-
-    data.associations.map(record => {
+    data.associations.forEach(record => {
       updateAssocation({
         variables: {
           assocId: record.id,

client/src/components/schedule-calendar/schedule-calendar.component.jsx

@@ -0,0 +1,27 @@
+import moment from "moment";
+import React from "react";
+import { Calendar, momentLocalizer } from "react-big-calendar";
+import "react-big-calendar/lib/css/react-big-calendar.css";
+import DateCellWrapper from "../schedule-datecellwrapper/schedule-datecellwrapper.component";
+import Event from "../schedule-event/schedule-event.component";
+const localizer = momentLocalizer(moment);
+
+export default function ScheduleCalendarComponent({ data }) {
+  return (
+    <Calendar
+      events={data}
+      defaultView="week"
+      //views={allViews}
+      step={30}
+      showMultiDayTimes
+      localizer={localizer}
+      min={new Date("2020-01-01T06:00:00")} //TODO: Read from business settings.
+      max={new Date("2020-01-01T20:00:00")}
+      //onSelectEvent={event => console.log("event", event)}
+      components={{
+        event: Event,
+        dateCellWrapper: DateCellWrapper
+      }}
+    />
+  );
+}

client/src/components/schedule-calendar/schedule-calendar.container.jsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { useQuery } from "react-apollo";
+import ScheduleCalendarComponent from "./schedule-calendar.component";
+import { QUERY_ALL_APPOINTMENTS } from "../../graphql/appointments.queries";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import AlertComponent from "../alert/alert.component";
+
+export default function ScheduleCalendarContainer() {
+  const { loading, error, data, refetch } = useQuery(QUERY_ALL_APPOINTMENTS, {
+    fetchPolicy: "network-only"
+  });
+
+  if (loading) return <LoadingSpinner />;
+  if (error) return <AlertComponent message={error.message} type="error" />;
+  let normalizedData = data.appointments.map(e => {
+    //Required becuase Hasura returns a string instead of a date object.
+    return Object.assign(
+      {},
+      e,
+      { start: new Date(e.start) },
+      { end: new Date(e.end) }
+    );
+  });
+
+  return (
+    <ScheduleCalendarComponent
+      refetch={refetch}
+      data={data ? normalizedData : null}
+    />
+  );
+}

client/src/components/schedule-datecellwrapper/schedule-datecellwrapper.component.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+export default function ScheduleDateCellWrapper(dateCellWrapperProps) {
+  // Show 'click me' text in arbitrary places by using the range prop
+  const hasAlert = dateCellWrapperProps.range
+    ? dateCellWrapperProps.range.some(date => {
+        return date.getDate() % 12 === 0;
+      })
+    : false;
+
+  const style = {
+    display: "flex",
+    flex: 1,
+    borderLeft: "1px solid #DDD",
+    backgroundColor: hasAlert ? "#f5f5dc" : "#fff"
+  };
+  return (
+    <div style={style}>
+      DateCellWrapper
+      {hasAlert && <button onClick={e => alert(e)}>Click me</button>}
+      {dateCellWrapperProps.children}
+    </div>
+  );
+}

client/src/components/schedule-event/schedule-event.component.js

@@ -0,0 +1,25 @@
+import React from "react";
+import { Popover, Button } from "antd";
+import CurrencyFormatter from "../../utils/CurrencyFormatter";
+import { Link } from "react-router-dom";
+
+export default function Event({ event }) {
+  const popoverContent = (
+    <div>
+      Job Total: <CurrencyFormatter>{event.job.clm_total}</CurrencyFormatter>
+      <Link to={`/manage/jobs/${event.job.id}`}>
+        <Button>View Job</Button>
+      </Link>
+    </div>
+  );
+
+  return (
+    <Popover content={popoverContent}>
+      <strong>{`${event.job.ownr_fn || ""} ${event.job.ownr_ln || ""}`}</strong>
+      <div>
+        {`${event.job.vehicle.v_model_yr || ""} ${event.job.vehicle
+          .v_make_desc || ""} ${event.job.vehicle.v_model_desc || ""}`}
+      </div>
+    </Popover>
+  );
+}