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

Added jobs in production to schedule and error handling. BOD-371

Browse Source
This commit is contained in:
Patrick Fic
2020-08-27 10:26:54 -07:00
parent 5d58b2d9d7
commit 22ce28dddf
10 changed files with 177 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
bodyshop_translations.babel
View File

@@ -1,4 +1,4 @@
<babeledit_project version="1.2" be_version="2.7.1">
<babeledit_project be_version="2.7.1" version="1.2">
<!--
BabelEdit project file
@@ -568,6 +568,27 @@
</translation>
</translations>
</concept_node>
<concept_node>
<name>inproduction</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
<concept_node>
<name>nocompletingjobs</name>
<definition_loaded>false</definition_loaded>

5
client/src/components/job-search-select/job-search-select.component.jsx
View File

@@ -7,6 +7,7 @@ import {
} from "../../graphql/jobs.queries";
import { LoadingOutlined } from "@ant-design/icons";
import _ from "lodash";
import AlertComponent from "../alert/alert.component";
const { Option } = Select;
@@ -88,6 +89,10 @@ const JobSearchSelect = ({ value, onChange, onBlur, disabled }, ref) => {
: null}
</Select>
{idLoading || loading ? <LoadingOutlined /> : null}
{error ? <AlertComponent message={error.message} type="error" /> : null}
{idError ? (
<AlertComponent message={idError.message} type="error" />
) : null}
</div>
);
};

44
client/src/components/schedule-calendar/schedule-calendar.component.jsx
View File

