From 60908b123de19a9ba8fc20c139b0ad35e629413c Mon Sep 17 00:00:00 2001 From: Dave Richer Date: Wed, 31 Jul 2024 14:04:50 -0400 Subject: [PATCH] - Clean up Card Settings - Code refactor for maintainability - Allow users to adjust the order of the statistics via drag and drop Signed-off-by: Dave Richer --- client/src/App/ProductFruitsWrapper.jsx | 4 +- .../defaultKanbanSettings.js | 42 + .../production-board-kanban.component.jsx | 28 +- ...uction-board-kanban.settings.component.jsx | 247 +- .../production-board-kanban.statistics.jsx | 149 +- client/src/translations/en_us/common.json | 6933 +++++++++-------- client/src/translations/es/common.json | 3 +- client/src/translations/fr/common.json | 6805 ++++++++-------- 8 files changed, 7181 insertions(+), 7030 deletions(-) create mode 100644 client/src/components/production-board-kanban/defaultKanbanSettings.js diff --git a/client/src/App/ProductFruitsWrapper.jsx b/client/src/App/ProductFruitsWrapper.jsx index 2d3cfbac7..2686a161e 100644 --- a/client/src/App/ProductFruitsWrapper.jsx +++ b/client/src/App/ProductFruitsWrapper.jsx @@ -27,6 +27,6 @@ ProductFruitsWrapper.propTypes = { currentUser: PropTypes.shape({ authorized: PropTypes.bool, email: PropTypes.string - }).isRequired, - workspaceCode: PropTypes.string.isRequired + }), + workspaceCode: PropTypes.string }; diff --git a/client/src/components/production-board-kanban/defaultKanbanSettings.js b/client/src/components/production-board-kanban/defaultKanbanSettings.js new file mode 100644 index 000000000..d06c67e83 --- /dev/null +++ b/client/src/components/production-board-kanban/defaultKanbanSettings.js @@ -0,0 +1,42 @@ +const statisticsItems = [ + { id: 0, name: "totalHrs", label: "total_hours_in_production" }, + { id: 1, name: "totalAmountInProduction", label: "total_amount_in_production" }, + { id: 2, name: "totalLAB", label: "total_lab_in_production" }, + { id: 3, name: "totalLAR", label: "total_lar_in_production" }, + { id: 4, name: "jobsInProduction", label: "jobs_in_production" }, + { id: 5, name: "totalHrsOnBoard", label: "total_hours_on_board" }, + { id: 6, name: "totalAmountOnBoard", label: "total_amount_on_board" }, + { id: 7, name: "totalLABOnBoard", label: "total_lab_on_board" }, + { id: 8, name: "totalLAROnBoard", label: "total_lar_on_board" }, + { id: 9, name: "jobsOnBoard", label: "total_jobs_on_board" } +]; + +const defaultKanbanSettings = { + ats: true, + clm_no: true, + compact: false, + ownr_nm: true, + sublets: true, + ins_co_nm: true, + production_note: true, + employeeassignments: true, + scheduled_completion: true, + cardcolor: false, + orientation: false, + cardSize: "small", + model_info: true, + kiosk: false, + totalHrs: true, + totalAmountInProduction: false, + totalLAB: true, + totalLAR: true, + jobsInProduction: true, + totalHrsOnBoard: false, + totalLABOnBoard: false, + totalLAROnBoard: false, + jobsOnBoard: false, + totalAmountOnBoard: true, + statisticsOrder: statisticsItems.map((item) => item.id) +}; + +export { defaultKanbanSettings, statisticsItems }; diff --git a/client/src/components/production-board-kanban/production-board-kanban.component.jsx b/client/src/components/production-board-kanban/production-board-kanban.component.jsx index 1c02ab194..6f8932f94 100644 --- a/client/src/components/production-board-kanban/production-board-kanban.component.jsx +++ b/client/src/components/production-board-kanban/production-board-kanban.component.jsx @@ -21,6 +21,7 @@ import { createBoardData } from "./production-board-kanban.utils.js"; import ProductionBoardKanbanSettings from "./production-board-kanban.settings.component.jsx"; import cloneDeep from "lodash/cloneDeep"; import isEqual from "lodash/isEqual"; +import { defaultKanbanSettings } from "./defaultKanbanSettings.js"; const mapStateToProps = createStructuredSelector({ bodyshop: selectBodyshop @@ -179,32 +180,7 @@ function ProductionBoardKanbanComponent({ data, bodyshop, refetch, insertAuditTr () => associationSettings?.kanban_settings && Object.keys(associationSettings.kanban_settings).length > 0 ? associationSettings.kanban_settings - : { - ats: true, - clm_no: true, - compact: false, - ownr_nm: true, - sublets: true, - ins_co_nm: true, - production_note: true, - employeeassignments: true, - scheduled_completion: true, - cardcolor: false, - orientation: false, - cardSize: "small", - model_info: true, - kiosk: false, - totalHrs: true, - totalAmountInProduction: false, - totalLAB: true, - totalLAR: true, - jobsInProduction: true, - totalHrsOnBoard: false, - totalLABOnBoard: false, - totalLAROnBoard: false, - jobsOnBoard: false, - totalAmountOnBoard: true - }, + : defaultKanbanSettings, [associationSettings] ); diff --git a/client/src/components/production-board-kanban/production-board-kanban.settings.component.jsx b/client/src/components/production-board-kanban/production-board-kanban.settings.component.jsx index 39d60fa14..8c0b63bc6 100644 --- a/client/src/components/production-board-kanban/production-board-kanban.settings.component.jsx +++ b/client/src/components/production-board-kanban/production-board-kanban.settings.component.jsx @@ -1,15 +1,132 @@ -// ProductionBoardKanbanSettings.jsx import { useMutation } from "@apollo/client"; -import { Button, Card, Checkbox, Col, Form, notification, Popover, Radio, Row } from "antd"; +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 { statisticsItems } from "./defaultKanbanSettings.js"; + +const LayoutSettings = ({ t }) => ( + + + {[ + { + name: "orientation", + label: t("production.labels.orientation"), + options: [t("production.labels.vertical"), t("production.labels.horizontal")] + }, + { + name: "cardSize", + label: t("production.labels.card_size"), + options: [t("production.options.small"), t("production.options.medium"), t("production.options.large")] + }, + { + name: "compact", + label: t("production.labels.compact"), + options: [t("production.labels.tall"), t("production.labels.wide")] + }, + { + name: "cardcolor", + label: t("production.labels.cardcolor"), + options: [t("production.labels.on"), t("production.labels.off")] + }, + { + name: "kiosk", + label: t("production.labels.kiosk_mode"), + options: [t("production.labels.on"), t("production.labels.off")] + } + ].map(({ name, label, options }) => ( + + + + {options.map((option, idx) => ( + + {option} + + ))} + + + + ))} + + +); + +const InformationSettings = ({ t }) => ( + + + {[ + "model_info", + "ownr_nm", + "clm_no", + "ins_co_nm", + "employeeassignments", + "actual_in", + "scheduled_completion", + "ats", + "production_note", + "sublets", + "partsstatus" + ].map((item) => ( + + + {t(`production.labels.${item}`)} + + + ))} + + +); + +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 ( + + + {(provided) => ( +
+ {statisticsOrder.map((itemId, index) => { + const item = statisticsItems.find((stat) => stat.id === itemId); + return ( + + {(provided) => ( +
+ + + {t(`production.settings.statistics.${item.label}`)} + + +
+ )} +
+ ); + })} + {provided.placeholder} +
+ )} +
+
+ ); +}; 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([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]); const [updateKbSettings] = useMutation(UPDATE_KANBAN_SETTINGS); const { t } = useTranslation(); @@ -17,6 +134,9 @@ export default function ProductionBoardKanbanSettings({ associationSettings, par useEffect(() => { if (associationSettings?.kanban_settings) { form.setFieldsValue(associationSettings.kanban_settings); + if (associationSettings.kanban_settings.statisticsOrder) { + setStatisticsOrder(associationSettings.kanban_settings.statisticsOrder); + } } }, [form, associationSettings]); @@ -27,7 +147,7 @@ export default function ProductionBoardKanbanSettings({ associationSettings, par const result = await updateKbSettings({ variables: { id: associationSettings?.id, - ks: { ...values } + ks: { ...values, statisticsOrder } } }); @@ -48,103 +168,36 @@ export default function ProductionBoardKanbanSettings({ associationSettings, par const handleValuesChange = () => setHasChanges(true); - const cardStyle = { minWidth: "50vw", marginTop: 10 }; - - const renderCheckboxItem = (name, labelKey) => ( - - - {t(labelKey)} - - - ); - - const renderCardSettings = () => ( - <> - - - - - - {t("production.labels.vertical")} - {t("production.labels.horizontal")} - - - - - - - {t("production.options.small")} - {t("production.options.medium")} - {t("production.options.large")} - - - - - - - {t("production.labels.tall")} - {t("production.labels.wide")} - - - - - - - {t("production.labels.on")} - {t("production.labels.off")} - - - - - - - {t("production.labels.on")} - {t("production.labels.off")} - - - - - - - - {[ - "model_info", - "ownr_nm", - "clm_no", - "ins_co_nm", - "employeeassignments", - "actual_in", - "scheduled_completion", - "ats", - "production_note", - "sublets", - "partsstatus" - ].map((item) => renderCheckboxItem(item, `production.labels.${item}`))} - - - - - {[ - { name: "totalHrs", label: "total_hours_in_production" }, - { name: "totalLAB", label: "total_lab_in_production" }, - { name: "totalLAR", label: "total_lar_in_production" }, - { name: "totalAmountInProduction", label: "total_amount_in_production" }, - { name: "jobsInProduction", label: "jobs_in_production" }, - { name: "totalHrsOnBoard", label: "total_hours_on_board" }, - { name: "totalLABOnBoard", label: "total_lab_on_board" }, - { name: "totalLAROnBoard", label: "total_lar_on_board" }, - { name: "jobsOnBoard", label: "total_jobs_on_board" }, - { name: "totalAmountOnBoard", label: "total_amount_on_board" } - ].map((item) => renderCheckboxItem(item.name, `production.settings.statistics.${item.label}`))} - - - - ); - const overlay = (
- {renderCardSettings()} + + }, + { + key: "2", + label: t("production.settings.information"), + children: + }, + { + key: "3", + label: t("production.settings.statistics_title"), + children: ( + + ) + } + ]} + />