BOD-21 Added sorting and saving to production config. Added drag and drop to column ordering

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",

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) => (
-      <div>
-        {record.production_vars && record.production_vars.alert ? (
-          <ExclamationCircleFilled style={{ color: "red" }} />
-        ) : null}
-      </div>
+      <Dropdown
+        overlay={
+          <Menu>
+            <Menu.Item key="1">1st menu item {text}</Menu.Item>
+            <Menu.Item key="2">2nd menu item</Menu.Item>
+            <Menu.Item key="3">3rd menu item</Menu.Item>
+          </Menu>
+        }
+        trigger={["contextMenu"]}
+      >
+        <div
+          onClick={() => console.log("Hi")}
+          style={{ width: "100%", height: "19px" }}
+        >
+          {record.production_vars && record.production_vars.alert ? (
+            <ExclamationCircleFilled className="production-alert" />
+          ) : null}
+        </div>
+      </Dropdown>
     ),
   },
   {
@@ -155,4 +170,16 @@ export default [
       </span>
     ),
   },
+  {
+    title: i18n.t("production.labels.cycletime"),
+    dataIndex: "ct",
+    key: "ct",
+    render: (text, record) => {
+      return (
+        <span>
+          {(record.production_vars && record.production_vars.note) || ""}
+        </span>
+      );
+    },
+  },
 ];

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 <div>No columns found.</div>;
+
   return (
-    <Table
-      size="small"
-      title={() => (
-        <div>
-          <ProductionListSaveConfigButton
-            columns={columns}
-            tableState={state}
-          />
-          <Button onClick={() => refetch()}>
-            <SyncOutlined />
-          </Button>
-        </div>
-      )}
-      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}
-    />
+    <ReactDragListView.DragColumn onDragEnd={onDragEnd} nodeSelector="th">
+      <Table
+        size="small"
+        title={() => (
+          <div>
+            <ProductionListSaveConfigButton
+              columns={columns}
+              tableState={state}
+            />
+            <Button onClick={() => refetch()}>
+              <SyncOutlined />
+            </Button>
+          </div>
+        )}
+        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?
+      />
+    </ReactDragListView.DragColumn>
   );
 }
 export default connect(

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}
       />
     </div>
   );

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;
+}

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");

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"