fix side drawer

www/src/components/SideDrawer/Form/Fields/Action.tsx

@@ -44,8 +44,8 @@ function Action({
   field,
   form,
   editable,
-  callableName,
-}: FieldProps<any> & { callableName: string; editable?: boolean }) {
+  config,
+}: FieldProps<any> & { config: { callableName: string }; editable?: boolean }) {
   const classes = useStyles();
   const { ref, ...docData } = form.values;
 
@@ -57,7 +57,7 @@ function Action({
     console.log("RUN");
 
     cloudFunction(
-      callableName,
+      config.callableName,
       {
         ref: { path: ref.path, id: ref.id },
         row: sanitiseRowData(Object.assign({}, docData)),
@@ -69,7 +69,7 @@ function Action({
         if (cellValue) form.setFieldValue(field.name, cellValue);
       },
       error => {
-        console.error("ERROR", callableName, error);
+        console.error("ERROR", config.callableName, error);
         setIsRunning(false);
         snack.open({ message: JSON.stringify(error), severity: "error" });
       }
@@ -100,7 +100,7 @@ function Action({
             ) : hasRan ? (
               field.value.status
             ) : (
-              sanitiseCallableName(callableName)
+              sanitiseCallableName(config.callableName)
             )}
           </Typography>
         </Grid>

www/src/components/SideDrawer/Form/Fields/MultiSelect.tsx

@@ -19,12 +19,12 @@ export default function MultiSelect({
     newValues.splice(index, 1);
     form.setFieldValue(field.name, newValues);
   };
-
+  const { config } = props as any;
   return (
     <>
       <MultiSelectA
         {...props}
-        options={props.options ?? []}
+        options={config.options ?? []}
         multiple
         value={field.value ? field.value : []}
         onChange={value => form.setFieldValue(field.name, value)}

www/src/components/SideDrawer/Form/Fields/SubTable.tsx

@@ -35,33 +35,34 @@ export default function SubTable({
   form,
   field,
   label,
-  parentLabel,
-}: FieldProps<any> & { parentLabel?: string; label: string }) {
+  config,
+}: FieldProps<any> & { config: { parentLabel?: string[] }; label: string }) {
   const classes = useStyles();
 
   const router = useRouter();
   const parentLabels = queryString.parse(router.location.search).parentLabel;
-
+  const _label = config?.parentLabel
+    ? config.parentLabel.reduce((acc, curr) => {
+        if (acc !== "") return `${acc} - ${form.values[curr]}`;
+        else return form.values[curr];
+      }, "")
+    : "";
   let subTablePath = "";
   if (parentLabels)
     subTablePath =
       encodeURIComponent(`${form.values.ref.path}/${field.name}`) +
-      `?parentLabel=${parentLabels},${
-        parentLabel ? form.values[parentLabel] : ""
-      }`;
+      `?parentLabel=${parentLabels},${label}`;
   else
     subTablePath =
       encodeURIComponent(`${form.values.ref.path}/${field.name}`) +
-      `?parentLabel=${
-        parentLabel ? encodeURIComponent(form.values[parentLabel]) : ""
-      }`;
+      `?parentLabel=${encodeURIComponent(_label)}`;
 
   return (
     <Grid container wrap="nowrap">
       <Grid container alignItems="center" className={classes.labelContainer}>
         <Typography variant="body1">
           {label}
-          {parentLabel && `: ${form.values[parentLabel]}`}
+          {`: ${_label}`}
         </Typography>
       </Grid>
 

www/src/components/SideDrawer/index.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 import clsx from "clsx";
 import _isNil from "lodash/isNil";
+import _sortBy from "lodash/sortBy";
 import _findIndex from "lodash/findIndex";
 
 import { Drawer, Fab } from "@material-ui/core";
@@ -58,7 +59,7 @@ export default function SideDrawer() {
     tableState?.columns &&
     (Array.isArray(tableState?.columns)
       ? tableState?.columns
-      : Object.values(tableState?.columns)
+      : _sortBy(Object.values(tableState?.columns), "index")
     ).map(column => {
       const field: Field = {
         type: column.type,
@@ -85,20 +86,10 @@ export default function SideDrawer() {
 
         case FieldType.singleSelect:
         case FieldType.multiSelect:
-          field.options = column.options;
-          break;
-
         case FieldType.connectTable:
-          field.collectionPath = column.collectionPath;
-          field.config = column.config;
-          break;
-
         case FieldType.subTable:
-          field.parentLabel = column.parentLabel;
-          break;
-
         case FieldType.action:
-          field.callableName = column.callableName;
+          field.config = column.config;
           break;
 
         default:

www/src/components/Table/MigrateButton.tsx

@@ -12,24 +12,21 @@ const MigrateButton = ({ columns, needsMigration }) => {
     console.log({ columns });
 
     const newColumns = columns.reduce((acc, currCol, currIndex) => {
-      const index = currCol.collectionPath;
-      const options = currCol.options;
-      delete currCol.options;
-      const parentLabel = [currCol.parentLabel];
-      delete currCol.collectionPath;
-      delete currCol.parentLabel;
       const baseCol = {
         ...currCol,
         fieldName: currCol.key,
         index: currIndex,
       };
       if (currCol.type === FieldType.connectTable) {
+        const index = currCol.collectionPath;
+        delete baseCol.collectionPath;
         return {
           ...acc,
-
           [currCol.key]: { ...baseCol, config: { ...currCol.config, index } },
         };
       } else if (currCol.type === FieldType.subTable) {
+        const parentLabel = [currCol.parentLabel];
+        delete baseCol.parentLabel;
         return {
           ...acc,
           [currCol.key]: {
@@ -37,9 +34,21 @@ const MigrateButton = ({ columns, needsMigration }) => {
             config: { ...currCol.config, parentLabel },
           },
         };
+      } else if (currCol.type === FieldType.action) {
+        const callableName = currCol.callableName;
+        delete baseCol.callableName;
+        return {
+          ...acc,
+          [currCol.key]: {
+            ...baseCol,
+            config: { ...currCol.config, callableName },
+          },
+        };
       } else if (
         [FieldType.multiSelect, FieldType.singleSelect].includes(currCol.type)
       ) {
+        const options = currCol.options;
+        delete baseCol.options;
         return {
           ...acc,
           [currCol.key]: {
@@ -49,7 +58,6 @@ const MigrateButton = ({ columns, needsMigration }) => {
         };
       } else return { ...acc, [currCol.key]: baseCol };
     }, {});
-    console.log({ newColumns });
     await db
       .doc(configDocPath)
       .update({ columns: newColumns, oldColumns: columns });

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

@@ -41,7 +41,7 @@ export default function Action({
   const classes = useStyles();
 
   const { createdAt, updatedAt, id, ref, ...docData } = row;
-  const { callableName } = column as any;
+  const { callableName, config } = column as any;
   const action = !value
     ? "run"
     : value.undo
@@ -62,7 +62,7 @@ export default function Action({
     };
     console.log(data);
     cloudFunction(
-      callableName,
+      callableName ?? config.callableName,
       data,
       response => {
         const { message, cellValue, success } = response.data;
@@ -71,7 +71,7 @@ export default function Action({
         if (cellValue) onSubmit(cellValue);
       },
       error => {
-        console.error("ERROR", callableName, error);
+        console.error("ERROR", callableName ?? config.callableName, error);
         setIsRunning(false);
         snack.open({ message: JSON.stringify(error), severity: "error" });
       }
@@ -133,7 +133,7 @@ export default function Action({
         ) : hasRan ? (
           value.status
         ) : (
-          sanitiseCallableName(callableName)
+          sanitiseCallableName(callableName ?? config.callableName)
         )}
       </Grid>
 

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

@@ -7,10 +7,10 @@ import {
   FormControlLabel,
   Switch,
 } from "@material-ui/core";
-import { green } from "@material-ui/core/colors";
+
 import Confirmation from "components/Confirmation";
 
-const useStyles = makeStyles((theme) =>
+const useStyles = makeStyles(theme =>
   createStyles({
     root: { paddingLeft: theme.spacing(1.5) },