Merge pull request #165 from AntlerVC/develop

support custom fieldNames and nested field key

www/src/components/Table/ColumnMenu/NewColumn.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import Button from "@material-ui/core/Button";
 import TextField from "@material-ui/core/TextField";
 import Dialog from "@material-ui/core/Dialog";
@@ -23,7 +23,12 @@ export default function FormDialog({
   handleSave: Function;
 }) {
   const [type, setType] = useState(FieldType.shortText);
-  const [name, setName] = useState("");
+  const [columnLabel, setColumnLabel] = useState("");
+  const [fieldKey, setFieldKey] = useState("");
+  useEffect(() => {
+    setFieldKey(_camel(columnLabel));
+  }, [columnLabel]);
+
   return (
     <div>
       <Dialog
@@ -51,15 +56,27 @@ export default function FormDialog({
           </Grid>
           <Typography variant="overline">Column Name</Typography>
           <TextField
-            value={name}
+            value={columnLabel}
             autoFocus
             variant="filled"
-            id="name"
+            id="columnName"
             label="Column Header"
             type="text"
             fullWidth
-            onChange={e => {
-              setName(e.target.value);
+            onChange={(e) => {
+              setColumnLabel(e.target.value);
+            }}
+          />
+          <Typography variant="overline">Field Key</Typography>
+          <TextField
+            value={fieldKey}
+            variant="filled"
+            id="fieldKey"
+            label="Field Key"
+            type="text"
+            fullWidth
+            onChange={(e) => {
+              setFieldKey(e.target.value);
             }}
           />
           <Typography variant="overline">Column Type</Typography>
@@ -82,12 +99,12 @@ export default function FormDialog({
           </Button>
           <Button
             onClick={() => {
-              const fieldName = _camel(name);
-              handleSave(fieldName, {
+              //const fieldName = _camel(name);
+              handleSave(fieldKey, {
                 type,
-                name,
-                fieldName,
-                key: fieldName,
+                name: columnLabel,
+                fieldName: fieldKey,
+                key: fieldKey,
                 config: {},
                 ...data.initializeColumn,
               });

www/src/components/Table/Settings/Webhooks.tsx

@@ -62,7 +62,7 @@ export default function WebhooksDialog({ open, handleClose }) {
   const fullWidth = true;
   const maxWidth: DialogProps["maxWidth"] = "xl";
   const handleChange = (key: string) => (value: any) => {
-    setState(s => ({ ...s, [key]: value }));
+    setState((s) => ({ ...s, [key]: value }));
   };
   const initializeWebhooksConfig = () => {
     const secret = makeId(32);
@@ -76,7 +76,6 @@ export default function WebhooksDialog({ open, handleClose }) {
     });
   };
   useEffect(() => {
-    console.log({ tableState, secret: state.secret });
     if (
       tableState &&
       !tableState.config.tableConfig.loading &&
@@ -87,7 +86,7 @@ export default function WebhooksDialog({ open, handleClose }) {
     } else if (tableState?.config.webhooks) {
       setState({ ...tableState?.config.webhooks });
     }
-  }, [tableState]);
+  }, [tableState?.config]);
 
   const handleWebhookTypeChange = (
     event: React.ChangeEvent<{ value: unknown }>
@@ -123,7 +122,7 @@ export default function WebhooksDialog({ open, handleClose }) {
               labelPlacement="end"
               checked={state.enabled}
               onChange={
-                e => {
+                (e) => {
                   handleChange("enabled")(!state.enabled);
                 }
                 //  handleChange("isCollectionGroup", !formState.isCollectionGroup)
@@ -162,7 +161,7 @@ export default function WebhooksDialog({ open, handleClose }) {
               <Typography variant="body1">
                 please set the question reference in typeform to the following
                 field keys :{" "}
-                {tableFields.map(key => (
+                {tableFields.map((key) => (
                   <>
                     {" "}
                     <b key={key}>{key}</b>,

www/src/components/Table/editors/TextEditor.tsx

@@ -10,7 +10,7 @@ import {
 
 import { FieldType } from "constants/fields";
 
-const styles = theme =>
+const styles = (theme) =>
   createStyles({
     root: {
       width: "calc(100% - 1px)",
@@ -54,7 +54,6 @@ class TextEditor extends React.Component<
 
   render() {
     const { classes, column, value } = this.props;
-
     let inputType = "text";
     switch ((column as any).type) {
       case FieldType.email:

www/src/components/Table/formatters/withCustomCell.tsx

@@ -5,8 +5,8 @@ import { makeStyles, createStyles } from "@material-ui/core";
 
 import ErrorBoundary from "components/ErrorBoundary";
 import { useFiretableContext } from "../../../contexts/firetableContext";
-
-const useStyles = makeStyles(theme =>
+import _get from "lodash/get";
+const useStyles = makeStyles((theme) =>
   createStyles({
     "@global": {
       ".rdg-cell-mask.rdg-selected": {
@@ -23,6 +23,9 @@ export type CustomCellProps = FormatterProps<any> & {
   onSubmit: (value: any) => void;
 };
 
+const getCellValue = (row, key) => {
+  return _get(row, key);
+};
 /**
  * HOC to wrap around custom cell formatters.
  * Displays react-data-grid’s blue selection border when the cell is selected.
@@ -44,7 +47,7 @@ const withCustomCell = (Component: React.ComponentType<CustomCellProps>) => (
       <Suspense fallback={<div />}>
         <Component
           {...props}
-          value={props.row[props.column.key as string]}
+          value={getCellValue(props.row, props.column.key as string)}
           onSubmit={handleSubmit}
         />
       </Suspense>

www/src/components/Table/index.tsx

@@ -34,7 +34,7 @@ import { DRAWER_COLLAPSED_WIDTH } from "components/SideDrawer";
 import { APP_BAR_HEIGHT } from "components/Navigation";
 import useStyles from "./styles";
 import { useAppContext } from "contexts/appContext";
-
+import _get from "lodash/get";
 // const Hotkeys = lazy(() => import("./HotKeys" /* webpackChunkName: "HotKeys" */));
 const { DraggableContainer } = DraggableHeader;
 
@@ -108,7 +108,7 @@ export default function Table() {
         ...column,
         width: column.width ? (column.width > 380 ? 380 : column.width) : 150,
       }))
-      .filter(column => !userDocHiddenFields.includes(column.key));
+      .filter((column) => !userDocHiddenFields.includes(column.key));
     columns.push({
       isNew: true,
       key: "new",
@@ -125,7 +125,17 @@ export default function Table() {
 
   const rowHeight = tableState.config.rowHeight;
   const rows = tableState.rows;
-  const rowGetter = (rowIdx: number) => rows[rowIdx];
+  //const rowGetter = (rowIdx: number) => rows[rowIdx];
+  const rowGetter = (rowIdx: number) =>
+    columns.reduce(
+      (acc, currColumn) => ({
+        ...acc,
+        [currColumn.key]: _get(rows[rowIdx], currColumn.key),
+      }),
+      {}
+    );
+
+  // rows[rowIdx]
 
   const inSubTable = tableState.tablePath.split("/").length > 1;
 
@@ -155,7 +165,7 @@ export default function Table() {
             rowGetter={rowGetter}
             rowsCount={rows.length}
             rowKey={"id" as "id"}
-            onGridRowsUpdated={event => {
+            onGridRowsUpdated={(event) => {
               const { action, cellKey, updated } = event;
               if (action === "CELL_UPDATE" && updated !== null)
                 updateCell!(rows[event.toRow].ref, cellKey as string, updated);
@@ -187,7 +197,7 @@ export default function Table() {
             enableCellSelect
             onScroll={handleScroll}
             ref={dataGridRef}
-            RowsContainer={props => (
+            RowsContainer={(props) => (
               <>
                 <div {...props} ref={rowsContainerRef} />
                 <Grid

www/src/contexts/firetableContext.tsx

@@ -66,7 +66,7 @@ const firetableContext = React.createContext<Partial<FiretableContextProps>>(
 );
 export default firetableContext;
 
-export const firetableUser = currentUser => {
+export const firetableUser = (currentUser) => {
   const {
     displayName,
     email,
@@ -102,10 +102,10 @@ export const FiretableContextProvider: React.FC = ({ children }) => {
     if (tables && userRoles && !sections) {
       const filteredTables = _sortBy(tables, "name")
         .filter(
-          table =>
-            !table.roles || table.roles.some(role => userRoles.includes(role))
+          (table) =>
+            !table.roles || table.roles.some((role) => userRoles.includes(role))
         )
-        .map(table => ({
+        .map((table) => ({
           ...table,
           section: table.section ? table.section.toUpperCase().trim() : "OTHER",
         }));
@@ -118,7 +118,7 @@ export const FiretableContextProvider: React.FC = ({ children }) => {
 
   useEffect(() => {
     if (currentUser && !userClaims) {
-      currentUser.getIdTokenResult(true).then(results => {
+      currentUser.getIdTokenResult(true).then((results) => {
         setUserRoles(results.claims.roles || []);
         setUserClaims(results.claims);
       });
@@ -135,20 +135,20 @@ export const FiretableContextProvider: React.FC = ({ children }) => {
     const ftUser = firetableUser(currentUser);
     const _ft_updatedAt = new Date();
     const _ft_updatedBy = ftUser;
-
+    let update = { [fieldName]: value };
     ref
       .update({
-        [fieldName]: value,
+        ...update,
         _ft_updatedAt,
         updatedAt: _ft_updatedAt,
         _ft_updatedBy,
         updatedBy: _ft_updatedBy,
       })
       .then(
-        success => {
+        (success) => {
           console.log("successful update");
         },
-        error => {
+        (error) => {
           if (error.code === "permission-denied") {
             open({
               message: `You don't have permissions to make this change`,