From 9c84024a08adf0d9602a22c4923334bf46b77b94 Mon Sep 17 00:00:00 2001 From: Patrick Fic Date: Tue, 21 Apr 2020 17:14:58 -0700 Subject: [PATCH] BOD-21 Added sorting and saving to production config. Added drag and drop to column ordering --- client/package.json | 1 + .../production-list-columns.data.js | 37 ++++++++-- .../production-list-table.component.jsx | 74 +++++++++++-------- .../production-list-table.container.jsx | 5 +- .../production-list-table.styles.scss | 13 ++++ .../production-list.container.jsx | 9 ++- client/yarn.lock | 7 ++ 7 files changed, 103 insertions(+), 43 deletions(-) create mode 100644 client/src/components/production-list-table/production-list-table.styles.scss diff --git a/client/package.json b/client/package.json index e28ec2a4e..063a8dd79 100644 --- a/client/package.json +++ b/client/package.json @@ -27,6 +27,7 @@ "react-barcode": "^1.4.0", "react-big-calendar": "^0.24.5", "react-dom": "^16.13.1", + "react-drag-listview": "^0.1.6", "react-ga": "^2.7.0", "react-grid-gallery": "^0.5.5", "react-grid-layout": "^0.18.3", 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 d496820f4..246944bc3 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 @@ -6,6 +6,7 @@ import { DateFormatter } from "../../utils/DateFormatter"; import PhoneFormatter from "../../utils/PhoneFormatter"; import { alphaSort } from "../../utils/sorters"; import { ExclamationCircleFilled } from "@ant-design/icons"; +import { Menu, Dropdown } from "antd"; export default [ { @@ -138,11 +139,25 @@ export default [ dataIndex: "alert", key: "alert", render: (text, record) => ( -
- {record.production_vars && record.production_vars.alert ? ( - - ) : null} -
+ + 1st menu item {text} + 2nd menu item + 3rd menu item + + } + trigger={["contextMenu"]} + > +
console.log("Hi")} + style={{ width: "100%", height: "19px" }} + > + {record.production_vars && record.production_vars.alert ? ( + + ) : null} +
+ ), }, { @@ -155,4 +170,16 @@ export default [ ), }, + { + title: i18n.t("production.labels.cycletime"), + dataIndex: "ct", + key: "ct", + render: (text, record) => { + return ( + + {(record.production_vars && record.production_vars.note) || ""} + + ); + }, + }, ]; 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 a94e3ff81..dc0066541 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 @@ -1,11 +1,13 @@ import { Table, Button } from "antd"; import React, { useState } from "react"; -import { useTranslation } from "react-i18next"; import { SyncOutlined } from "@ant-design/icons"; import ProductionListSaveConfigButton from "../production-list-save-config-button/production-list-save-config-button.component"; import { selectBodyshop } from "../../redux/user/user.selectors"; import { connect } from "react-redux"; import { createStructuredSelector } from "reselect"; +import ReactDragListView from "react-drag-listview"; //TODO Is there a better way? This library is too big. +import "./production-list-table.styles.scss"; + const mapStateToProps = createStructuredSelector({ //currentUser: selectCurrentUser bodyshop: selectBodyshop, @@ -15,12 +17,13 @@ const mapDispatchToProps = (dispatch) => ({ }); export function ProductionListTable({ - columns, + columnState, loading, data, bodyshop, refetch, }) { + const [columns, setColumns] = columnState; const [state, setState] = useState( bodyshop.production_config.tableState || { sortedInfo: {}, @@ -28,40 +31,49 @@ export function ProductionListTable({ } ); - console.log("Filter State", state); - const { t } = useTranslation(); - const handleTableChange = (pagination, filters, sorter) => { setState({ ...state, filteredInfo: filters, sortedInfo: sorter }); }; + + const onDragEnd = (fromIndex, toIndex) => { + const columnsCopy = columns.slice(); + const item = columnsCopy.splice(fromIndex, 1)[0]; + columnsCopy.splice(toIndex, 0, item); + setColumns(columnsCopy); + }; + if (!!!columns) return
No columns found.
; + return ( - ( -
- - -
- )} - pagination={{ position: "top" }} - columns={columns.map((c) => { - return { - ...c, - sortOrder: - state.sortedInfo.columnKey === c.key && state.sortedInfo.order, - }; - })} - rowKey="id" - loading={loading} - dataSource={data} - onChange={handleTableChange} - /> + +
( +
+ + +
+ )} + pagination={{ position: "top" }} + columns={columns.map((c) => { + return { + ...c, + sortOrder: + state.sortedInfo.columnKey === c.key && state.sortedInfo.order, + }; + })} + rowKey="id" + loading={loading} + dataSource={data} + onChange={handleTableChange} + rowClassName={(record, index) => (index % 2 === 0 ? "red" : "blue")} //TODO What could be good usage here? + /> + ); } export default connect( diff --git a/client/src/components/production-list-table/production-list-table.container.jsx b/client/src/components/production-list-table/production-list-table.container.jsx index bffdc93ba..f27a4ad28 100644 --- a/client/src/components/production-list-table/production-list-table.container.jsx +++ b/client/src/components/production-list-table/production-list-table.container.jsx @@ -1,9 +1,6 @@ import { useQuery } from "@apollo/react-hooks"; import React from "react"; -import { connect } from "react-redux"; -import { createStructuredSelector } from "reselect"; import { QUERY_JOBS_IN_PRODUCTION } from "../../graphql/jobs.queries"; -import { selectBodyshop } from "../../redux/user/user.selectors"; import ProductionListTable from "./production-list-table.component"; export default function ProductionListTableContainer({ columnState }) { @@ -17,7 +14,7 @@ export default function ProductionListTableContainer({ columnState }) { loading={loading} data={data ? data.jobs : []} refetch={refetch} - columns={columnState[0]} + columnState={columnState} /> ); 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 new file mode 100644 index 000000000..2c0f587de --- /dev/null +++ b/client/src/components/production-list-table/production-list-table.styles.scss @@ -0,0 +1,13 @@ +.production-alert { + animation: alertBlinker 2s linear infinite; +} +@keyframes alertBlinker { + 50% { + color: red; + //opacity: 0; + } +} + +.blue { + color: blue; +} diff --git a/client/src/pages/production-list/production-list.container.jsx b/client/src/pages/production-list/production-list.container.jsx index 3f05f7e7e..2825a68b2 100644 --- a/client/src/pages/production-list/production-list.container.jsx +++ b/client/src/pages/production-list/production-list.container.jsx @@ -18,10 +18,13 @@ const mapDispatchToProps = (dispatch) => ({ export function ProductionListContainer({ setBreadcrumbs, bodyshop }) { const { t } = useTranslation(); const columnState = useState( - ProductionListColumns.filter((c) => - bodyshop.production_config.columnKeys.includes(c.key) - ) || [] + (bodyshop.production_config && + bodyshop.production_config.columnKeys.map((k) => + ProductionListColumns.find((e) => e.key === k) + )) || + [] ); + // console.log("ProductionListContainer -> columnState", columnState); useEffect(() => { document.title = t("titles.productionlist"); diff --git a/client/yarn.lock b/client/yarn.lock index 90b3e671c..400861739 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -10933,6 +10933,13 @@ react-dom@^16.13.1: prop-types "^15.6.2" scheduler "^0.19.1" +react-drag-listview@^0.1.6: + version "0.1.6" + resolved "https://registry.yarnpkg.com/react-drag-listview/-/react-drag-listview-0.1.6.tgz#2aa9e0446edfea618ca209814b72fd110e8ed290" + integrity sha512-0nSWkR1bMLKgLZIYY2YVURYapppzy46FNSs9uAcCxceo2lnajngzLQ3tBgWaTjKTlWMXD0MAcDUWFDYdqMPYUg== + dependencies: + prop-types "^15.5.8" + react-draggable@^4.0.0, react-draggable@^4.0.3: version "4.2.0" resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.2.0.tgz#40cc5209082ca7d613104bf6daf31372cc0e1114"