merged from develop

2026-02-25 04:31:34 +01:00 · 2019-10-31 11:23:49 +11:00
parent b45bdf2afc 48930e343e
commit 281bc4fe5e
5 changed files with 109 additions and 74 deletions
--- 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
--- 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>
--- 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>
      ) : (
--- 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)}
--- 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>
        );
    }
  };
@@ -127,22 +136,25 @@ function Table(props: Props) {
  };
  let columns: any[] = [];
  if (!tableState.loadingColumns) {
-    columns = tableState.columns.map((column: any) => ({
-      width: 220,
-      draggable: true,
-      editable: editable(column.type),
-      resizable: true,
-      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: true,
+        editable: editable(column.type),
+        resizable: true,
+        //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",