IO-3624 Polish config empty states and admin cards
This commit is contained in:
Dave
@@ -7,6 +7,7 @@ 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 ConfigListEmptyState from "../layout-form-row/config-list-empty-state.component.jsx";
|
||||
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
|
||||
import { ColorPicker } from "./shop-info.rostatus.component";
|
||||
import {
|
||||
@@ -227,195 +228,74 @@ export function ShopInfoSchedulingComponent({ form, bodyshop }) {
|
||||
))}
|
||||
</Space>
|
||||
</LayoutFormRow>
|
||||
<LayoutFormRow header={t("bodyshop.labels.apptcolors")} id="apptcolors">
|
||||
<Form.List name={["appt_colors"]}>
|
||||
{(fields, { add, remove, move }) => {
|
||||
return (
|
||||
<Form.List name={["appt_colors"]}>
|
||||
{(fields, { add, remove, move }) => {
|
||||
return (
|
||||
<LayoutFormRow
|
||||
header={t("bodyshop.labels.apptcolors")}
|
||||
id="apptcolors"
|
||||
actions={[
|
||||
<Button
|
||||
key="add-appointment-color"
|
||||
type="primary"
|
||||
block
|
||||
onClick={() => {
|
||||
add({
|
||||
color: {
|
||||
...DEFAULT_TRANSLUCENT_PICKER_COLOR,
|
||||
rgb: { ...DEFAULT_TRANSLUCENT_PICKER_COLOR.rgb }
|
||||
}
|
||||
});
|
||||
}}
|
||||
>
|
||||
{t("bodyshop.actions.addapptcolor")}
|
||||
</Button>
|
||||
]}
|
||||
>
|
||||
<div>
|
||||
{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={
|
||||
<div style={{ minWidth: 180, maxWidth: "100%" }}>
|
||||
<Form.Item
|
||||
noStyle
|
||||
key={`${index}aptcolorlabel`}
|
||||
name={[field.name, "label"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input
|
||||
size="small"
|
||||
placeholder={t("bodyshop.fields.appt_colors.label")}
|
||||
style={SECTION_TITLE_INPUT_STYLE}
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
}
|
||||
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}
|
||||
>
|
||||
<Form.Item
|
||||
key={`${index}aptcolorcolor`}
|
||||
name={[field.name, "color"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<ColorpickerFormItemComponent styles={APPOINTMENT_COLOR_PICKER_STYLES} />
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
</Form.Item>
|
||||
);
|
||||
})}
|
||||
<Form.Item>
|
||||
<Button
|
||||
type="dashed"
|
||||
onClick={() => {
|
||||
add({
|
||||
color: {
|
||||
...DEFAULT_TRANSLUCENT_PICKER_COLOR,
|
||||
rgb: { ...DEFAULT_TRANSLUCENT_PICKER_COLOR.rgb }
|
||||
}
|
||||
});
|
||||
}}
|
||||
style={{ width: "100%" }}
|
||||
>
|
||||
{t("bodyshop.actions.addapptcolor")}
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Form.List>
|
||||
</LayoutFormRow>
|
||||
{HasFeatureAccess({ featureName: "smartscheduling", bodyshop }) && (
|
||||
<LayoutFormRow header={t("bodyshop.labels.ssbuckets")} id="ssbuckets">
|
||||
<Form.List name={["ssbuckets"]}>
|
||||
{(fields, { add, remove, move }) => {
|
||||
return (
|
||||
<div>
|
||||
{fields.map((field, index) => {
|
||||
const schedulingBucket =
|
||||
schedulingBuckets[field.name] || form.getFieldValue(["ssbuckets", field.name]) || {};
|
||||
const schedulingBucketSurfaceStyles = getTintedCardSurfaceStyles(schedulingBucket.color);
|
||||
{fields.length === 0 ? (
|
||||
<ConfigListEmptyState actionLabel={t("bodyshop.actions.addapptcolor")} />
|
||||
) : (
|
||||
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={
|
||||
<div style={SECTION_TITLE_INPUT_ROW_STYLE}>
|
||||
<div style={SECTION_TITLE_INPUT_GROUP_STYLE}>
|
||||
<div style={SECTION_TITLE_INPUT_LABEL_STYLE}>{t("bodyshop.fields.ssbuckets.id")}</div>
|
||||
<Form.Item
|
||||
noStyle
|
||||
key={`${index}id`}
|
||||
name={[field.name, "id"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input
|
||||
size="small"
|
||||
placeholder={t("bodyshop.fields.ssbuckets.id")}
|
||||
style={{
|
||||
...SECTION_TITLE_INPUT_STYLE,
|
||||
width: 72
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
...SECTION_TITLE_INPUT_GROUP_STYLE,
|
||||
flex: 1,
|
||||
minWidth: 0
|
||||
}}
|
||||
<div style={{ minWidth: 180, maxWidth: "100%" }}>
|
||||
<Form.Item
|
||||
noStyle
|
||||
key={`${index}aptcolorlabel`}
|
||||
name={[field.name, "label"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<div style={SECTION_TITLE_INPUT_LABEL_STYLE}>
|
||||
{t("bodyshop.fields.ssbuckets.label")}
|
||||
</div>
|
||||
<Form.Item
|
||||
noStyle
|
||||
key={`${index}label`}
|
||||
name={[field.name, "label"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input
|
||||
size="small"
|
||||
placeholder={t("bodyshop.fields.ssbuckets.label")}
|
||||
style={{
|
||||
...SECTION_TITLE_INPUT_STYLE,
|
||||
width: "100%"
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
<Input
|
||||
size="small"
|
||||
placeholder={t("bodyshop.fields.appt_colors.label")}
|
||||
style={SECTION_TITLE_INPUT_STYLE}
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
}
|
||||
extra={
|
||||
<Space align="center" size="small">
|
||||
<Button
|
||||
type="text"
|
||||
danger
|
||||
icon={<DeleteFilled />}
|
||||
onClick={() => {
|
||||
remove(field.name);
|
||||
}}
|
||||
/>
|
||||
<Tooltip title={t("bodyshop.tooltips.reset-color")}>
|
||||
<Button
|
||||
type="text"
|
||||
icon={<ReloadOutlined />}
|
||||
onClick={() => {
|
||||
form.setFieldValue(["ssbuckets", field.name, "color"]);
|
||||
|
||||
form.setFields([
|
||||
{
|
||||
name: ["ssbuckets", field.name, "color"],
|
||||
touched: true
|
||||
}
|
||||
]);
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
<FormListMoveArrows
|
||||
move={move}
|
||||
index={index}
|
||||
@@ -424,74 +304,213 @@ export function ShopInfoSchedulingComponent({ form, bodyshop }) {
|
||||
/>
|
||||
</Space>
|
||||
}
|
||||
{...schedulingBucketSurfaceStyles}
|
||||
{...appointmentColorSurfaceStyles}
|
||||
>
|
||||
<div className="shop-info-scheduling__bucket-card-body">
|
||||
<div className="shop-info-scheduling__bucket-card-fields">
|
||||
<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.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>
|
||||
</div>
|
||||
<div className="shop-info-scheduling__bucket-card-color">
|
||||
<Form.Item key={`${index}color`} name={[field.name, "color"]}>
|
||||
<ColorPicker styles={SCHEDULING_BUCKET_COLOR_PICKER_STYLES} />
|
||||
</Form.Item>
|
||||
</div>
|
||||
</div>
|
||||
<Form.Item
|
||||
key={`${index}aptcolorcolor`}
|
||||
name={[field.name, "color"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<ColorpickerFormItemComponent styles={APPOINTMENT_COLOR_PICKER_STYLES} />
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
</Form.Item>
|
||||
);
|
||||
})}
|
||||
<Form.Item>
|
||||
<Button
|
||||
type="dashed"
|
||||
onClick={() => {
|
||||
add({
|
||||
color: { ...DEFAULT_TRANSLUCENT_CARD_COLOR }
|
||||
});
|
||||
}}
|
||||
style={{ width: "100%" }}
|
||||
>
|
||||
{t("bodyshop.actions.addbucket")}
|
||||
</Button>
|
||||
</Form.Item>
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
</LayoutFormRow>
|
||||
);
|
||||
}}
|
||||
</Form.List>
|
||||
{HasFeatureAccess({ featureName: "smartscheduling", bodyshop }) && (
|
||||
<Form.List name={["ssbuckets"]}>
|
||||
{(fields, { add, remove, move }) => {
|
||||
return (
|
||||
<LayoutFormRow
|
||||
header={t("bodyshop.labels.ssbuckets")}
|
||||
id="ssbuckets"
|
||||
actions={[
|
||||
<Button
|
||||
key="add-job-size-definition"
|
||||
type="primary"
|
||||
block
|
||||
onClick={() => {
|
||||
add({
|
||||
color: { ...DEFAULT_TRANSLUCENT_CARD_COLOR }
|
||||
});
|
||||
}}
|
||||
>
|
||||
{t("bodyshop.actions.addbucket")}
|
||||
</Button>
|
||||
]}
|
||||
>
|
||||
<div>
|
||||
{fields.length === 0 ? (
|
||||
<ConfigListEmptyState actionLabel={t("bodyshop.actions.addbucket")} />
|
||||
) : (
|
||||
fields.map((field, index) => {
|
||||
const schedulingBucket =
|
||||
schedulingBuckets[field.name] || form.getFieldValue(["ssbuckets", field.name]) || {};
|
||||
const schedulingBucketSurfaceStyles = getTintedCardSurfaceStyles(schedulingBucket.color);
|
||||
|
||||
return (
|
||||
<Form.Item key={field.key}>
|
||||
<LayoutFormRow
|
||||
noDivider
|
||||
title={
|
||||
<div style={SECTION_TITLE_INPUT_ROW_STYLE}>
|
||||
<div style={SECTION_TITLE_INPUT_GROUP_STYLE}>
|
||||
<div style={SECTION_TITLE_INPUT_LABEL_STYLE}>{t("bodyshop.fields.ssbuckets.id")}</div>
|
||||
<Form.Item
|
||||
noStyle
|
||||
key={`${index}id`}
|
||||
name={[field.name, "id"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input
|
||||
size="small"
|
||||
placeholder={t("bodyshop.fields.ssbuckets.id")}
|
||||
style={{
|
||||
...SECTION_TITLE_INPUT_STYLE,
|
||||
width: 72
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
...SECTION_TITLE_INPUT_GROUP_STYLE,
|
||||
flex: 1,
|
||||
minWidth: 0
|
||||
}}
|
||||
>
|
||||
<div style={SECTION_TITLE_INPUT_LABEL_STYLE}>
|
||||
{t("bodyshop.fields.ssbuckets.label")}
|
||||
</div>
|
||||
<Form.Item
|
||||
noStyle
|
||||
key={`${index}label`}
|
||||
name={[field.name, "label"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input
|
||||
size="small"
|
||||
placeholder={t("bodyshop.fields.ssbuckets.label")}
|
||||
style={{
|
||||
...SECTION_TITLE_INPUT_STYLE,
|
||||
width: "100%"
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
extra={
|
||||
<Space align="center" size="small">
|
||||
<Button
|
||||
type="text"
|
||||
danger
|
||||
icon={<DeleteFilled />}
|
||||
onClick={() => {
|
||||
remove(field.name);
|
||||
}}
|
||||
/>
|
||||
<Tooltip title={t("bodyshop.tooltips.reset-color")}>
|
||||
<Button
|
||||
type="text"
|
||||
icon={<ReloadOutlined />}
|
||||
onClick={() => {
|
||||
form.setFieldValue(["ssbuckets", field.name, "color"]);
|
||||
|
||||
form.setFields([
|
||||
{
|
||||
name: ["ssbuckets", field.name, "color"],
|
||||
touched: true
|
||||
}
|
||||
]);
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
<FormListMoveArrows
|
||||
move={move}
|
||||
index={index}
|
||||
total={fields.length}
|
||||
orientation="horizontal"
|
||||
/>
|
||||
</Space>
|
||||
}
|
||||
{...schedulingBucketSurfaceStyles}
|
||||
>
|
||||
<div className="shop-info-scheduling__bucket-card-body">
|
||||
<div className="shop-info-scheduling__bucket-card-fields">
|
||||
<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.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>
|
||||
</div>
|
||||
<div className="shop-info-scheduling__bucket-card-color">
|
||||
<Form.Item key={`${index}color`} name={[field.name, "color"]}>
|
||||
<ColorPicker styles={SCHEDULING_BUCKET_COLOR_PICKER_STYLES} />
|
||||
</Form.Item>
|
||||
</div>
|
||||
</div>
|
||||
</LayoutFormRow>
|
||||
</Form.Item>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Form.List>
|
||||
</LayoutFormRow>
|
||||
</LayoutFormRow>
|
||||
);
|
||||
}}
|
||||
</Form.List>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user