In Progress work for Jobs Form.

client/src/pages/jobs-detail/jobs-detail.page.container.jsx

@@ -1,7 +0,0 @@
-import React from "react";
-import JobsDetail from "./jobs-detail.page";
-
-export default function JobsDetailPageContainer({ match }) {
-  const jobId = match.params.jobId;
-  return <JobsDetail jobId={jobId} />;
-}

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

@@ -1,5 +1,29 @@
 import React from "react";
+import { useSubscription } from "@apollo/react-hooks";
+import SpinComponent from "../../components/loading-spinner/loading-spinner.component";
+import AlertComponent from "../../components/alert/alert.component";
+import JobTombstone from "../../components/job-tombstone/job-tombstone.component";
+import { GET_JOB_BY_PK } from "../../graphql/jobs.queries";
+import { Breadcrumb } from "antd";
 
-export default function JobsDetail({ jobId }) {
-  return <div>Jobs Detail Page - Job ID {jobId}</div>;
+import Test from "./test";
+
+export default function JobsDetailPage({
+  match: { routes, params, children }
+}) {
+  const { jobId } = params;
+  const { loading, error, data } = useSubscription(GET_JOB_BY_PK, {
+    variables: { id: jobId },
+    fetchPolicy: "network-only"
+  });
+  if (loading) return <SpinComponent />;
+  if (error) return <AlertComponent message={error.message} type="error" />;
+
+  console.log('routes', routes)
+  return (
+    <div>
+      <Breadcrumb routes={routes} params={params} />
+      <JobTombstone job={data.jobs_by_pk} />
+    </div>
+  );
 }

client/src/pages/jobs-detail/test.jsx

@@ -0,0 +1,219 @@
+import React from "react";
+import { Table, Input, Button, Popconfirm, Form } from "antd";
+
+const EditableContext = React.createContext();
+
+const EditableRow = ({ form, index, ...props }) => (
+  <EditableContext.Provider value={form}>
+    <tr {...props} />
+  </EditableContext.Provider>
+);
+
+const EditableFormRow = Form.create()(EditableRow);
+
+class EditableCell extends React.Component {
+  state = {
+    editing: false
+  };
+
+  toggleEdit = () => {
+    const editing = !this.state.editing;
+    this.setState({ editing }, () => {
+      if (editing) {
+        this.input.focus();
+      }
+    });
+  };
+
+  save = e => {
+    const { record, handleSave } = this.props;
+    this.form.validateFields((error, values) => {
+      if (error && error[e.currentTarget.id]) {
+        return;
+      }
+      this.toggleEdit();
+      handleSave({ ...record, ...values });
+    });
+  };
+
+  renderCell = form => {
+    this.form = form;
+    const { children, dataIndex, record, title } = this.props;
+    const { editing } = this.state;
+    return editing ? (
+      <Form.Item style={{ margin: 0 }}>
+        {form.getFieldDecorator(dataIndex, {
+          rules: [
+            {
+              required: true,
+              message: `${title} is required.`
+            }
+          ],
+          initialValue: record[dataIndex]
+        })(
+          <Input
+            ref={node => (this.input = node)}
+            onPressEnter={this.save}
+            onBlur={this.save}
+          />
+        )}
+      </Form.Item>
+    ) : (
+      <div
+        className="editable-cell-value-wrap"
+        style={{ paddingRight: 24 }}
+        onClick={this.toggleEdit}
+      >
+        {children}
+      </div>
+    );
+  };
+
+  render() {
+    const {
+      editable,
+      dataIndex,
+      title,
+      record,
+      index,
+      handleSave,
+      children,
+      ...restProps
+    } = this.props;
+    return (
+      <td {...restProps}>
+        {editable ? (
+          <EditableContext.Consumer>{this.renderCell}</EditableContext.Consumer>
+        ) : (
+          children
+        )}
+      </td>
+    );
+  }
+}
+
+export default class EditableTable extends React.Component {
+  constructor(props) {
+    super(props);
+    this.columns = [
+      {
+        title: "name",
+        dataIndex: "name",
+        width: "30%",
+        editable: true
+      },
+      {
+        title: "age",
+        dataIndex: "age"
+      },
+      {
+        title: "address",
+        dataIndex: "address"
+      },
+      {
+        title: "operation",
+        dataIndex: "operation",
+        render: (text, record) =>
+          this.state.dataSource.length >= 1 ? (
+            <Popconfirm
+              title="Sure to delete?"
+              onConfirm={() => this.handleDelete(record.key)}
+            >
+              <a>Delete</a>
+            </Popconfirm>
+          ) : null
+      }
+    ];
+
+    this.state = {
+      dataSource: [
+        {
+          key: "0",
+          name: "Edward King 0",
+          age: "32",
+          address: "London, Park Lane no. 0"
+        },
+        {
+          key: "1",
+          name: "Edward King 1",
+          age: "32",
+          address: "London, Park Lane no. 1"
+        }
+      ],
+      count: 2
+    };
+  }
+
+  handleDelete = key => {
+    const dataSource = [...this.state.dataSource];
+    this.setState({ dataSource: dataSource.filter(item => item.key !== key) });
+  };
+
+  handleAdd = () => {
+    const { count, dataSource } = this.state;
+    const newData = {
+      key: count,
+      name: `Edward King ${count}`,
+      age: 32,
+      address: `London, Park Lane no. ${count}`
+    };
+    this.setState({
+      dataSource: [...dataSource, newData],
+      count: count + 1
+    });
+  };
+
+  handleSave = row => {
+    const newData = [...this.state.dataSource];
+    const index = newData.findIndex(item => row.key === item.key);
+    const item = newData[index];
+    newData.splice(index, 1, {
+      ...item,
+      ...row
+    });
+    this.setState({ dataSource: newData });
+  };
+
+  render() {
+    const { dataSource } = this.state;
+    const components = {
+      body: {
+        row: EditableFormRow,
+        cell: EditableCell
+      }
+    };
+    const columns = this.columns.map(col => {
+      if (!col.editable) {
+        return col;
+      }
+      return {
+        ...col,
+        onCell: record => ({
+          record,
+          editable: col.editable,
+          dataIndex: col.dataIndex,
+          title: col.title,
+          handleSave: this.handleSave
+        })
+      };
+    });
+    return (
+      <div>
+        <Button
+          onClick={this.handleAdd}
+          type="primary"
+          style={{ marginBottom: 16 }}
+        >
+          Add a row
+        </Button>
+        <Table
+          components={components}
+          rowClassName={() => "editable-row"}
+          bordered
+          dataSource={dataSource}
+          columns={columns}
+        />
+      </div>
+    );
+  }
+}

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

@@ -1,106 +1,17 @@
-import React, { useState } from "react";
+import React from "react";
 import { useSubscription } from "@apollo/react-hooks";
 import AlertComponent from "../../components/alert/alert.component";
-//import { GET_ALL_OPEN_JOBS } from "../../graphql/jobs.queries";
-import { Table, Divider, Icon } from "antd";
-import { alphaSort } from "../../utils/sorters";
 
 import { SUBSCRIPTION_ALL_OPEN_JOBS } from "../../graphql/jobs.queries";
-//import { columns } from "./jobs.page.metadata";
+
+import JobsList from "../../components/jobs-list/jobs-list.component";
 
 export default function JobsPage() {
-  const [sortedInfo, setSortedInfo] = useState({});
-
   const { loading, error, data } = useSubscription(SUBSCRIPTION_ALL_OPEN_JOBS, {
     fetchPolicy: "network-only"
   });
 
-  const columns = [
-    {
-      title: "RO #",
-      dataIndex: "ro_number",
-      key: "ro_number",
-      sorter: (a, b) => alphaSort(a, b),
-      sortOrder: sortedInfo.columnKey === "ro_number" && sortedInfo.order,
-      ellipsis: true
-    },
-    {
-      title: "Est. #",
-      dataIndex: "est_number",
-      key: "est_number"
-    },
-    {
-      title: "Status",
-      dataIndex: "status",
-      key: "status",
-      sorter: (a, b) => alphaSort(a, b),
-      sortOrder: sortedInfo.columnKey === "status" && sortedInfo.order,
-      ellipsis: true
-    },
-    {
-      title: "Customer",
-      dataIndex: "customer",
-      key: "customer",
-      render: (text, record) => {
-        return record.owner ? (
-          <div>
-            {record.owner.first_name} {record.owner.last_name}
-          </div>
-        ) : (
-          "No Customer"
-        );
-      }
-    },
-    {
-      title: "Vehicle",
-      dataIndex: "vehicle",
-      key: "vehicle",
-      render: (text, record) => {
-        return record.vehicle ? (
-          <div>
-            {record.vehicle.v_model_yr} {record.vehicle.v_make_desc}{" "}
-            {record.vehicle.v_model_desc}
-          </div>
-        ) : (
-          "No Vehicle"
-        );
-      }
-    },
-    {
-      title: "Action",
-      key: "action",
-      render: (text, record) => (
-        <span>
-          Action 一 {record.ro_number}
-          <Divider type="vertical" />
-          <Divider type="vertical" />
-          More actions <Icon type="down" />
-        </span>
-      )
-    }
-  ];
-
-  const handleChange = (pagination, filters, sorter) => {
-    console.log("Various parameters", pagination, filters, sorter);
-    // this.setState({
-    //   filteredInfo: filters,
-    //   sortedInfo: sorter,
-    // });
-    setSortedInfo(sorter);
-  };
-
   if (error) return <AlertComponent message={error.message} />;
 
-  return (
-    <div>
-      <Table
-        loading={loading}
-        pagination={{ position: "bottom" }}
-        columns={columns.map(item => ({ ...item }))}
-        rowKey="id"
-        dataSource={data ? data.jobs : null}
-        onChange={handleChange}
-      />
-    </div>
-  );
+  return <JobsList loading={loading} jobs={data ? data.jobs : null} />;
 }

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

@@ -1,64 +0,0 @@
-import React from "react";
-import { Divider, Icon } from "antd";
-
-export const columns = [
-  {
-    title: "RO #",
-    dataIndex: "ro_number",
-    key: "ro_number",
-    sorter: (a, b) => a.ro_number > b.ro_number,
-    sortOrder: sortedInfo.columnKey === "ro_number" && sortedInfo.order,
-    ellipsis: true
-  },
-  {
-    title: "Est. #",
-    dataIndex: "est_number",
-    key: "est_number"
-  },
-  {
-    title: "Status",
-    dataIndex: "status",
-    key: "status"
-  },
-  {
-    title: "Customer",
-    dataIndex: "customer",
-    key: "customer",
-    render: (text, record) => {
-      return record.owner ? (
-        <div>
-          {record.owner.first_name} {record.owner.last_name}
-        </div>
-      ) : (
-        "No Customer"
-      );
-    }
-  },
-  {
-    title: "Vehicle",
-    dataIndex: "vehicle",
-    key: "vehicle",
-    render: (text, record) => {
-      return record.vehicle ? (
-        <div>
-          {record.vehicle.v_model_yr} {record.vehicle.v_make_desc}{" "}
-          {record.vehicle.v_model_desc}
-        </div>
-      ) : (
-        "No Vehicle"
-      );
-    }
-  },
-  {
-    title: "Action",
-    key: "action",
-    render: (text, record) => (
-      <span>
-        Action 一 {record.ro_number}
-        <Divider type="vertical" />
-        <Divider type="vertical" />
-        More actions <Icon type="down" />
-      </span>
-    )
-  }
-];

client/src/pages/landing/landing.page.jsx

@@ -1,16 +1,13 @@
 import React from "react";
 import { Typography } from "antd";
 
-import HeaderComponent from "../../components/header/header.component";
+import HeaderContainer from "../../components/header/header.container";
 
 export default function LandingPage() {
   return (
     <div>
-      <HeaderComponent landingHeader />
-      <Typography.Title>
-        Welcome to bodyshop.app.
-      </Typography.Title>
+      <HeaderContainer landingHeader />
+      <Typography.Title>Welcome to bodyshop.app.</Typography.Title>
     </div>
   );
 }
-

client/src/pages/manage/manage.page.jsx

@@ -4,11 +4,11 @@ import { Route } from "react-router";
 //Component Imports
 import WhiteBoardPage from "../white-board/white-board.page";
 import JobsPage from "../jobs/jobs.page";
-import JobsDetailPageContainer from "../jobs-detail/jobs-detail.page.container";
-import HeaderComponent from "../../components/header/header.component";
+import JobsDetailPage from "../jobs-detail/jobs-detail.page";
+import HeaderContainer from "../../components/header/header.container";
 import FooterComponent from "../../components/footer/footer.component";
 
-import { Layout } from "antd";
+import { Layout, BackTop } from "antd";
 
 const { Header, Content, Footer } = Layout;
 //This page will handle all routing for the entire application.
@@ -16,22 +16,20 @@ export default function Manage({ match }) {
   return (
     <Layout>
       <Header>
-        <HeaderComponent />
+        <HeaderContainer />
       </Header>
 
       <Content>
         <Route exact path={`${match.path}`} component={WhiteBoardPage} />
 
         <Route exact path={`${match.path}/jobs`} component={JobsPage} />
-        <Route
-          path={`${match.path}/jobs/:jobId`}
-          component={JobsDetailPageContainer}
-        />
+        <Route path={`${match.path}/jobs/:jobId`} component={JobsDetailPage} />
       </Content>
 
       <Footer>
         <FooterComponent />
       </Footer>
+      <BackTop />
     </Layout>
   );
 }