diff --git a/client/package.json b/client/package.json index 0d2424469..42403ed35 100644 --- a/client/package.json +++ b/client/package.json @@ -38,6 +38,7 @@ "react-moment": "^0.9.7", "react-number-format": "^4.4.1", "react-redux": "^7.2.0", + "react-resizable": "^1.10.1", "react-router-dom": "^5.1.2", "react-scripts": "3.4.1", "react-trello": "^2.2.5", diff --git a/client/src/components/production-list-columns/production-list-columns.data.js b/client/src/components/production-list-columns/production-list-columns.data.js index 1127f56e4..7449e100e 100644 --- a/client/src/components/production-list-columns/production-list-columns.data.js +++ b/client/src/components/production-list-columns/production-list-columns.data.js @@ -155,7 +155,7 @@ export default [ title: i18n.t("production.labels.alert"), dataIndex: "alert", key: "alert", - width: "4%", + render: (text, record) => , }, { @@ -169,7 +169,7 @@ export default [ title: i18n.t("production.labels.cycletime"), dataIndex: "ct", key: "ct", - width: "3%", + render: (text, record) => { let ct = 0; if (!!record.actual_in) { @@ -185,7 +185,7 @@ export default [ title: i18n.t("production.labels.bodypriority"), dataIndex: "bodypriority", key: "bodypriority", - width: "3%", + sorter: (a, b) => ((a.production_vars && a.production_vars.bodypriority) || 11) - ((b.production_vars && b.production_vars.bodypriority) || 11), @@ -197,7 +197,7 @@ export default [ title: i18n.t("production.labels.paintpriority"), dataIndex: "paintpriority", key: "paintpriority", - width: "3%", + sorter: (a, b) => ((a.production_vars && a.production_vars.paintpriority) || 11) - ((b.production_vars && b.production_vars.paintpriority) || 11), diff --git a/client/src/components/production-list-save-config-button/production-list-save-config-button.component.jsx b/client/src/components/production-list-save-config-button/production-list-save-config-button.component.jsx index d35825931..b8cef9efe 100644 --- a/client/src/components/production-list-save-config-button/production-list-save-config-button.component.jsx +++ b/client/src/components/production-list-save-config-button/production-list-save-config-button.component.jsx @@ -18,18 +18,20 @@ const mapDispatchToProps = (dispatch) => ({ export function ProductionListSaveConfigButton({ columns, bodyshop, - tableState, }) { const [updateShop] = useMutation(UPDATE_SHOP); const { t } = useTranslation(); + const handleSaveConfig = () => { updateShop({ variables: { id: bodyshop.id, shop: { production_config: { - columnKeys: columns.map((i) => i.key), + columnKeys: columns.map((i) => { + return { key: i.key, width: i.width }; + }), tableState, }, }, diff --git a/client/src/components/production-list-table/production-list-table.component.jsx b/client/src/components/production-list-table/production-list-table.component.jsx index c310e626b..d5bbec173 100644 --- a/client/src/components/production-list-table/production-list-table.component.jsx +++ b/client/src/components/production-list-table/production-list-table.component.jsx @@ -9,6 +9,7 @@ import ReactDragListView from "react-drag-listview"; //TODO Is there a better wa import "./production-list-table.styles.scss"; import { useTranslation } from "react-i18next"; import ProductionListColumnsAdd from "../production-list-columns/production-list-columns.add.component"; +import ResizeableTitle from "./production-list-table.resizeable.component"; const mapStateToProps = createStructuredSelector({ //currentUser: selectCurrentUser @@ -36,8 +37,14 @@ export function ProductionListTable({ } ); const { t } = useTranslation(); + const handleTableChange = (pagination, filters, sorter) => { - setState({ ...state, filteredInfo: filters, sortedInfo: sorter }); + console.log("sorter", sorter); + setState({ + ...state, + filteredInfo: filters, + sortedInfo: { columnKey: sorter.columnKey, order: sorter.order }, + }); }; const onDragEnd = (fromIndex, toIndex) => { @@ -52,10 +59,20 @@ export function ProductionListTable({ setColumns(columns.filter((i) => i.key !== key)); }; + const handleResize = (index) => (e, { size }) => { + const nextColumns = [...columns]; + nextColumns[index] = { + ...nextColumns[index], + width: size.width, + }; + setColumns(nextColumns); + }; + const Now = new Date(); const headerItem = (col) => ( @@ -70,10 +87,18 @@ export function ProductionListTable({ if (!!!columns) return
No columns found.
; return ( - + (
@@ -94,12 +119,16 @@ export function ProductionListTable({ />
)} - columns={columns.map((c) => { + columns={columns.map((c, index) => { return { ...c, sortOrder: state.sortedInfo.columnKey === c.key && state.sortedInfo.order, title: headerItem(c), + onHeaderCell: (column) => ({ + width: column.width, + onResize: handleResize(index), + }), }; })} rowKey='id' @@ -141,11 +170,7 @@ export function ProductionListTable({ const classes = []; if (!!record.scheduled_completion) { if (new Date(record.scheduled_completion) - Now < OneCalendarDay) - console.log( - "new Date(record.scheduled_completion) - Now < OneCalendarDay", - new Date(record.scheduled_completion) - Now < OneCalendarDay - ); - classes.push("production-completion-1"); + classes.push("production-completion-1"); } return classes.join(" "); }} //TODO What could be good usage here? diff --git a/client/src/components/production-list-table/production-list-table.resizeable.component.jsx b/client/src/components/production-list-table/production-list-table.resizeable.component.jsx new file mode 100644 index 000000000..996a08418 --- /dev/null +++ b/client/src/components/production-list-table/production-list-table.resizeable.component.jsx @@ -0,0 +1,11 @@ +import React from "react"; +import { Resizable } from "react-resizable"; + +export default (props) => { + const { onResize, width, ...restProps } = props; + return ( + +
+ + ); +}; diff --git a/client/src/components/production-list-table/production-list-table.styles.scss b/client/src/components/production-list-table/production-list-table.styles.scss index df8b2727e..f75fdce8d 100644 --- a/client/src/components/production-list-table/production-list-table.styles.scss +++ b/client/src/components/production-list-table/production-list-table.styles.scss @@ -22,3 +22,18 @@ background: rgba(207, 12, 12, 0.555); } } + +.react-resizable { + position: relative; + background-clip: padding-box; +} + +.react-resizable-handle { + position: absolute; + width: 10px; + height: 100%; + bottom: 0; + right: -5px; + cursor: col-resize; + z-index: 1; +} diff --git a/client/src/pages/production-list/production-list.container.jsx b/client/src/pages/production-list/production-list.container.jsx index 2825a68b2..4d1980453 100644 --- a/client/src/pages/production-list/production-list.container.jsx +++ b/client/src/pages/production-list/production-list.container.jsx @@ -19,12 +19,14 @@ export function ProductionListContainer({ setBreadcrumbs, bodyshop }) { const { t } = useTranslation(); const columnState = useState( (bodyshop.production_config && - bodyshop.production_config.columnKeys.map((k) => - ProductionListColumns.find((e) => e.key === k) - )) || + bodyshop.production_config.columnKeys.map((k) => { + return { + ...ProductionListColumns.find((e) => e.key === k.key), + width: k.width, + }; + })) || [] ); - // console.log("ProductionListContainer -> columnState", columnState); useEffect(() => { document.title = t("titles.productionlist"); diff --git a/client/yarn.lock b/client/yarn.lock index 6caf6b743..cf5a45fe4 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -10915,7 +10915,7 @@ react-big-calendar@^0.24.5: react-overlays "^2.0.0-0" uncontrollable "^7.0.0" -"react-click-outside@github:tj/react-click-outside": +react-click-outside@tj/react-click-outside: version "1.1.1" resolved "https://codeload.github.com/tj/react-click-outside/tar.gz/a833ddc5be47490307f9fcc6ed09d8c353108510" @@ -11132,7 +11132,7 @@ react-redux@^7.2.0: prop-types "^15.7.2" react-is "^16.9.0" -react-resizable@^1.9.0: +react-resizable@^1.10.1, react-resizable@^1.9.0: version "1.10.1" resolved "https://registry.yarnpkg.com/react-resizable/-/react-resizable-1.10.1.tgz#f0c2cf1d83b3470b87676ce6d6b02bbe3f4d8cd4" integrity sha512-Jd/bKOKx6+19NwC4/aMLRu/J9/krfxlDnElP41Oc+oLiUWs/zwV1S9yBfBZRnqAwQb6vQ/HRSk3bsSWGSgVbpw==