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

IO-347 Manual appointments.

Browse Source
This commit is contained in:
Patrick Fic
2022-01-06 10:13:49 -08:00
parent fbd9fce230
commit ade92d86aa
9 changed files with 288 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
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
@@ -500,6 +500,27 @@
</translation>
</translations>
</concept_node>
<concept_node>
<name>end</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>note</name>
<definition_loaded>false</definition_loaded>
@@ -521,6 +542,27 @@
</translation>
</translations>
</concept_node>
<concept_node>
<name>start</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>time</name>
<definition_loaded>false</definition_loaded>
@@ -673,6 +715,27 @@
</translation>
</translations>
</concept_node>
<concept_node>
<name>dataconsistency</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>history</name>
<definition_loaded>false</definition_loaded>
@@ -715,6 +778,27 @@
</translation>
</translations>
</concept_node>
<concept_node>
<name>manualevent</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>noarrivingjobs</name>
<definition_loaded>false</definition_loaded>

171
client/src/components/job-at-change/schedule-event.component.jsx
View File

@@ -27,6 +27,7 @@ import { GenerateDocument } from "../../utils/RenderTemplate";
import { TemplateList } from "../../utils/TemplateConstants";
import ChatOpenButton from "../chat-open-button/chat-open-button.component";
import DataLabel from "../data-label/data-label.component";
import ScheduleManualEvent from "../schedule-manual-event/schedule-manual-event.component";
import ScheduleAtChange from "./job-at-change.component";
import ScheduleEventColor from "./schedule-event.color.component";
import ScheduleEventNote from "./schedule-event.note.component";
@@ -66,7 +67,10 @@ export function ScheduleEventComponent({
const popoverContent = (
<div style={{ maxWidth: "40vw" }}>
{!event.isintake ? (
<strong>{event.title}</strong>
<Space>
<strong>{event.title}</strong>
<ScheduleEventColor event={event} />
</Space>
) : (
<Space>
<strong>{`${(event.job && event.job.ownr_fn) || ""} ${
@@ -118,7 +122,9 @@ export function ScheduleEventComponent({
</DataLabel>
<ScheduleEventNote event={event} />
</div>
) : null}
) : (
<div>{event.note || ""}</div>
)}
<Divider />
<Space wrap>
{event.job ? (
@@ -140,84 +146,89 @@ export function ScheduleEventComponent({
{t("appointments.actions.preview")}
</Button>
) : null}
<Dropdown
overlay={
<Menu>
<Menu.Item
onClick={() => {
const Template = TemplateList("job").appointment_reminder;
GenerateDocument(
{
name: Template.key,
variables: { id: event.job.id },
},
{
to: event.job && event.job.ownr_ea,
subject: Template.subject,
},
"e",
event.job && event.job.id
);
}}
disabled={event.arrived}
>
{t("general.labels.email")}
</Menu.Item>
<Menu.Item
onClick={() => {
const p = parsePhoneNumber(event.job.ownr_ph1, "CA");
if (p && p.isValid()) {
openChatByPhone({
phone_num: p.formatInternational(),
jobid: event.job.id,
});
setMessage(
t("appointments.labels.reminder", {
shopname: bodyshop.shopname,
date: moment(event.start).format("MM/DD/YYYY"),
time: moment(event.start).format("HH:mm a"),
})
{event.job ? (
<Dropdown
overlay={
<Menu>
<Menu.Item
onClick={() => {
const Template = TemplateList("job").appointment_reminder;
GenerateDocument(
{
name: Template.key,
variables: { id: event.job.id },
},
{
to: event.job && event.job.ownr_ea,
subject: Template.subject,
},
"e",
event.job && event.job.id
);
setVisible(false);
} else {
notification["error"]({
message: t("messaging.error.invalidphone"),
});
}
}}
disabled={event.arrived || !bodyshop.messagingservicesid}
>
{t("general.labels.sms")}
</Menu.Item>
</Menu>
}
>
<Button>{t("appointments.actions.sendreminder")}</Button>
</Dropdown>
}}
disabled={event.arrived}
>
{t("general.labels.email")}
</Menu.Item>
<Menu.Item
onClick={() => {
const p = parsePhoneNumber(event.job.ownr_ph1, "CA");
if (p && p.isValid()) {
openChatByPhone({
phone_num: p.formatInternational(),
jobid: event.job.id,
});
setMessage(
t("appointments.labels.reminder", {
shopname: bodyshop.shopname,
date: moment(event.start).format("MM/DD/YYYY"),
time: moment(event.start).format("HH:mm a"),
})
);
setVisible(false);
} else {
notification["error"]({
message: t("messaging.error.invalidphone"),
});
}
}}
disabled={event.arrived || !bodyshop.messagingservicesid}
>
{t("general.labels.sms")}
</Menu.Item>
</Menu>
}
>
<Button>{t("appointments.actions.sendreminder")}</Button>
</Dropdown>
) : null}
<Button onClick={() => handleCancel(event.id)} disabled={event.arrived}>
{t("appointments.actions.cancel")}
</Button>
<Button
disabled={event.arrived}
onClick={() => {
setVisible(false);
setScheduleContext({
actions: { refetch: refetch },
context: {
jobId: event.job.id,
job: event.job,
previousEvent: event.id,
color: event.color,
alt_transport: event.job && event.job.alt_transport,
note: event.note,
},
});
}}
>
{t("appointments.actions.reschedule")}
</Button>
{event.isintake ? (
<Button
disabled={event.arrived}
onClick={() => {
setVisible(false);
setScheduleContext({
actions: { refetch: refetch },
context: {
jobId: event.job.id,
job: event.job,
previousEvent: event.id,
color: event.color,
alt_transport: event.job && event.job.alt_transport,
note: event.note,
},
});
}}
>
{t("appointments.actions.reschedule")}
</Button>
) : (
<ScheduleManualEvent event={event} />
)}
{event.isintake ? (
<Link
to={{
@@ -235,7 +246,13 @@ export function ScheduleEventComponent({
);
const RegularEvent = event.isintake ? (
<div style={{ display: "flex", flexWrap: "wrap" }}>
<div
style={{
display: "flex",
flexWrap: "wrap",
height: "100%",
}}
>
<Space>
{event.note && <AlertFilled className="production-alert" />}
<strong>{`${event.job.ro_number || t("general.labels.na")}`}</strong>
@@ -262,7 +279,7 @@ export function ScheduleEventComponent({
)}
</div>
) : (
<div>
<div style={{ height: "100%", width: "100%" }}>
<strong>{`${event.title || ""}`}</strong>
</div>
);

8
client/src/components/schedule-calendar-wrapper/scheduler-calendar-wrapper.component.jsx
View File

@@ -12,6 +12,7 @@ import "./schedule-calendar.styles.scss";
import JobDetailCards from "../job-detail-cards/job-detail-cards.component";
import { selectProblemJobs } from "../../redux/application/application.selectors";
import { Alert } from "antd";
import { useTranslation } from "react-i18next";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
@@ -30,7 +31,7 @@ export function ScheduleCalendarWrapperComponent({
}) {
const search = queryString.parse(useLocation().search);
const history = useHistory();
const { t } = useTranslation();
const handleEventPropStyles = (event, start, end, isSelected) => {
return {
...(event.color
@@ -57,7 +58,10 @@ export function ScheduleCalendarWrapperComponent({
<Alert
key={problem.id}
type="error"
message={`${problem.ro_number} has a data consistency issue. It has been exlcuded for scheduling purposes. CODE: ${problem.code}`}
message={t("appointments.labels.dataconsistency", {
ro_number: problem.ro_number,
code: problem.code,
})}
/>
))}

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

@@ -3,7 +3,7 @@ import { Button, Card, Col, PageHeader, Row, Space } from "antd";
import React from "react";
import ScheduleCalendarWrapperComponent from "../schedule-calendar-wrapper/scheduler-calendar-wrapper.component";
import ScheduleModal from "../schedule-job-modal/schedule-job-modal.container";
//import ScheduleManualEvent from "../schedule-manual-event/schedule-manual-event.component";
import ScheduleManualEvent from "../schedule-manual-event/schedule-manual-event.component";
import ScheduleProductionList from "../schedule-production-list/schedule-production-list.component";
import ScheduleVerifyIntegrity from "../schedule-verify-integrity/schedule-verify-integrity.component";
@@ -25,9 +25,8 @@ export default function ScheduleCalendarComponent({ data, refetch }) {
<SyncOutlined />
</Button>
<ScheduleProductionList />
{
// <ScheduleManualEvent />
}
<ScheduleManualEvent />
</Space>
}
/>

86
client/src/components/schedule-manual-event/schedule-manual-event.component.jsx
View File

@@ -1,17 +1,32 @@
import { useMutation } from "@apollo/client";
import { Button, Card, Form, Input, Popover, Space } from "antd";
import { Button, Card, Form, Input, Popover, Select, Space } from "antd";
import moment from "moment";
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { logImEXEvent } from "../../firebase/firebase.utils";
import {
INSERT_APPOINTMENT,
INSERT_MANUAL_APPT,
UPDATE_APPOINTMENT,
} from "../../graphql/appointments.queries";
import { selectBodyshop } from "../../redux/user/user.selectors";
import FormDateTimePickerComponent from "../form-date-time-picker/form-date-time-picker.component";
export default function ScheduleManualEvent({ event }) {
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
});
const mapDispatchToProps = (dispatch) => ({
//setUserLanguage: language => dispatch(setUserLanguage(language))
});
export default connect(
mapStateToProps,
mapDispatchToProps
)(ScheduleManualEvent);
export function ScheduleManualEvent({ bodyshop, event }) {
const { t } = useTranslation();
const [insertAppointment] = useMutation(INSERT_APPOINTMENT);
const [insertAppointment] = useMutation(INSERT_MANUAL_APPT);
const [updateAppointment] = useMutation(UPDATE_APPOINTMENT);
const [loading, setLoading] = useState(false);
const [form] = Form.useForm();
@@ -22,26 +37,27 @@ export default function ScheduleManualEvent({ event }) {
useEffect(() => {
if (visibility && event) {
form.setFieldsValue({ event });
form.setFieldsValue(event);
}
}, [visibility, form, event]);
useEffect(() => {
// if (entryData && entryData.scoreboard && entryData.scoreboard[0]) {
// console.log("Setting FOrm");
// // form.setFieldsValue(entryData.scoreboard[0]);
// }
}, [form]);
const handleFinish = async (values) => {
logImEXEvent("job_close_add_to_scoreboard");
logImEXEvent("schedule_manual_event");
setLoading(true);
try {
if (event && event.id) {
updateAppointment();
updateAppointment({
variables: { appid: event.id, app: values },
refetchQueries: ["QUERY_ALL_ACTIVE_APPOINTMENTS"],
});
} else {
insertAppointment();
insertAppointment({
variables: {
apt: { ...values, isintake: false, bodyshopid: bodyshop.id },
},
refetchQueries: ["QUERY_ALL_ACTIVE_APPOINTMENTS"],
});
}
} catch (error) {
console.log(error);
@@ -56,8 +72,8 @@ export default function ScheduleManualEvent({ event }) {
<div>
<Form form={form} layout="vertical" onFinish={handleFinish}>
<Form.Item
label={t("schedule.fields.note")}
name="note"
label={t("appointments.fields.title")}
name="title"
rules={[
{
required: true,
@@ -67,8 +83,11 @@ export default function ScheduleManualEvent({ event }) {
>
<Input />
</Form.Item>
<Form.Item label={t("appointments.fields.note")} name="note">
<Input />
</Form.Item>
<Form.Item
label={t("schedule.fields.start")}
label={t("appointments.fields.start")}
name="start"
rules={[
{
@@ -80,17 +99,42 @@ export default function ScheduleManualEvent({ event }) {
<FormDateTimePickerComponent />
</Form.Item>
<Form.Item
label={t("schedule.fields.end")}
label={t("appointments.fields.end")}
name="end"
rules={[
{
required: true,
//message: t("general.validation.required"),
},
({ getFieldValue }) => ({
async validator(rule, value) {
if (value) {
const { start } = form.getFieldsValue();
if (moment(start).isAfter(moment(value))) {
return Promise.reject(
t("employees.labels.endmustbeafterstart")
);
} else {
return Promise.resolve();
}
} else {
return Promise.resolve();
}
},
}),
]}
>
<FormDateTimePickerComponent />
</Form.Item>
<Form.Item label={t("appointments.fields.color")} name="color">
<Select>
{bodyshop.appt_colors.map((col, idx) => (
<Select.Option key={idx} value={col.color.hex}>
{col.label}
</Select.Option>
))}
</Select>
</Form.Item>
<Space wrap>
<Button type="primary" htmlType="submit">
@@ -112,7 +156,9 @@ export default function ScheduleManualEvent({ event }) {
return (
<Popover content={overlay} visible={visibility}>
<Button loading={loading} onClick={handleClick}>
{t("schedule.labels.manualevent")}
{event
? t("appointments.actions.reschedule")
: t("appointments.labels.manualevent")}
</Button>
</Popover>
);

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

@@ -91,6 +91,26 @@ export const INSERT_APPOINTMENT_BLOCK = gql`
}
`;
export const INSERT_MANUAL_APPT = gql`
mutation INSERT_MANUAL_APPT($apt: appointments_insert_input!) {
insert_appointments_one(object: $apt) {
start
id
end
arrived
title
isintake
block
color
note
canceled
job {
id
}
}
}
`;
export const INSERT_APPOINTMENT = gql`
mutation INSERT_APPOINTMENT(
$app: [appointments_insert_input!]!

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

@@ -37,7 +37,9 @@
"fields": {
"alt_transport": "Alt. Trans.",
"color": "Appointment Color",
"note": "Appt. Note",
"end": "End",
"note": "Note",
"start": "Start",
"time": "Appointment Time",
"title": "Title"
},
@@ -47,8 +49,10 @@
"blocked": "Blocked",
"cancelledappointment": "Canceled appointment for: ",
"completingjobs": "Completing Jobs",
"dataconsistency": "{{ro_number}} has a data consistency issue. It has been excluded for scheduling purposes. CODE: {{code}}.",
"history": "History",
"inproduction": "Jobs In Production",
"manualevent": "Add Manual Appointment",
"noarrivingjobs": "No jobs are arriving.",
"nocompletingjobs": "No jobs scheduled for completion.",
"nodateselected": "No date has been selected.",
@@ -864,7 +868,7 @@
},
"labels": {
"actions": "Actions",
"endmustbeafterstart": "End date must be after start date.Ï",
"endmustbeafterstart": "End date must be after start date.",
"flat_rate": "Flat Rate",
"name": "Name",
"rate_type": "Rate Type",

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

@@ -37,7 +37,9 @@
"fields": {
"alt_transport": "",
"color": "",
"end": "",
"note": "",
"start": "",
"time": "",
"title": "Título"
},
@@ -47,8 +49,10 @@
"blocked": "",
"cancelledappointment": "Cita cancelada para:",
"completingjobs": "",
"dataconsistency": "",
"history": "",
"inproduction": "",
"manualevent": "",
"noarrivingjobs": "",
"nocompletingjobs": "",
"nodateselected": "No se ha seleccionado ninguna fecha.",

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

@@ -37,7 +37,9 @@
"fields": {
"alt_transport": "",
"color": "",
"end": "",
"note": "",
"start": "",
"time": "",
"title": "Titre"
},
@@ -47,8 +49,10 @@
"blocked": "",
"cancelledappointment": "Rendez-vous annulé pour:",
"completingjobs": "",
"dataconsistency": "",
"history": "",
"inproduction": "",
"manualevent": "",
"noarrivingjobs": "",
"nocompletingjobs": "",
"nodateselected": "Aucune date n'a été sélectionnée.",