BOD-20 Added resizing for production list + fixed sorter state saving error.

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

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) => <ProductionListColumnAlert record={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),

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

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) => (
     <Dropdown
+      className='prod-header-dropdown'
       overlay={
         <Menu onClick={removeColumn}>
           <Menu.Item key={col.key}>
@@ -70,10 +87,18 @@ export function ProductionListTable({
   if (!!!columns) return <div>No columns found.</div>;
 
   return (
-    <ReactDragListView.DragColumn onDragEnd={onDragEnd} nodeSelector='th'>
+    <ReactDragListView.DragColumn
+      onDragEnd={onDragEnd}
+      nodeSelector='th'
+      handleSelector='.prod-header-dropdown'>
       <Table
         size='small'
         pagination={false}
+        components={{
+          header: {
+            cell: ResizeableTitle,
+          },
+        }}
         title={() => (
           <div style={{ display: "flex" }}>
             <ProductionListColumnsAdd columnState={columnState} />
@@ -94,12 +119,16 @@ export function ProductionListTable({
             />
           </div>
         )}
-        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(
+              classes.push("production-completion-1");
-                "new Date(record.scheduled_completion) - Now < OneCalendarDay",
-                new Date(record.scheduled_completion) - Now < OneCalendarDay
-              );
-            classes.push("production-completion-1");
           }
           return classes.join(" ");
         }} //TODO What could be good usage here?

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 (
+    <Resizable width={width || 200} height={0} onResize={onResize}>
+      <th {...restProps} />
+    </Resizable>
+  );
+};

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

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) =>
+      bodyshop.production_config.columnKeys.map((k) => {
-        ProductionListColumns.find((e) => e.key === k)
+        return {
-      )) ||
+          ...ProductionListColumns.find((e) => e.key === k.key),
+          width: k.width,
+        };
+      })) ||
       []
   );
-  // console.log("ProductionListContainer -> columnState", columnState);
 
   useEffect(() => {
     document.title = t("titles.productionlist");

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==