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

- Patricks request for card settings to be buttons and not switches

Browse Source 
Signed-off-by: Dave Richer <dave@imexsystems.ca>
This commit is contained in:
Dave Richer
2024-07-19 11:54:50 -04:00
parent f91e0ec39f
commit 3149c3cfc6
1 changed files with 28 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,5 @@
import { useMutation } from "@apollo/client";
import { Button, Card, Col, Form, notification, Popover, Row, Checkbox, Radio, Input, Switch } from "antd";
import { Button, Card, Checkbox, Col, Form, notification, Popover, Radio, Row } from "antd";
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { UPDATE_KANBAN_SETTINGS } from "../../graphql/user.queries";
@@ -9,19 +9,13 @@ export default function ProductionBoardKanbanSettings({ associationSettings, par
const [open, setOpen] = useState(false);
const [loading, setLoading] = useState(false);
const [hasChanges, setHasChanges] = useState(false);
const [orientation, setOrientation] = useState(true);
const [compact, setCompact] = useState(false);
const [colored, setColored] = useState(false);
const [updateKbSettings] = useMutation(UPDATE_KANBAN_SETTINGS);
const { t } = useTranslation();
useEffect(() => {
if (associationSettings?.kanban_settings) {
const { orientation = true, compact = true, cardcolor = true } = associationSettings.kanban_settings;
form.setFieldsValue(associationSettings.kanban_settings);
setOrientation(orientation);
setCompact(compact);
setColored(cardcolor);
}
}, [form, associationSettings]);
@@ -32,7 +26,7 @@ export default function ProductionBoardKanbanSettings({ associationSettings, par
const result = await updateKbSettings({
variables: {
id: associationSettings?.id,
ks: { ...values, orientation, compact, cardcolor: colored }
ks: { ...values }
}
});
@@ -53,26 +47,8 @@ export default function ProductionBoardKanbanSettings({ associationSettings, par
const handleValuesChange = () => setHasChanges(true);
const handleCheckedChanges = (checked, callback) => {
callback(checked);
setHasChanges(true);
};
const cardStyle = { minWidth: "50vw", marginTop: 10 };
const renderSwitchItem = (name, checked, callback, labelKey, checkedChildrenKey, unCheckedChildrenKey) => (
<Col span={4} key={name}>
<Form.Item name={name} valuePropName="checked" label={t(labelKey)}>
<Switch
checkedChildren={t(checkedChildrenKey)}
unCheckedChildren={t(unCheckedChildrenKey)}
checked={checked}
onChange={(checked) => handleCheckedChanges(checked, callback)}
/>
</Form.Item>
</Col>
);
const renderCheckboxItem = (name, labelKey) => (
<Col span={4} key={name}>
<Form.Item name={name} valuePropName="checked">
@@ -85,39 +61,39 @@ export default function ProductionBoardKanbanSettings({ associationSettings, par
<>
<Card title={t("production.settings.layout")} style={cardStyle}>
<Row gutter={[16, 16]}>
{renderSwitchItem(
"orientation",
orientation,
setOrientation,
"production.labels.orientation",
"production.labels.vertical",
"production.labels.horizontal"
)}
<Col span={4}>
<Form.Item name="orientation" label={t("production.labels.orientation")}>
<Radio.Group>
<Radio.Button value={true}>{t("production.labels.vertical")}</Radio.Button>
<Radio.Button value={false}>{t("production.labels.horizontal")}</Radio.Button>
</Radio.Group>
</Form.Item>
</Col>
<Col span={4}>
<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="small">{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>
{renderSwitchItem(
"compact",
compact,
setCompact,
"production.labels.compact",
"production.labels.tall",
"production.labels.wide"
)}
{renderSwitchItem(
"cardcolor",
colored,
setColored,
"production.labels.cardcolor",
"production.labels.on",
"production.labels.off"
)}
<Col span={4}>
<Form.Item name="compact" label={t("production.labels.compact")}>
<Radio.Group>
<Radio.Button value={true}>{t("production.labels.tall")}</Radio.Button>
<Radio.Button value={false}>{t("production.labels.wide")}</Radio.Button>
</Radio.Group>
</Form.Item>
</Col>
<Col span={4}>
<Form.Item name="cardcolor" label={t("production.labels.cardcolor")}>
<Radio.Group>
<Radio.Button value={true}>{t("production.labels.on")}</Radio.Button>
<Radio.Button value={false}>{t("production.labels.off")}</Radio.Button>
</Radio.Group>
</Form.Item>
</Col>
</Row>
</Card>
<Card title={t("production.settings.information")} style={cardStyle}>
@@ -144,9 +120,6 @@ export default function ProductionBoardKanbanSettings({ associationSettings, par
<Card>
<Form form={form} onFinish={handleFinish} layout="vertical" onValuesChange={handleValuesChange}>
{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)}>