admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

IO-1533 Kanban Customizations

Browse Source
This commit is contained in:
Patrick Fic
2021-11-17 15:29:04 -08:00
parent f11a4c93ac
commit 69690f0184
10 changed files with 467 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

175
client/src/components/production-board-kanban/production-board-kanban.card-settings.component.jsx
View File

@@ -1,6 +1,16 @@
import { useMutation } from "@apollo/client";
import { Button, Card, Dropdown, Form, Switch } from "antd";
import React, { useEffect } from "react";
import {
Button,
Card,
Col,
Form,
notification,
Popover,
Radio,
Row,
Switch,
} from "antd";
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { UPDATE_KANBAN_SETTINGS } from "../../graphql/user.queries";
@@ -8,70 +18,149 @@ export default function ProductionBoardKanbanCardSettings({
associationSettings,
}) {
const [form] = Form.useForm();
const [visible, setVisible] = useState(false);
const [loading, setLoading] = useState(false);
const [updateKbSettings] = useMutation(UPDATE_KANBAN_SETTINGS);
useEffect(() => {
form.setFieldsValue(
associationSettings && associationSettings.kanban_settings
);
}, [form, associationSettings]);
}, [form, associationSettings, visible]);
const { t } = useTranslation();
const handleFinish = async (values) => {
await updateKbSettings({
setLoading(true);
const result = await updateKbSettings({
variables: {
id: associationSettings && associationSettings.id,
ks: values,
},
});
if (result.errors) {
notification.open({
type: "error",
message: t("production.errors.settings", {
error: JSON.stringify(result.errors),
}),
});
}
setVisible(false);
setLoading(false);
};
const overlay = (
<div>
<Card>
<Form form={form} onFinish={handleFinish}>
<Form.Item
label={t("production.labels.compact")}
name="compact"
valuePropName="checked"
>
<Switch />
</Form.Item>
<Form.Item
label={t("production.labels.laborhrs")}
name="laborhrs"
valuePropName="checked"
>
<Switch />
</Form.Item>
<Form.Item
label={t("production.labels.employeeassignments")}
name="employeeassignments"
valuePropName="checked"
>
<Switch />
</Form.Item>
<Form.Item
label={t("production.labels.alert")}
name="alert"
valuePropName="checked"
>
<Switch />
</Form.Item>
<Form.Item
label={t("production.labels.sublets")}
name="sublets"
valuePropName="checked"
>
<Switch />
</Form.Item>
<Form form={form} onFinish={handleFinish} layout="vertical">
<Row gutter={[16, 16]}>
<Col span={12}>
<Form.Item
label={t("production.labels.compact")}
name="compact"
valuePropName="checked"
>
<Switch />
</Form.Item>
<Form.Item label={t("production.labels.clm_no")} name="clm_no">
<Radio.Group>
<Radio value="front">Front</Radio>
<Radio value="back">Back</Radio>
<Radio value="off">Off</Radio>
</Radio.Group>
</Form.Item>
<Form.Item
label={t("production.labels.ins_co_nm")}
name="ins_co_nm"
>
<Radio.Group>
<Radio value="front">Front</Radio>
<Radio value="back">Back</Radio>
<Radio value="off">Off</Radio>
</Radio.Group>
</Form.Item>
<Form.Item
label={t("production.labels.laborhrs")}
name="laborhrs"
>
<Radio.Group>
<Radio value="front">Front</Radio>
<Radio value="back">Back</Radio>
<Radio value="off">Off</Radio>
</Radio.Group>
</Form.Item>
<Form.Item
label={t("production.labels.employeeassignments")}
name="employeeassignments"
>
<Radio.Group>
<Radio value="front">Front</Radio>
<Radio value="back">Back</Radio>
<Radio value="off">Off</Radio>
</Radio.Group>
</Form.Item>
<Form.Item
label={t("production.labels.scheduled_completion")}
name="scheduled_completion"
>
<Radio.Group>
<Radio value="front">Front</Radio>
<Radio value="back">Back</Radio>
<Radio value="off">Off</Radio>
</Radio.Group>
</Form.Item>{" "}
</Col>
<Col span={12}>
<Form.Item label={t("production.labels.ats")} name="ats">
<Radio.Group>
<Radio value="front">Front</Radio>
<Radio value="back">Back</Radio>
<Radio value="off">Off</Radio>
</Radio.Group>
</Form.Item>
<Form.Item
label={t("production.labels.production_note")}
name="production_note"
>
<Radio.Group>
<Radio value="front">Front</Radio>
<Radio value="back">Back</Radio>
<Radio value="off">Off</Radio>
</Radio.Group>
</Form.Item>
<Form.Item label={t("production.labels.alert")} name="alert">
<Radio.Group>
<Radio value="front">Front</Radio>
<Radio value="back">Back</Radio>
<Radio value="off">Off</Radio>
</Radio.Group>
</Form.Item>
<Form.Item label={t("production.labels.sublets")} name="sublets">
<Radio.Group>
<Radio value="front">Front</Radio>
<Radio value="back">Back</Radio>
<Radio value="off">Off</Radio>
</Radio.Group>
</Form.Item>
</Col>
</Row>
</Form>
<Button
onClick={() => {
form.submit();
}}
>
{t("general.actions.save")}
</Button>
</Card>
</div>
);
return (
<Dropdown trigger="click" overlay={overlay}>
<Button>{t("production.labels.cardsettings")}</Button>
</Dropdown>
<Popover content={overlay} visible={visible}>
<Button loading={loading} onClick={() => setVisible(true)}>
{t("production.labels.cardsettings")}
</Button>
</Popover>
);
}

25
client/src/components/production-board-kanban/production-board-kanban.component.jsx
View File

@@ -18,6 +18,7 @@ import { selectTechnician } from "../../redux/tech/tech.selectors";
import { insertAuditTrail } from "../../redux/application/application.actions";
import AuditTrailMapping from "../../utils/AuditTrailMappings";
import ProductionBoardKanbanCardSettings from "./production-board-kanban.card-settings.component";
import styled from "styled-components";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
@@ -145,8 +146,26 @@ export function ProductionBoardKanbanComponent({
)
.toFixed(1);
const Container = styled.div`
.react-kanban-card-skeleton,
.react-kanban-card,
.react-kanban-card-adder-form {
box-sizing: border-box;
max-width: ${associationSettings &&
associationSettings.kanban_settings &&
associationSettings.kanban_settings.compact
? "145"
: "250"}px;
min-width: ${associationSettings &&
associationSettings.kanban_settings &&
associationSettings.kanban_settings.compact
? "145"
: "250"}px;
}
`;
return (
<div>
<Container>
<IndefiniteLoading loading={isMoving} />
<PageHeader
title={
@@ -183,12 +202,12 @@ export function ProductionBoardKanbanComponent({
technician,
card,
bodyshop,
associationSettings.kanban_settings
associationSettings && associationSettings.kanban_settings
)
}
onCardDragEnd={handleDragEnd}
/>
</div>
</Container>
);
}
export default connect(

25
client/src/components/production-board-kanban/production-board-kanban.styles.scss
View File

@@ -4,23 +4,16 @@
.react-kanban-card {
border-radius: 3px;
background-color: #fff;
padding: 10px;
padding: 4px;
margin-bottom: 7px;
}
.react-kanban-card-skeleton,
.react-kanban-card,
.react-kanban-card-adder-form {
box-sizing: border-box;
max-width: 250px;
min-width: 250px;
}
.react-kanban-card-skeleton-compact,
.react-kanban-card-compact,
.react-kanban-card-adder-form-compact {
box-sizing: border-box;
max-width: 120px;
min-width: 120px;
}
// .react-kanban-card-skeleton,
// .react-kanban-card,
// .react-kanban-card-adder-form {
// box-sizing: border-box;
// max-width: 145px;
// min-width: 145px;
// }
.react-kanban-card--dragging {
box-shadow: 2px 2px grey;
@@ -36,7 +29,7 @@
justify-content: space-between;
}
.react-kanban-column {
padding: 15px;
padding: 10px;
border-radius: 2px;
background-color: #eee;
margin: 5px;