add initial columns option to create table

package.json

@@ -19,7 +19,7 @@
     "@mui/lab": "^5.0.0-alpha.50",
     "@mui/material": "^5.0.0",
     "@mui/styles": "^5.0.0",
-    "@rowy/form-builder": "^0.2.4",
+    "@rowy/form-builder": "^0.3.1",
     "@rowy/multiselect": "^0.2.1",
     "@tinymce/tinymce-react": "^3.12.6",
     "algoliasearch": "^4.8.6",

src/components/TableSettings/form.tsx

@@ -7,6 +7,7 @@ import WarningIcon from "@mui/icons-material/WarningAmber";
 
 import { WIKI_LINKS } from "constants/externalLinks";
 import { name } from "@root/package.json";
+import { FieldType as TableFieldType } from "constants/fields";
 
 export const tableSettings = (
   mode: TableSettingsDialogModes | null,
@@ -159,8 +160,8 @@ export const tableSettings = (
     },
 
     {
-      type: FieldType.contentSubHeader,
-      name: "_contentSubHeader_userFacing",
+      type: FieldType.contentHeader,
+      name: "_contentHeader_userFacing",
       label: "Display",
     },
     {
@@ -182,9 +183,9 @@ export const tableSettings = (
     },
 
     {
-      type: FieldType.contentSubHeader,
-      name: "_contentSubHeader_admin",
-      label: "Admin",
+      type: FieldType.contentHeader,
+      name: "_contentHeader_admin",
+      label: "Access controls",
     },
     {
       type: FieldType.multiSelect,
@@ -253,11 +254,19 @@ export const tableSettings = (
         </>
       ),
     },
+
+    mode === TableSettingsDialogModes.create
+      ? {
+          type: FieldType.contentHeader,
+          name: "_contentHeader_columns",
+          label: "Columns",
+        }
+      : null,
     mode === TableSettingsDialogModes.create && tables && tables?.length !== 0
       ? {
           type: FieldType.singleSelect,
           name: "schemaSource",
-          label: "Copy column config from existing table (optional)",
+          label: "Copy columns from existing table (optional)",
           labelPlural: "tables",
           options: tables,
           clearable: true,
@@ -270,4 +279,34 @@ export const tableSettings = (
           ),
         }
       : null,
+    mode === TableSettingsDialogModes.create
+      ? {
+          type: FieldType.contentSubHeader,
+          name: "_contentSubHeader_initialColumns",
+          label: "Initial columns",
+        }
+      : null,
+    mode === TableSettingsDialogModes.create
+      ? {
+          type: FieldType.checkbox,
+          name: `_initialColumns.${TableFieldType.updatedBy}`,
+          label: "Updated By: Automatically log who updates a row",
+        }
+      : null,
+    mode === TableSettingsDialogModes.create
+      ? {
+          type: FieldType.checkbox,
+          name: `_initialColumns.${TableFieldType.createdBy}`,
+          label: "Created By: Automatically log who creates a row",
+          disablePaddingTop: true,
+        }
+      : null,
+    mode === TableSettingsDialogModes.create
+      ? {
+          type: FieldType.checkbox,
+          name: `_initialColumns.${TableFieldType.id}`,
+          label: "Row ID",
+          disablePaddingTop: true,
+        }
+      : null,
   ].filter((field) => field !== null) as Field[];

src/components/TableSettings/index.tsx

@@ -10,8 +10,9 @@ import SuggestedRules from "./SuggestedRules";
 import Confirmation from "components/Confirmation";
 
 import { useProjectContext, Table } from "contexts/ProjectContext";
-import useRouter from "../../hooks/useRouter";
-import { db } from "../../firebase";
+import useRouter from "hooks/useRouter";
+import { routes } from "constants/routes";
+import { db } from "@src/firebase";
 import { name } from "@root/package.json";
 import { SETTINGS, TABLE_SCHEMAS, TABLE_GROUP_SCHEMAS } from "config/dbPaths";
 import { runRoutes } from "constants/runRoutes";
@@ -103,8 +104,8 @@ export default function TableSettingsDialog({
       )
       .doc(data?.id)
       .delete();
-    window.location.reload();
     clearDialog();
+    router.history.push(routes.home);
   };
 
   return (

src/hooks/useSettings.ts

@@ -1,11 +1,14 @@
 import { useEffect } from "react";
 import _findIndex from "lodash/findIndex";
+import _camelCase from "lodash/camelCase";
 
 import useDoc from "./useDoc";
 import { db } from "../firebase";
 import { SETTINGS, TABLE_GROUP_SCHEMAS, TABLE_SCHEMAS } from "config/dbPaths";
+import { FieldType } from "constants/fields";
+import { getFieldProp } from "@src/components/fields";
 
-const useSettings = () => {
+export default function useSettings() {
   const [settingsState, documentDispatch] = useDoc({ path: SETTINGS });
   useEffect(() => {
     //updates tables data on document change
@@ -30,6 +33,7 @@ const useSettings = () => {
     tableType: string;
     roles: string[];
     schemaSource: any;
+    _initialColumns: Record<FieldType, boolean>;
   }) => {
     const { tables } = settingsState;
     const { schemaSource, ...tableSettings } = data;
@@ -41,7 +45,7 @@ const useSettings = () => {
     const tableSchemaDocRef = db.doc(tableSchemaPath);
 
     // Get columns from schemaSource if provided
-    let columns = [];
+    let columns: Record<string, any> = [];
     if (schemaSource) {
       const schemaSourcePath = `${
         tableSettings.tableType !== "collectionGroup"
@@ -51,6 +55,17 @@ const useSettings = () => {
       const sourceDoc = await db.doc(schemaSourcePath).get();
       columns = sourceDoc.get("columns");
     }
+    // Add columns from `_initialColumns`
+    for (const [type, checked] of Object.entries(data._initialColumns)) {
+      if (checked && !columns.some((column) => column.type === type))
+        columns.push({
+          type,
+          name: getFieldProp("name", type as FieldType),
+          key: "_" + _camelCase(type),
+          fieldName: "_" + _camelCase(type),
+          config: {},
+        });
+    }
 
     // Appends table to settings doc
     await db.doc(SETTINGS).set(
@@ -92,6 +107,4 @@ const useSettings = () => {
   };
   const settingsActions = { createTable, updateTable, deleteTable };
   return [settingsState, settingsActions];
-};
-
-export default useSettings;
+}

yarn.lock

@@ -2659,10 +2659,10 @@
     estree-walker "^1.0.1"
     picomatch "^2.2.2"
 
-"@rowy/form-builder@^0.2.4":
-  version "0.2.5"
-  resolved "https://registry.yarnpkg.com/@rowy/form-builder/-/form-builder-0.2.5.tgz#f7d2f981899ed6ad7d3a79f617c5d4c37eb7219f"
-  integrity sha512-f2MLPIqBbw88vL7gSLlKv5PK6pLKBsa6xgi4efQUOvFLeDWFnU7ksHI1QH6yQwCEfl/tQmLbsanhv/on5pf0tA==
+"@rowy/form-builder@^0.3.1":
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@rowy/form-builder/-/form-builder-0.3.1.tgz#7359a05563c99ae4c222fa5336a57ce7a344ae29"
+  integrity sha512-5IlNtBb6V5VdbpYWhO4P6QIBVqI42SVko15Bmn1YLd0JyoI3wza+seFBK0PgrBUB/OzTEA/hsBN5cyWhqlKt2Q==
   dependencies:
     "@hookform/resolvers" "^2.6.0"
     "@mdi/js" "^5.9.55"
@@ -13588,7 +13588,12 @@ react-helmet@^6.1.0:
     react-fast-compare "^3.1.1"
     react-side-effect "^2.1.0"
 
-react-hook-form@^7.10.0, react-hook-form@^7.16.1:
+react-hook-form@^7.10.0:
+  version "7.17.2"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.17.2.tgz#235f15bb65c13e7a1198d33f2db24bcc9e27b303"
+  integrity sha512-oBaHwlYnbpzSFdNrs43QpcM+K2A0kUeNjV86ECYkCimlR1Ctl+tz4oQQd9plfGYkO7PJGLVMOVpUtL5EHjAcYQ==
+
+react-hook-form@^7.16.1:
   version "7.17.1"
   resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.17.1.tgz#dc257a5e34b3c353460ecdbbba5236e066cf80b1"
   integrity sha512-9nQ+qKFHFpnWzQHdDh6F4Egxa8iJkue1KU921F8qqeyUVbPPjgQZDXaQyNHABEYjRh0ndjTI24GDA+lwm2lQdg==