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

- Working Configurable card sizes for both Horizontal and Vertical!

Browse Source 
Signed-off-by: Dave Richer <dave@imexsystems.ca>
This commit is contained in:
Dave Richer
2024-07-14 21:24:24 -04:00
parent b58b5e65dc
commit e593943d99
8 changed files with 489 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,10 +1,10 @@
import { useMutation } from "@apollo/client";
import { Button, Card, Col, Form, notification, Popover, Row, Checkbox, Tabs, Switch } from "antd";
import { Button, Card, Col, Form, notification, Popover, Row, Checkbox, Radio, Input, Switch } from "antd";
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { UPDATE_KANBAN_SETTINGS } from "../../graphql/user.queries";
export default function ProductionBoardKanbanSettings({ associationSettings, parentLoading }) {
export default function ProductionBoardKanbanSettings({ associationSettings, parentLoading, onSettingsChange }) {
const [form] = Form.useForm();
const [open, setOpen] = useState(false);
const [loading, setLoading] = useState(false);
@@ -14,8 +14,10 @@ export default function ProductionBoardKanbanSettings({ associationSettings, par
const [updateKbSettings] = useMutation(UPDATE_KANBAN_SETTINGS);
useEffect(() => {
form.setFieldsValue(associationSettings?.kanban_settings);
setOrientation(associationSettings?.kanban_settings?.orientation ?? true);
if (associationSettings?.kanban_settings) {
form.setFieldsValue(associationSettings.kanban_settings);
setOrientation(associationSettings.kanban_settings?.orientation ?? true);
}
}, [form, associationSettings, open]);
const { t } = useTranslation();
@@ -58,6 +60,29 @@ export default function ProductionBoardKanbanSettings({ associationSettings, par
const renderCardSettings = () => (
<>
<Card title={t("production.settings.layout")} style={cardStyle}>
<Row gutter={[16, 16]}>
<Col span={4}>
<Form.Item valuePropName="checked" label={t("production.labels.orientation")}>
<Switch
checkedChildren="Vertical"
unCheckedChildren="Horizontal"
checked={orientation}
onChange={handleOrientationChange}
/>
</Form.Item>
</Col>
</Row>
<Row gutter={[16, 16]}>
<Col span={24}>
<Form.Item name="cardSize" label={t("production.labels.card_size")}>
<Radio.Group>
<Radio.Button value="compact">{t("production.options.small")}</Radio.Button>
<Radio.Button value="medium">{t("production.options.medium")}</Radio.Button>
<Radio.Button value="large">{t("production.options.large")}</Radio.Button>
</Radio.Group>
</Form.Item>
</Col>
</Row>
<Row gutter={[16, 16]}>
<Col span={4}>
<Form.Item name="compact" valuePropName="checked">
@@ -133,56 +158,13 @@ export default function ProductionBoardKanbanSettings({ associationSettings, par
</>
);
const renderBoardSettings = () => (
<>
<Card title={t("production.settings.layout")} style={cardStyle}>
<Row gutter={[16, 16]}>
<Col span={4} style={{ display: "flex", alignItems: "center" }}>
<span style={{ marginRight: "8px" }}>Orientation</span>
<Form.Item valuePropName="checked" style={{ marginBottom: 0 }}>
<Switch
checkedChildren="Vertical"
unCheckedChildren="Horizontal"
checked={orientation}
onChange={handleOrientationChange}
/>
</Form.Item>
</Col>
</Row>
</Card>
</>
);
const renderLaneSettings = () => (
<>
<Card title={t("production.settings.layout")} style={cardStyle}>
<Row gutter={[16, 16]}></Row>
</Card>
</>
);
const items = [
{
key: "1",
label: t("production.settings.tabs.card"),
children: renderCardSettings()
},
{
key: "2",
label: t("production.settings.tabs.board"),
children: renderBoardSettings()
},
{
key: "3",
label: t("production.settings.tabs.lane"),
children: renderLaneSettings()
}
];
const overlay = (
<Card>
<Form form={form} onFinish={handleFinish} layout="vertical" onValuesChange={handleValuesChange}>
<Tabs defaultActiveKey="1" items={items} />
{renderCardSettings()}
<Form.Item name="orientation" style={{ display: "none" }}>
<Input type="hidden" value={orientation} />
</Form.Item>
<Row justify="center" style={{ marginTop: 15 }} gutter={16}>
<Col span={8}>
<Button block onClick={() => setOpen(false)}>