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

Added colors to appointments BOD-393

Browse Source
This commit is contained in:
Patrick Fic
2020-09-23 11:35:14 -07:00
parent 6c2e0dad45
commit 1a89d683d7
30 changed files with 826 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
client/src/components/form-items-formatted/colorpicker-form-item.component.jsx Normal file
View File

@@ -0,0 +1,20 @@
import React, { forwardRef } from "react";
import { BlockPicker } from "react-color";
//To be used as a form element only.
const ColorPickerFormItem = ({ value, onChange, style, ...restProps }, ref) => {
const handleChangeComplete = (color) => {
if (onChange) onChange(color);
};
return (
<BlockPicker
{...restProps}
style={{ width: "100%", ...style }}
color={value}
triangle="hide"
onChangeComplete={handleChangeComplete}
/>
);
};
export default forwardRef(ColorPickerFormItem);

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

@@ -38,6 +38,14 @@ export function ScheduleCalendarWrapperComponent({
// )[0];
return {
...(event.color
? {
style: {
backgroundColor:
event.color && event.color.hex ? event.color.hex : event.color,
},
}
: {}),
className: `${event.arrived ? "imex-event-arrived" : ""} ${
event.block ? "imex-event-block" : ""
}`,

55
client/src/components/schedule-event/schedule-event.color.component.jsx Normal file
View File

@@ -0,0 +1,55 @@
import React from "react";
import { useMutation } from "react-apollo";
import { UPDATE_APPOINTMENT } from "../../graphql/appointments.queries";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { Dropdown, Menu, notification } from "antd";
import { DownOutlined } from "@ant-design/icons";
import { selectBodyshop } from "../../redux/user/user.selectors";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
});
const mapDispatchToProps = (dispatch) => ({
//setUserLanguage: language => dispatch(setUserLanguage(language))
});
export function ScheduleEventColor({ bodyshop, event }) {
const [updateAppointment] = useMutation(UPDATE_APPOINTMENT);
const { t } = useTranslation();
const onClick = async ({ key }) => {
const result = await updateAppointment({
variables: { appid: event.id, app: { color: key } },
});
if (!!!result.errors) {
notification["success"]({ message: t("appointments.successes.saved") });
} else {
notification["error"]({
message: t("appointments.errors.saving", {
error: JSON.stringify(result.errors),
}),
});
}
};
const menu = (
<Menu selectedKeys={[event.color]} onClick={onClick}>
{bodyshop.appt_colors &&
bodyshop.appt_colors.map((color) => (
<Menu.Item style={{ color: color.color.hex }} key={color.color.hex}>
{color.label}
</Menu.Item>
))}
</Menu>
);
return (
<Dropdown overlay={menu}>
<a href=" #" onClick={(e) => e.preventDefault()}>
<DownOutlined />
</a>
</Dropdown>
);
}
export default connect(mapStateToProps, mapDispatchToProps)(ScheduleEventColor);

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

@@ -7,6 +7,7 @@ import { setModalContext } from "../../redux/modals/modals.actions";
import CurrencyFormatter from "../../utils/CurrencyFormatter";
import PhoneFormatter from "../../utils/PhoneFormatter";
import DataLabel from "../data-label/data-label.component";
import ScheduleEventColor from "./schedule-event.color.component";
const mapDispatchToProps = (dispatch) => ({
setScheduleContext: (context) =>
@@ -34,6 +35,7 @@ export function ScheduleEventComponent({
(event.job && event.job.v_make_desc) || ""
} ${(event.job && event.job.v_model_desc) || ""}`}
</span>
<ScheduleEventColor event={event} />
</div>
)}

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

@@ -1,4 +1,4 @@
import { Button, Col, Form, Row, Switch } from "antd";
import { Button, Col, Form, Row, Select, Switch } from "antd";
import axios from "axios";
import moment from "moment";
import React, { useState } from "react";
@@ -120,6 +120,20 @@ export function ScheduleJobModalComponent({
<Form.Item name={"email"} label={t("jobs.fields.ownr_ea")}>
<EmailInput />
</Form.Item>
<Form.Item name={"color"} label={t("appointments.fields.color")}>
<Select>
{bodyshop.appt_colors &&
bodyshop.appt_colors.map((color) => (
<Select.Option
style={{ color: color.color.hex }}
key={color.color.hex}
value={color.color.hex}
>
{color.label}
</Select.Option>
))}
</Select>
</Form.Item>
</LayoutFormRow>
{t("appointments.labels.history")}
<ScheduleExistingAppointmentsList

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

@@ -92,6 +92,7 @@ export function ScheduleJobModalContainer({
bodyshopid: bodyshop.id,
start: moment(values.start),
end: moment(values.start).add(bodyshop.appt_length || 60, "minutes"),
color: values.color,
},
},
});

70
client/src/components/shop-info/shop-info.scheduling.component.jsx
View File

@@ -2,8 +2,10 @@ import { DeleteFilled } from "@ant-design/icons";
import { Button, Col, Form, Input, InputNumber, Row } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import ColorpickerFormItemComponent from "../form-items-formatted/colorpicker-form-item.component";
//TODO Fix up styles.
import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
export default function ShopInfoSchedulingComponent({ form }) {
const { t } = useTranslation();
@@ -12,6 +14,74 @@ export default function ShopInfoSchedulingComponent({ form }) {
<strong>{t("bodyshop.labels.orderstatuses")}</strong>
<Row>
<Col span={24}>
<Form.List name={["appt_colors"]}>
{(fields, { add, remove, move }) => {
return (
<div>
{fields.map((field, index) => (
<Form.Item
key={field.key}
style={{ padding: 0, margin: 2 }}
>
<LayoutFormRow>
<Form.Item
className="imex-flex-row__margin"
label={t("bodyshop.fields.appt_colors.label")}
key={`${index}aptcolorlabel`}
name={[field.name, "label"]}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<Input />
</Form.Item>
<Form.Item
className="imex-flex-row__margin"
label={t("bodyshop.fields.appt_colors.color")}
key={`${index}aptcolorcolor`}
name={[field.name, "color"]}
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}
>
<ColorpickerFormItemComponent />
</Form.Item>
<DeleteFilled
className="imex-flex-row__margin"
onClick={() => {
remove(field.name);
}}
/>
<FormListMoveArrows
move={move}
index={index}
total={fields.length}
/>
</LayoutFormRow>
</Form.Item>
))}
<Form.Item>
<Button
type="dashed"
onClick={() => {
add();
}}
style={{ width: "100%" }}
>
{t("bodyshop.actions.addpartslocation")}
</Button>
</Form.Item>
</div>
);
}}
</Form.List>
<Form.List name={["ssbuckets"]}>
{(fields, { add, remove, move }) => {
return (

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

@@ -19,6 +19,7 @@ export const QUERY_ALL_ACTIVE_APPOINTMENTS = gql`
title
isintake
block
color
job {
ro_number
ownr_ln
@@ -112,6 +113,24 @@ export const QUERY_APPOINTMENT_BY_DATE = gql`
}
`;
export const UPDATE_APPOINTMENT = gql`
mutation UPDATE_APPOINTMENT($appid: uuid!, $app: appointments_set_input) {
update_appointments(where: { id: { _eq: $appid } }, _set: $app) {
returning {
id
start
id
end
arrived
title
isintake
block
color
}
}
}
`;
export const CANCEL_APPOINTMENT_BY_ID = gql`
mutation CANCEL_APPOINTMENT_BY_ID($appid: uuid!) {
update_appointments(

2
client/src/graphql/bodyshop.queries.js
View File

@@ -70,6 +70,7 @@ export const QUERY_BODYSHOP = gql`
md_labor_rates
deliverchecklist
target_touchtime
appt_colors
employees {
id
first_name
@@ -138,6 +139,7 @@ export const UPDATE_SHOP = gql`
md_labor_rates
deliverchecklist
target_touchtime
appt_colors
employees {
id
first_name

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

@@ -33,6 +33,7 @@
"saving": "Error scheduling appointment. {{message}}"
},
"fields": {
"color": "Color",
"time": "Appointment Time",
"title": "Title"
},
@@ -162,6 +163,10 @@
"fields": {
"address1": "Address 1",
"address2": "Address 2",
"appt_colors": {
"color": "Color",
"label": "Label"
},
"appt_length": "Default Appointment Length",
"bill_federal_tax_rate": "Bills - Federal Tax Rate %",
"bill_local_tax_rate": "Bill - State Tax Rate %",

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

@@ -33,6 +33,7 @@
"saving": "Error al programar la cita. {{message}}"
},
"fields": {
"color": "",
"time": "",
"title": "Título"
},
@@ -162,6 +163,10 @@
"fields": {
"address1": "",
"address2": "",
"appt_colors": {
"color": "",
"label": ""
},
"appt_length": "",
"bill_federal_tax_rate": "",
"bill_local_tax_rate": "",

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

@@ -33,6 +33,7 @@
"saving": "Erreur lors de la planification du rendez-vous. {{message}}"
},
"fields": {
"color": "",
"time": "",
"title": "Titre"
},
@@ -162,6 +163,10 @@
"fields": {
"address1": "",
"address2": "",
"appt_colors": {
"color": "",
"label": ""
},
"appt_length": "",
"bill_federal_tax_rate": "",
"bill_local_tax_rate": "",