Minor frontend updates

backend/firebase.json.example

@@ -35,7 +35,7 @@
       "rewrites": [
         {
           "source": "**",
-          "function": "serveImage"
+          "function": "serveimage"
         }
       ]
     }

backend/functions/package.json

@@ -10,7 +10,7 @@
     "generate:model": "set DEV=1 && ts-node src/scripts/generateModel.ts",
     "grantDBPermissions": "set DEV=1 && ts-node src/scripts/grantSchemaPermissions.ts",
     "executeAdminScript": "set DEV=1 && ts-node src/scripts/executeAdminScript.ts",
-    "grantAdmin": "set DEV=1 && ts-node src/scripts/grantAdmin.ts",
+    "grantAdmin": "ts-node src/scripts/grantAdmin.ts",
     "shell": "npm run build && firebase functions:shell",
     "start": "npm run shell",
     "deploy": "firebase deploy --only functions",

backend/functions/src/scripts/grantAdmin.ts

@@ -1,8 +1,8 @@
 import * as knexBuilder from "knex";
 import { configDotenv } from "dotenv";
 configDotenv();
-import { pgOptions } from "../config";
 import yargs from "yargs";
+import { userRole } from "../schema/enums";
 
 const argv = yargs(process.argv.slice(2))
   .options({
@@ -11,11 +11,16 @@ const argv = yargs(process.argv.slice(2))
   })
   .parseSync();
 
+// set the DEV state based on the args provided
+process.env.DEV = argv.prod ? undefined : "1";
+
+import { pgOptions } from "../config";
+
 export const knex = knexBuilder({
   ...pgOptions,
 });
 
