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

- Check Point

Browse Source 
Signed-off-by: Dave Richer <dave@imexsystems.ca>
This commit is contained in:
Dave Richer
2024-08-02 11:29:31 -04:00
parent defadf70e3
commit a297bba193
10 changed files with 316 additions and 282 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -18,10 +18,10 @@ import ProductionListDetailComponent from "../production-list-detail/production-
import CardColorLegend from "../production-board-kanban-card/production-board-kanban-card-color-legend.component"; import CardColorLegend from "../production-board-kanban-card/production-board-kanban-card-color-legend.component";
import "./production-board-kanban.styles.scss"; import "./production-board-kanban.styles.scss";
import { createBoardData } from "./production-board-kanban.utils.js"; import { createBoardData } from "./production-board-kanban.utils.js";
import ProductionBoardKanbanSettings from "./production-board-kanban.settings.component.jsx"; import ProductionBoardKanbanSettings from "./settings/production-board-kanban.settings.component.jsx";
import cloneDeep from "lodash/cloneDeep"; import cloneDeep from "lodash/cloneDeep";
import isEqual from "lodash/isEqual"; import isEqual from "lodash/isEqual";
import { defaultKanbanSettings } from "./defaultKanbanSettings.js"; import { defaultKanbanSettings } from "./settings/defaultKanbanSettings.js";
import NoteUpsertModal from "../../components/note-upsert-modal/note-upsert-modal.container"; import NoteUpsertModal from "../../components/note-upsert-modal/note-upsert-modal.container";
const mapStateToProps = createStructuredSelector({ const mapStateToProps = createStructuredSelector({
@@ -59,7 +59,7 @@ function ProductionBoardKanbanComponent({ data, bodyshop, refetch, insertAuditTr
useEffect(() => { useEffect(() => {
setIsMoving(true); setIsMoving(true);
const newBoardData = createBoardData(statuses, data, filter); const newBoardData = createBoardData({ statuses, data, filter });
newBoardData.lanes = newBoardData.lanes.map((lane) => ({ newBoardData.lanes = newBoardData.lanes.map((lane) => ({
...lane, ...lane,

2
client/src/components/production-board-kanban/production-board-kanban.container.jsx
View File

@@ -37,6 +37,8 @@ function ProductionBoardKanbanContainer({ bodyshop, currentUser }) {
onError: (error) => console.error(`Error fetching Kanban settings: ${error.message}`) onError: (error) => console.error(`Error fetching Kanban settings: ${error.message}`)
}); });
// const currentReducerData = useSelector((state) => (state.trello.lanes ? state.trello : {}));
useEffect(() => { useEffect(() => {
if (updatedJobs && data) { if (updatedJobs && data) {
refetch().catch((err) => console.error(`Error re-fetching jobs in production: ${err.message}`)); refetch().catch((err) => console.error(`Error re-fetching jobs in production: ${err.message}`));

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

@@ -1,254 +0,0 @@
import { useMutation } from "@apollo/client";
import { Button, Card, Checkbox, Col, Form, notification, Popover, Radio, Row, Tabs } from "antd";
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { UPDATE_KANBAN_SETTINGS } from "../../graphql/user.queries";
import { DragDropContext, Draggable, Droppable } from "./trello-board/dnd/lib";
import { defaultKanbanSettings, statisticsItems } from "./defaultKanbanSettings.js";
const LayoutSettings = ({ t }) => (
<Card title={t("production.settings.layout")} style={{ minWidth: "50vw", marginTop: 10 }}>
<Row gutter={[16, 16]}>
{[
{
name: "orientation",
label: t("production.labels.orientation"),
options: [
{ value: true, label: t("production.labels.vertical") },
{ value: false, label: t("production.labels.horizontal") }
]
},
{
name: "cardSize",
label: t("production.labels.card_size"),
options: [
{ value: "small", label: t("production.options.small") },
{ value: "medium", label: t("production.options.medium") },
{ value: "large", label: t("production.options.large") }
]
},
{
name: "compact",
label: t("production.labels.compact"),
options: [
{ value: true, label: t("production.labels.tall") },
{ value: false, label: t("production.labels.wide") }
]
},
{
name: "cardcolor",
label: t("production.labels.cardcolor"),
options: [
{ value: true, label: t("production.labels.on") },
{ value: false, label: t("production.labels.off") }
]
},
{
name: "kiosk",
label: t("production.labels.kiosk_mode"),
options: [
{ value: true, label: t("production.labels.on") },
{ value: false, label: t("production.labels.off") }
]
}
].map(({ name, label, options }) => (
<Col span={4} key={name}>
<Form.Item name={name} label={label}>
<Radio.Group>
{options.map((option) => (
<Radio.Button key={option.value.toString()} value={option.value}>
{option.label}
</Radio.Button>
))}
</Radio.Group>
</Form.Item>
</Col>
))}
</Row>
</Card>
);
const InformationSettings = ({ t }) => (
<Card title={t("production.settings.information")} style={{ minWidth: "50vw", marginTop: 10 }}>
<Row gutter={[16, 16]}>
{[
"model_info",
"ownr_nm",
"clm_no",
"ins_co_nm",
"employeeassignments",
"actual_in",
"scheduled_completion",
"ats",
"production_note",
"sublets",
"partsstatus"
].map((item) => (
<Col span={4} key={item}>
<Form.Item name={item} valuePropName="checked">
<Checkbox>{t(`production.labels.${item}`)}</Checkbox>
</Form.Item>
</Col>
))}
</Row>
</Card>
);
const StatisticsSettings = ({ t, statisticsOrder, setStatisticsOrder, setHasChanges }) => {
const onDragEnd = (result) => {
if (!result.destination) return;
const newOrder = Array.from(statisticsOrder);
const [movedItem] = newOrder.splice(result.source.index, 1);
newOrder.splice(result.destination.index, 0, movedItem);
setStatisticsOrder(newOrder);
setHasChanges(true);
};
return (
<DragDropContext onDragEnd={onDragEnd}>
<Droppable direction="horizontal" droppableId="statistics">
{(provided) => (
<div
{...provided.droppableProps}
ref={provided.innerRef}
style={{ display: "flex", flexWrap: "wrap", gap: "8px" }}
>
{statisticsOrder.map((itemId, index) => {
const item = statisticsItems.find((stat) => stat.id === itemId);
return (
<Draggable key={itemId} draggableId={itemId.toString()} index={index}>
{(provided) => (
<div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
<Card styles={{ body: { padding: "5px" } }} style={{ marginBottom: 8, flex: "0 1 auto" }}>
<Form.Item style={{ marginBottom: 0 }} name={item.name} valuePropName="checked">
<Checkbox>{t(`production.settings.statistics.${item.label}`)}</Checkbox>
</Form.Item>
</Card>
</div>
)}
</Draggable>
);
})}
{provided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
);
};
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 [statisticsOrder, setStatisticsOrder] = useState(defaultKanbanSettings.statisticsOrder);
const [updateKbSettings] = useMutation(UPDATE_KANBAN_SETTINGS);
const { t } = useTranslation();
useEffect(() => {
if (associationSettings?.kanban_settings) {
form.setFieldsValue(associationSettings.kanban_settings);
if (associationSettings.kanban_settings.statisticsOrder) {
setStatisticsOrder(associationSettings.kanban_settings.statisticsOrder);
}
}
}, [form, associationSettings]);
const handleFinish = async (values) => {
setLoading(true);
parentLoading(true);
const result = await updateKbSettings({
variables: {
id: associationSettings?.id,
ks: { ...associationSettings.kanban_settings, ...values, statisticsOrder }
}
});
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 = () => setHasChanges(true);
const handleRestoreDefaults = () => {
form.setFieldsValue({
...defaultKanbanSettings,
statisticsOrder: defaultKanbanSettings.statisticsOrder
});
setStatisticsOrder(defaultKanbanSettings.statisticsOrder);
setHasChanges(true);
};
const overlay = (
<Card>
<Form form={form} onFinish={handleFinish} layout="vertical" onValuesChange={handleValuesChange}>
<Tabs
defaultActiveKey="1"
items={[
{
key: "1",
label: t("production.settings.layout"),
children: <LayoutSettings t={t} />
},
{
key: "2",
label: t("production.settings.information"),
children: <InformationSettings t={t} />
},
{
key: "3",
label: t("production.settings.statistics_title"),
children: (
<StatisticsSettings
t={t}
statisticsOrder={statisticsOrder}
setStatisticsOrder={setStatisticsOrder}
setHasChanges={setHasChanges}
/>
)
}
]}
/>
<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={handleRestoreDefaults}>
{t("general.actions.defaults")}
</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("production.settings.board_settings")}
</Button>
</Popover>
);
}

16
client/src/components/production-board-kanban/production-board-kanban.statistics.jsx
View File

@@ -2,7 +2,7 @@ import React, { useMemo } from "react";
import { Card, Statistic } from "antd"; import { Card, Statistic } from "antd";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { statisticsItems } from "./defaultKanbanSettings.js"; import { statisticsItems } from "./settings/defaultKanbanSettings.js";
export const StatisticType = { export const StatisticType = {
HOURS: "hours", HOURS: "hours",
@@ -152,15 +152,15 @@ const ProductionStatistics = ({ data, cardSettings, reducerData }) => {
); );
const sortedStatistics = useMemo(() => { const sortedStatistics = useMemo(() => {
const sorted = []; const statisticsMap = new Map(statistics.map((stat) => [stat.id, stat]));
cardSettings.statisticsOrder.forEach((orderId) => {
const value = statistics.find((stat) => stat.id === orderId); return cardSettings.statisticsOrder.reduce((sorted, orderId) => {
if (value.value !== null) { const value = statisticsMap.get(orderId);
if (value && value.value !== null) {
sorted.push(value); sorted.push(value);
} }
}); return sorted;
}, []);
return sorted;
}, [statistics, cardSettings.statisticsOrder]); }, [statistics, cardSettings.statisticsOrder]);
return ( return (

32
client/src/components/production-board-kanban/production-board-kanban.utils.js
View File

@@ -28,7 +28,7 @@ const sortByParentId = (arr) => {
}; };
// Function to create board data based on statuses and jobs, with optional filtering // Function to create board data based on statuses and jobs, with optional filtering
export const createBoardData = (statuses, Jobs, filter) => { export const createBoardData = ({ statuses, data, filter }) => {
const { search, employeeId } = filter; const { search, employeeId } = filter;
const lanes = statuses.map((status) => ({ const lanes = statuses.map((status) => ({
@@ -38,7 +38,7 @@ export const createBoardData = (statuses, Jobs, filter) => {
})); }));
const filteredJobs = const filteredJobs =
(search === "" || !search) && !employeeId ? Jobs : Jobs.filter((job) => checkFilter(search, employeeId, job)); (search === "" || !search) && !employeeId ? data : data.filter((job) => checkFilter(search, employeeId, job));
const DataGroupedByStatus = groupBy(filteredJobs, "status"); const DataGroupedByStatus = groupBy(filteredJobs, "status");
@@ -67,26 +67,24 @@ export const createBoardData = (statuses, Jobs, filter) => {
// Function to check if a job matches the search and/or employeeId filter // Function to check if a job matches the search and/or employeeId filter
const checkFilter = (search, employeeId, job) => { const checkFilter = (search, employeeId, job) => {
const lowerSearch = search?.toLowerCase() || ""; const lowerSearch = search?.toLowerCase() ?? "";
const matchesSearch = const matchesSearch =
lowerSearch && lowerSearch &&
((job.ro_number || "").toLowerCase().includes(lowerSearch) || [
(job.ownr_fn || "").toLowerCase().includes(lowerSearch) || job.ro_number,
(job.ownr_co_nm || "").toLowerCase().includes(lowerSearch) || job.ownr_fn,
(job.ownr_ln || "").toLowerCase().includes(lowerSearch) || job.ownr_co_nm,
(job.status || "").toLowerCase().includes(lowerSearch) || job.ownr_ln,
(job.v_make_desc || "").toLowerCase().includes(lowerSearch) || job.status,
(job.v_model_desc || "").toLowerCase().includes(lowerSearch) || job.v_make_desc,
(job.clm_no || "").toLowerCase().includes(lowerSearch) || job.v_model_desc,
(job.plate_no || "").toLowerCase().includes(lowerSearch)); job.clm_no,
job.plate_no
].some((field) => field?.toLowerCase().includes(lowerSearch));
const matchesEmployeeId = const matchesEmployeeId =
employeeId && employeeId && [job.employee_body, job.employee_prep, job.employee_csr, job.employee_refinish].includes(employeeId);
(job.employee_body === employeeId ||
job.employee_prep === employeeId ||
job.employee_csr === employeeId ||
job.employee_refinish === employeeId);
return matchesSearch || matchesEmployeeId; return matchesSearch || matchesEmployeeId;
}; };

35
client/src/components/production-board-kanban/settings/InformationSettings.jsx Normal file
View File

@@ -0,0 +1,35 @@
import { Card, Checkbox, Col, Form, Row } from "antd";
import React from "react";
import PropTypes from "prop-types";
const InformationSettings = ({ t }) => (
<Card title={t("production.settings.information")} style={{ minWidth: "50vw", marginTop: 10 }}>
<Row gutter={[16, 16]}>
{[
"model_info",
"ownr_nm",
"clm_no",
"ins_co_nm",
"employeeassignments",
"actual_in",
"scheduled_completion",
"ats",
"production_note",
"sublets",
"partsstatus"
].map((item) => (
<Col span={4} key={item}>
<Form.Item name={item} valuePropName="checked">
<Checkbox>{t(`production.labels.${item}`)}</Checkbox>
</Form.Item>
</Col>
))}
</Row>
</Card>
);
InformationSettings.propTypes = {
t: PropTypes.func.isRequired
};
export default InformationSettings;

71
client/src/components/production-board-kanban/settings/LayoutSettings.jsx Normal file
View File

@@ -0,0 +1,71 @@
import { Card, Col, Form, Radio, Row } from "antd";
import React from "react";
import PropTypes from "prop-types";
const LayoutSettings = ({ t }) => (
<Card title={t("production.settings.layout")} style={{ minWidth: "50vw", marginTop: 10 }}>
<Row gutter={[16, 16]}>
{[
{
name: "orientation",
label: t("production.labels.orientation"),
options: [
{ value: true, label: t("production.labels.vertical") },
{ value: false, label: t("production.labels.horizontal") }
]
},
{
name: "cardSize",
label: t("production.labels.card_size"),
options: [
{ value: "small", label: t("production.options.small") },
{ value: "medium", label: t("production.options.medium") },
{ value: "large", label: t("production.options.large") }
]
},
{
name: "compact",
label: t("production.labels.compact"),
options: [
{ value: true, label: t("production.labels.tall") },
{ value: false, label: t("production.labels.wide") }
]
},
{
name: "cardcolor",
label: t("production.labels.cardcolor"),
options: [
{ value: true, label: t("production.labels.on") },
{ value: false, label: t("production.labels.off") }
]
},
{
name: "kiosk",
label: t("production.labels.kiosk_mode"),
options: [
{ value: true, label: t("production.labels.on") },
{ value: false, label: t("production.labels.off") }
]
}
].map(({ name, label, options }) => (
<Col span={4} key={name}>
<Form.Item name={name} label={label}>
<Radio.Group>
{options.map((option) => (
<Radio.Button key={option.value.toString()} value={option.value}>
{option.label}
</Radio.Button>
))}
</Radio.Group>
</Form.Item>
</Col>
))}
</Row>
</Card>
);
LayoutSettings.propTypes = {
t: PropTypes.func.isRequired
};
export default LayoutSettings;

57
client/src/components/production-board-kanban/settings/StatisticsSettings.jsx Normal file
View File

@@ -0,0 +1,57 @@
import { DragDropContext, Draggable, Droppable } from "../trello-board/dnd/lib/index.js";
import { statisticsItems } from "./defaultKanbanSettings.js";
import { Card, Checkbox, Form } from "antd";
import React from "react";
import PropTypes from "prop-types";
const StatisticsSettings = ({ t, statisticsOrder, setStatisticsOrder, setHasChanges }) => {
const onDragEnd = (result) => {
if (!result.destination) return;
const newOrder = Array.from(statisticsOrder);
const [movedItem] = newOrder.splice(result.source.index, 1);
newOrder.splice(result.destination.index, 0, movedItem);
setStatisticsOrder(newOrder);
setHasChanges(true);
};
return (
<DragDropContext onDragEnd={onDragEnd}>
<Droppable direction="horizontal" droppableId="statistics">
{(provided) => (
<div
{...provided.droppableProps}
ref={provided.innerRef}
style={{ display: "flex", flexWrap: "wrap", gap: "8px" }}
>
{statisticsOrder.map((itemId, index) => {
const item = statisticsItems.find((stat) => stat.id === itemId);
return (
<Draggable key={itemId} draggableId={itemId.toString()} index={index}>
{(provided) => (
<div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
<Card styles={{ body: { padding: "5px" } }} style={{ marginBottom: 8, flex: "0 1 auto" }}>
<Form.Item style={{ marginBottom: 0 }} name={item.name} valuePropName="checked">
<Checkbox>{t(`production.settings.statistics.${item.label}`)}</Checkbox>
</Form.Item>
</Card>
</div>
)}
</Draggable>
);
})}
{provided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
);
};
StatisticsSettings.propTypes = {
t: PropTypes.func.isRequired,
statisticsOrder: PropTypes.arrayOf(PropTypes.number).isRequired,
setStatisticsOrder: PropTypes.func.isRequired,
setHasChanges: PropTypes.func.isRequired
};
export default StatisticsSettings;

0
client/src/components/production-board-kanban/defaultKanbanSettings.js → client/src/components/production-board-kanban/settings/defaultKanbanSettings.js
View File

125
client/src/components/production-board-kanban/settings/production-board-kanban.settings.component.jsx Normal file
View File

@@ -0,0 +1,125 @@
import { useMutation } from "@apollo/client";
import { Button, Card, Col, Form, notification, Popover, Row, Tabs } from "antd";
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { UPDATE_KANBAN_SETTINGS } from "../../../graphql/user.queries.js";
import { defaultKanbanSettings } from "./defaultKanbanSettings.js";
import LayoutSettings from "./LayoutSettings.jsx";
import InformationSettings from "./InformationSettings.jsx";
import StatisticsSettings from "./StatisticsSettings.jsx";
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 [statisticsOrder, setStatisticsOrder] = useState(defaultKanbanSettings.statisticsOrder);
const [updateKbSettings] = useMutation(UPDATE_KANBAN_SETTINGS);
const { t } = useTranslation();
useEffect(() => {
if (associationSettings?.kanban_settings) {
form.setFieldsValue(associationSettings.kanban_settings);
if (associationSettings.kanban_settings.statisticsOrder) {
setStatisticsOrder(associationSettings.kanban_settings.statisticsOrder);
}
}
}, [form, associationSettings]);
const handleFinish = async (values) => {
setLoading(true);
parentLoading(true);
const result = await updateKbSettings({
variables: {
id: associationSettings?.id,
ks: { ...associationSettings.kanban_settings, ...values, statisticsOrder }
}
});
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 = () => setHasChanges(true);
const handleRestoreDefaults = () => {
form.setFieldsValue({
...defaultKanbanSettings,
statisticsOrder: defaultKanbanSettings.statisticsOrder
});
setStatisticsOrder(defaultKanbanSettings.statisticsOrder);
setHasChanges(true);
};
const overlay = (
<Card>
<Form form={form} onFinish={handleFinish} layout="vertical" onValuesChange={handleValuesChange}>
<Tabs
defaultActiveKey="1"
items={[
{
key: "1",
label: t("production.settings.layout"),
children: <LayoutSettings t={t} />
},
{
key: "2",
label: t("production.settings.information"),
children: <InformationSettings t={t} />
},
{
key: "3",
label: t("production.settings.statistics_title"),
children: (
<StatisticsSettings
t={t}
statisticsOrder={statisticsOrder}
setStatisticsOrder={setStatisticsOrder}
setHasChanges={setHasChanges}
/>
)
}
]}
/>
<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={handleRestoreDefaults}>
{t("general.actions.defaults")}
</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("production.settings.board_settings")}
</Button>
</Popover>
);
}