admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added jobs available screens for new and supplement jobs.

Browse Source
This commit is contained in:
Patrick Fic
2020-01-28 14:01:18 -08:00
parent 203a680d0f
commit 1cdedac0a8
25 changed files with 942 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
client/src/components/header/header.container.jsx
View File

@@ -1,46 +1,45 @@
import React from "react";
import "./header.styles.scss";
import { useQuery } from "react-apollo";
import {
GET_LANDING_NAV_ITEMS,
GET_NAV_ITEMS
} from "../../graphql/metadata.queries";
// //import {
// GET_LANDING_NAV_ITEMS,
// GET_NAV_ITEMS
// } from "../../graphql/metadata.queries";
import { GET_CURRENT_SELECTED_NAV_ITEM } from "../../graphql/local.queries";
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
import AlertComponent from "../alert/alert.component";
//import LoadingSpinner from "../loading-spinner/loading-spinner.component";
//import AlertComponent from "../alert/alert.component";
import HeaderComponent from "./header.component";
export default ({ landingHeader, signedIn }) => {
const hookSelectedNavItem = useQuery(GET_CURRENT_SELECTED_NAV_ITEM);
let hookNavItems;
if (landingHeader) {
hookNavItems = useQuery(GET_LANDING_NAV_ITEMS, {
fetchPolicy: "network-only"
});
} else {
hookNavItems = useQuery(GET_NAV_ITEMS, {
fetchPolicy: "network-only"
});
}
// let hookNavItems;
// if (landingHeader) {
// hookNavItems = useQuery(GET_LANDING_NAV_ITEMS, {
// fetchPolicy: "network-only"
// });
// } else {
// hookNavItems = useQuery(GET_NAV_ITEMS, {
// fetchPolicy: "network-only"
// });
// }
if (hookNavItems.loading || hookSelectedNavItem.loading)
return <LoadingSpinner />;
if (hookNavItems.error)
return <AlertComponent message={hookNavItems.error.message} />;
if (hookSelectedNavItem.error)
return console.log(
"Unable to load Selected Navigation Item.",
hookSelectedNavItem.error
);
// if (hookNavItems.loading || hookSelectedNavItem.loading)
// return <LoadingSpinner />;
// if (hookNavItems.error)
// return <AlertComponent message={hookNavItems.error.message} />;
// if (hookSelectedNavItem.error)
// return console.log(
// "Unable to load Selected Navigation Item.",
// hookSelectedNavItem.error
// );
const { selectedNavItem } = hookSelectedNavItem.data;
const navItems = JSON.parse(hookNavItems.data.masterdata_by_pk.value);
// const navItems = JSON.parse(hookNavItems.data.masterdata_by_pk.value);
return (
<HeaderComponent
landingHeader={landingHeader}
navItems={navItems}
selectedNavItem={selectedNavItem}
/>
);

180
client/src/components/jobs-available-new/jobs-available-new.component.jsx Normal file
View File

@@ -0,0 +1,180 @@
import { Input, Table, Button, Icon, notification } from "antd";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { alphaSort } from "../../utils/sorters";
import { DateTimeFormatter } from "../../utils/DateFormatter";
export default function JobsAvailableComponent({
loading,
data,
refetch,
deleteJob,
deleteAllNewJobs
}) {
const { t } = useTranslation();
const [state, setState] = useState({
sortedInfo: {},
filteredInfo: { text: "" }
});
const handleTableChange = (pagination, filters, sorter) => {
setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
};
const columns = [
{
title: t("jobs.fields.cieca_id"),
dataIndex: "cieca_id",
key: "cieca_id",
//width: "8%",
// onFilter: (value, record) => record.ro_number.includes(value),
// filteredValue: state.filteredInfo.text || null,
sorter: (a, b) => alphaSort(a, b),
sortOrder:
state.sortedInfo.columnKey === "cieca_id" && state.sortedInfo.order
},
{
title: t("jobs.fields.owner"),
dataIndex: "ownr_name",
key: "ownr_name",
ellipsis: true,
sorter: (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
//width: "25%",
sortOrder:
state.sortedInfo.columnKey === "ownr_name" && state.sortedInfo.order
},
{
title: t("jobs.fields.vehicle"),
dataIndex: "vehicle_info",
key: "vehicle_info",
sorter: (a, b) => alphaSort(a.vehicle_info, b.vehicle_info),
sortOrder:
state.sortedInfo.columnKey === "vehicle_info" && state.sortedInfo.order
//ellipsis: true
},
{
title: t("jobs.fields.clm_no"),
dataIndex: "clm_no",
key: "clm_no",
sorter: (a, b) => alphaSort(a.clm_no, b.clm_no),
sortOrder:
state.sortedInfo.columnKey === "clm_no" && state.sortedInfo.order
//width: "12%",
//ellipsis: true
},
{
title: t("jobs.fields.clm_total"),
dataIndex: "clm_amt",
key: "clm_amt",
sorter: (a, b) => a.clm_amt - b.clm_amt,
sortOrder:
state.sortedInfo.columnKey === "clm_amt" && state.sortedInfo.order
//width: "12%",
//ellipsis: true
},
{
title: t("jobs.fields.uploaded_by"),
dataIndex: "uploaded_by",
key: "uploaded_by",
sorter: (a, b) => alphaSort(a.uploaded_by, b.uploaded_by),
sortOrder:
state.sortedInfo.columnKey === "uploaded_by" && state.sortedInfo.order
//width: "12%",
//ellipsis: true
},
{
title: t("jobs.fields.updated_at"),
dataIndex: "updated_at",
key: "updated_at",
sorter: (a, b) => new Date(a.updated_at) - new Date(b.updated_at),
sortOrder:
state.sortedInfo.columnKey === "updated_at" && state.sortedInfo.order,
render: (text, record) => (
<DateTimeFormatter>{record.updated_at}</DateTimeFormatter>
)
//width: "12%",
//ellipsis: true
},
{
title: t("general.labels.actions"),
key: "actions",
render: (text, record) => (
<span>
<Button
onClick={() => {
deleteJob({ variables: { id: record.id } }).then(r => {
notification["success"]({
message: t("jobs.successes.deleted")
});
refetch();
});
}}
>
<Icon type="delete" />
</Button>
<Button
onClick={() => {
alert("Add");
}}
>
<Icon type="plus" />
</Button>
</span>
)
//width: "12%",
//ellipsis: true
}
];
return (
<Table
loading={loading}
title={() => {
return (
<div>
<Input.Search
placeholder="Search..."
onSearch={value => {
console.log(value);
}}
enterButton
/>
<Button
onClick={() => {
refetch();
}}
>
<Icon type="sync" />
</Button>
<Button
onClick={() => {
deleteAllNewJobs()
.then(r => {
notification["success"]({
message: t("jobs.successes.all_deleted", {
count: r.data.delete_available_jobs.affected_rows
})
});
refetch();
})
.catch(r => {
notification["error"]({
message: t("jobs.errors.deleted") + " " + r.message
});
});
}}
>
Delete All
</Button>
</div>
);
}}
size="small"
pagination={{ position: "top" }}
columns={columns.map(item => ({ ...item }))}
rowKey="id"
dataSource={data && data.available_jobs}
onChange={handleTableChange}
/>
);
}

28
client/src/components/jobs-available-new/jobs-available-new.container.jsx Normal file
View File

@@ -0,0 +1,28 @@
import React from "react";
import { useQuery, useMutation } from "react-apollo";
import {
QUERY_AVAILABLE_NEW_JOBS,
DELETE_AVAILABLE_JOB,
DELETE_ALL_AVAILABLE_NEW_JOBS
} from "../../graphql/available-jobs.queries";
import AlertComponent from "../alert/alert.component";
import JobsAvailableComponent from "./jobs-available-new.component";
export default function JobsAvailableContainer() {
const { loading, error, data, refetch } = useQuery(QUERY_AVAILABLE_NEW_JOBS, {
fetchPolicy: "network-only"
});
const [deleteJob] = useMutation(DELETE_AVAILABLE_JOB);
const [deleteAllNewJobs] = useMutation(DELETE_ALL_AVAILABLE_NEW_JOBS);
if (error) return <AlertComponent type="error" message={error.message} />;
return (
<JobsAvailableComponent
loading={loading}
data={data}
refetch={refetch}
deleteJob={deleteJob}
deleteAllNewJobs={deleteAllNewJobs}
/>
);
}

192
client/src/components/jobs-available-supplement/jobs-available-supplement.component.jsx Normal file
View File

@@ -0,0 +1,192 @@
import { Input, Table, Button, Icon, notification } from "antd";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { alphaSort } from "../../utils/sorters";
import { DateTimeFormatter } from "../../utils/DateFormatter";
export default function JobsAvailableSupplementComponent({
loading,
data,
refetch,
deleteJob,
deleteAllNewJobs
}) {
const { t } = useTranslation();
const [state, setState] = useState({
sortedInfo: {},
filteredInfo: { text: "" }
});
const handleTableChange = (pagination, filters, sorter) => {
setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
};
const columns = [
{
title: t("jobs.fields.cieca_id"),
dataIndex: "cieca_id",
key: "cieca_id",
//width: "8%",
// onFilter: (value, record) => record.ro_number.includes(value),
// filteredValue: state.filteredInfo.text || null,
sorter: (a, b) => alphaSort(a, b),
sortOrder:
state.sortedInfo.columnKey === "cieca_id" && state.sortedInfo.order
},
{
title: t("jobs.fields.ro_number"),
dataIndex: "job_id",
key: "job_id",
//width: "8%",
// onFilter: (value, record) => record.ro_number.includes(value),
// filteredValue: state.filteredInfo.text || null,
sorter: (a, b) => alphaSort(a, b),
sortOrder:
state.sortedInfo.columnKey === "cieca_id" && state.sortedInfo.order,
render: (text, record) => <div>{record.job && record.job.ro_number}</div>
},
{
title: t("jobs.fields.owner"),
dataIndex: "ownr_name",
key: "ownr_name",
ellipsis: true,
sorter: (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
//width: "25%",
sortOrder:
state.sortedInfo.columnKey === "ownr_name" && state.sortedInfo.order
},
{
title: t("jobs.fields.vehicle"),
dataIndex: "vehicle_info",
key: "vehicle_info",
sorter: (a, b) => alphaSort(a.vehicle_info, b.vehicle_info),
sortOrder:
state.sortedInfo.columnKey === "vehicle_info" && state.sortedInfo.order
//ellipsis: true
},
{
title: t("jobs.fields.clm_no"),
dataIndex: "clm_no",
key: "clm_no",
sorter: (a, b) => alphaSort(a.clm_no, b.clm_no),
sortOrder:
state.sortedInfo.columnKey === "clm_no" && state.sortedInfo.order
//width: "12%",
//ellipsis: true
},
{
title: t("jobs.fields.clm_total"),
dataIndex: "clm_amt",
key: "clm_amt",
sorter: (a, b) => a.clm_amt - b.clm_amt,
sortOrder:
state.sortedInfo.columnKey === "clm_amt" && state.sortedInfo.order
//width: "12%",
//ellipsis: true
},
{
title: t("jobs.fields.uploaded_by"),
dataIndex: "uploaded_by",
key: "uploaded_by",
sorter: (a, b) => alphaSort(a.uploaded_by, b.uploaded_by),
sortOrder:
state.sortedInfo.columnKey === "uploaded_by" && state.sortedInfo.order
//width: "12%",
//ellipsis: true
},
{
title: t("jobs.fields.updated_at"),
dataIndex: "updated_at",
key: "updated_at",
sorter: (a, b) => new Date(a.updated_at) - new Date(b.updated_at),
sortOrder:
state.sortedInfo.columnKey === "updated_at" && state.sortedInfo.order,
render: (text, record) => (
<DateTimeFormatter>{record.updated_at}</DateTimeFormatter>
)
//width: "12%",
//ellipsis: true
},
{
title: t("general.labels.actions"),
key: "actions",
render: (text, record) => (
<span>
<Button
onClick={() => {
deleteJob({ variables: { id: record.id } }).then(r => {
notification["success"]({
message: t("jobs.successes.deleted")
});
refetch();
});
}}
>
<Icon type="delete" />
</Button>
<Button
onClick={() => {
alert("Add");
}}
>
<Icon type="plus" />
</Button>
</span>
)
//width: "12%",
//ellipsis: true
}
];
return (
<Table
loading={loading}
title={() => {
return (
<div>
<Input.Search
placeholder="Search..."
onSearch={value => {
console.log(value);
}}
enterButton
/>
<Button
onClick={() => {
refetch();
}}
>
<Icon type="sync" />
</Button>
<Button
onClick={() => {
deleteAllNewJobs()
.then(r => {
notification["success"]({
message: t("jobs.successes.all_deleted", {
count: r.data.delete_available_jobs.affected_rows
})
});
refetch();
})
.catch(r => {
notification["error"]({
message: t("jobs.errors.deleted") + " " + r.message
});
});
}}
>
Delete All
</Button>
</div>
);
}}
size="small"
pagination={{ position: "top" }}
columns={columns.map(item => ({ ...item }))}
rowKey="id"
dataSource={data && data.available_jobs}
onChange={handleTableChange}
/>
);
}

31
client/src/components/jobs-available-supplement/jobs-available-supplement.container.jsx Normal file
View File

@@ -0,0 +1,31 @@
import React from "react";
import { useQuery, useMutation } from "react-apollo";
import {
QUERY_AVAILABLE_SUPPLEMENT_JOBS,
DELETE_AVAILABLE_JOB,
DELETE_ALL_AVAILABLE_SUPPLEMENT_JOBS
} from "../../graphql/available-jobs.queries";
import AlertComponent from "../alert/alert.component";
import JobsAvailableSupplementComponent from "./jobs-available-supplement.component";
export default function JobsAvailableSupplementContainer() {
const { loading, error, data, refetch } = useQuery(
QUERY_AVAILABLE_SUPPLEMENT_JOBS,
{
fetchPolicy: "network-only"
}
);
const [deleteJob] = useMutation(DELETE_AVAILABLE_JOB);
const [deleteAllNewJobs] = useMutation(DELETE_ALL_AVAILABLE_SUPPLEMENT_JOBS);
if (error) return <AlertComponent type="error" message={error.message} />;
return (
<JobsAvailableSupplementComponent
loading={loading}
data={data}
refetch={refetch}
deleteJob={deleteJob}
deleteAllNewJobs={deleteAllNewJobs}
/>
);
}