From 73580266b806829f063cbceabb82008a0104828c Mon Sep 17 00:00:00 2001
From: shams mosowi <shams.mosowi@gmail.com>
Date: Thu, 24 Oct 2019 11:49:48 +1100
Subject: [PATCH 1/4] fix: empty files field

---
 www/src/components/Fields/File.tsx  | 36 ++++++++++++++++-------------
 www/src/components/Fields/Image.tsx |  7 ++++--
 2 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/www/src/components/Fields/File.tsx b/www/src/components/Fields/File.tsx
index 309db63d..28e07908 100644
--- a/www/src/components/Fields/File.tsx
+++ b/www/src/components/Fields/File.tsx
@@ -30,6 +30,9 @@ const useStyles = makeStyles((theme: Theme) =>
     },
     chip: { margin: theme.spacing(5) },
     progress: { margin: theme.spacing(5) },
+    addIcon: {
+      maxHeight: 48,
+    },
   })
 );
 
@@ -59,23 +62,24 @@ const File = (props: Props) => {
   return (
     <div className={classes.root} {...dropzoneProps} onClick={() => {}}>
       <input {...getInputProps()} />
-      {value.map((file: any) => {
-        return (
-          <Chip
-            key={file.name}
-            label={file.name}
-            className={classes.chip}
-            onClick={() => {
-              window.open(file.downloadURL);
-            }}
-            onDelete={() => {
-              handleDelete(file.downloadURL);
-            }}
-          />
-        );
-      })}
+      {value &&
+        value.map((file: any) => {
+          return (
+            <Chip
+              key={file.name}
+              label={file.name}
+              className={classes.chip}
+              onClick={() => {
+                window.open(file.downloadURL);
+              }}
+              onDelete={() => {
+                handleDelete(file.downloadURL);
+              }}
+            />
+          );
+        })}
 
-      <IconButton onClick={dropzoneProps.onClick}>
+      <IconButton className={classes.addIcon} onClick={dropzoneProps.onClick}>
         <AddIcon />
       </IconButton>
     </div>
diff --git a/www/src/components/Fields/Image.tsx b/www/src/components/Fields/Image.tsx
index bf66db4d..d7523c41 100644
--- a/www/src/components/Fields/Image.tsx
+++ b/www/src/components/Fields/Image.tsx
@@ -36,6 +36,9 @@ const useStyles = makeStyles((theme: Theme) =>
         borderColor: "rgb(255, 0, 0,0.6)",
       },
     },
+    addIcon: {
+      maxHeight: 48,
+    },
   })
 );
 