-// grant the admin role to the usuer with that email
+// grant the admin role to the user with that email
 (async () => {
   const [user] = await knex("user").select(["id", "role"]).where({
     email: argv.email,
@@ -25,13 +30,17 @@ export const knex = knexBuilder({
 
   await knex("user")
     .update({
-      role: 3, // ADMIN enum index
+      role: userRole.ADMIN.parsed, // ADMIN enum index
     })
     .where({
       id: user.id,
     });
 
-  console.log(`Done granting ADMIN role to '${argv.email}'`);
+  console.log(
+    `Done granting ADMIN role to '${argv.email}' on ${
+      argv.prod ? "prod" : "dev"
+    }`
+  );
 
   // done, clean up by destroying the connection pool.
   await knex.destroy();

frontend/components/interface/crud/crudRecordInterface.vue

@@ -323,14 +323,17 @@
           </template>
           <template v-slot:default="props">
             <v-container fluid>
-              <v-row>
+              <v-row
+                :justify="
+                  recordInfo.paginationOptions.gridOptions &&
+                  recordInfo.paginationOptions.gridOptions.justify
+                "
+              >
                 <v-col
                   v-for="item in props.items"
                   :key="item.id"
+                  v-bind="gridColsObject"
                   cols="12"
-                  sm="6"
-                  md="4"
-                  lg="3"
                 >
                   <v-card
                     class="noselect elevation-6"
@@ -406,24 +409,35 @@
                     </div>
                   </v-card>
                 </v-col>
-                <v-col v-if="!recordInfo.paginationOptions.hideCount" cols="12">
-                  <div class="text-center">
-                    <v-divider></v-divider>
-                    <v-btn
-                      v-if="records.length < totalRecords"
-                      text
-                      block
-                      :loading="loading.loadMore"
-                      @click="loadMore()"
-                      >View More</v-btn
-                    >
-                    <span v-if="isDataLoading">...</span>
-                    <span v-else-if="!totalRecords">---</span>
-                    <span v-else class="noselect">
-                      (Showing {{ records.length }} of {{ totalRecords }}
-                      {{ recordInfo.pluralName }})
-                    </span>
-                  </div>
+                <v-col
+                  v-if="
+                    !recordInfo.paginationOptions.hideViewMore &&
+                    records.length < totalRecords
+                  "
+                  cols="12"
+                  class="text-center pa-0"
+                >
+                  <v-divider></v-divider>
+                  <v-btn
+                    text
+                    block
+                    :loading="loading.loadMore"
+                    @click="loadMore()"
+                    >View More</v-btn
+                  >
+                </v-col>
+                <v-col
+                  v-if="!recordInfo.paginationOptions.hideCount"
+                  cols="12"
+                  class="text-center pa-0"
+                >
+                  <v-divider></v-divider>
+                  <span v-if="isDataLoading">...</span>
+                  <span v-else-if="!totalRecords">---</span>
+                  <span v-else class="noselect">
+                    (Showing {{ records.length }} of {{ totalRecords }}
+                    {{ recordInfo.pluralName }})
+                  </span>
                 </v-col>
               </v-row>
             </v-container>
@@ -558,18 +572,22 @@
           </template>
           <template v-slot:footer>
             <div
-              v-if="!recordInfo.paginationOptions.hideCount"
+              v-if="
+                !recordInfo.paginationOptions.hideViewMore &&
+                records.length < totalRecords
+              "
               class="text-center"
             >
               <v-divider></v-divider>
-              <v-btn
-                v-if="records.length < totalRecords"
-                text
-                block
-                :loading="loading.loadMore"
-                @click="loadMore()"
+              <v-btn text block :loading="loading.loadMore" @click="loadMore()"
                 >View More</v-btn
               >
+            </div>
+            <div
+              v-if="!recordInfo.paginationOptions.hideCount"
+              class="text-center"
+            >
+              <v-divider></v-divider>
               <span v-if="isDataLoading">...</span>
               <span v-else-if="!totalRecords">---</span>
               <span v-else class="noselect">

frontend/components/navigation/userMenu.vue

@@ -59,15 +59,21 @@
           v-for="(item, i) in accountItems"
           :key="i"
           :to="item.to"
-          exact
+          exact-path
           nuxt
         >
+          <v-list-item-action>
+            <v-icon>{{ item.icon }}</v-icon>
+          </v-list-item-action>
           <v-list-item-content>
             <v-list-item-title>{{ item.title }}</v-list-item-title>
           </v-list-item-content>
         </v-list-item>
         <v-divider></v-divider>
         <v-list-item @click="logout()">
+          <v-list-item-action>
+            <v-icon>mdi-logout</v-icon>
+          </v-list-item-action>
           <v-list-item-content>
             <v-list-item-title>Logout</v-list-item-title>
           </v-list-item-content>
@@ -117,6 +123,7 @@
 import { mapGetters } from 'vuex'
 import { auth } from '~/services/fireinit'
 import { handleError } from '~/services/base'
+import { generateUserMenuItems } from '~/services/navigation'
 import PreviewRecordChip from '~/components/chip/previewRecordChip.vue'
 import SelectOptionDialog from '~/components/dialog/selectOptionDialog.vue'
 
@@ -127,11 +134,6 @@ export default {
   },
   data() {
     return {
-      accountItems: [
-        { title: 'My Profile', to: '/my-profile', exact: false },
-        { title: 'Settings', to: '/settings', exact: false },
-      ],
-
       dialogs: {
         selectOption: null,
       },
@@ -143,6 +145,10 @@ export default {
       user: 'auth/user',
       firebaseUser: 'auth/firebaseUser',
     }),
+
+    accountItems() {
+      return generateUserMenuItems(this)
+    },
   },
 
   methods: {

frontend/mixins/crud.js

@@ -410,6 +410,16 @@ export default {
     isXsViewport() {
       return this.$vuetify.breakpoint.name === 'xs'
     },
+
+    gridColsObject() {
+      return (
+        this.recordInfo.paginationOptions.gridOptions?.colsObject ?? {
+          sm: 6,
+          md: 4,
+          lg: 3,
+        }
+      )
+    },
   },
 
   watch: {
@@ -1178,6 +1188,8 @@ export default {
         this.isChanged = true
       }
 
+      let pageOptionsUpdated = false
+
       if (initFilters) {
         // initialize filter inputs
         this.filterInputsArray = await Promise.all(
@@ -1255,6 +1267,8 @@ export default {
             'pageOptions-updated',
             this.recordInfo.paginationOptions.defaultPageOptions(this)
           )
+
+          pageOptionsUpdated = true
         }
 
         this.syncPageOptions(false)
@@ -1273,9 +1287,12 @@ export default {
         }
       }
 
-      this.reloadGeneration++
+      // if the pageOptions have been updated, don't load the data, as the pageOptions-updated event will trigger the update after this (with the updated page options)
+      if (!pageOptionsUpdated) {
+        this.reloadGeneration++
 
-      this.loadInitialData(showLoader, this.reloadGeneration)
+        this.loadInitialData(showLoader, this.reloadGeneration)
+      }
     },
   },
 }

frontend/pages/index.vue

@@ -1,7 +1,9 @@
 <template>
-  <v-layout column justify-center align-center>
-    <CircularLoader v-if="redirectPath"></CircularLoader>
-    <v-container v-else xs12 style="max-width: 600px">
+  <v-layout v-if="redirectPath" column justify-center align-center>
+    <CircularLoader></CircularLoader>
+  </v-layout>
+  <div v-else>
+    <v-container style="max-width: 600px">
       <div class="text-center">
         <img :src="logoImageSrc" alt="" style="width: 60%" />
       </div>
@@ -35,27 +37,56 @@
           >
         </v-card-actions>
       </v-card>
-      <ReleaseHistory class="mt-3" />
     </v-container>
-  </v-layout>
+    <v-container style="max-width: 600px">
+      <ReleaseHistory />
+    </v-container>
+    <v-container fluid style="max-width: 600px">
+      <v-layout column justify-left align-left>
+        <v-row>
+          <v-col cols="12">
+            <CrudRecordInterface
+              :record-info="homeModels.user.recordInfo"
+              :page-options="homeModels.user.pageOptions"
+              hide-presets
+              dense
+              @pageOptions-updated="homeModels.user.pageOptions = $event"
+            >
+            </CrudRecordInterface>
+          </v-col>
+        </v-row>
+      </v-layout>
+    </v-container>
+  </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
 import CircularLoader from '~/components/common/circularLoader.vue'
-import ReleaseHistory from '~/components/common/releaseHistory.vue'
+import CrudRecordInterface from '~/components/interface/crud/crudRecordInterface.vue'
+import { generateHomePageRecordInfo } from '~/services/recordInfo'
+import * as publicModels from '~/models/public'
 import {
   siteName,
   siteDescription,
   siteContactEmail,
   siteDiscordLink,
   logoHasLightVariant,
 } from '~/services/config'
+import ReleaseHistory from '~/components/common/releaseHistory.vue'
+
+function generateHomeModelObject(recordInfo) {
+  return {
+    recordInfo,
+    pageOptions: undefined,
+  }
+}
 
 export default {
   components: {
-    ReleaseHistory,
     CircularLoader,
+    CrudRecordInterface,
+    ReleaseHistory,
   },
   data() {
     return {
@@ -64,6 +95,16 @@ export default {
       siteContactEmail,
       siteDiscordLink,
       redirectPath: null,
+      homeModels: {
+        user: generateHomeModelObject(
+          generateHomePageRecordInfo({
+            recordInfo: publicModels.PublicUser,
+            title: 'Latest Users',
+            columnMode: true,
+            limit: 2,
+          })
+        ),
+      },
     }
   },
   head() {
@@ -86,7 +127,6 @@ export default {
     ...mapGetters({
       user: 'auth/user',
     }),
-
     logoImageSrc() {
       return logoHasLightVariant
         ? require(`~/static/logo-vertical${

frontend/pages/settings.vue

@@ -3,7 +3,8 @@
     <v-container xs12 style="max-width: 600px">
       <v-col>
         <v-card class="elevation-12">
-          <v-toolbar color="accent" flat>
+          <v-toolbar color="accent" flat dense>
+            <v-icon left>mdi-account-key</v-icon>
             <v-toolbar-title>Login Credentials</v-toolbar-title>
             <v-spacer></v-spacer>
           </v-toolbar>

frontend/services/navigation.ts

@@ -60,3 +60,10 @@ export function generateNavDrawerItems(that) {
       : null,
   ].filter((e) => e)
 }
+
+export function generateUserMenuItems(that) {
+  return [
+    { icon: 'mdi-account', title: 'My Profile', to: '/my-profile' },
+    { icon: 'mdi-cog', title: 'Settings', to: '/settings' },
+  ]
+}