Various frontend and backend updates

backend/functions/package.json

@@ -8,7 +8,7 @@
     "generate:schema": "set DEV=1 && ts-node src/scripts/generateSchema.ts",
     "generate:migration": "set DEV=1 && ts-node src/scripts/generateMigration.ts",
     "generate:model": "set DEV=1 && ts-node src/scripts/generateModel.ts",
-    "grantDBPermissions": "set DEV=1 && ts-node src/scripts/grantSchemaPermissions.ts",
+    "grantDBPermissions": "ts-node src/scripts/grantSchemaPermissions.ts",
     "executeAdminScript": "set DEV=1 && ts-node src/scripts/executeAdminScript.ts",
     "grantAdmin": "ts-node src/scripts/grantAdmin.ts",
     "shell": "npm run build && firebase functions:shell",

backend/functions/src/schema/core/helpers/typeDef.ts

@@ -420,13 +420,11 @@ export function generateArrayField(
     sqlType: "jsonb",
     type,
     ...(!allowNull && { defaultValue: [] }),
-    sqlOptions: sqlOptions
-      ? {
-          // necessary for inserting JSON into DB properly
-          parseValue: (val) => JSON.stringify(val),
-          ...sqlOptions,
-        }
-      : sqlOptions,
+    sqlOptions: {
+      // necessary for inserting JSON into DB properly
+      parseValue: (val) => JSON.stringify(val),
+      ...sqlOptions,
+    },
     typeDefOptions: {
       ...typeDefOptions,
     },

backend/functions/src/scripts/grantAdmin.ts

@@ -12,7 +12,11 @@ const argv = yargs(process.argv.slice(2))
   .parseSync();
 
 // set the DEV state based on the args provided
-process.env.DEV = argv.prod ? undefined : "1";
+if (argv.prod) {
+  delete process.env.DEV;
+} else {
+  process.env.DEV = "1";
+}
 
 import { pgOptions } from "../config";
 

backend/functions/src/scripts/grantSchemaPermissions.ts

@@ -1,20 +1,29 @@
 import * as knexBuilder from "knex";
 import { configDotenv } from "dotenv";
 configDotenv();
-import { pgOptions, pgDatabase, pgUser } from "../config";
+import { pgOptions, pgDatabase } from "../config";
+import yargs from "yargs";
+
+const argv = yargs(process.argv.slice(2))
+  .options({
+    user: { type: "string", demandOption: true },
+  })
+  .parseSync();
 
 export const knex = knexBuilder({
   ...pgOptions,
 });
 
+const user = argv.user;
+
 // grant the permissions to that user
 (async () => {
-  await knex.raw(`GRANT ALL ON SCHEMA public TO ${pgUser.value()};
-  GRANT ALL PRIVILEGES ON ALL TABLES IN SCHEMA public TO ${pgUser.value()};
-  GRANT USAGE, SELECT ON ALL SEQUENCES IN SCHEMA public TO ${pgUser.value()};`);
+  await knex.raw(`GRANT ALL ON SCHEMA public TO ${user};
+  GRANT ALL PRIVILEGES ON ALL TABLES IN SCHEMA public TO ${user};
+  GRANT USAGE, SELECT ON ALL SEQUENCES IN SCHEMA public TO ${user};`);
 
   console.log(
-    `Done granting permissions for database: '${pgDatabase.value()}' to user: '${pgUser.value()}'`
+    `Done granting permissions for database: '${pgDatabase.value()}' to user: '${user}'`
   );
 
   // done, clean up by destroying the connection pool.

frontend/assets/main.css

@@ -51,3 +51,7 @@
   border: 1px solid rgb(122, 122, 122);
   border-radius: 5px;
 }
+
+.selected-element {
+  border: 5px solid var(--v-secondary-base);
+}

frontend/components/dialog/crudRecordDialog.vue

@@ -12,7 +12,7 @@
       :hidden-filters="hiddenFilters"
       :hidden-headers="hiddenHeaders"
       :page-options="pageOptions || initialPageOptions"
-      :title="title"
+      :element-title="elementTitle"
       :icon="icon"
       :parent-item="parentItem"
       :hide-presets="hidePresets"
@@ -40,7 +40,7 @@ import CrudRecordInterface from '~/components/interface/crud/crudRecordInterface
 
 export default {
   props: {
-    title: {
+    elementTitle: {
       type: String,
       default: null,
     },

frontend/components/dialog/editRecordDialog.vue

@@ -69,6 +69,7 @@
             :locked-filters="postLockedFilters"
             :hidden-fields="recordInfo.postOptions.hiddenFields"
             :record-info="recordInfo.postOptions.recordInfo"
+            :page-options="initialPostPageOptions"
             :initial-sort-options="recordInfo.postOptions.initialSortOptions"
           ></component></div
       ></template>
@@ -227,6 +228,14 @@ export default {
     postInterface() {
       return this.recordInfo.postOptions?.component ?? CrudPostInterface
     },
+
+    initialPostPageOptions() {
+      return this.recordInfo.postOptions?.initialSortOptions
+        ? {
+            sort: this.recordInfo.postOptions?.initialSortOptions,
+          }
+        : null
+    },
   },
 
   watch: {

frontend/components/interface/crud/crudPostInterface.vue

@@ -1,6 +1,18 @@
 <template>
   <v-card flat>
     <v-toolbar dense flat color="accent" class="mb-3">
+      <PreviewRecordChip
+        v-if="parentItem && isDialog"
+        :value="parentItem"
+        class="pointer-cursor"
+      >
+      </PreviewRecordChip>
+      <v-divider
+        v-if="parentItem && isDialog"
+        class="mx-4"
+        inset
+        vertical
+      ></v-divider>
       <v-icon left>{{ recordInfo.icon }}</v-icon>
       <v-toolbar-title>
         <span
@@ -36,7 +48,10 @@
             </div>
           </v-col>
           <v-col v-for="props in records" :key="props.item.id" cols="12">
-            <v-card class="elevation-5" color="grey darken-3">
+            <v-card
+              class="elevation-5"
+              :color="$vuetify.theme.dark ? 'grey darken-3' : 'grey lighten-3'"
+            >
               <v-list-item>
                 <v-list-item-avatar>
                   <v-img

frontend/components/interface/crud/crudRecordInterface.vue

@@ -51,6 +51,40 @@
           </v-btn>
         </v-toolbar>
       </v-container>
+      <v-container
+        v-if="parentExpandTypes && parentExpandTypes.length > 1"
+        class="mx-0 text-center"
+        fluid
+      >
+        <v-row justify="center" no-gutters>
+          <v-col
+            v-for="expandTypeObject in parentExpandTypes"
+            :key="expandTypeObject.key"
+            cols="12"
+            sm="3"
+          >
+            <v-card
+              class="ma-2 text-center"
+              outlined
+              @click="handleParentExpandTypeUpdated(expandTypeObject)"
+            >
+              <v-img
+                height="75px"
+                :src="null"
+                :class="
+                  currentExpandTypeKey === expandTypeObject.key
+                    ? 'selected-element'
+                    : null
+                "
+              >
+                <v-layout column justify-center align-center fill-height>
+                  <v-card-title>{{ expandTypeObject.name }}</v-card-title>
+                </v-layout>
+              </v-img>
+            </v-card>
+          </v-col>
+        </v-row>
+      </v-container>
       <v-container
         v-if="breadcrumbMode && !hideBreadcrumbs && breadcrumbItems.length"
         fluid
@@ -103,7 +137,7 @@
           icon || recordInfo.icon || 'mdi-domain'
         }}</v-icon>
         <v-toolbar-title v-if="!recordInfo.paginationOptions.hideTitle">{{
-          title || recordInfo.title || recordInfo.pluralName
+          elementTitle || recordInfo.title || recordInfo.pluralName
         }}</v-toolbar-title>
         <v-divider
           v-if="recordInfo.addOptions && !recordInfo.addOptions.hidden"
@@ -448,7 +482,7 @@
                         bottom
                         offset-y
                         @handle-action-click="openEditDialog"
-                        @handle-expand-click="toggleGridExpand(item, ...$event)"
+                        @handle-expand-click="toggleGridExpand(item, $event)"
                         @handle-custom-action-click="handleCustomActionClick"
                       >
                         <template v-slot:activator="{ on, attrs }">
@@ -540,7 +574,7 @@
                     bottom
                     offset-y
                     @handle-action-click="openEditDialog"
-                    @handle-expand-click="toggleItemExpanded(props, ...$event)"
+                    @handle-expand-click="toggleItemExpanded(props, $event)"
                     @handle-custom-action-click="handleCustomActionClick"
                   >
                     <template v-slot:activator="{ on, attrs }">
@@ -595,7 +629,7 @@
                     left
                     offset-x
                     @handle-action-click="openEditDialog"
-                    @handle-expand-click="toggleItemExpanded(props, ...$event)"
+                    @handle-expand-click="toggleItemExpanded(props, $event)"
                     @handle-custom-action-click="handleCustomActionClick"
                   >
                     <template v-slot:activator="{ on, attrs }">
@@ -655,7 +689,7 @@
                 class="mb-2 expanded-table-bg"
                 :record-info="expandTypeObject.recordInfo"
                 :icon="expandTypeObject.icon"
-                :title="expandTypeObject.name"
+                :element-title="expandTypeObject.name"
                 :hidden-headers="expandTypeObject.excludeHeaders"
                 :locked-filters="lockedSubFilters"
                 :page-options="subPageOptions"
@@ -666,6 +700,9 @@
                 :breadcrumb-items="subBreadcrumbItems"
                 :results-per-page="expandTypeObject.resultsPerPage"
                 :hide-presets="!expandTypeObject.showPresets"
+                :parent-expand-types="recordInfo.expandTypes"
+                :current-expand-type-key="expandTypeObject.key"
+                @parent-expand-type-updated="toggleItemExpanded(props, $event)"
                 @pageOptions-updated="handleSubPageOptionsUpdated"
                 @reload-parent-item="handleReloadParentItem"
                 @expand-type-updated="handleExpandTypeUpdated"
@@ -702,7 +739,7 @@
           v-if="dialogs.expandRecord && expandTypeObject"
           :record-info="expandTypeObject.recordInfo"
           :icon="expandTypeObject.icon"
-          :title="expandTypeObject.name"
+          :element-title="expandTypeObject.name"
           :hidden-headers="expandTypeObject.excludeHeaders"
           :locked-filters="lockedSubFilters"
           :page-options="subPageOptions"

frontend/components/interface/crud/viewRecordInterface.vue

@@ -20,7 +20,7 @@
             <template v-slot:default>
               <tbody>
                 <tr v-for="(item, i) in visibleInputsArray" :key="i">
-                  <td v-if="renderVerticalView(item)" colspan="2" class="pb-3">
+                  <td v-if="item.verticalMode" colspan="2" class="pb-3">
                     <div class="pt-3 subtitle-2 text-decoration-underline">
                       {{ item.fieldInfo.text }}
                     </div>
@@ -38,10 +38,10 @@
                       getNestedProperty(currentItem, item.field)
                     }}</span>
                   </td>
-                  <td v-if="!renderVerticalView(item)" style="width: 150px">
+                  <td v-if="!item.verticalMode" style="width: 150px">
                     <span class="subtitle-2">{{ item.fieldInfo.text }}</span>
                   </td>
-                  <td v-if="!renderVerticalView(item)">
+                  <td v-if="!item.verticalMode">
                     <component
                       :is="item.fieldInfo.component"
                       v-if="item.fieldInfo.component"

frontend/components/page/crudRecordPage.vue

@@ -24,7 +24,9 @@
             :hidden-headers="
               expandTypeObject ? expandTypeObject.excludeHeaders : hiddenHeaders
             "
-            :title="expandTypeObject ? expandTypeObject.name : title"
+            :element-title="
+              expandTypeObject ? expandTypeObject.name : elementTitle
+            "
             :icon="expandTypeObject ? expandTypeObject.icon : icon"
             :poll-interval="pollInterval"
             :parent-item="currentParentItem"
@@ -77,7 +79,7 @@ export default {
   },
 
   props: {
-    title: {
+    elementTitle: {
       type: String,
       default: null,
     },
@@ -283,7 +285,7 @@ export default {
   head() {
     return {
       title:
-        this.title ??
+        this.elementTitle ??
         this.recordInfo.title ??
         'Manage ' + this.recordInfo.pluralName,
     }

frontend/components/page/viewRecordPage.vue

@@ -130,7 +130,7 @@
             <component
               :is="paginationComponent"
               :record-info="expandTypeObject.recordInfo"
-              :title="expandTypeObject.name"
+              :element-title="expandTypeObject.name"
               :icon="expandTypeObject.icon"
               :hidden-headers="expandTypeObject.excludeHeaders"
               :locked-filters="lockedSubFilters"
@@ -143,7 +143,10 @@
               :breadcrumb-items="breadcrumbItems"
               :is-child-component="isChildComponent"
               dense
+              :parent-expand-types="recordInfo.expandTypes"
+              :current-expand-type-key="expandTypeObject.key"
               @pageOptions-updated="handleSubPageOptionsUpdated"
+              @parent-expand-type-updated="handleExpandClick"
               @reload-parent-item="handleReloadParentItem()"
               @expand-type-updated="handleExpandTypeUpdated"
               @breadcrumb-item-click="handleBreadcrumbItemClick"

frontend/mixins/crud.js

@@ -42,7 +42,7 @@ export default {
 
   props: {
     // replacement title to override default one
-    title: {
+    elementTitle: {
       type: String,
     },
     // replacement icon
@@ -123,6 +123,20 @@ export default {
       type: Array,
       default: () => [],
     },
+
+    // all of the expandTypes from the parent, if any
+    parentExpandTypes: {
+      type: Array,
+    },
+
+    // current expand type key selected
+    currentExpandTypeKey: {
+      type: String,
+    },
+
+    hideParentExpandTypes: {
+      type: Boolean,
+    },
   },
 
   data() {
@@ -663,6 +677,10 @@ export default {
       this.expandTypeObject = expandTypeObject
     },
 
+    handleParentExpandTypeUpdated(expandTypeObject) {
+      this.$emit('parent-expand-type-updated', expandTypeObject)
+    },
+
     // toggle the expand state. if it is mobile view (or forceDialog), use dialog
     toggleItemExpanded(props, expandTypeObject) {
       // if this item is already expanded, close it