- Major Performance boost reducing uncessasry board renders
- Move Orientation Toggle to Board Settings -> Display - Delete Card Settings, replaced with Board Settings Signed-off-by: Dave Richer <dave@imexsystems.ca>
This commit is contained in:
Dave Richer
@@ -0,0 +1,243 @@
|
||||
import { useMutation } from "@apollo/client";
|
||||
import { Button, Card, Col, Form, notification, Popover, Row, Checkbox, Tabs, Switch } from "antd";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { UPDATE_KANBAN_SETTINGS } from "../../graphql/user.queries";
|
||||
|
||||
const { TabPane } = Tabs;
|
||||
|
||||
export default function ProductionBoardKanbanSettings({ associationSettings, parentLoading }) {
|
||||
const [form] = Form.useForm();
|
||||
const [open, setOpen] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [hasChanges, setHasChanges] = useState(false);
|
||||
const [updateKbSettings] = useMutation(UPDATE_KANBAN_SETTINGS);
|
||||
|
||||
useEffect(() => {
|
||||
form.setFieldsValue(associationSettings && associationSettings.kanban_settings);
|
||||
}, [form, associationSettings, open]);
|
||||
|
||||
const { t } = useTranslation();
|
||||
|
||||
const handleFinish = async (values) => {
|
||||
setLoading(true);
|
||||
parentLoading(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)
|
||||
})
|
||||
});
|
||||
}
|
||||
setOpen(false);
|
||||
setLoading(false);
|
||||
parentLoading(false);
|
||||
setHasChanges(false);
|
||||
};
|
||||
|
||||
const handleValuesChange = (changedValues, allValues) => {
|
||||
setHasChanges(true);
|
||||
};
|
||||
|
||||
const cardStyle = { minWidth: "50vw", marginTop: 10 };
|
||||
|
||||
const renderCardSettings = () => (
|
||||
<>
|
||||
<Card title={t("settings.sections.layout")} style={cardStyle}>
|
||||
<Row gutter={[16, 16]}>
|
||||
<Col span={4}>
|
||||
<Form.Item name="compact" valuePropName="checked">
|
||||
<Checkbox>{t("production.labels.compact")}</Checkbox>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Form.Item name="cardcolor" valuePropName="checked">
|
||||
<Checkbox>{t("production.labels.cardcolor")}</Checkbox>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
<Card title={t("settings.sections.information")} style={cardStyle}>
|
||||
<Row gutter={[16, 16]}>
|
||||
<Col span={4}>
|
||||
<Form.Item name="ownr_nm" valuePropName="checked">
|
||||
<Checkbox>{t("production.labels.ownr_nm")}</Checkbox>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Form.Item name="clm_no" valuePropName="checked">
|
||||
<Checkbox>{t("production.labels.clm_no")}</Checkbox>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Form.Item name="ins_co_nm" valuePropName="checked">
|
||||
<Checkbox>{t("production.labels.ins_co_nm")}</Checkbox>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Form.Item name="employeeassignments" valuePropName="checked">
|
||||
<Checkbox>{t("production.labels.employeeassignments")}</Checkbox>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Form.Item name="actual_in" valuePropName="checked">
|
||||
<Checkbox>{t("production.labels.actual_in")}</Checkbox>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Form.Item name="scheduled_completion" valuePropName="checked">
|
||||
<Checkbox>{t("production.labels.scheduled_completion")}</Checkbox>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Form.Item name="ats" valuePropName="checked">
|
||||
<Checkbox>{t("production.labels.ats")}</Checkbox>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Form.Item name="production_note" valuePropName="checked">
|
||||
<Checkbox>{t("production.labels.production_note")}</Checkbox>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Form.Item name="sublets" valuePropName="checked">
|
||||
<Checkbox>{t("production.labels.sublets")}</Checkbox>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Form.Item name="partsstatus" valuePropName="checked">
|
||||
<Checkbox>{t("production.labels.partsstatus")}</Checkbox>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
<Card title={t("settings.sections.beta")} style={cardStyle}>
|
||||
<Row gutter={[16, 16]}>
|
||||
<Col span={4}>
|
||||
<Form.Item name="stickyheader" valuePropName="checked">
|
||||
<Checkbox>{t("production.labels.stickyheader")}</Checkbox>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
|
||||
const renderBoardSettings = () => (
|
||||
<>
|
||||
<Card title={t("settings.sections.layout")} style={cardStyle}>
|
||||
<Row gutter={[16, 16]}>
|
||||
<Col span={4} style={{ display: "flex", alignItems: "center" }}>
|
||||
<span style={{ marginRight: "8px" }}>Orientation</span>
|
||||
<Form.Item name="orientation" valuePropName="checked" style={{ marginBottom: 0 }}>
|
||||
<Switch checkedChildren="Vertical" unCheckedChildren="Horizontal" defaultChecked />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
{/*<Card title={t("settings.sections.information")} style={cardStyle}>*/}
|
||||
{/* <Row gutter={[16, 16]}>*/}
|
||||
{/* <Col span={4}>*/}
|
||||
{/* <Form.Item name="board_setting_3" valuePropName="checked">*/}
|
||||
{/* <Checkbox>{t("board.labels.some_setting_3")}</Checkbox>*/}
|
||||
{/* </Form.Item>*/}
|
||||
{/* </Col>*/}
|
||||
{/* <Col span={4}>*/}
|
||||
{/* <Form.Item name="board_setting_4" valuePropName="checked">*/}
|
||||
{/* <Checkbox>{t("board.labels.some_setting_4")}</Checkbox>*/}
|
||||
{/* </Form.Item>*/}
|
||||
{/* </Col>*/}
|
||||
{/* </Row>*/}
|
||||
{/*</Card>*/}
|
||||
{/*<Card title={t("settings.sections.beta")} style={cardStyle}>*/}
|
||||
{/* <Row gutter={[16, 16]}>*/}
|
||||
{/* <Col span={4}>/!* Add beta settings here if any *!/</Col>*/}
|
||||
{/* </Row>*/}
|
||||
{/*</Card>*/}
|
||||
</>
|
||||
);
|
||||
|
||||
const renderLaneSettings = () => (
|
||||
<>
|
||||
<Card title={t("settings.sections.layout")} style={cardStyle}>
|
||||
<Row gutter={[16, 16]}>
|
||||
{/*<Col span={4}>*/}
|
||||
{/* <Form.Item name="lane_setting_1" valuePropName="checked">*/}
|
||||
{/* <Checkbox>{t("lane.labels.some_setting_1")}</Checkbox>*/}
|
||||
{/* </Form.Item>*/}
|
||||
{/*</Col>*/}
|
||||
{/*<Col span={4}>*/}
|
||||
{/* <Form.Item name="lane_setting_2" valuePropName="checked">*/}
|
||||
{/* <Checkbox>{t("lane.labels.some_setting_2")}</Checkbox>*/}
|
||||
{/* </Form.Item>*/}
|
||||
{/*</Col>*/}
|
||||
</Row>
|
||||
</Card>
|
||||
{/*<Card title={t("settings.sections.information")} style={cardStyle}>*/}
|
||||
{/* <Row gutter={[16, 16]}>*/}
|
||||
{/* <Col span={4}>*/}
|
||||
{/* <Form.Item name="lane_setting_3" valuePropName="checked">*/}
|
||||
{/* <Checkbox>{t("lane.labels.some_setting_3")}</Checkbox>*/}
|
||||
{/* </Form.Item>*/}
|
||||
{/* </Col>*/}
|
||||
{/* <Col span={4}>*/}
|
||||
{/* <Form.Item name="lane_setting_4" valuePropName="checked">*/}
|
||||
{/* <Checkbox>{t("lane.labels.some_setting_4")}</Checkbox>*/}
|
||||
{/* </Form.Item>*/}
|
||||
{/* </Col>*/}
|
||||
{/* </Row>*/}
|
||||
{/*</Card>*/}
|
||||
{/*<Card title={t("settings.sections.beta")} style={cardStyle}>*/}
|
||||
{/* <Row gutter={[16, 16]}>*/}
|
||||
{/* <Col span={4}>/!* Add beta settings here if any *!/</Col>*/}
|
||||
{/* </Row>*/}
|
||||
{/*</Card>*/}
|
||||
</>
|
||||
);
|
||||
|
||||
const overlay = (
|
||||
<Card>
|
||||
<Form form={form} onFinish={handleFinish} layout="vertical" onValuesChange={handleValuesChange}>
|
||||
<Tabs defaultActiveKey="1">
|
||||
<TabPane tab={t("settings.tabs.card")} key="1">
|
||||
{renderCardSettings()}
|
||||
</TabPane>
|
||||
<TabPane tab={t("settings.tabs.board")} key="2">
|
||||
{renderBoardSettings()}
|
||||
</TabPane>
|
||||
<TabPane tab={t("settings.tabs.lane")} key="3">
|
||||
{renderLaneSettings()}
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
<Row justify="center" style={{ marginTop: 15 }} gutter={16}>
|
||||
<Col span={8}>
|
||||
<Button block onClick={() => setOpen(false)}>
|
||||
{t("general.actions.cancel")}
|
||||
</Button>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Button block onClick={() => form.submit()} loading={loading} type="primary" disabled={!hasChanges}>
|
||||
{t("general.actions.save")}
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form>
|
||||
</Card>
|
||||
);
|
||||
|
||||
return (
|
||||
<Popover content={overlay} open={open} placement="topRight">
|
||||
<Button loading={loading} onClick={() => setOpen(!open)}>
|
||||
{t("settings.buttons.boardSettings")}
|
||||
</Button>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user