IO-3624 Polish config empty states and admin cards
This commit is contained in:
Dave
@@ -27,6 +27,7 @@ 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 ConfigListEmptyState from "../layout-form-row/config-list-empty-state.component.jsx";
|
||||
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
|
||||
import {
|
||||
INLINE_TITLE_GROUP_STYLE,
|
||||
@@ -35,6 +36,7 @@ import {
|
||||
INLINE_TITLE_LABEL_STYLE,
|
||||
INLINE_TITLE_ROW_STYLE,
|
||||
INLINE_TITLE_SEPARATOR_STYLE,
|
||||
INLINE_TITLE_SWITCH_GROUP_STYLE,
|
||||
INLINE_TITLE_TEXT_STYLE
|
||||
} from "../layout-form-row/inline-form-row-title.utils.js";
|
||||
import ShopEmployeeAddVacation from "./shop-employees-add-vacation.component";
|
||||
@@ -166,6 +168,8 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
|
||||
key: "actions",
|
||||
render: (text, record) => (
|
||||
<Button
|
||||
type="text"
|
||||
danger
|
||||
onClick={async () => {
|
||||
await deleteVacation({
|
||||
variables: { id: record.id },
|
||||
@@ -195,8 +199,8 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
|
||||
<Card
|
||||
title={employeeCardTitle}
|
||||
extra={
|
||||
<Button type="primary" onClick={() => form.submit()}>
|
||||
{t("general.actions.save")}
|
||||
<Button type="primary" onClick={() => form.submit()} style={{ minWidth: 170 }}>
|
||||
{t("employees.actions.save_employee")}
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
@@ -229,8 +233,7 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
|
||||
<div aria-hidden style={INLINE_TITLE_SEPARATOR_STYLE} />
|
||||
<div
|
||||
style={{
|
||||
...INLINE_TITLE_GROUP_STYLE,
|
||||
flex: "0 0 auto"
|
||||
...INLINE_TITLE_SWITCH_GROUP_STYLE
|
||||
}}
|
||||
>
|
||||
<div style={INLINE_TITLE_LABEL_STYLE}>{t("employees.labels.active")}</div>
|
||||
@@ -241,8 +244,7 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
|
||||
<div aria-hidden style={INLINE_TITLE_SEPARATOR_STYLE} />
|
||||
<div
|
||||
style={{
|
||||
...INLINE_TITLE_GROUP_STYLE,
|
||||
flex: "0 0 auto"
|
||||
...INLINE_TITLE_SWITCH_GROUP_STYLE
|
||||
}}
|
||||
>
|
||||
<div style={INLINE_TITLE_LABEL_STYLE}>{t("employees.fields.flat_rate")}</div>
|
||||
@@ -396,147 +398,141 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
|
||||
</Col>
|
||||
</Row>
|
||||
</LayoutFormRow>
|
||||
<LayoutFormRow title={t("bodyshop.labels.employee_rates")}>
|
||||
<Form.List name={["rates"]}>
|
||||
{(fields, { add, remove, move }) => {
|
||||
return (
|
||||
<Form.List name={["rates"]}>
|
||||
{(fields, { add, remove, move }) => {
|
||||
return (
|
||||
<LayoutFormRow
|
||||
title={t("bodyshop.labels.employee_rates")}
|
||||
actions={[
|
||||
<Button
|
||||
key="add-rate"
|
||||
type="primary"
|
||||
block
|
||||
onClick={() => {
|
||||
add();
|
||||
}}
|
||||
id="add-employee-rate-button"
|
||||
>
|
||||
<span id="new-employee-rate">{t("employees.actions.addrate")}</span>
|
||||
</Button>
|
||||
]}
|
||||
>
|
||||
<div>
|
||||
{fields.map((field, index) => {
|
||||
return (
|
||||
<Form.Item key={field.key} style={{ padding: 0, margin: 2 }}>
|
||||
<LayoutFormRow
|
||||
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
|
||||
})))
|
||||
{fields.length === 0 ? (
|
||||
<ConfigListEmptyState actionLabel={t("employees.actions.addrate")} />
|
||||
) : (
|
||||
fields.map((field, index) => {
|
||||
return (
|
||||
<Form.Item key={field.key} style={{ padding: 0, margin: 2 }}>
|
||||
<LayoutFormRow
|
||||
noDivider
|
||||
title={
|
||||
<div style={INLINE_TITLE_ROW_STYLE}>
|
||||
<HolderOutlined style={INLINE_TITLE_HANDLE_STYLE} />
|
||||
<div style={INLINE_TITLE_GROUP_STYLE}>
|
||||
<div style={INLINE_TITLE_LABEL_STYLE}>{t("employees.fields.cost_center")}</div>
|
||||
<Form.Item
|
||||
noStyle
|
||||
name={[field.name, "cost_center"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
}
|
||||
]}
|
||||
style={{ width: "100%" }}
|
||||
styles={{
|
||||
selector: INLINE_TITLE_INPUT_STYLE
|
||||
}}
|
||||
/>
|
||||
</Form.Item>
|
||||
>
|
||||
<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>
|
||||
<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
|
||||
type="text"
|
||||
icon={<DeleteFilled />}
|
||||
onClick={() => {
|
||||
remove(field.name);
|
||||
}}
|
||||
/>
|
||||
<FormListMoveArrows
|
||||
move={move}
|
||||
index={index}
|
||||
total={fields.length}
|
||||
orientation="horizontal"
|
||||
/>
|
||||
</Space>
|
||||
}
|
||||
/>
|
||||
</Form.Item>
|
||||
);
|
||||
})}
|
||||
<Form.Item>
|
||||
<Button
|
||||
type="dashed"
|
||||
onClick={() => {
|
||||
add();
|
||||
}}
|
||||
style={{ width: "100%" }}
|
||||
id="add-employee-rate-button"
|
||||
>
|
||||
<span id="new-employee-rate">{t("employees.actions.newrate")}</span>
|
||||
</Button>
|
||||
</Form.Item>
|
||||
}
|
||||
wrapTitle
|
||||
extra={
|
||||
<Space align="center" size="small">
|
||||
<Button
|
||||
type="text"
|
||||
danger
|
||||
icon={<DeleteFilled />}
|
||||
onClick={() => {
|
||||
remove(field.name);
|
||||
}}
|
||||
/>
|
||||
<FormListMoveArrows
|
||||
move={move}
|
||||
index={index}
|
||||
total={fields.length}
|
||||
orientation="horizontal"
|
||||
/>
|
||||
</Space>
|
||||
}
|
||||
>
|
||||
<Form.Item
|
||||
label={t("employees.fields.rate")}
|
||||
name={[field.name, "rate"]}
|
||||
rules={[
|
||||
{
|
||||
required: true
|
||||
}
|
||||
]}
|
||||
style={{ marginBottom: 0 }}
|
||||
>
|
||||
<InputNumber min={0} precision={2} style={{ width: "100%" }} />
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
</Form.Item>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Form.List>
|
||||
</LayoutFormRow>
|
||||
</LayoutFormRow>
|
||||
);
|
||||
}}
|
||||
</Form.List>
|
||||
</Form>
|
||||
|
||||
<LayoutFormRow title={t("bodyshop.labels.employee_vacation")}>
|
||||
<div>
|
||||
<ResponsiveTable
|
||||
columns={columns}
|
||||
mobileColumnKeys={["start", "length", "actions"]}
|
||||
rowKey={"id"}
|
||||
dataSource={data?.employees_by_pk?.employee_vacations ?? []}
|
||||
pagination={false}
|
||||
<LayoutFormRow
|
||||
title={t("bodyshop.labels.employee_vacation")}
|
||||
actions={[
|
||||
<ShopEmployeeAddVacation
|
||||
key="add-vacation"
|
||||
employee={data && data.employees_by_pk}
|
||||
buttonProps={{
|
||||
type: "primary",
|
||||
block: true
|
||||
}}
|
||||
/>
|
||||
<div style={{ marginTop: 12 }}>
|
||||
<ShopEmployeeAddVacation
|
||||
employee={data && data.employees_by_pk}
|
||||
buttonProps={{
|
||||
type: "dashed",
|
||||
block: true
|
||||
}}
|
||||
]}
|
||||
>
|
||||
{(data?.employees_by_pk?.employee_vacations ?? []).length === 0 ? (
|
||||
<ConfigListEmptyState actionLabel={t("employees.actions.addvacation")} />
|
||||
) : (
|
||||
<div>
|
||||
<ResponsiveTable
|
||||
columns={columns}
|
||||
mobileColumnKeys={["start", "length", "actions"]}
|
||||
rowKey={"id"}
|
||||
dataSource={data?.employees_by_pk?.employee_vacations ?? []}
|
||||
pagination={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</LayoutFormRow>
|
||||
</Card>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user