tableConnect and subtable columns settings

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

@@ -9,7 +9,6 @@ import {
   ListSubheader,
   Divider,
 } from "@material-ui/core";
-import { fade } from "@material-ui/core/styles";
 
 const useStyles = makeStyles(theme =>
   createStyles({

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

@@ -88,6 +88,7 @@ export default function FormDialog({
                 name,
                 fieldName,
                 key: fieldName,
+                config: {},
                 ...data.initializeColumn,
               });
             }}

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

@@ -1,6 +1,5 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import Button from "@material-ui/core/Button";
-
 import Dialog from "@material-ui/core/Dialog";
 import Grid from "@material-ui/core/Grid";
 import DialogActions from "@material-ui/core/DialogActions";
@@ -8,27 +7,62 @@ import DialogContent from "@material-ui/core/DialogContent";
 import { Typography, IconButton, TextField, Switch } from "@material-ui/core";
 import CloseIcon from "@material-ui/icons/Close";
 import { FieldType } from "constants/fields";
-import FieldsDropdown from "./FieldsDropdown";
 import OptionsInput from "./ConfigFields/OptionsInput";
 import { useFiretableContext } from "contexts/firetableContext";
 import MultiSelect from "@antlerengineering/multiselect";
+import { db } from "../../../firebase";
+import _sortBy from "lodash/sortBy";
+const ColumnSelector = ({
+  tableColumns,
+  handleChange,
+  validTypes,
+  table,
+  value,
+}: {
+  tableColumns?: any[];
+  handleChange: any;
+  validTypes: FieldType[];
+  table?: string;
+  value: any;
+}) => {
+  const [columns, setColumns] = useState(tableColumns ?? []);
+  const getColumns = async table => {
+    const tableConfigDoc = await db
+      .doc(`_FIRETABLE_/settings/schema/${table}`)
+      .get();
+    const tableConfig = tableConfigDoc.data();
 
-const ColumnSelector = ({ columns, handleChange, validTypes }) => {
+    if (tableConfig) setColumns(tableConfig.columns ?? []);
+  };
+  useEffect(() => {
+    if (table) {
+      console.log({ table });
+      getColumns(table);
+    }
+  }, [table]);
+  console.log({ columns });
   const options = columns
-    .filter(col => validTypes.includes(col.type))
-    .map(col => ({ value: col.key, label: col.name }));
-  return <MultiSelect onChange={handleChange} value={[]} options={options} />;
+    ? columns
+        .filter(col => validTypes.includes(col.type))
+        .map(col => ({ value: col.key, label: col.name }))
+    : [];
+  return (
+    <MultiSelect
+      onChange={handleChange}
+      value={value ?? []}
+      options={options}
+    />
+  );
 };
 
 const ConfigForm = ({ type, config, handleChange }) => {
   const { tableState, tables } = useFiretableContext();
-  console.log(tables);
-  if (!tableState) return <></>;
 
+  if (!tableState) return <></>;
+  const { columns } = tableState;
   switch (type) {
     case FieldType.singleSelect:
     case FieldType.multiSelect:
-      const { columns } = tableState;
       return (
         <>
           <OptionsInput
@@ -49,10 +83,51 @@ const ConfigForm = ({ type, config, handleChange }) => {
           </Grid>
         </>
       );
+    case FieldType.connectTable:
+      const tableOptions = _sortBy(
+        tables?.map(t => ({
+          label: `${t.section} - ${t.name}`,
+          value: t.collection,
+        })) ?? [],
+        "label"
+      );
+
+      return (
+        <>
+          <MultiSelect
+            options={tableOptions}
+            freeText={false}
+            value={config.index}
+            onChange={handleChange("index")}
+            multiple={false}
+          />
+          <ColumnSelector
+            value={config.primaryKeys}
+            table={config.index}
+            handleChange={handleChange("primaryKeys")}
+            validTypes={[FieldType.shortText, FieldType.singleSelect]}
+          />
+          <TextField
+            label="filter template"
+            name="filters"
+            fullWidth
+            onChange={e => {
+              handleChange("filters")(e.target.value);
+            }}
+          />
+        </>
+      );
     case FieldType.subTable:
       return (
         <ColumnSelector
-          columns={columns ?? []}
+          value={config.parentLabel}
+          tableColumns={
+            columns
+              ? Array.isArray(columns)
+                ? columns
+                : Object.values(columns)
+              : []
+          }
           handleChange={handleChange("parentLabel")}
           validTypes={[FieldType.shortText, FieldType.singleSelect]}
         />

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

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 
 import { createStyles, makeStyles, Menu } from "@material-ui/core";
 import LockOpenIcon from "@material-ui/icons/LockOpen";
@@ -24,7 +24,7 @@ import TypeChange from "./TypeChange";
 import Settings from "./Settings";
 
 import { useFiretableContext } from "contexts/firetableContext";
-import { FIELDS } from "constants/fields";
+import { FIELDS, FieldType } from "constants/fields";
 import _find from "lodash/find";
 import { Column } from "react-data-grid";
 import { PopoverProps } from "@material-ui/core";
@@ -70,11 +70,22 @@ export default function ColumnMenu() {
       setSelectedColumnHeader,
     } as any;
 
+  const { column, anchorEl } = (selectedColumnHeader ?? {}) as any;
+
+  useEffect(() => {
+    if (column && column.type === FieldType.last) {
+      setModal({
+        type: ModalStates.new,
+        data: {
+          initializeColumn: { index: column.index ? column.index + 1 : 0 },
+        },
+      });
+    }
+  }, [column]);
   if (!tableState || !tableActions) return null;
   const { orderBy } = tableState;
 
   const actions = tableActions!.column;
-  const { column, anchorEl } = (selectedColumnHeader ?? {}) as any;
 
   const handleClose = () => {
     if (!setSelectedColumnHeader) return;
@@ -225,23 +236,25 @@ export default function ColumnMenu() {
   const clearModal = () => {
     setModal(INITIAL_MODAL);
   };
-  console.log({ column });
+
   return (
     <>
-      <Menu
-        id="simple-menu"
-        anchorEl={anchorEl}
-        keepMounted
-        open={Boolean(anchorEl)}
-        onClose={handleClose}
-        getContentAnchorEl={null}
-        anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
-        transformOrigin={{ vertical: "top", horizontal: "right" }}
-        classes={{ paper: classes.paper }}
-        MenuListProps={{ disablePadding: true }}
-      >
-        <MenuContents menuItems={menuItems} />
-      </Menu>
+      {column.type !== FieldType.last && (
+        <Menu
+          id="simple-menu"
+          anchorEl={anchorEl}
+          keepMounted
+          open={Boolean(anchorEl)}
+          onClose={handleClose}
+          getContentAnchorEl={null}
+          anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+          transformOrigin={{ vertical: "top", horizontal: "right" }}
+          classes={{ paper: classes.paper }}
+          MenuListProps={{ disablePadding: true }}
+        >
+          <MenuContents menuItems={menuItems} />
+        </Menu>
+      )}
       {column && (
         <>
           <NameChange

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

@@ -61,7 +61,7 @@ export default function ConnectTable({
   const { collectionPath, config } = column as any;
   const { dataGridRef } = useFiretableContext();
 
-  const disabled = !column.editable || config.isLocked;
+  const disabled = !column.editable || config?.isLocked;
 
   // Render chips
   const renderValue = value => (

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

@@ -19,7 +19,14 @@ const useStyles = makeStyles(theme =>
 export default function SubTable({ column, row }: CustomCellProps) {
   const classes = useStyles();
 
-  const { parentLabel } = column as any;
+  const { parentLabel, config } = column as any;
+
+  const label = parentLabel
+    ? row[parentLabel]
+    : config.parentLabel.reduce((acc, curr) => {
+        if (acc !== "") return `${acc} - ${row[curr]}`;
+        else return row[curr];
+      }, "");
   const fieldName = column.key as string;
 
   const router = useRouter();
@@ -31,11 +38,11 @@ export default function SubTable({ column, row }: CustomCellProps) {
   if (parentLabels)
     subTablePath =
       encodeURIComponent(`${row.ref.path}/${fieldName}`) +
-      `?parentLabel=${parentLabels},${row[parentLabel]}`;
+      `?parentLabel=${parentLabels},${label}`;
   else
     subTablePath =
       encodeURIComponent(`${row.ref.path}/${fieldName}`) +
-      `?parentLabel=${encodeURIComponent(row[parentLabel])}`;
+      `?parentLabel=${encodeURIComponent(label)}`;
 
   return (
     <Grid
@@ -46,7 +53,7 @@ export default function SubTable({ column, row }: CustomCellProps) {
       className={clsx("cell-collapse-padding", classes.root)}
     >
       <Grid item xs className={classes.labelContainer}>
-        {column.name}: {row[parentLabel]}
+        {column.name}: {label}
       </Grid>
 
       <Grid item>