@@ -6,6 +6,7 @@ import { connect } from "react-redux";
import { setModalContext } from "../../redux/modals/modals.actions";
import ScheduleCalendarWrapperComponent from "../schedule-calendar-wrapper/scheduler-calendar-wrapper.component";
import ScheduleModal from "../schedule-job-modal/schedule-job-modal.container";
import ScheduleProductionList from "../schedule-production-list/schedule-production-list.component";
const mapDispatchToProps = (dispatch) => ({
setScheduleContext: (context) =>
@@ -21,26 +22,31 @@ export function ScheduleCalendarComponent({
return (
<div>
<Button
onClick={() => {
refetch();
}}
>
<SyncOutlined />
</Button>
<div className="imex-flex-row">
<Button
className="imex-flex-row__margin"
onClick={() => {
refetch();
}}
>
<SyncOutlined />
</Button>
<Button
onClick={() => {
setScheduleContext({
actions: { refetch: refetch },
context: {
jobId: null,
},
});
}}
>
{t("appointments.actions.new")}
</Button>
<Button
className="imex-flex-row__margin"
onClick={() => {
setScheduleContext({
actions: { refetch: refetch },
context: {
jobId: null,
},
});
}}
>
{t("appointments.actions.new")}
</Button>
<ScheduleProductionList />
</div>
<ScheduleModal />

9
client/src/components/schedule-calendar/schedule-calendar.container.jsx
View File

@@ -1,6 +1,6 @@
import { useQuery } from "@apollo/react-hooks";
import queryString from "query-string";
import React, { useMemo } from "react";
import React, { useMemo, useEffect } from "react";
import { useLocation } from "react-router-dom";
import { QUERY_ALL_ACTIVE_APPOINTMENTS } from "../../graphql/appointments.queries";
import AlertComponent from "../alert/alert.component";
@@ -22,6 +22,7 @@ export function ScheduleCalendarContainer({ calculateScheduleLoad }) {
const { date, view } = search;
const range = useMemo(() => getRange(date, view), [date, view]);
const { loading, error, data, refetch } = useQuery(
QUERY_ALL_ACTIVE_APPOINTMENTS,
{
@@ -30,6 +31,10 @@ export function ScheduleCalendarContainer({ calculateScheduleLoad }) {
}
);
useEffect(() => {
if (data && range.end) calculateScheduleLoad(range.end);
}, [data, range, calculateScheduleLoad]);
if (loading) return <LoadingSpinner />;
if (error) return <AlertComponent message={error.message} type="error" />;
let normalizedData = data.appointments.map((e) => {
@@ -42,8 +47,6 @@ export function ScheduleCalendarContainer({ calculateScheduleLoad }) {
);
});
calculateScheduleLoad(range.end);
return (
<ScheduleCalendarComponent
refetch={refetch}

67
client/src/components/schedule-production-list/schedule-production-list.component.jsx Normal file
View File

@@ -0,0 +1,67 @@
import { Button, Card, Popover } from "antd";
import React from "react";
import { useLazyQuery } from "react-apollo";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import { QUERY_JOBS_IN_PRODUCTION } from "../../graphql/jobs.queries";
import { DateTimeFormatter } from "../../utils/DateFormatter";
import AlertComponent from "../alert/alert.component";
import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
import "./schedule-production-list.styles.scss";
export default function ScheduleProductionList() {
const { t } = useTranslation();
const [callQuery, { loading, error, data }] = useLazyQuery(
QUERY_JOBS_IN_PRODUCTION
);
const content = () => {
return (
<Card>
<div
onClick={(e) => e.stopPropagation()}
className="jobs-in-production-table"
>
{loading ? <LoadingSkeleton /> : null}
{error ? (
<AlertComponent message={error.message} type="error" />
) : null}
{data ? (
<table>
<tbody>
{data && data.jobs
? data.jobs.map((j) => (
<tr key={j.id}>
<td>
<Link to={`/manage/jobs/${j.id}`}>{j.ro_number}</Link>
</td>
<td>{`${j.ownr_fn || ""} ${j.ownr_ln || ""} ${
j.ownr_co_nm || ""
}`}</td>
<td>{`${j.v_model_yr || ""} ${j.v_make_desc || ""} ${
j.v_model_desc || ""
}`}</td>
<td>
<DateTimeFormatter>
{j.scheduled_completion}
</DateTimeFormatter>
</td>
</tr>
))
: null}
</tbody>
</table>
) : null}
</div>
</Card>
);
};
return (
<Popover content={content} trigger="click" placement="bottomRight">
<Button onClick={() => callQuery()}>
{t("appointments.labels.inproduction")}
</Button>
</Popover>
);
}

30
client/src/components/schedule-production-list/schedule-production-list.styles.scss Normal file
View File

@@ -0,0 +1,30 @@
.jobs-in-production-table {
// flex: 1;
// display: flex;
// flex-direction: column;
// align-items: center;
table {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;
//width: 80%;
table-layout: fixed;
}
table tr {
//background-color: #f8f8f8;
border: 1px solid #ddd;
padding: 0.35em;
}
table th,
table td {
padding: 0.625em;
//text-align: center;
}
table td.currency {
text-align: right;
}
}

19
client/src/graphql/jobs.queries.js
View File

@@ -971,6 +971,25 @@ export const QUERY_ALL_JOB_FIELDS = gql`
}
}
`;
export const QUERY_JOBS_IN_PRODUCTION = gql`
query QUERY_JOBS_IN_PRODUCTION {
jobs(
where: { inproduction: { _eq: true } }
order_by: { scheduled_completion: asc }
) {
id
ro_number
est_number
ownr_co_nm
ownr_fn
ownr_ln
v_model_yr
v_make_desc
v_model_desc
scheduled_completion
}
}
`;
export const QUERY_ALL_JOBS_PAGINATED = gql`
query QUERY_ALL_JOBS_PAGINATED(

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

@@ -42,6 +42,7 @@
"cancelledappointment": "Canceled appointment for: ",
"completingjobs": "Completing Jobs",
"history": "History",
"inproduction": "Jobs In Production",
"nocompletingjobs": "No jobs scheduled for completion.",
"nodateselected": "No date has been selected.",
"priorappointments": "Previous Appointments",

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

@@ -42,6 +42,7 @@
"cancelledappointment": "Cita cancelada para:",
"completingjobs": "",
"history": "",
"inproduction": "",
"nocompletingjobs": "",
"nodateselected": "No se ha seleccionado ninguna fecha.",
"priorappointments": "Nombramientos previos",

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

@@ -42,6 +42,7 @@
"cancelledappointment": "Rendez-vous annulé pour:",
"completingjobs": "",
"history": "",
"inproduction": "",
"nocompletingjobs": "",
"nodateselected": "Aucune date n'a été sélectionnée.",
"priorappointments": "Rendez-vous précédents",