IO-3624 Extract shared title-row UI and polish config forms
This commit is contained in:
Dave
@@ -1,4 +1,4 @@
|
||||
import { DeleteFilled } from "@ant-design/icons";
|
||||
import { DeleteFilled, HolderOutlined } from "@ant-design/icons";
|
||||
import { useApolloClient, useMutation, useQuery } from "@apollo/client/react";
|
||||
import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
|
||||
import { Button, Card, Col, Form, Input, InputNumber, Row, Select, Space, Switch } from "antd";
|
||||
@@ -27,8 +27,16 @@ import dayjs from "../../utils/day";
|
||||
import AlertComponent from "../alert/alert.component";
|
||||
import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
|
||||
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 {
|
||||
INLINE_TITLE_GROUP_STYLE,
|
||||
INLINE_TITLE_HANDLE_STYLE,
|
||||
INLINE_TITLE_INPUT_STYLE,
|
||||
INLINE_TITLE_LABEL_STYLE,
|
||||
INLINE_TITLE_ROW_STYLE,
|
||||
INLINE_TITLE_SEPARATOR_STYLE,
|
||||
INLINE_TITLE_TEXT_STYLE
|
||||
} from "../layout-form-row/inline-form-row-title.utils.js";
|
||||
import ShopEmployeeAddVacation from "./shop-employees-add-vacation.component";
|
||||
import FormItemEmail from "../form-items-formatted/email-form-item.component.jsx";
|
||||
|
||||
@@ -42,17 +50,16 @@ const mapDispatchToProps = () => ({
|
||||
export function ShopEmployeesFormComponent({ bodyshop }) {
|
||||
const { t } = useTranslation();
|
||||
const [form] = useForm();
|
||||
const employeeRates = Form.useWatch(["rates"], form) || [];
|
||||
const employeeNumber = Form.useWatch("employee_number", form);
|
||||
const firstName = Form.useWatch("first_name", form);
|
||||
const lastName = Form.useWatch("last_name", form);
|
||||
const employeeOptionsColProps = {
|
||||
xs: 24,
|
||||
sm: 12,
|
||||
md: 8,
|
||||
lg: { flex: "0 0 320px" },
|
||||
xl: { flex: "0 0 280px" },
|
||||
xxl: { flex: "0 0 380px" }
|
||||
md: 12,
|
||||
lg: 8,
|
||||
xl: 8,
|
||||
xxl: 8
|
||||
};
|
||||
const history = useNavigate();
|
||||
const search = queryString.parse(useLocation().search);
|
||||
@@ -194,161 +201,200 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
|
||||
}
|
||||
>
|
||||
<Form onFinish={handleFinish} autoComplete={"off"} layout="vertical" form={form}>
|
||||
<LayoutFormRow title={t("bodyshop.labels.employee_options")}>
|
||||
<div style={{ display: "grid", rowGap: 16 }}>
|
||||
<Row gutter={[16, 16]} wrap>
|
||||
<Col {...employeeOptionsColProps}>
|
||||
<Form.Item
|
||||
name="first_name"
|
||||
label={t("employees.fields.first_name")}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
<LayoutFormRow
|
||||
title={
|
||||
<div
|
||||
style={{
|
||||
...INLINE_TITLE_ROW_STYLE,
|
||||
justifyContent: "space-between"
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
...INLINE_TITLE_TEXT_STYLE,
|
||||
marginRight: "auto"
|
||||
}}
|
||||
>
|
||||
{t("bodyshop.labels.employee_options")}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 4,
|
||||
flexWrap: "wrap",
|
||||
marginLeft: "auto"
|
||||
}}
|
||||
>
|
||||
<div aria-hidden style={INLINE_TITLE_SEPARATOR_STYLE} />
|
||||
<div
|
||||
style={{
|
||||
...INLINE_TITLE_GROUP_STYLE,
|
||||
flex: "0 0 auto"
|
||||
}}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col {...employeeOptionsColProps}>
|
||||
<Form.Item
|
||||
label={t("employees.fields.last_name")}
|
||||
name="last_name"
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
<div style={INLINE_TITLE_LABEL_STYLE}>{t("employees.labels.active")}</div>
|
||||
<Form.Item noStyle valuePropName="checked" name="active">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
</div>
|
||||
<div aria-hidden style={INLINE_TITLE_SEPARATOR_STYLE} />
|
||||
<div
|
||||
style={{
|
||||
...INLINE_TITLE_GROUP_STYLE,
|
||||
flex: "0 0 auto"
|
||||
}}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col {...employeeOptionsColProps}>
|
||||
<Form.Item
|
||||
name="employee_number"
|
||||
label={t("employees.fields.employee_number")}
|
||||
validateTrigger="onBlur"
|
||||
hasFeedback
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
},
|
||||
() => ({
|
||||
async validator(rule, value) {
|
||||
if (value) {
|
||||
const response = await client.query({
|
||||
query: CHECK_EMPLOYEE_NUMBER,
|
||||
variables: {
|
||||
employeenumber: value
|
||||
}
|
||||
});
|
||||
|
||||
if (response.data.employees_aggregate.aggregate.count === 0) {
|
||||
return Promise.resolve();
|
||||
} else if (
|
||||
response.data.employees_aggregate.nodes.length === 1 &&
|
||||
response.data.employees_aggregate.nodes[0].id === form.getFieldValue("id")
|
||||
) {
|
||||
return Promise.resolve();
|
||||
<div style={INLINE_TITLE_LABEL_STYLE}>{t("employees.fields.flat_rate")}</div>
|
||||
<Form.Item noStyle valuePropName="checked" name="flat_rate">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
wrapTitle
|
||||
>
|
||||
<Row gutter={[16, 16]} wrap>
|
||||
<Col {...employeeOptionsColProps}>
|
||||
<Form.Item
|
||||
name="first_name"
|
||||
label={t("employees.fields.first_name")}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col {...employeeOptionsColProps}>
|
||||
<Form.Item
|
||||
label={t("employees.fields.last_name")}
|
||||
name="last_name"
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col {...employeeOptionsColProps}>
|
||||
<Form.Item
|
||||
name="employee_number"
|
||||
label={t("employees.fields.employee_number")}
|
||||
validateTrigger="onBlur"
|
||||
hasFeedback
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
},
|
||||
() => ({
|
||||
async validator(rule, value) {
|
||||
if (value) {
|
||||
const response = await client.query({
|
||||
query: CHECK_EMPLOYEE_NUMBER,
|
||||
variables: {
|
||||
employeenumber: value
|
||||
}
|
||||
return Promise.reject(t("employees.validation.unique_employee_number"));
|
||||
} else {
|
||||
});
|
||||
|
||||
if (response.data.employees_aggregate.aggregate.count === 0) {
|
||||
return Promise.resolve();
|
||||
} else if (
|
||||
response.data.employees_aggregate.nodes.length === 1 &&
|
||||
response.data.employees_aggregate.nodes[0].id === form.getFieldValue("id")
|
||||
) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
return Promise.reject(t("employees.validation.unique_employee_number"));
|
||||
} else {
|
||||
return Promise.resolve();
|
||||
}
|
||||
})
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col {...employeeOptionsColProps}>
|
||||
<Form.Item
|
||||
label={t("employees.fields.pin")}
|
||||
name="pin"
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={[16, 16]} wrap>
|
||||
<Col {...employeeOptionsColProps}>
|
||||
<Form.Item label={t("employees.fields.active")} valuePropName="checked" name="active">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col {...employeeOptionsColProps}>
|
||||
<Form.Item label={t("employees.fields.flat_rate")} name="flat_rate" valuePropName="checked">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col {...employeeOptionsColProps}>
|
||||
<Form.Item
|
||||
name="hire_date"
|
||||
label={t("employees.fields.hire_date")}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<DateTimePicker isDateOnly />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col {...employeeOptionsColProps}>
|
||||
<Form.Item label={t("employees.fields.termination_date")} name="termination_date">
|
||||
<DateTimePicker isDateOnly />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col {...employeeOptionsColProps}>
|
||||
<Form.Item
|
||||
label={t("employees.fields.user_email")}
|
||||
name="user_email"
|
||||
validateTrigger="onBlur"
|
||||
rules={[
|
||||
({ getFieldValue }) => ({
|
||||
async validator(rule, value) {
|
||||
const user_email = getFieldValue("user_email");
|
||||
})
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col {...employeeOptionsColProps}>
|
||||
<Form.Item
|
||||
label={t("employees.fields.pin")}
|
||||
name="pin"
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col {...employeeOptionsColProps}>
|
||||
<Form.Item
|
||||
name="hire_date"
|
||||
label={t("employees.fields.hire_date")}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<DateTimePicker isDateOnly />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col {...employeeOptionsColProps}>
|
||||
<Form.Item label={t("employees.fields.termination_date")} name="termination_date">
|
||||
<DateTimePicker isDateOnly />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col {...employeeOptionsColProps}>
|
||||
<Form.Item
|
||||
label={t("employees.fields.user_email")}
|
||||
name="user_email"
|
||||
validateTrigger="onBlur"
|
||||
rules={[
|
||||
({ getFieldValue }) => ({
|
||||
async validator(rule, value) {
|
||||
const user_email = getFieldValue("user_email");
|
||||
|
||||
if (user_email && value) {
|
||||
const response = await client.query({
|
||||
query: QUERY_USERS_BY_EMAIL,
|
||||
variables: {
|
||||
email: user_email
|
||||
}
|
||||
});
|
||||
|
||||
if (response.data.users.length === 1) {
|
||||
return Promise.resolve();
|
||||
if (user_email && value) {
|
||||
const response = await client.query({
|
||||
query: QUERY_USERS_BY_EMAIL,
|
||||
variables: {
|
||||
email: user_email
|
||||
}
|
||||
return Promise.reject(t("bodyshop.validation.useremailmustexist"));
|
||||
} else {
|
||||
});
|
||||
|
||||
if (response.data.users.length === 1) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
return Promise.reject(t("bodyshop.validation.useremailmustexist"));
|
||||
} else {
|
||||
return Promise.resolve();
|
||||
}
|
||||
})
|
||||
]}
|
||||
>
|
||||
<FormItemEmail />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col {...employeeOptionsColProps}>
|
||||
<Form.Item label={t("employees.fields.external_id")} name="external_id">
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
}
|
||||
})
|
||||
]}
|
||||
>
|
||||
<FormItemEmail />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col {...employeeOptionsColProps}>
|
||||
<Form.Item label={t("employees.fields.external_id")} name="external_id">
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
</LayoutFormRow>
|
||||
<LayoutFormRow title={t("bodyshop.labels.employee_rates")}>
|
||||
<Form.List name={["rates"]}>
|
||||
@@ -356,17 +402,82 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
|
||||
return (
|
||||
<div>
|
||||
{fields.map((field, index) => {
|
||||
const employeeRate = employeeRates[field.name] || {};
|
||||
|
||||
return (
|
||||
<Form.Item key={field.key} style={{ padding: 0, margin: 2 }}>
|
||||
<LayoutFormRow
|
||||
grow
|
||||
title={getFormListItemTitle(
|
||||
t("employees.fields.cost_center"),
|
||||
index,
|
||||
employeeRate.cost_center
|
||||
)}
|
||||
noDivider
|
||||
titleOnly
|
||||
title={
|
||||
<div style={INLINE_TITLE_ROW_STYLE}>
|
||||
<HolderOutlined style={INLINE_TITLE_HANDLE_STYLE} />
|
||||
<div
|
||||
style={{
|
||||
...INLINE_TITLE_GROUP_STYLE,
|
||||
flex: "1 1 260px"
|
||||
}}
|
||||
>
|
||||
<div style={INLINE_TITLE_LABEL_STYLE}>{t("employees.fields.cost_center")}</div>
|
||||
<Form.Item
|
||||
noStyle
|
||||
name={[field.name, "cost_center"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Select
|
||||
size="small"
|
||||
options={[
|
||||
{ value: "timetickets.labels.shift", label: t("timetickets.labels.shift") },
|
||||
...(bodyshop.cdk_dealerid ||
|
||||
bodyshop.pbs_serialnumber ||
|
||||
bodyshop.rr_dealerid ||
|
||||
Enhanced_Payroll.treatment === "on"
|
||||
? CiecaSelect(false, true)
|
||||
: bodyshop.md_responsibility_centers.costs.map((c) => ({
|
||||
value: c.name,
|
||||
label: c.name
|
||||
})))
|
||||
]}
|
||||
style={{ width: "100%" }}
|
||||
styles={{
|
||||
selector: INLINE_TITLE_INPUT_STYLE
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
<div aria-hidden style={INLINE_TITLE_SEPARATOR_STYLE} />
|
||||
<div
|
||||
style={{
|
||||
...INLINE_TITLE_GROUP_STYLE,
|
||||
flex: "0 1 190px"
|
||||
}}
|
||||
>
|
||||
<div style={INLINE_TITLE_LABEL_STYLE}>{t("employees.fields.rate")}</div>
|
||||
<Form.Item
|
||||
noStyle
|
||||
name={[field.name, "rate"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
}
|
||||
]}
|
||||
>
|
||||
<InputNumber
|
||||
min={0}
|
||||
precision={2}
|
||||
size="small"
|
||||
style={{
|
||||
...INLINE_TITLE_INPUT_STYLE,
|
||||
width: "100%"
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
wrapTitle
|
||||
extra={
|
||||
<Space align="center" size="small">
|
||||
<Button
|
||||
@@ -384,45 +495,7 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
|
||||
/>
|
||||
</Space>
|
||||
}
|
||||
>
|
||||
<Form.Item
|
||||
label={t("employees.fields.cost_center")}
|
||||
name={[field.name, "cost_center"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<Select
|
||||
options={[
|
||||
{ value: "timetickets.labels.shift", label: t("timetickets.labels.shift") },
|
||||
...(bodyshop.cdk_dealerid ||
|
||||
bodyshop.pbs_serialnumber ||
|
||||
bodyshop.rr_dealerid ||
|
||||
Enhanced_Payroll.treatment === "on"
|
||||
? CiecaSelect(false, true)
|
||||
: bodyshop.md_responsibility_centers.costs.map((c) => ({
|
||||
value: c.name,
|
||||
label: c.name
|
||||
})))
|
||||
]}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("employees.fields.rate")}
|
||||
name={[field.name, "rate"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
//message: t("general.validation.required"),
|
||||
}
|
||||
]}
|
||||
>
|
||||
<InputNumber min={0} precision={2} />
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
/>
|
||||
</Form.Item>
|
||||
);
|
||||
})}
|
||||
|
||||
Reference in New Issue
Block a user