@@ -83,7 +86,7 @@ const Image = (props: Props) => {
     <Grid className={classes.root} {...dropzoneProps} onClick={() => {}}>
       <input {...getInputProps()} />
       {value &&
-        value.map((file: { name: string; downloadURL: string }) => (
+        files.map((file: { name: string; downloadURL: string }) => (
           <Tooltip title="Click to delete">
             <div
               onClick={e => {
@@ -108,7 +111,7 @@ const Image = (props: Props) => {
           </Tooltip>
         ))}
       {progress === 0 ? (
-        <IconButton onClick={dropzoneProps.onClick}>
+        <IconButton className={classes.addIcon} onClick={dropzoneProps.onClick}>
           <AddIcon />
         </IconButton>
       ) : (

From 558b5e4dddba49d6249cd204a32cc4a6fe508db8 Mon Sep 17 00:00:00 2001
From: shams mosowi <shams.mosowi@gmail.com>
Date: Fri, 25 Oct 2019 07:02:05 +1100
Subject: [PATCH 2/4] feat: column config

---
 .../components/Table/ColumnEditor/index.tsx   | 68 +++++++++++--------
 www/src/components/Table/index.tsx            |  7 +-
 2 files changed, 45 insertions(+), 30 deletions(-)

diff --git a/www/src/components/Table/ColumnEditor/index.tsx b/www/src/components/Table/ColumnEditor/index.tsx
index d4a1e010..eb47c497 100644
--- a/www/src/components/Table/ColumnEditor/index.tsx
+++ b/www/src/components/Table/ColumnEditor/index.tsx
@@ -28,6 +28,7 @@ import DeleteIcon from "@material-ui/icons/Delete";
 import SelectOptionsInput from "./SelectOptionsInput";
 
 import DocInput from "./DocInput";
+import { Tooltip } from "@material-ui/core";
 
 const useStyles = makeStyles(Theme =>
   createStyles({
@@ -41,7 +42,7 @@ const useStyles = makeStyles(Theme =>
       position: "absolute",
       left: 0,
       top: 0,
-      //zIndex: 100000
+      zIndex: 60000,
     },
     button: {
       // margin: theme.spacing(1)
@@ -116,6 +117,11 @@ const ColumnEditor = (props: any) => {
       if (column.collectionPath) {
         setValue("collectionPath", column.collectionPath);
       }
+      ["resizable", "editable", "fixed", "hidden"].map(flag => {
+        if (column[flag]) {
+          setFlags([...flags, flag]);
+        }
+      });
     }
   }, [column]);
   const clearValues = () => {
@@ -160,7 +166,10 @@ const ColumnEditor = (props: any) => {
     let updatables: { field: string; value: any }[] = [
       { field: "name", value: values.name },
       { field: "type", value: values.type },
-      // { field: "resizable", value: flags.includes("resizable") },
+      { field: "resizable", value: flags.includes("resizable") },
+      { field: "editable", value: flags.includes("editable") },
+      { field: "hidden", value: flags.includes("hidden") },
+      { field: "fixed", value: flags.includes("fixed") },
     ];
     if (
       values.type === FieldType.multiSelect ||
@@ -196,6 +205,7 @@ const ColumnEditor = (props: any) => {
     return (
       <ClickAwayListener onClickAway={onClickAway}>
         <Popper
+          className={classes.header}
           id={`id-${column.name}`}
           open={!!anchorEl}
           anchorEl={anchorEl}
@@ -209,8 +219,6 @@ const ColumnEditor = (props: any) => {
                 style={{ minWidth: column.width ? column.width - 20 : 200 }}
               >
                 <Grid container direction="column">
-                  {/* 
-                  // TODO: functional flags 
                   <ToggleButtonGroup
                     size="small"
                     value={flags}
@@ -218,28 +226,35 @@ const ColumnEditor = (props: any) => {
                     onChange={handleToggle}
                     arial-label="column settings"
                   >
-                    <ToggleButton value="editable" aria-label="editable">
-                      {flags.includes("editable") ? (
-                        <LockOpenIcon />
-                      ) : (
-                        <LockIcon />
-                      )}
-                    </ToggleButton>
-                    <ToggleButton value="visible" aria-label="visible">
-                      {flags.includes("visible") ? (
-                        <VisibilityIcon />
-                      ) : (
-                        <VisibilityOffIcon />
-                      )}
-                    </ToggleButton>
-                    <ToggleButton value="freeze" aria-label="freeze">
-                      <FormatUnderlinedIcon />
-                    </ToggleButton>
-                    <ToggleButton value="resizable" aria-label="resizable">
-                      <FormatColorFillIcon />
-                    </ToggleButton>
-                  </ToggleButtonGroup> */}
-
+                    <Tooltip title="Editable Cells">
+                      <ToggleButton value="editable" aria-label="editable">
+                        {flags.includes("editable") ? (
+                          <LockOpenIcon />
+                        ) : (
+                          <LockIcon />
+                        )}
+                      </ToggleButton>
+                    </Tooltip>
+                    <Tooltip title="Hide Column">
+                      <ToggleButton value="visible" aria-label="visible">
+                        {flags.includes("visible") ? (
+                          <VisibilityIcon />
+                        ) : (
+                          <VisibilityOffIcon />
+                        )}
+                      </ToggleButton>
+                    </Tooltip>
+                    <Tooltip title="Fixed Column">
+                      <ToggleButton value="fixed" aria-label="fixed">
+                        <FormatUnderlinedIcon />
+                      </ToggleButton>
+                    </Tooltip>
+                    <Tooltip title="Resizable column">
+                      <ToggleButton value="resizable" aria-label="resizable">
+                        <FormatColorFillIcon />
+                      </ToggleButton>
+                    </Tooltip>
+                  </ToggleButtonGroup>
                   <TextField
                     label="Column name"
                     name="name"
@@ -248,7 +263,6 @@ const ColumnEditor = (props: any) => {
                       setValue("name", e.target.value);
                     }}
                   />
-
                   <FormControl className={classes.formControl}>
                     <InputLabel htmlFor="Field-select">Field Type</InputLabel>
                     {FieldsDropDown(values.type, handleChange)}
diff --git a/www/src/components/Table/index.tsx b/www/src/components/Table/index.tsx
index 26cb5e56..7269475b 100644
--- a/www/src/components/Table/index.tsx
+++ b/www/src/components/Table/index.tsx
@@ -129,9 +129,10 @@ function Table(props: Props) {
   if (!tableState.loadingColumns) {
     columns = tableState.columns.map((column: any) => ({
       width: 220,
-      draggable: true,
-      editable: editable(column.type),
-      resizable: true,
+      draggable: column.draggable,
+      editable: editable(column.type) && column.editable,
+      resizable: column.resizable,
+      frozen: column.fixed,
       headerRenderer: headerRenderer,
       formatter:
         column.type === FieldType.documentSelect

From 7b5e0c0f7df70d8ba0ac739dd0f49e99d7b22dc1 Mon Sep 17 00:00:00 2001
From: shams mosowi <shams.mosowi@gmail.com>
Date: Fri, 25 Oct 2019 11:13:24 +1100
Subject: [PATCH 3/4] hidden columns

---
 ROADMAP.md                         |  4 +++-
 www/src/components/Table/index.tsx | 36 ++++++++++++++++--------------
 2 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/ROADMAP.md b/ROADMAP.md
index 2fc1c8a3..39a7c07e 100644
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -63,12 +63,13 @@
 
 - Sort rows
 - reorder columns✅
+- Auto suggest columns based of existing docs
 - Locked columns
 - Table view only mode
 - SubCollection tables
 - Permissions
 - Duplicate columns
-- Filters:
+- Filter columns:
   - equals to
   - Starts with
   - contains
@@ -92,3 +93,4 @@
 - Themes
 - Table templates
 - Dialog View of a row
+- multi auth
diff --git a/www/src/components/Table/index.tsx b/www/src/components/Table/index.tsx
index 7269475b..29f98e27 100644
--- a/www/src/components/Table/index.tsx
+++ b/www/src/components/Table/index.tsx
@@ -127,23 +127,25 @@ function Table(props: Props) {
   };
   let columns: any[] = [];
   if (!tableState.loadingColumns) {
-    columns = tableState.columns.map((column: any) => ({
-      width: 220,
-      draggable: column.draggable,
-      editable: editable(column.type) && column.editable,
-      resizable: column.resizable,
-      frozen: column.fixed,
-      headerRenderer: headerRenderer,
-      formatter:
-        column.type === FieldType.documentSelect
-          ? docSelect(column)
-          : cellFormatter(column),
-      editor:
-        column.type === FieldType.singleSelect
-          ? singleSelectEditor(column.options)
-          : false,
-      ...column,
-    }));
+    columns = tableState.columns
+      .filter((column: any) => !column.hidden)
+      .map((column: any) => ({
+        width: 220,
+        draggable: column.draggable,
+        editable: editable(column.type) && column.editable,
+        resizable: column.resizable,
+        frozen: column.fixed,
+        headerRenderer: headerRenderer,
+        formatter:
+          column.type === FieldType.documentSelect
+            ? docSelect(column)
+            : cellFormatter(column),
+        editor:
+          column.type === FieldType.singleSelect
+            ? singleSelectEditor(column.options)
+            : false,
+        ...column,
+      }));
     columns.push({
       isNew: true,
       key: "new",

From 48930e343e0245e18b5abc6b10ce7315031c655b Mon Sep 17 00:00:00 2001
From: shams mosowi <shams.mosowi@gmail.com>
Date: Thu, 31 Oct 2019 11:00:50 +1100
Subject: [PATCH 4/4] feat:click column header to copy key to clipboard

---
 www/src/components/Table/index.tsx | 41 ++++++++++++++++++------------
 1 file changed, 25 insertions(+), 16 deletions(-)

diff --git a/www/src/components/Table/index.tsx b/www/src/components/Table/index.tsx
index 29f98e27..764cff05 100644
--- a/www/src/components/Table/index.tsx
+++ b/www/src/components/Table/index.tsx
@@ -24,11 +24,13 @@ import DeleteIcon from "@material-ui/icons/Delete";
 import DuplicateIcon from "@material-ui/icons/FileCopy";
 import useStyles from "./useStyle";
 import Grid from "./Grid";
+import Tooltip from "@material-ui/core/Tooltip";
 const Hotkeys = lazy(() => import("./HotKeys"));
 const TableHeader = lazy(() => import("./TableHeader"));
 const SearchBox = lazy(() => import("../SearchBox"));
 const DocSelect = lazy(() => import("../Fields/DocSelect"));
 const ColumnEditor = lazy(() => import("./ColumnEditor/index"));
+
 const deleteAlgoliaRecord = functions.httpsCallable(
   CLOUD_FUNCTIONS.deleteAlgoliaRecord
 );
@@ -106,19 +108,26 @@ function Table(props: Props) {
         );
       default:
         return (
-          <div className={classes.header}>
-            <div className={classes.headerLabel}>
-              {getFieldIcon(props.column.type)}
-              <Typography variant="button">{props.column.name}</Typography>
+          <Tooltip title={props.column.key}>
+            <div className={classes.header}>
+              <div
+                className={classes.headerLabel}
+                onClick={() => {
+                  navigator.clipboard.writeText(props.column.key);
+                }}
+              >
+                {getFieldIcon(props.column.type)}
+                <Typography variant="button">{props.column.name}</Typography>
+              </div>
+              <IconButton
+                disableFocusRipple={true}
+                size="small"
+                onClick={handleClick(props)}
+              >
+                <SettingsIcon />
+              </IconButton>
             </div>
-            <IconButton
-              disableFocusRipple={true}
-              size="small"
-              onClick={handleClick(props)}
-            >
-              <SettingsIcon />
-            </IconButton>
-          </div>
+          </Tooltip>
         );
     }
   };
@@ -131,10 +140,10 @@ function Table(props: Props) {
       .filter((column: any) => !column.hidden)
       .map((column: any) => ({
         width: 220,
-        draggable: column.draggable,
-        editable: editable(column.type) && column.editable,
-        resizable: column.resizable,
-        frozen: column.fixed,
+        draggable: true,
+        editable: editable(column.type),
+        resizable: true,
+        //frozen: column.fixed,
         headerRenderer: headerRenderer,
         formatter:
           column.type === FieldType.documentSelect