95 lines
2.2 KiB
JavaScript
95 lines
2.2 KiB
JavaScript
import React from "react";
|
|
import { useQuery, useSubscription } from "@apollo/react-hooks";
|
|
//import { GET_ALL_OPEN_JOBS } from "../../graphql/jobs.queries";
|
|
import { Table, Divider, Icon } from "antd";
|
|
|
|
import {
|
|
GET_ALL_OPEN_JOBS,
|
|
SUBSCRIPTION_ALL_OPEN_JOBS
|
|
} from "../../graphql/jobs.queries";
|
|
|
|
export default function JobsPage() {
|
|
const { loading, error, data } = useQuery(GET_ALL_OPEN_JOBS);
|
|
|
|
//const { loading, error, data } = useSubscription(SUBSCRIPTION_ALL_OPEN_JOBS);
|
|
|
|
const columns = [
|
|
{
|
|
title: "RO #",
|
|
dataIndex: "ro_number",
|
|
key: "ro_number"
|
|
},
|
|
{
|
|
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>
|
|
<a>Action 一 {record.ro_number}</a>
|
|
<Divider type="vertical" />
|
|
<a>Delete</a>
|
|
<Divider type="vertical" />
|
|
<a className="ant-dropdown-link">
|
|
More actions <Icon type="down" />
|
|
</a>
|
|
</span>
|
|
)
|
|
}
|
|
];
|
|
|
|
//if (loading) return "Loading";
|
|
if (error) return `Error! ${error.message}`;
|
|
//console.log("$$$Develop (jobs.page.jsx) | jobs", jobs);
|
|
console.log("JobsPage Rendering...");
|
|
|
|
return (
|
|
<div>
|
|
<Table
|
|
loading={loading}
|
|
pagination={{ position: "bottom" }}
|
|
columns={columns.map(item => ({ ...item }))}
|
|
rowKey="id"
|
|
dataSource={data ? data.jobs : null}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|