column poppers and updated fields

2025-12-28 16:06:41 +01:00 · 2019-09-23 07:07:59 +10:00
parent e7bf552885
commit 00e94e5faa
7 changed files with 232 additions and 143 deletions
--- a/src/components/Fields/LongText.tsx
+++ b/src/components/Fields/LongText.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import ExpandIcon from "@material-ui/icons/AspectRatio";
+import IconButton from "@material-ui/core/IconButton";
+
+const UrlLink = (props: any) => {
+  const { value, cellActions } = props;
+  return value ? (
+    <>
+      <IconButton>
+        <ExpandIcon />
+      </IconButton>
+      <p>{value}</p>
+    </>
+  ) : null;
+};
+export default UrlLink;
--- a/src/components/Fields/Rating.tsx
+++ b/src/components/Fields/Rating.tsx
@@ -5,7 +5,7 @@ const Rating = (props: any) => {
  const { value, row, onSubmit } = props;
  return (
    <MuiRating
-      // TODO: make it uniqe for each
+      // TODO: make it unique for each
      name={`rating-controlled-${row.id}`}
      value={value}
      onChange={(event, newValue) => {
--- a/src/components/Fields/SimpleText.tsx
+++ b/src/components/Fields/SimpleText.tsx
@@ -1,18 +0,0 @@
-import React from "react";
-import TextField from "@material-ui/core/TextField";
-const SimpleText = (props: any) => {
-  const { isFocusedCell, cellData, cellActions } = props;
-
-  if (isFocusedCell)
-    return (
-      <TextField
-        autoFocus
-        defaultValue={cellData}
-        onChange={e => {
-          cellActions.update(e.target.value);
-        }}
-      />
-    );
-  else return <p>{cellData}</p>;
-};
-export default SimpleText;
--- a/src/components/Fields/index.tsx
+++ b/src/components/Fields/index.tsx
@@ -13,12 +13,6 @@ import URLIcon from "@material-ui/icons/Explore";
 import NumberIcon from "@material-ui/icons/Looks3";
 import propEq from "ramda/es/propEq";
 import find from "ramda/es/find";
-import SimpleText from "./SimpleText";
-import CheckBox from "./CheckBox";
-import Number from "./Number";
-import Rating from "./Rating";
-import Date from "./Date";
-import Image from "./Image";
 export enum FieldType {
  simpleText = "SIMPLE_TEXT",
  longText = "LONG_TEXT",
@@ -52,82 +46,3 @@ export const FIELDS = [
 export const getFieldIcon = (type: FieldType) => {
  return find(propEq("type", type))(FIELDS).icon;
 };
-
-export const CellField = (
-  fieldType: FieldType,
-  rowIndex: number,
-  ref: firebase.firestore.DocumentReference,
-  isFocusedCell: boolean,
-  value: any,
-  cellActions: any,
-  fieldName: string
-) => {
-  const columnData = { fieldName };
-  const rowData = { ref };
-
-  switch (fieldType) {
-    case FieldType.checkBox:
-      return (
-        <CheckBox
-          rowIndex={rowIndex}
-          rowData={rowData}
-          isFocusedCell={isFocusedCell}
-          cellData={value}
-          cellActions={cellActions}
-          columnData={columnData}
-        />
-      );
-    case FieldType.rating:
-      return (
-        <Rating
-          rowIndex={rowIndex}
-          rowData={rowData}
-          cellData={value}
-          cellActions={cellActions}
-          columnData={columnData}
-        />
-      );
-    case FieldType.image:
-      return (
-        <Image
-          rowIndex={rowIndex}
-          rowData={rowData}
-          isFocusedCell={isFocusedCell}
-          cellData={value}
-          cellActions={cellActions}
-          columnData={columnData}
-        />
-      );
-    case FieldType.date:
-      return (
-        <Date
-          rowIndex={rowIndex}
-          rowData={rowData}
-          isFocusedCell={isFocusedCell}
-          cellData={value}
-          cellActions={cellActions}
-          columnData={columnData}
-        />
-      );
-    case FieldType.number:
-      return (
-        <Number
-          isFocusedCell={isFocusedCell}
-          cellData={value}
-          cellActions={cellActions}
-          columnData={columnData}
-        />
-      );
-    default:
-      return (
-        <SimpleText
-          rowIndex={rowIndex}
-          rowData={rowData}
-          isFocusedCell={isFocusedCell}
-          cellData={value}
-          cellActions={cellActions}
-          columnData={columnData}
-        />
-      );
-  }
-};
--- a/src/components/Table/HeaderPopper.tsx
+++ b/src/components/Table/HeaderPopper.tsx
@@ -1,12 +1,22 @@
 import React from "react";
 import Button from "@material-ui/core/Button";
 import Typography from "@material-ui/core/Typography";
+import InputLabel from "@material-ui/core/InputLabel";
+import MenuItem from "@material-ui/core/MenuItem";
+import FormHelperText from "@material-ui/core/FormHelperText";
+import FormControl from "@material-ui/core/FormControl";
+import Select from "@material-ui/core/Select";
 import Popper from "@material-ui/core/Popper";
 import Fade from "@material-ui/core/Fade";
 import Paper from "@material-ui/core/Paper";
 import { createStyles, Theme, makeStyles } from "@material-ui/core/styles";
+import { TextField, Grid } from "@material-ui/core";
+import { FIELDS } from "../Fields";
 const useStyles = makeStyles(Theme =>
  createStyles({
+    container: {
+      padding: 10
+    },
    typography: {
      padding: 1
    },
@@ -18,25 +28,82 @@ const useStyles = makeStyles(Theme =>
    },
    button: {
      // margin: theme.spacing(1)
+    },
+    root: {
+      display: "flex",
+      flexWrap: "wrap"
+    },
+    formControl: {
+      margin: Theme.spacing(1),
+      minWidth: 120
+    },
+    selectEmpty: {
+      marginTop: Theme.spacing(2)
    }
  })
 );
 const HeaderPopper = (props: any) => {
-  const { anchorEl } = props;
+  const { anchorEl, column, handleClose } = props;
+  console.log(column);
+  const [values, setValues] = React.useState({
+    age: "",
+    name: "hai"
+  });
+  console.log(props);
  const classes = useStyles();
-  return (
-    <Popper id={"id"} open={!!anchorEl} anchorEl={anchorEl} transition>
-      {({ TransitionProps }) => (
-        <Fade {...TransitionProps} timeout={350}>
-          <Paper>
-            <Typography className={classes.typography}>
-              The content of the Popper.
-            </Typography>
-          </Paper>
-        </Fade>
-      )}
-    </Popper>
-  );
+  function handleChange(
+    event: React.ChangeEvent<{ name?: string; value: unknown }>
+  ) {
+    setValues(oldValues => ({
+      ...oldValues,
+      [event.target.name as string]: event.target.value
+    }));
+  }
+
+  if (column) {
+    return (
+      <Popper
+        id={`id-${column.name}`}
+        open={!!anchorEl}
+        anchorEl={anchorEl}
+        transition
+      >
+        {({ TransitionProps }) => (
+          <Fade {...TransitionProps} timeout={350}>
+            <Paper className={classes.container}>
+              <Grid container direction="column">
+                <TextField label="Column name" defaultValue={column.name} />
+                <FormControl className={classes.formControl}>
+                  <InputLabel htmlFor="age-simple">Field Type</InputLabel>
+                  <Select
+                    value={FIELDS[0].type}
+                    onChange={handleChange}
+                    inputProps={{
+                      name: "age",
+                      id: "age-simple"
+                    }}
+                  >
+                    {FIELDS.map((field: any) => {
+                      return (
+                        <MenuItem value={field.type}>
+                          {field.icon} {field.name}
+                        </MenuItem>
+                      );
+                    })}
+                  </Select>
+                  <Button>Add</Button>
+                  <Button color="secondary" onClick={handleClose}>
+                    cancel
+                  </Button>
+                </FormControl>
+              </Grid>
+            </Paper>
+          </Fade>
+        )}
+      </Popper>
+    );
+  }
+  return <div />;
 };

 export default HeaderPopper;
--- a/src/components/Table/NewColumnPopper.tsx
+++ b/src/components/Table/NewColumnPopper.tsx
@@ -0,0 +1,85 @@
+import React from "react";
+import Button from "@material-ui/core/Button";
+import Typography from "@material-ui/core/Typography";
+import InputLabel from "@material-ui/core/InputLabel";
+import MenuItem from "@material-ui/core/MenuItem";
+import FormHelperText from "@material-ui/core/FormHelperText";
+import FormControl from "@material-ui/core/FormControl";
+import Select from "@material-ui/core/Select";
+import Popper from "@material-ui/core/Popper";
+import Fade from "@material-ui/core/Fade";
+import Paper from "@material-ui/core/Paper";
+import { createStyles, Theme, makeStyles } from "@material-ui/core/styles";
+import { TextField } from "@material-ui/core";
+const useStyles = makeStyles(Theme =>
+  createStyles({
+    typography: {
+      padding: 1
+    },
+    header: {
+      position: "absolute",
+      left: 0,
+      top: 0
+      //zIndex: 100000
+    },
+    button: {
+      // margin: theme.spacing(1)
+    },
+    root: {
+      display: "flex",
+      flexWrap: "wrap"
+    },
+    formControl: {
+      margin: Theme.spacing(1),
+      minWidth: 120
+    },
+    selectEmpty: {
+      marginTop: Theme.spacing(2)
+    }
+  })
+);
+const NewColumnPopper = (props: any) => {
+  const { anchorEl, column } = props;
+  const [values, setValues] = React.useState({
+    age: "",
+    name: "hai"
+  });
+  console.log(props);
+  const classes = useStyles();
+  function handleChange(
+    event: React.ChangeEvent<{ name?: string; value: unknown }>
+  ) {
+    setValues(oldValues => ({
+      ...oldValues,
+      [event.target.name as string]: event.target.value
+    }));
+  }
+  return (
+    <Popper id={"id"} open={!!anchorEl} anchorEl={anchorEl} transition>
+      {({ TransitionProps }) => (
+        <Fade {...TransitionProps} timeout={350}>
+          <Paper>
+            <TextField label="Column name" />
+            <FormControl className={classes.formControl}>
+              <InputLabel htmlFor="age-simple">Age</InputLabel>
+              <Select
+                value={values.age}
+                onChange={handleChange}
+                inputProps={{
+                  name: "age",
+                  id: "age-simple"
+                }}
+              >
+                <MenuItem value={10}>Ten</MenuItem>
+                <MenuItem value={20}>Twenty</MenuItem>
+                <MenuItem value={30}>Thirty</MenuItem>
+              </Select>
+            </FormControl>
+          </Paper>
+        </Fade>
+      )}
+    </Popper>
+  );
+};
+
+export default NewColumnPopper;
--- a/src/components/Table/index.tsx
+++ b/src/components/Table/index.tsx
@@ -15,7 +15,6 @@ import Date from "../Fields/Date";
 import Rating from "../Fields/Rating";
 import CheckBox from "../Fields/CheckBox";
 import UrlLink from "../Fields/UrlLink";
-
 const useStyles = makeStyles(Theme =>
  createStyles({
    typography: {
@@ -26,8 +25,8 @@ const useStyles = makeStyles(Theme =>
      left: 0,
      top: 0
    },
-    button: {
-      // margin: theme.spacing(1)
+    headerButton: {
+      width: "100%"
    }
  })
 );
@@ -65,7 +64,6 @@ const DateFormatter = (fieldName: string, fieldType: FieldType) => (
 };

 const formatter = (fieldType: FieldType, fieldName: string) => {
-  console.log(fieldType);
  switch (fieldType) {
    case FieldType.date:
    case FieldType.dateTime:
@@ -95,45 +93,67 @@ function Table(props: any) {

  const [header, setHeader] = useState<any | null>();

-  const handleClick = (
+  const handleCloseHeader = () => {
+    setHeader(null);
+    setAnchorEl(null);
+  };
+  const handleClick = (headerProps: any) => (
    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
  ) => {
+    handleCloseHeader();
    setAnchorEl(event.currentTarget);
+    setHeader(headerProps);
  };

  const onGridRowsUpdated = (props: any) => {
    const { fromRowData, updated } = props;
    fromRowData.ref.update(updated);
  };
-
+  const onCellSelected = (args: any) => {
+    handleCloseHeader();
+    console.log(args);
+  };
  const headerRenderer = (props: any) => {
-    console.log(props);
-    return (
-      <div className={classes.header}>
-        {props.column.name}{" "}
-        <IconButton
-          disableFocusRipple
-          onClick={handleClick}
-          className={classes.button}
-          aria-label="delete"
-        >
-          <EditIcon />
-        </IconButton>
-      </div>
-    );
+    switch (props.column.key) {
+      case "new":
+        return (
+          <Button onClick={handleClick(props)} className={classes.header}>
+            {props.column.name}
+          </Button>
+        );
+      default:
+        return (
+          <div className={classes.header}>
+            <Button
+              className={classes.headerButton}
+              onClick={handleClick(props)}
+              aria-label="edit"
+            >
+              {props.column.name} <EditIcon />
+            </Button>
+          </div>
+        );
+    }
  };

  if (tableState.columns) {
-    const columns = tableState.columns.map((column: any) => ({
+    let columns = tableState.columns.map((column: any) => ({
      key: column.fieldName,
      name: column.columnName,
      editable: editable(column.type),
      resizeable: true,
-      frozen: column.fieldName === "cohort",
+      //  frozen: column.fieldName === "cohort",
      headerRenderer: headerRenderer,
      formatter: formatter(column.type, column.fieldName),
-      width: 200
+      width: 200,
+      ...column
    }));
+    columns.push({
+      key: "new",
+      name: "Add column",
+      width: 160,
+      headerRenderer: headerRenderer
+    });
    const rows = tableState.rows;
    return (
      <>
@@ -145,10 +165,14 @@ function Table(props: any) {
          enableCellSelect={true}
          onCellCopyPaste={copyPaste}
          minHeight={500}
-          // getCellActions={getCellActions}
+          onCellSelected={onCellSelected}
        />
        <Button onClick={tableActions.row.add}>Add Row</Button>
-        <HeaderPopper anchorEl={anchorEl} />
+        <HeaderPopper
+          handleClose={handleCloseHeader}
+          anchorEl={anchorEl}
+          column={header && header.column}
+        />
      </>
    );
  } else return <p>Loading</p>;