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

Table updates for new appointments fields. Schedule modal baseline functionality. Refactor schedule components to be more reusable.

Browse Source
This commit is contained in:
Patrick Fic
2020-02-06 13:39:39 -08:00
parent 1a14fb8da6
commit fae1e8cdeb
35 changed files with 785 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
client/src/components/schedule-event/schedule-event.component.js → client/src/components/schedule-event/schedule-event.component.jsx
View File

@@ -5,7 +5,7 @@ import PhoneFormatter from "../../utils/PhoneFormatter";
import { Link } from "react-router-dom";
import { useTranslation } from "react-i18next";
export default function Event({ event }) {
export default function ScheduleEventComponent({ event, handleCancel }) {
const { t } = useTranslation();
const popoverContent = (
<div>
@@ -23,19 +23,35 @@ export default function Event({ event }) {
<PhoneFormatter>{event.job.ownr_ph1}</PhoneFormatter>
</div>
<Link to={`/manage/jobs/${event.job.id}`}>
<Button>View Job</Button>
<Button>{t("appointments.actions.viewjob")}</Button>
</Link>
<Button>//TODO: Reschedule</Button>
<Button>//TODO: Intake</Button>
<Button onClick={() => handleCancel(event.id)}>
{t("appointments.actions.cancel")}
</Button>
<Button>
{
//TODO: Add reschedule Func.
}
{t("appointments.actions.reschedule")}
</Button>
<Button>
{
//TODO: Add intake func.
}
{t("appointments.actions.intake")}
</Button>
</div>
);
return (
<Popover content={popoverContent}>
<strong>{`${event.job.ownr_fn || ""} ${event.job.ownr_ln || ""}`}</strong>
<div>
{`${event.job.vehicle.v_model_yr || ""} ${event.job.vehicle
.v_make_desc || ""} ${event.job.vehicle.v_model_desc || ""}`}
<strong>{`${event.job.ownr_fn || ""} ${event.job.ownr_ln ||
""}`}</strong>
<span style={{ margin: 4 }}>
{`${event.job.vehicle.v_model_yr || ""} ${event.job.vehicle
.v_make_desc || ""} ${event.job.vehicle.v_model_desc || ""}`}
</span>
</div>
</Popover>
);

16
client/src/components/schedule-event/schedule-event.container.jsx Normal file
View File

@@ -0,0 +1,16 @@
import React from "react";
import { useMutation } from "react-apollo";
import { CANCEL_APPOINTMENT_BY_ID } from "../../graphql/appointments.queries";
import ScheduleEventComponent from "./schedule-event.component";
export default function ScheduleEventContainer({ event, refetch }) {
const [cancelAppointment] = useMutation(CANCEL_APPOINTMENT_BY_ID);
console.log("refetch", refetch);
const handleCancel = id => {
cancelAppointment({ variables: { appid: event.id } }).then(r => {
if (refetch) refetch();
});
};
return <ScheduleEventComponent event={event} handleCancel={handleCancel} />;
}