IO-3624 Refresh shop config list rows and color UX
This commit is contained in:
Dave
@@ -1,5 +1,5 @@
|
||||
import { DeleteFilled } from "@ant-design/icons";
|
||||
import { Button, Divider, Form, Input, InputNumber, Select, Space, Switch, TimePicker } from "antd";
|
||||
import { Button, Form, Input, InputNumber, Select, Space, Switch, TimePicker } from "antd";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { connect } from "react-redux";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
@@ -7,8 +7,14 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
|
||||
import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
|
||||
import ColorpickerFormItemComponent from "../form-items-formatted/colorpicker-form-item.component";
|
||||
import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
|
||||
import { getFormListItemTitle } from "../form-list-move-arrows/form-list-item-title.utils";
|
||||
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
|
||||
import { ColorPicker } from "./shop-info.rostatus.component";
|
||||
import {
|
||||
DEFAULT_TRANSLUCENT_CARD_COLOR,
|
||||
DEFAULT_TRANSLUCENT_PICKER_COLOR,
|
||||
getTintedCardSurfaceStyles
|
||||
} from "./shop-info.color.utils";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
bodyshop: selectBodyshop
|
||||
@@ -17,12 +23,24 @@ const mapDispatchToProps = () => ({
|
||||
//setUserLanguage: language => dispatch(setUserLanguage(language))
|
||||
});
|
||||
|
||||
const WORKING_DAYS = [
|
||||
{ key: "sunday", labelKey: "general.labels.sunday" },
|
||||
{ key: "monday", labelKey: "general.labels.monday" },
|
||||
{ key: "tuesday", labelKey: "general.labels.tuesday" },
|
||||
{ key: "wednesday", labelKey: "general.labels.wednesday" },
|
||||
{ key: "thursday", labelKey: "general.labels.thursday" },
|
||||
{ key: "friday", labelKey: "general.labels.friday" },
|
||||
{ key: "saturday", labelKey: "general.labels.saturday" }
|
||||
];
|
||||
|
||||
export function ShopInfoSchedulingComponent({ form, bodyshop }) {
|
||||
const { t } = useTranslation();
|
||||
const appointmentColors = Form.useWatch(["appt_colors"], form) || form.getFieldValue(["appt_colors"]) || [];
|
||||
const schedulingBuckets = Form.useWatch(["ssbuckets"], form) || form.getFieldValue(["ssbuckets"]) || [];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<LayoutFormRow id="shopinfo-scheduling">
|
||||
<LayoutFormRow grow header={t("bodyshop.labels.scheduling")} id="shopinfo-scheduling">
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.appt_length")}
|
||||
name={"appt_length"}
|
||||
@@ -100,80 +118,93 @@ export function ShopInfoSchedulingComponent({ form, bodyshop }) {
|
||||
<Select mode="tags" />
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
<Divider titlePlacement="left">{t("bodyshop.labels.workingdays")}</Divider>
|
||||
<Space wrap size="large" id="workingdays">
|
||||
<Form.Item label={t("general.labels.sunday")} name={["workingdays", "sunday"]} valuePropName="checked">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("general.labels.monday")} name={["workingdays", "monday"]} valuePropName="checked">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("general.labels.tuesday")} name={["workingdays", "tuesday"]} valuePropName="checked">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("general.labels.wednesday")} name={["workingdays", "wednesday"]} valuePropName="checked">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("general.labels.thursday")} name={["workingdays", "thursday"]} valuePropName="checked">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("general.labels.friday")} name={["workingdays", "friday"]} valuePropName="checked">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("general.labels.saturday")} name={["workingdays", "saturday"]} valuePropName="checked">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
</Space>
|
||||
<LayoutFormRow header={t("bodyshop.labels.workingdays")} id="workingdays">
|
||||
<Space wrap size="middle">
|
||||
{WORKING_DAYS.map(({ key, labelKey }) => (
|
||||
<Form.Item key={key} label={t(labelKey)} name={["workingdays", key]} valuePropName="checked">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
))}
|
||||
</Space>
|
||||
</LayoutFormRow>
|
||||
<LayoutFormRow header={t("bodyshop.labels.apptcolors")} id="apptcolors">
|
||||
<Form.List name={["appt_colors"]}>
|
||||
{(fields, { add, remove, move }) => {
|
||||
return (
|
||||
<div>
|
||||
{fields.map((field, index) => (
|
||||
<Form.Item key={field.key}>
|
||||
<LayoutFormRow noDivider>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.appt_colors.label")}
|
||||
key={`${index}aptcolorlabel`}
|
||||
name={[field.name, "label"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
{fields.map((field, index) => {
|
||||
const appointmentColor =
|
||||
appointmentColors[field.name] || form.getFieldValue(["appt_colors", field.name]) || {};
|
||||
const appointmentColorSurfaceStyles = getTintedCardSurfaceStyles(appointmentColor.color);
|
||||
|
||||
return (
|
||||
<Form.Item key={field.key}>
|
||||
<LayoutFormRow
|
||||
noDivider
|
||||
title={getFormListItemTitle(
|
||||
t("bodyshop.fields.appt_colors.label"),
|
||||
index,
|
||||
appointmentColor.label
|
||||
)}
|
||||
extra={
|
||||
<Space align="center" size="small">
|
||||
<Button
|
||||
type="text"
|
||||
icon={<DeleteFilled />}
|
||||
onClick={() => {
|
||||
remove(field.name);
|
||||
}}
|
||||
/>
|
||||
<FormListMoveArrows
|
||||
move={move}
|
||||
index={index}
|
||||
total={fields.length}
|
||||
orientation="horizontal"
|
||||
/>
|
||||
</Space>
|
||||
}
|
||||
{...appointmentColorSurfaceStyles}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
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>
|
||||
<Space wrap>
|
||||
<DeleteFilled
|
||||
onClick={() => {
|
||||
remove(field.name);
|
||||
}}
|
||||
/>
|
||||
<FormListMoveArrows move={move} index={index} total={fields.length} />
|
||||
</Space>
|
||||
</LayoutFormRow>
|
||||
</Form.Item>
|
||||
))}
|
||||
<Form.Item
|
||||
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
|
||||
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>
|
||||
</LayoutFormRow>
|
||||
</Form.Item>
|
||||
);
|
||||
})}
|
||||
<Form.Item>
|
||||
<Button
|
||||
type="dashed"
|
||||
onClick={() => {
|
||||
add();
|
||||
add({
|
||||
color: {
|
||||
...DEFAULT_TRANSLUCENT_PICKER_COLOR,
|
||||
rgb: { ...DEFAULT_TRANSLUCENT_PICKER_COLOR.rgb }
|
||||
}
|
||||
});
|
||||
}}
|
||||
style={{ width: "100%" }}
|
||||
>
|
||||
@@ -191,73 +222,103 @@ export function ShopInfoSchedulingComponent({ form, bodyshop }) {
|
||||
{(fields, { add, remove, move }) => {
|
||||
return (
|
||||
<div>
|
||||
{fields.map((field, index) => (
|
||||
<Form.Item key={field.key}>
|
||||
<LayoutFormRow noDivider>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.ssbuckets.id")}
|
||||
key={`${index}id`}
|
||||
name={[field.name, "id"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.ssbuckets.label")}
|
||||
key={`${index}label`}
|
||||
name={[field.name, "label"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
{fields.map((field, index) => {
|
||||
const schedulingBucket =
|
||||
schedulingBuckets[field.name] || form.getFieldValue(["ssbuckets", field.name]) || {};
|
||||
const schedulingBucketSurfaceStyles = getTintedCardSurfaceStyles(schedulingBucket.color);
|
||||
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.ssbuckets.gte")}
|
||||
key={`${index}gte`}
|
||||
name={[field.name, "gte"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
return (
|
||||
<Form.Item key={field.key}>
|
||||
<LayoutFormRow
|
||||
noDivider
|
||||
title={getFormListItemTitle(
|
||||
t("bodyshop.fields.ssbuckets.label"),
|
||||
index,
|
||||
schedulingBucket.label,
|
||||
schedulingBucket.id
|
||||
)}
|
||||
extra={
|
||||
<Space align="center" size="small">
|
||||
<Button
|
||||
type="text"
|
||||
icon={<DeleteFilled />}
|
||||
onClick={() => {
|
||||
remove(field.name);
|
||||
}}
|
||||
/>
|
||||
<FormListMoveArrows
|
||||
move={move}
|
||||
index={index}
|
||||
total={fields.length}
|
||||
orientation="horizontal"
|
||||
/>
|
||||
</Space>
|
||||
}
|
||||
{...schedulingBucketSurfaceStyles}
|
||||
>
|
||||
<InputNumber />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.ssbuckets.id")}
|
||||
key={`${index}id`}
|
||||
name={[field.name, "id"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.ssbuckets.label")}
|
||||
key={`${index}label`}
|
||||
name={[field.name, "label"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.ssbuckets.lt")}
|
||||
key={`${index}lt`}
|
||||
name={[field.name, "lt"]}
|
||||
>
|
||||
<InputNumber />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.ssbuckets.gte")}
|
||||
key={`${index}gte`}
|
||||
name={[field.name, "gte"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<InputNumber />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.ssbuckets.target")}
|
||||
key={`${index}target`}
|
||||
name={[field.name, "target"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<InputNumber />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.ssbuckets.lt")}
|
||||
key={`${index}lt`}
|
||||
name={[field.name, "lt"]}
|
||||
>
|
||||
<InputNumber />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.ssbuckets.target")}
|
||||
key={`${index}target`}
|
||||
name={[field.name, "target"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<InputNumber />
|
||||
</Form.Item>
|
||||
|
||||
<Space orientation="horizontal">
|
||||
<Form.Item
|
||||
label={
|
||||
<Space>
|
||||
@@ -284,23 +345,17 @@ export function ShopInfoSchedulingComponent({ form, bodyshop }) {
|
||||
>
|
||||
<ColorPicker />
|
||||
</Form.Item>
|
||||
<Space wrap>
|
||||
<DeleteFilled
|
||||
onClick={() => {
|
||||
remove(field.name);
|
||||
}}
|
||||
/>
|
||||
<FormListMoveArrows move={move} index={index} total={fields.length} />
|
||||
</Space>
|
||||
</Space>
|
||||
</LayoutFormRow>
|
||||
</Form.Item>
|
||||
))}
|
||||
</LayoutFormRow>
|
||||
</Form.Item>
|
||||
);
|
||||
})}
|
||||
<Form.Item>
|
||||
<Button
|
||||
type="dashed"
|
||||
onClick={() => {
|
||||
add();
|
||||
add({
|
||||
color: { ...DEFAULT_TRANSLUCENT_CARD_COLOR }
|
||||
});
|
||||
}}
|
||||
style={{ width: "100%" }}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user