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

Removed job status table. Added existing appointments timeline to modal. Refetching on calendar on delete.

Browse Source
This commit is contained in:
Patrick Fic
2020-02-06 15:06:13 -08:00
parent fae1e8cdeb
commit 8761dafdff
32 changed files with 1940 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
client/src/components/job-detail-cards/job-detail-cards.component.jsx
View File

@@ -18,8 +18,6 @@ import JobDetailCardsPartsComponent from "./job-detail-cards.parts.component";
import "./job-detail-cards.styles.scss";
import JobDetailCardsTotalsComponent from "./job-detail-cards.totals.component";
export default function JobDetailCards({ selectedJob }) {
const { loading, error, data, refetch } = useQuery(QUERY_JOB_CARD_DETAILS, {
fetchPolicy: "network-only",
@@ -33,10 +31,10 @@ export default function JobDetailCards({ selectedJob }) {
return <div>{t("jobs.errors.nojobselected")}</div>;
}
if (loading) return <LoadingSpinner />;
if (error) return <AlertComponent message={error.message} type='error' />;
if (error) return <AlertComponent message={error.message} type="error" />;
return (
<div className='job-cards-container'>
<div className="job-cards-container">
<NoteUpsertModal
jobId={data.jobs_by_pk.id}
visible={noteModalVisible}
@@ -47,9 +45,9 @@ export default function JobDetailCards({ selectedJob }) {
ghost={false}
onBack={() => window.history.back()}
tags={
<span key='job-status'>
{data.jobs_by_pk.job_status ? (
<Tag color='blue'>{data.jobs_by_pk.job_status.name}</Tag>
<span key="job-status">
{data.jobs_by_pk.status ? (
<Tag color="blue">{data.jobs_by_pk.status}</Tag>
) : null}
</span>
}
@@ -68,31 +66,34 @@ export default function JobDetailCards({ selectedJob }) {
}
extra={[
<Link
key='documents'
to={`/manage/jobs/${data.jobs_by_pk.id}#documents`}>
key="documents"
to={`/manage/jobs/${data.jobs_by_pk.id}#documents`}
>
<Button>
<Icon type='file-image' />
<Icon type="file-image" />
{t("jobs.actions.addDocuments")}
</Button>
</Link>,
<Button key='printing'>
<Icon type='printer' />
<Button key="printing">
<Icon type="printer" />
{t("jobs.actions.printCenter")}
</Button>,
<Button
key='notes'
actiontype='addNote'
key="notes"
actiontype="addNote"
onClick={() => {
setNoteModalVisible(!noteModalVisible);
}}>
<Icon type='edit' />
}}
>
<Icon type="edit" />
{t("jobs.actions.addNote")}
</Button>,
<Button key='postinvoices'>
<Icon type='shopping-cart' />
<Button key="postinvoices">
<Icon type="shopping-cart" />
{t("jobs.actions.postInvoices")}
</Button>
]}>
]}
>
{
// loading ? (
// <LoadingSkeleton />
@@ -113,7 +114,7 @@ export default function JobDetailCards({ selectedJob }) {
// )
}
<section className='job-cards'>
<section className="job-cards">
<JobDetailCardsCustomerComponent
loading={loading}
data={data ? data.jobs_by_pk : null}

26
client/src/components/jobs-detail-header/jobs-detail-header.component.jsx
View File

@@ -5,7 +5,8 @@ import {
Descriptions,
notification,
PageHeader,
Tag
Tag,
Badge
} from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
@@ -60,15 +61,16 @@ export default function JobsDetailHeader({
);
const menuExtra = [
<Button
key="schedule"
//TODO: Enabled logic based on status.
onClick={() => {
setscheduleModalVisible(true);
}}
>
{t("jobs.actions.schedule")}
</Button>,
<Badge key="schedule" count={job.appointments_aggregate.aggregate.count}>
<Button
//TODO: Enabled logic based on status.
onClick={() => {
setscheduleModalVisible(true);
}}
>
{t("jobs.actions.schedule")}
</Button>
</Badge>,
<Button
key="convert"
type="dashed"
@@ -106,9 +108,7 @@ export default function JobsDetailHeader({
subTitle={tombstoneSubtitle}
tags={
<span key="job-status">
{job.job_status ? (
<Tag color="blue">{job.job_status.name}</Tag>
) : null}
{job.status ? <Tag color="blue">{job.status}</Tag> : null}
</span>
}
extra={menuExtra}

2
client/src/components/jobs-list/jobs-list.component.jsx
View File

@@ -94,7 +94,7 @@ export default withRouter(function JobsList({
sortOrder:
state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
render: (text, record) => {
return record.job_status?.name || t("general.labels.na");
return record.status || t("general.labels.na");
}
},

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

@@ -1,5 +1,5 @@
import React from "react";
import "react-big-calendar/lib/css/react-big-calendar.css";
//import "react-big-calendar/lib/css/react-big-calendar.css";
import ScheduleCalendarWrapperComponent from "../schedule-calendar-wrapper/scheduler-calendar-wrapper.component";
export default function ScheduleCalendarComponent({ data, refetch }) {

18
client/src/components/schedule-event/schedule-event.container.jsx
View File

@@ -2,14 +2,22 @@ import React from "react";
import { useMutation } from "react-apollo";
import { CANCEL_APPOINTMENT_BY_ID } from "../../graphql/appointments.queries";
import ScheduleEventComponent from "./schedule-event.component";
import { notification } from "antd";
import { useTranslation } from "react-i18next";
export default function ScheduleEventContainer({ event, refetch }) {
const { t } = useTranslation();
const [cancelAppointment] = useMutation(CANCEL_APPOINTMENT_BY_ID);
console.log("refetch", refetch);
const handleCancel = id => {
cancelAppointment({ variables: { appid: event.id } }).then(r => {
if (refetch) refetch();
});
cancelAppointment({ variables: { appid: event.id } })
.then(r => {
notification["success"]({
message: t("appointments.successes.canceled")
});
if (refetch) refetch();
})
.catch(error => {
notification["error"]({ message: t("appointments.errors.canceling") });
});
};
return <ScheduleEventComponent event={event} handleCancel={handleCancel} />;

44
client/src/components/schedule-existing-appointments-list/schedule-existing-appointments-list.component.jsx Normal file
View File

@@ -0,0 +1,44 @@
import React from "react";
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
import AlertComponent from "../alert/alert.component";
import { Timeline } from "antd";
import { useTranslation } from "react-i18next";
import { DateTimeFormatter } from "../../utils/DateFormatter";
export default function ScheduleExistingAppointmentsList({
existingAppointments
}) {
const { t } = useTranslation();
if (existingAppointments.loading) return <LoadingSpinner />;
if (existingAppointments.error)
return (
<AlertComponent
message={existingAppointments.error.message}
type="error"
/>
);
return (
<div>
{t("appointments.labels.priorappointments")}
<Timeline>
{existingAppointments.data.appointments.map(item => {
return (
<Timeline.Item
key={item.id}
color={item.canceled ? "red" : item.arrived ? "green" : "blue"}
>
{item.canceled
? t("appointments.labels.cancelledappointment")
: item.arrived
? t("appointments.labels.arrivedon")
: t("appointments.labels.scheduledfor")}
<DateTimeFormatter>{item.start}</DateTimeFormatter>
</Timeline.Item>
);
})}
</Timeline>
</div>
);
}

17
client/src/components/schedule-job-modal/schedule-job-modal.component.jsx
View File

@@ -1,8 +1,11 @@
import { Checkbox, DatePicker, Modal, Tabs, TimePicker, Col, Row } from "antd";
import { Checkbox, Col, DatePicker, Modal, Row, Tabs, TimePicker } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import ScheduleDayViewContainer from "../schedule-day-view/schedule-day-view.container";
import ScheduleExistingAppointmentsList from "../schedule-existing-appointments-list/schedule-existing-appointments-list.component";
export default function ScheduleJobModalComponent({
existingAppointments,
appData,
setAppData,
formData,
@@ -10,8 +13,18 @@ export default function ScheduleJobModalComponent({
...props
}) {
const { t } = useTranslation();
//TODO: Existing appointments list only refreshes sometimes after modal close. May have to do with the container class.
return (
<Modal {...props} width={"80%"} maskClosable={false}>
<Modal
{...props}
width={"80%"}
maskClosable={false}
destroyOnClose={true}
okButtonProps={{ disabled: appData.start ? false : true }}
>
<ScheduleExistingAppointmentsList
existingAppointments={existingAppointments}
/>
<Tabs defaultActiveKey="1">
<Tabs.TabPane tab="SMART Scheduling" key="auto">
Automatic Job Selection.

12
client/src/components/schedule-job-modal/schedule-job-modal.container.jsx
View File

@@ -1,7 +1,10 @@
import React, { useState } from "react";
import ScheduleJobModalComponent from "./schedule-job-modal.component";
import { useMutation } from "react-apollo";
import { INSERT_APPOINTMENT } from "../../graphql/appointments.queries";
import { useMutation, useQuery } from "react-apollo";
import {
INSERT_APPOINTMENT,
QUERY_APPOINTMENTS_BY_JOBID
} from "../../graphql/appointments.queries";
import moment from "moment";
import { notification } from "antd";
import { useTranslation } from "react-i18next";
@@ -9,6 +12,10 @@ export default function ScheduleJobModalContainer({
scheduleModalState,
jobId
}) {
const existingAppointments = useQuery(QUERY_APPOINTMENTS_BY_JOBID, {
variables: { jobid: jobId },
fetchPolicy: "network-only"
});
const [scheduleModalVisible, setscheduleModalVisible] = scheduleModalState;
const [appData, setAppData] = useState({ jobid: jobId, start: null });
const [insertAppointment] = useMutation(INSERT_APPOINTMENT);
@@ -17,6 +24,7 @@ export default function ScheduleJobModalContainer({
return (
<ScheduleJobModalComponent
existingAppointments={existingAppointments}
appData={appData}
setAppData={setAppData}
formData={formData}

13
client/src/graphql/appointments.queries.js
View File

@@ -74,3 +74,16 @@ export const CANCEL_APPOINTMENT_BY_ID = gql`
}
}
`;
export const QUERY_APPOINTMENTS_BY_JOBID = gql`
query QUERY_APPOINTMENTS_BY_JOBID($jobid: uuid!) {
appointments(where: { jobid: { _eq: $jobid } }) {
start
id
end
arrived
canceled
created_at
}
}
`;

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

@@ -42,10 +42,7 @@ export const QUERY_ALL_OPEN_JOBS = gql`
scheduled_completion
scheduled_in
scheduled_delivery
job_status {
id
name
}
status
updated_at
clm_total
ded_amt
@@ -195,7 +192,7 @@ export const GET_JOB_BY_PK = gql`
date_invoiced
date_closed
date_exported
status
joblines {
id
unq_seq
@@ -213,6 +210,11 @@ export const GET_JOB_BY_PK = gql`
lbr_amt
op_code_desc
}
appointments_aggregate {
aggregate {
count
}
}
}
}
`;
@@ -253,6 +255,7 @@ export const QUERY_JOB_CARD_DETAILS = gql`
est_ct_fn
est_ct_ln
clm_no
status
ro_number
scheduled_completion
scheduled_in
@@ -264,10 +267,7 @@ export const QUERY_JOB_CARD_DETAILS = gql`
private
created_at
}
job_status {
id
name
}
updated_at
clm_total
ded_amt

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

@@ -8,12 +8,18 @@
"viewjob": "View Job"
},
"errors": {
"canceling": "Error canceling appointment.",
"saving": "Error scheduling appointment. {{message}}"
},
"labels": {
"nodateselected": "No date has been selected."
"arrivedon": "Arrived on: ",
"cancelledappointment": "Canceled appointment for: ",
"nodateselected": "No date has been selected.",
"priorappointments": "Previous Appointments",
"scheduledfor": "Scheduled appointment for: "
},
"successes": {
"canceled": "Appointment canceled successfully.",
"created": "Appointment scheduled successfully."
}
},

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

@@ -8,12 +8,18 @@
"viewjob": "Ver trabajo"
},
"errors": {
"canceling": "Error al cancelar la cita.",
"saving": "Error al programar la cita. {{message}}"
},
"labels": {
"nodateselected": "No se ha seleccionado ninguna fecha."
"arrivedon": "Llegado el:",
"cancelledappointment": "Cita cancelada para:",
"nodateselected": "No se ha seleccionado ninguna fecha.",
"priorappointments": "Nombramientos previos",
"scheduledfor": "Cita programada para:"
},
"successes": {
"canceled": "Cita cancelada con éxito.",
"created": "Cita programada con éxito."
}
},

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

@@ -8,12 +8,18 @@
"viewjob": "Voir le travail"
},
"errors": {
"canceling": "Erreur lors de l'annulation du rendez-vous.",
"saving": "Erreur lors de la planification du rendez-vous. {{message}}"
},
"labels": {
"nodateselected": "Aucune date n'a été sélectionnée."
"arrivedon": "Arrivé le:",
"cancelledappointment": "Rendez-vous annulé pour:",
"nodateselected": "Aucune date n'a été sélectionnée.",
"priorappointments": "Rendez-vous précédents",
"scheduledfor": "Rendez-vous prévu pour:"
},
"successes": {
"canceled": "Rendez-vous annulé avec succès.",
"created": "Rendez-vous planifié avec succès."
}
},