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

1
client/package.json
View File

@@ -40,6 +40,7 @@
"react-barcode": "^1.4.0",
"react-big-calendar": "^0.26.1",
"react-codemirror2": "^7.2.1",
"react-color": "^2.18.1",
"react-dom": "^16.13.1",
"react-drag-listview": "^0.1.7",
"react-email-editor": "^1.1.1",

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": "",

33
client/yarn.lock
View File

@@ -1560,6 +1560,11 @@
dependencies:
"@hapi/hoek" "^8.3.0"
"@icons/material@^0.2.4":
version "0.2.4"
resolved "https://registry.yarnpkg.com/@icons/material/-/material-0.2.4.tgz#e90c9f71768b3736e76d7dd6783fc6c2afa88bc8"
integrity sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==
"@jest/console@^24.7.1", "@jest/console@^24.9.0":
version "24.9.0"
resolved "https://registry.yarnpkg.com/@jest/console/-/console-24.9.0.tgz#79b1bc06fb74a8cfb01cbdedf945584b1b9707f0"
@@ -8442,7 +8447,7 @@ lodash.uniq@^4.5.0:
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.19.tgz#e48ddedbe30b3321783c5b4301fbd353bc1e4a4b"
integrity sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==
lodash@^4.17.20:
lodash@^4.0.1, lodash@^4.17.20:
version "4.17.20"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
@@ -8543,6 +8548,11 @@ map-visit@^1.0.0:
dependencies:
object-visit "^1.0.0"
material-colors@^1.2.1:
version "1.2.6"
resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46"
integrity sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==
math-expression-evaluator@^1.2.14:
version "1.2.22"
resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.22.tgz#c14dcb3d8b4d150e5dcea9c68c8dad80309b0d5e"
@@ -10594,7 +10604,7 @@ prop-types-exact@^1.2.0:
object.assign "^4.1.0"
reflect.ownkeys "^0.2.0"
prop-types@15.x, prop-types@^15.0.0, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
prop-types@15.x, prop-types@^15.0.0, prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -11335,6 +11345,18 @@ react-codemirror2@^7.2.1:
resolved "https://registry.yarnpkg.com/react-codemirror2/-/react-codemirror2-7.2.1.tgz#38dab492fcbe5fb8ebf5630e5bb7922db8d3a10c"
integrity sha512-t7YFmz1AXdlImgHXA9Ja0T6AWuopilub24jRaQdPVbzUJVNKIYuy3uCFZYa7CE5S3UW6SrSa5nAqVQvtzRF9gw==
react-color@^2.18.1:
version "2.18.1"
resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.18.1.tgz#2cda8cc8e06a9e2c52ad391a30ddad31972472f4"
integrity sha512-X5XpyJS6ncplZs74ak0JJoqPi+33Nzpv5RYWWxn17bslih+X7OlgmfpmGC1fNvdkK7/SGWYf1JJdn7D2n5gSuQ==
dependencies:
"@icons/material" "^0.2.4"
lodash "^4.17.11"
material-colors "^1.2.1"
prop-types "^15.5.10"
reactcss "^1.2.0"
tinycolor2 "^1.4.1"
react-dev-utils@^10.2.1:
version "10.2.1"
resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-10.2.1.tgz#f6de325ae25fa4d546d09df4bb1befdc6dd19c19"
@@ -11749,6 +11771,13 @@ react-virtualized@^9.22.2:
object-assign "^4.1.1"
prop-types "^15.6.2"
reactcss@^1.2.0:
version "1.2.3"
resolved "https://registry.yarnpkg.com/reactcss/-/reactcss-1.2.3.tgz#c00013875e557b1cf0dfd9a368a1c3dab3b548dd"
integrity sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==
dependencies:
lodash "^4.0.1"
read-pkg-up@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"