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}
/>
);
}

72
client/src/graphql/available-jobs.queries.js Normal file
View File

@@ -0,0 +1,72 @@
import { gql } from "apollo-boost";
export const QUERY_AVAILABLE_NEW_JOBS = gql`
query QUERY_AVAILABLE_NEW_JOBS {
available_jobs(
where: { issupplement: { _eq: false } }
order_by: { updated_at: desc }
) {
cieca_id
clm_amt
clm_no
created_at
id
issupplement
ownr_name
source_system
supplement_number
updated_at
uploaded_by
vehicle_info
}
}
`;
export const QUERY_AVAILABLE_SUPPLEMENT_JOBS = gql`
query QUERY_AVAILABLE_SUPPLEMENT_JOBS {
available_jobs(
where: { issupplement: { _eq: true } }
order_by: { updated_at: desc }
) {
cieca_id
clm_amt
clm_no
created_at
id
issupplement
ownr_name
source_system
supplement_number
updated_at
uploaded_by
vehicle_info
job {
ro_number
}
}
}
`;
export const DELETE_AVAILABLE_JOB = gql`
mutation DELETE_AVAILABLE_JOB($id: uuid) {
delete_available_jobs(where: { id: { _eq: $id } }) {
affected_rows
}
}
`;
export const DELETE_ALL_AVAILABLE_NEW_JOBS = gql`
mutation DELETE_ALL_AVAILABLE_NEW_JOBS {
delete_available_jobs(where: { issupplement: { _eq: false } }) {
affected_rows
}
}
`;
export const DELETE_ALL_AVAILABLE_SUPPLEMENT_JOBS = gql`
mutation DELETE_ALL_AVAILABLE_NEW_JOBS {
delete_available_jobs(where: { issupplement: { _eq: true } }) {
affected_rows
}
}
`;

16
client/src/pages/jobs-available/jobs-available.page.component.jsx
View File

@@ -1,9 +1,13 @@
import React from 'react'
import React from "react";
import JobsAvailableContainer from "../../components/jobs-available-new/jobs-available-new.container";
import JobsAvailableSupplementContainer from "../../components/jobs-available-supplement/jobs-available-supplement.container";
export default function JobsAvailablePageComponent() {
return (
<div>
JobsAvailablePageComponent
</div>
)
return (
<div>
<JobsAvailableContainer />
<JobsAvailableSupplementContainer />
</div>
);
}

7
client/src/translations/en_us/common.json
View File

@@ -20,6 +20,7 @@
"reset": "Reset to original."
},
"labels": {
"actions": "Actions",
"in": "In",
"loading": "Loading...",
"na": "N/A",
@@ -45,6 +46,7 @@
"printCenter": "Print Center"
},
"errors": {
"deleted": "Error deleting job.",
"noaccess": "This job does not exist or you do not have access to it.",
"nodates": "No dates specified for this job.",
"nojobselected": "No job is selected.",
@@ -59,6 +61,7 @@
"actual_delivery": "Actual Delivery",
"actual_in": "Actual In",
"adjustment_bottom_line": "Adjustments",
"cieca_id": "CIECA ID",
"claim_total": "Claim Total",
"clm_no": "Claim #",
"clm_total": "Claim Total",
@@ -119,6 +122,8 @@
"storage_payable": "Storage/PVRT",
"towing_payable": "Towing Payable",
"unitnumber": "Unit #",
"updated_at": "Updated At",
"uploaded_by": "Uploaded By",
"vehicle": "Vehicle"
},
"labels": {
@@ -144,7 +149,9 @@
"vehicle_info": "Vehicle"
},
"successes": {
"all_deleted": "{{count}} jobs deleted successfully.",
"converted": "Job converted successfully.",
"deleted": "Job deleted successfully.",
"save": "Record Saved",
"savetitle": "Record saved successfully."
}

7
client/src/translations/es/common.json
View File

@@ -20,6 +20,7 @@
"reset": "Restablecer a original."
},
"labels": {
"actions": "Comportamiento",
"in": "en",
"loading": "Cargando...",
"na": "N / A",
@@ -45,6 +46,7 @@
"printCenter": "Centro de impresión"
},
"errors": {
"deleted": "Error al eliminar el trabajo.",
"noaccess": "Este trabajo no existe o no tiene acceso a él.",
"nodates": "No hay fechas especificadas para este trabajo.",
"nojobselected": "No hay trabajo seleccionado.",
@@ -59,6 +61,7 @@
"actual_delivery": "Entrega real",
"actual_in": "Real en",
"adjustment_bottom_line": "Ajustes",
"cieca_id": "CIECA ID",
"claim_total": "Reclamar total",
"clm_no": "Reclamación #",
"clm_total": "Reclamar total",
@@ -119,6 +122,8 @@
"storage_payable": "Almacenamiento / PVRT",
"towing_payable": "Remolque a pagar",
"unitnumber": "Unidad #",
"updated_at": "Actualizado en",
"uploaded_by": "Subido por",
"vehicle": "Vehículo"
},
"labels": {
@@ -144,7 +149,9 @@
"vehicle_info": "Vehículo"
},
"successes": {
"all_deleted": "{{count}} trabajos eliminados con éxito.",
"converted": "Trabajo convertido con éxito.",
"deleted": "Trabajo eliminado con éxito.",
"save": "Registro guardado",
"savetitle": "Registro guardado con éxito."
}

7
client/src/translations/fr/common.json
View File

@@ -20,6 +20,7 @@
"reset": "Rétablir l'original."
},
"labels": {
"actions": "actes",
"in": "dans",
"loading": "Chargement...",
"na": "N / A",
@@ -45,6 +46,7 @@
"printCenter": "Centre d'impression"
},
"errors": {
"deleted": "Erreur lors de la suppression du travail.",
"noaccess": "Ce travail n'existe pas ou vous n'y avez pas accès.",
"nodates": "Aucune date spécifiée pour ce travail.",
"nojobselected": "Aucun travail n'est sélectionné.",
@@ -59,6 +61,7 @@
"actual_delivery": "Livraison réelle",
"actual_in": "En réel",
"adjustment_bottom_line": "Ajustements",
"cieca_id": "CIECA ID",
"claim_total": "Total réclamation",
"clm_no": "Prétendre #",
"clm_total": "Total réclamation",
@@ -119,6 +122,8 @@
"storage_payable": "Stockage / PVRT",
"towing_payable": "Remorquage à payer",
"unitnumber": "Unité #",
"updated_at": "Mis à jour à",
"uploaded_by": "Telechargé par",
"vehicle": "Véhicule"
},
"labels": {
@@ -144,7 +149,9 @@
"vehicle_info": "Véhicule"
},
"successes": {
"all_deleted": "{{count}} travaux supprimés avec succès.",
"converted": "Travail converti avec succès.",
"deleted": "Le travail a bien été supprimé.",
"save": "Enregistrement enregistré",
"savetitle": "Enregistrement enregistré avec succès."
}

10
client/src/utils/DateFormatter.jsx Normal file
View File

@@ -0,0 +1,10 @@
import React from "react";
import Moment from "react-moment";
export function DateFormatter(props) {
return <Moment format="MM/DD/YYYY">{props.children || ""}</Moment>;
}
export function DateTimeFormatter(props) {
return <Moment format="MM/DD/YYYY @ HH:MM">{props.children || ""}</Moment>;
}