From 8e63c7183d50dcbf441bbc1e5eee657b999865cb Mon Sep 17 00:00:00 2001
From: shams mosowi <shams.mosowi@gmail.com>
Date: Thu, 3 Oct 2019 00:00:57 +1000
Subject: [PATCH] reordering columns

---
 ROADMAP.md                               |  2 +-
 src/components/Table/index.tsx           | 73 +++++++++++++-----------
 src/hooks/useFiretable/index.ts          |  2 +
 src/hooks/useFiretable/useTableConfig.ts | 14 +++++
 src/util/fns.ts                          | 20 +++++++
 src/views/AuthView.tsx                   |  6 +-
 6 files changed, 77 insertions(+), 40 deletions(-)
 create mode 100644 src/util/fns.ts

diff --git a/ROADMAP.md b/ROADMAP.md
index f79510fa..467d838b 100644
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -68,7 +68,7 @@
 ### Functionality:
 
 - Sort rows
-- reorder columns
+- reorder columns✅
 - Locked columns
 - Table view only mode
 - SubCollection tables
diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx
index 0814224d..d35a5ab2 100644
--- a/src/components/Table/index.tsx
+++ b/src/components/Table/index.tsx
@@ -28,7 +28,8 @@ import AddIcon from "@material-ui/icons/AddCircle";
 import SettingsIcon from "@material-ui/icons/Settings";
 
 import useWindowSize from "../../hooks/useWindowSize";
-
+import { DraggableHeader } from "react-data-grid-addons";
+const { DraggableContainer } = DraggableHeader;
 const deleteAlgoliaRecord = functions.httpsCallable(
   CLOUD_FUNCTIONS.deleteAlgoliaRecord
 );
@@ -164,10 +165,13 @@ function Table(props: Props) {
         );
     }
   };
