IO-3624 Finalize admin config UX and validation polish
This commit is contained in:
Dave
@@ -1,5 +1,5 @@
|
||||
import { DeleteFilled, ReloadOutlined } from "@ant-design/icons";
|
||||
import { Button, Form, Input, InputNumber, Select, Space, Switch, TimePicker, Tooltip } from "antd";
|
||||
import { Button, Col, Form, Input, InputNumber, Row, Select, Space, Switch, TimePicker, Tooltip } from "antd";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { connect } from "react-redux";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
@@ -8,6 +8,7 @@ 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 ConfigListEmptyState from "../layout-form-row/config-list-empty-state.component.jsx";
|
||||
import InlineValidatedFormRow from "../layout-form-row/inline-validated-form-row.component.jsx";
|
||||
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
|
||||
import { ColorPicker } from "./shop-info.rostatus.component";
|
||||
import {
|
||||
@@ -142,82 +143,96 @@ export function ShopInfoSchedulingComponent({ form, bodyshop }) {
|
||||
return (
|
||||
<div>
|
||||
<LayoutFormRow grow header={t("bodyshop.labels.scheduling")} id="shopinfo-scheduling">
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.appt_length")}
|
||||
name={"appt_length"}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<InputNumber min={15} precision={0} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.schedule_start_time")}
|
||||
name={"schedule_start_time"}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
id="schedule_start_time"
|
||||
>
|
||||
<TimePicker disableSeconds={true} format="HH:mm" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.schedule_end_time")}
|
||||
name={"schedule_end_time"}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
id="schedule_end_time"
|
||||
>
|
||||
<TimePicker disableSeconds={true} format="HH:mm" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={["appt_alt_transport"]}
|
||||
label={t("bodyshop.fields.appt_alt_transport")}
|
||||
rules={[
|
||||
{
|
||||
//message: t("general.validation.required"),
|
||||
type: "array"
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Select mode="tags" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={["ss_configuration", "dailyhrslimit"]}
|
||||
label={t("bodyshop.fields.ss_configuration.dailyhrslimit")}
|
||||
>
|
||||
<InputNumber min={0} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={["ss_configuration", "nobusinessdays"]}
|
||||
label={t("bodyshop.fields.ss_configuration.nobusinessdays")}
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={["md_lost_sale_reasons"]}
|
||||
label={t("bodyshop.fields.md_lost_sale_reasons")}
|
||||
rules={[
|
||||
{
|
||||
// required: true,
|
||||
//message: t("general.validation.required"),
|
||||
type: "array"
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Select mode="tags" />
|
||||
</Form.Item>
|
||||
<>
|
||||
<Form.Item
|
||||
name={["appt_alt_transport"]}
|
||||
label={t("bodyshop.fields.appt_alt_transport")}
|
||||
rules={[
|
||||
{
|
||||
//message: t("general.validation.required"),
|
||||
type: "array"
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Select mode="tags" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={["md_lost_sale_reasons"]}
|
||||
label={t("bodyshop.fields.md_lost_sale_reasons")}
|
||||
rules={[
|
||||
{
|
||||
// required: true,
|
||||
//message: t("general.validation.required"),
|
||||
type: "array"
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Select mode="tags" />
|
||||
</Form.Item>
|
||||
<Row gutter={[16, 0]} wrap>
|
||||
<Col xs={24} sm={12} xl={6}>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.appt_length")}
|
||||
name={"appt_length"}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<InputNumber min={15} precision={0} suffix="min" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col xs={24} sm={12} xl={6}>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.schedule_start_time")}
|
||||
name={"schedule_start_time"}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
id="schedule_start_time"
|
||||
>
|
||||
<TimePicker disableSeconds={true} format="HH:mm" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col xs={24} sm={12} xl={6}>
|
||||
<Form.Item
|
||||
label={t("bodyshop.fields.schedule_end_time")}
|
||||
name={"schedule_end_time"}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
id="schedule_end_time"
|
||||
>
|
||||
<TimePicker disableSeconds={true} format="HH:mm" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col xs={24} sm={12} xl={6}>
|
||||
<Form.Item
|
||||
name={["ss_configuration", "dailyhrslimit"]}
|
||||
label={t("bodyshop.fields.ss_configuration.dailyhrslimit")}
|
||||
>
|
||||
<InputNumber min={0} suffix="hrs" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col xs={24} sm={12} xl={6}>
|
||||
<Form.Item
|
||||
name={["ss_configuration", "nobusinessdays"]}
|
||||
label={t("bodyshop.fields.ss_configuration.nobusinessdays")}
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
</>
|
||||
</LayoutFormRow>
|
||||
<LayoutFormRow header={t("bodyshop.labels.workingdays")} id="workingdays">
|
||||
<Space wrap size="middle">
|
||||
@@ -262,8 +277,10 @@ export function ShopInfoSchedulingComponent({ form, bodyshop }) {
|
||||
const appointmentColorSurfaceStyles = getTintedCardSurfaceStyles(appointmentColor.color);
|
||||
|
||||
return (
|
||||
<Form.Item key={field.key}>
|
||||
<LayoutFormRow
|
||||
<Form.Item noStyle key={field.key}>
|
||||
<InlineValidatedFormRow
|
||||
form={form}
|
||||
errorNames={[["appt_colors", field.name, "label"]]}
|
||||
noDivider
|
||||
title={
|
||||
<div style={{ minWidth: 180, maxWidth: "100%" }}>
|
||||
@@ -318,7 +335,7 @@ export function ShopInfoSchedulingComponent({ form, bodyshop }) {
|
||||
>
|
||||
<ColorpickerFormItemComponent styles={APPOINTMENT_COLOR_PICKER_STYLES} />
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
</InlineValidatedFormRow>
|
||||
</Form.Item>
|
||||
);
|
||||
})
|
||||
@@ -360,8 +377,13 @@ export function ShopInfoSchedulingComponent({ form, bodyshop }) {
|
||||
const schedulingBucketSurfaceStyles = getTintedCardSurfaceStyles(schedulingBucket.color);
|
||||
|
||||
return (
|
||||
<Form.Item key={field.key}>
|
||||
<LayoutFormRow
|
||||
<Form.Item noStyle key={field.key}>
|
||||
<InlineValidatedFormRow
|
||||
form={form}
|
||||
errorNames={[
|
||||
["ssbuckets", field.name, "id"],
|
||||
["ssbuckets", field.name, "label"]
|
||||
]}
|
||||
noDivider
|
||||
title={
|
||||
<div style={SECTION_TITLE_INPUT_ROW_STYLE}>
|
||||
@@ -470,7 +492,7 @@ export function ShopInfoSchedulingComponent({ form, bodyshop }) {
|
||||
}
|
||||
]}
|
||||
>
|
||||
<InputNumber />
|
||||
<InputNumber suffix="hrs" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
@@ -478,7 +500,7 @@ export function ShopInfoSchedulingComponent({ form, bodyshop }) {
|
||||
key={`${index}lt`}
|
||||
name={[field.name, "lt"]}
|
||||
>
|
||||
<InputNumber />
|
||||
<InputNumber suffix="hrs" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
@@ -501,7 +523,7 @@ export function ShopInfoSchedulingComponent({ form, bodyshop }) {
|
||||
</Form.Item>
|
||||
</div>
|
||||
</div>
|
||||
</LayoutFormRow>
|
||||
</InlineValidatedFormRow>
|
||||
</Form.Item>
|
||||
);
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user