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

2020-04-27 11:53:08 -07:00
parent 6c0f0b082b
commit 2b19d1af0b
8 changed files with 76 additions and 20 deletions
--- 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",
--- 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) => <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),
--- 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,
          },
        },
--- 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) => (
    <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(
-                "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?
--- 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
@@ -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>
+  );
+};
--- 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;
+}
--- 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");
--- 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==