-
+  const onHeaderDrop = (dragged: any, target: any) => {
+    tableActions.column.reorder(dragged, target);
+  };
   if (tableState.columns) {
     let columns = tableState.columns.map((column: any) => ({
       width: 220,
+      draggable: true,
       editable: editable(column.type),
       resizable: true,
       headerRenderer: headerRenderer,
@@ -202,7 +206,6 @@ function Table(props: Props) {
       ),
     });
     const rows = tableState.rows;
-
     return (
       <>
         <div className={classes.tableHeader}>
@@ -223,39 +226,41 @@ function Table(props: Props) {
             </Button>
           </div>
         </div>
-        <ReactDataGrid
-          rowHeight={40}
-          columns={columns}
-          rowGetter={i => rows[i]}
-          rowsCount={rows.length}
-          onGridRowsUpdated={onGridRowsUpdated}
-          enableCellSelect={true}
-          minHeight={size.height ? size.height - 102 : 100}
-          onCellSelected={onCellSelected}
-          onColumnResize={(idx, width) =>
-            tableActions.column.resize(idx, width)
-          }
-          emptyRowsView={() => {
-            return (
-              <div
-                style={{
-                  textAlign: "center",
-                  backgroundColor: "#ddd",
-                  padding: "100px",
-                }}
-              >
-                <h3>no data to show</h3>
-                <Button
-                  onClick={() => {
-                    tableActions.row.add();
+        <DraggableContainer onHeaderDrop={onHeaderDrop}>
+          <ReactDataGrid
+            rowHeight={40}
+            columns={columns}
+            rowGetter={i => rows[i]}
+            rowsCount={rows.length}
+            onGridRowsUpdated={onGridRowsUpdated}
+            enableCellSelect={true}
+            minHeight={size.height ? size.height - 102 : 100}
+            onCellSelected={onCellSelected}
+            onColumnResize={(idx, width) =>
+              tableActions.column.resize(idx, width)
+            }
+            emptyRowsView={() => {
+              return (
+                <div
+                  style={{
+                    textAlign: "center",
+                    backgroundColor: "#ddd",
+                    padding: "100px",
                   }}
                 >
-                  Add Row
-                </Button>
-              </div>
-            );
-          }}
-        />
+                  <h3>no data to show</h3>
+                  <Button
+                    onClick={() => {
+                      tableActions.row.add();
+                    }}
+                  >
+                    Add Row
+                  </Button>
+                </div>
+              );
+            }}
+          />
+        </DraggableContainer>
 
         <ColumnEditor
           handleClose={handleCloseHeader}
diff --git a/src/hooks/useFiretable/index.ts b/src/hooks/useFiretable/index.ts
index 8a7a486c..3539aa32 100644
--- a/src/hooks/useFiretable/index.ts
+++ b/src/hooks/useFiretable/index.ts
@@ -8,6 +8,7 @@ export type FiretableActions = {
     rename: Function;
     remove: Function;
     update: Function;
+    reorder: Function;
   };
   row: { add: any; delete: Function };
   set: Function;
@@ -47,6 +48,7 @@ const useFiretable = (collectionName: string) => {
       rename: configActions.rename,
       update: configActions.update,
       remove: configActions.remove,
+      reorder: configActions.reorder,
     },
     row: {
       add: tableActions.addRow,
diff --git a/src/hooks/useFiretable/useTableConfig.ts b/src/hooks/useFiretable/useTableConfig.ts
index de0eee3d..738f5db8 100644
--- a/src/hooks/useFiretable/useTableConfig.ts
+++ b/src/hooks/useFiretable/useTableConfig.ts
@@ -2,6 +2,8 @@ import { useEffect } from "react";
 import useDoc, { DocActions } from "../useDoc";
 import { FieldType } from "../../components/Fields";
 import _camelCase from "lodash/camelCase";
+import _findIndex from "lodash/findIndex";
+import { arrayMover } from "../../util/fns";
 
 const useTableConfig = (tablePath: string) => {
   const [tableConfigState, documentDispatch] = useDoc({
@@ -44,12 +46,24 @@ const useTableConfig = (tablePath: string) => {
     columns.splice(index, 1);
     documentDispatch({ action: DocActions.update, data: { columns } });
   };
+  const reorder = (draggedColumnKey: string, droppedColumnKey: string) => {
+    const { columns } = tableConfigState;
+    const draggedColumnIndex = _findIndex(columns, ["key", draggedColumnKey]);
+    const droppedColumnIndex = _findIndex(columns, ["key", droppedColumnKey]);
+    const reorderedColumns = [...columns];
+    arrayMover(reorderedColumns, draggedColumnIndex, droppedColumnIndex);
+    documentDispatch({
+      action: DocActions.update,
+      data: { columns: reorderedColumns },
+    });
+  };
   const actions = {
     update,
     add,
     resize,
     setTable,
     remove,
+    reorder,
   };
   return [tableConfigState, actions];
 };
diff --git a/src/util/fns.ts b/src/util/fns.ts
new file mode 100644
index 00000000..b44904dd
--- /dev/null
+++ b/src/util/fns.ts
@@ -0,0 +1,20 @@
+export const arrayMover = (
+  arr: any[],
+  old_index: number,
+  new_index: number
+) => {
+  while (old_index < 0) {
+    old_index += arr.length;
+  }
+  while (new_index < 0) {
+    new_index += arr.length;
+  }
+  if (new_index >= arr.length) {
+    var k = new_index - arr.length + 1;
+    while (k--) {
+      arr.push(undefined);
+    }
+  }
+  arr.splice(new_index, 0, arr.splice(old_index, 1)[0]);
+  return arr; // for testing purposes
+};
diff --git a/src/views/AuthView.tsx b/src/views/AuthView.tsx
index 8f924a6f..69bdf2ba 100644
--- a/src/views/AuthView.tsx
+++ b/src/views/AuthView.tsx
@@ -41,11 +41,7 @@ export default function AuthView() {
     <Card className={classes.card}>
       <CardContent>
         <Typography className={classes.header}>Fire Table</Typography>
-        <Button
-          onClick={handleAuth}
-          color="secondary"
-          className={classes.button}
-        >
+        <Button onClick={handleAuth} color="primary" className={classes.button}>
           Authenticate With Google
         </Button>
       </CardContent>