From 34dfae8face3d457fb111780fce3d2f39f49b412 Mon Sep 17 00:00:00 2001
From: James Chang <jc4095@nyu.edu>
Date: Sun, 7 Mar 2021 13:18:01 -0500
Subject: [PATCH] frontend updates, backend bug fixes

---
 .../src/schema/helpers/permissions.ts         |  21 +-
 frontend/components/input/genericInput.vue    | 492 ++++++++++++++++++
 .../interface/crud/deleteRecordInterface.vue  |   2 +-
 .../interface/crud/editRecordInterface.vue    | 168 +-----
 .../interface/crud/shareRecordInterface.vue   |   2 +-
 .../components/navigation/adminNavRoutes.vue  |  60 +++
 frontend/components/page/viewRecordPage.vue   |  14 +-
 .../table/common/createdByColumn.vue          |  25 -
 .../components/table/common/userColumn.vue    |  17 +-
 frontend/layouts/default.vue                  | 109 +---
 frontend/middleware/router-auth.js            |   6 +-
 frontend/mixins/crud.js                       |  26 +-
 frontend/mixins/editRecordInterface.js        |  64 +--
 frontend/models/personalBest.ts               |   6 +-
 frontend/models/special/index.ts              |   1 +
 frontend/models/special/myProfile.ts          |   8 +
 frontend/models/user.ts                       |   6 +-
 frontend/package-lock.json                    |  13 +
 frontend/package.json                         |   3 +-
 frontend/pages/admin/_type/index.vue          |  25 +
 frontend/pages/admin/events.vue               |  20 -
 frontend/pages/admin/personalBestClasses.vue  |  20 -
 frontend/pages/admin/personalBests.vue        |  20 -
 frontend/pages/admin/products.vue             |  20 -
 frontend/pages/admin/users.vue                |  20 -
 frontend/pages/my-profile.vue                 |  36 ++
 frontend/types/index.ts                       |  11 +-
 27 files changed, 734 insertions(+), 481 deletions(-)
 create mode 100644 frontend/components/input/genericInput.vue
 create mode 100644 frontend/components/navigation/adminNavRoutes.vue
 delete mode 100644 frontend/components/table/common/createdByColumn.vue
 create mode 100644 frontend/models/special/myProfile.ts
 create mode 100644 frontend/pages/admin/_type/index.vue
 delete mode 100644 frontend/pages/admin/events.vue
 delete mode 100644 frontend/pages/admin/personalBestClasses.vue
 delete mode 100644 frontend/pages/admin/personalBests.vue
 delete mode 100644 frontend/pages/admin/products.vue
 delete mode 100644 frontend/pages/admin/users.vue
 create mode 100644 frontend/pages/my-profile.vue

diff --git a/backend/functions/src/schema/helpers/permissions.ts b/backend/functions/src/schema/helpers/permissions.ts
index be71c3b..db23e2c 100644
--- a/backend/functions/src/schema/helpers/permissions.ts
+++ b/backend/functions/src/schema/helpers/permissions.ts
@@ -1,6 +1,5 @@
-import * as sqlHelper from "./sql";
 import { userRoleKenum, userPermissionEnum } from "../enums";
-import { BaseService } from "../core/services";
+import { BaseService, NormalService } from "../core/services";
 import * as errorHelper from "./error";
 import { ServiceFunctionInputs, AccessControlFunction } from "../../types";
 import { StringKeyObject } from "jomql";
@@ -11,24 +10,22 @@ export const userRoleToPermissionsMap = {
 };
 
 export function generateItemCreatedByUserGuard(
-  service: BaseService
+  service: NormalService
 ): AccessControlFunction {
-  return async function ({ req, args }) {
+  return async function ({ req, args, fieldPath }) {
     // args should be validated already
     const validatedArgs = <StringKeyObject>args;
     //check if logged in
     if (!req.user) return false;
 
     try {
-      const results = await sqlHelper.fetchTableRows({
-        select: [{ field: "created_by" }],
-        from: service.typename,
-        where: {
-          fields: [{ field: "id", value: validatedArgs.id }],
-        },
-      });
+      const itemRecord = await service.lookupRecord(
+        [{ field: "created_by" }],
+        validatedArgs.item ?? validatedArgs,
+        fieldPath
+      );
 
-      return results[0]?.created_by === req.user.id;
+      return itemRecord?.created_by === req.user.id;
     } catch (err) {
       return false;
     }
diff --git a/frontend/components/input/genericInput.vue b/frontend/components/input/genericInput.vue
new file mode 100644
index 0000000..fd7654e
--- /dev/null
+++ b/frontend/components/input/genericInput.vue
@@ -0,0 +1,492 @@
+<template>
+  <div>
+    <div v-if="item.fieldInfo.inputType === 'html'" class="pb-4">
+      <wysiwyg v-model="item.value" />
+    </div>
+    <div
+      v-else-if="item.fieldInfo.inputType === 'multiple-image'"
+      class="pb-4 text-center"
+    >
+      <v-container fluid grid-list-xs class="px-0">
+        <Draggable
+          v-model="item.value"
+          class="layout row wrap"
+          :disabled="mode === 'view'"
+        >
+          <v-flex
+            v-for="(imageUrl, imageIndex) in item.value"
+            :key="imageIndex"
+            :class="'xs3'"
+          >
+            <v-card flat>
+              <v-system-bar v-if="mode !== 'view'" lights-out>
+                <v-icon @click="void 0">mdi-arrow-all</v-icon>
+                <v-spacer></v-spacer>
+                <v-btn icon @click.native="removeFileByIndex(item, imageIndex)">
+                  <v-icon color="error">mdi-close</v-icon>
+                </v-btn>
+              </v-system-bar>
+              <v-img :src="imageUrl" aspect-ratio="1" contain></v-img>
+            </v-card>
+          </v-flex>
+        </Draggable>
+      </v-container>
+
+      <v-file-input
+        v-model="item.input"
+        :label="
+          (item.fieldInfo.text || item.field) +
+          (item.fieldInfo.optional ? ' (optional)' : '')
+        "
+        multiple
+        :clearable="false"
+        @change="handleMultipleFileInputChange(item)"
+      >
+        <template v-slot:selection="{ file, text }">
+          <v-chip
+            small
+            label
+            color="primary"
+            close
+            close-icon="mdi-close-outline"
+            @click:close="handleMultipleFileInputClear(item, file)"
+          >
+            {{ text }} -
+            {{
+              file.fileUploadObject
+                ? file.fileUploadObject.progress.toFixed(1)
+                : ''
+            }}%
+          </v-chip>
+        </template>
+      </v-file-input>
+    </div>
+
+    <div
+      v-else-if="item.fieldInfo.inputType === 'single-image'"
+      class="pb-4 text-center"
+    >
+      <v-img
+        v-if="item.value"
+        :src="item.value"
+        contain
+        max-height="200"
+      ></v-img>
+      <v-icon v-else>mdi-file-image</v-icon>
+      <v-file-input
+        v-if="!item.readonly && mode !== 'view'"
+        v-model="item.input"
+        :append-icon="item.value ? 'mdi-close' : null"
+        :clearable="false"
+        accept="image/*"
+        :label="
+          (item.fieldInfo.text || item.field) +
+          (item.fieldInfo.optional ? ' (optional)' : '')
+        "
+        :loading="item.loading"
+        @click:append="handleSingleFileInputClear(item)"
+        @change="handleSingleFileInputChange(item)"
+      >
+        <template v-slot:selection="{ file, text }">
+          <v-chip
+            small
+            label
+            color="primary"
+            close
+            close-icon="mdi-close-outline"
+            @click:close="handleSingleFileInputClear(item)"
+          >
+            {{ text }} -
+            {{
+              file.fileUploadObject
+                ? file.fileUploadObject.progress.toFixed(1)
+                : ''
+            }}%
+          </v-chip>
+        </template>
+      </v-file-input>
+    </div>
+    <div
+      v-else-if="item.fieldInfo.inputType === 'avatar'"
+      class="pb-4"
+      :class="
+        item.readonly || mode === 'view' ? 'text-center' : 'd-flex text-left'
+      "
+    >
+      <v-avatar size="64">
+        <v-img v-if="item.value" :src="item.value"></v-img>
+        <v-icon v-else>mdi-account</v-icon></v-avatar
+      >
+      <v-file-input
+        v-if="!item.readonly && mode !== 'view'"
+        v-model="item.input"
+        :append-icon="item.value ? 'mdi-close' : null"
+        :clearable="false"
+        class="pl-2"
+        accept="image/*"
+        :label="
+          (item.fieldInfo.text || item.field) +
+          (item.fieldInfo.optional ? ' (optional)' : '')
+        "
+        :loading="item.loading"
+        @click:append="handleSingleFileInputClear(item)"
+        @change="handleSingleFileInputChange(item)"
+      >
+        <template v-slot:selection="{ file, text }">
+          <v-chip
+            small
+            label
+            color="primary"
+            close
+            close-icon="mdi-close-outline"
+            @click:close="handleSingleFileInputClear(item)"
+          >
+            {{ text }} -
+            {{
+              file.fileUploadObject
+                ? file.fileUploadObject.progress.toFixed(1)
+                : ''
+            }}%
+          </v-chip>
+        </template>
+      </v-file-input>
+    </div>
+    <v-textarea
+      v-else-if="item.fieldInfo.inputType === 'textarea'"
+      v-model="item.value"
+      filled
+      dense
+      class="py-0"
+      :label="
+        (item.fieldInfo.text || item.field) +
+        (item.fieldInfo.optional ? ' (optional)' : '')
+      "
+      :readonly="item.readonly || mode === 'view'"
+    ></v-textarea>
+    <v-switch
+      v-else-if="item.fieldInfo.inputType === 'switch'"
+      v-model="item.value"
+      :label="
+        (item.fieldInfo.text || item.field) +
+        (item.fieldInfo.optional ? ' (optional)' : '')
+      "
+      :readonly="item.readonly || mode === 'view'"
+    ></v-switch>
+    <v-menu
+      v-else-if="item.fieldInfo.inputType === 'datepicker'"
+      v-model="item.focused"
+      :close-on-content-click="false"
+      :nudge-right="40"
+      transition="scale-transition"
+      offset-y
+      min-width="290px"
+    >
+      <template v-slot:activator="{ on, attrs }">
+        <v-text-field
+          v-model="item.value"
+          :label="
+            (item.fieldInfo.text || item.field) +
+            (item.fieldInfo.optional ? ' (optional)' : '')
+          "
+          :readonly="item.readonly || mode === 'view'"
+          :clearable="!item.readonly && mode !== 'view'"
+          filled
+          autocomplete="off"
+          v-bind="attrs"
+          v-on="on"
+        ></v-text-field>
+      </template>
+      <v-date-picker
+        v-model="item.value"
+        color="primary"
+        no-title
+        :readonly="item.readonly || mode === 'view'"
+        @input="item.focused = false"
+      ></v-date-picker>
+    </v-menu>
+    <v-combobox
+      v-else-if="item.fieldInfo.inputType === 'combobox'"
+      ref="combobox"
+      v-model="item.value"
+      :items="item.options"
+      item-text="name"
+      item-value="id"
+      :label="
+        (item.fieldInfo.text || item.field) +
+        (item.fieldInfo.optional ? ' (optional)' : '')
+      "
+      :readonly="item.readonly || mode === 'view'"
+      :clearable="!item.readonly && mode !== 'view'"
+      filled
+      class="py-0"
+    ></v-combobox>
+    <v-combobox
+      v-else-if="item.fieldInfo.inputType === 'server-combobox'"
+      ref="combobox"
+      v-model="item.value"
+      :loading="item.loading"
+      :search-input.sync="item.input"
+      :items="item.options"
+      item-text="name"
+      item-value="id"
+      :label="
+        (item.fieldInfo.text || item.field) +
+        (item.fieldInfo.optional ? ' (optional)' : '')
+      "
+      :readonly="item.readonly || mode === 'view'"
+      :clearable="!item.readonly && mode !== 'view'"
+      filled
+      hide-no-data
+      cache-items
+      class="py-0"
+      @update:search-input="handleSearchUpdate(item)"
+      @blur="item.focused = false"
+      @focus="item.focused = true"
+    ></v-combobox>
+    <v-autocomplete
+      v-else-if="item.fieldInfo.inputType === 'autocomplete'"
+      v-model="item.value"
+      :items="item.options"
+      item-text="name"
+      item-value="id"
+      :label="
+        (item.fieldInfo.text || item.field) +
+        (item.fieldInfo.optional ? ' (optional)' : '')
+      "
+      :readonly="item.readonly || mode === 'view'"
+      :clearable="!item.readonly && mode !== 'view'"
+      filled
+      class="py-0"
+    ></v-autocomplete>
+    <v-autocomplete
+      v-else-if="item.fieldInfo.inputType === 'server-autocomplete'"
+      v-model="item.value"
+      :loading="item.loading"
+      :search-input.sync="item.input"
+      :items="item.options"
+      item-text="name"
+      item-value="id"
+      :label="
+        (item.fieldInfo.text || item.field) +
+        (item.fieldInfo.optional ? ' (optional)' : '')
+      "
+      :readonly="item.readonly || mode === 'view'"
+      :clearable="!item.readonly && mode !== 'view'"
+      filled
+      hide-no-data
+      cache-items
+      class="py-0"
+      @update:search-input="handleSearchUpdate(item)"
+      @blur="item.focused = false"
+      @focus="item.focused = true"
+    ></v-autocomplete>
+    <v-select
+      v-else-if="item.fieldInfo.inputType === 'select'"
+      v-model="item.value"
+      :items="item.options"
+      filled
+      :label="
+        (item.fieldInfo.text || item.field) +
+        (item.fieldInfo.optional ? ' (optional)' : '')
+      "
+      :readonly="item.readonly || mode === 'view'"
+      :clearable="!item.readonly && mode !== 'view'"
+      item-text="name"
+      item-value="id"
+      class="py-0"
+    ></v-select>
+    <v-text-field
+      v-else
+      v-model="item.value"
+      :label="
+        (item.fieldInfo.text || item.field) +
+        (item.fieldInfo.optional ? ' (optional)' : '')
+      "
+      :readonly="item.readonly || mode === 'view'"
+      :rules="item.fieldInfo.inputRules"
+      filled
+      dense
+      class="py-0"
+    ></v-text-field>
+  </div>
+</template>
+
+<script>
+import Draggable from 'vuedraggable'
+// file upload not supported in this project
+// import { uploadFile } from '~/services/file'
+import { capitalizeString, isObject, handleError } from '~/services/common'
+import { executeJomql } from '~/services/jomql'
+
+export default {
+  components: {
+    Draggable,
+  },
+  props: {
+    item: {
+      type: Object,
+      required: true,
+    },
+
+    // must be add, edit, or view
+    mode: {
+      type: String,
+      required: true,
+      validator: (value) => {
+        return ['add', 'edit', 'view', 'delete', 'share'].includes(value)
+      },
+    },
+  },
+  methods: {
+    handleSearchUpdate(inputObject) {
+      if (!inputObject.input || !inputObject.focused) return
+
+      // if inputObject is object and search === value.name, skip
+      if (
+        isObject(inputObject.value) &&
+        inputObject.input === inputObject.value.name
+      ) {
+        return
+      }
+
+      // cancel pending call, if any
+      clearTimeout(this._timerId)
+
+      // delay new call 500ms
+      this._timerId = setTimeout(() => {
+        this.loadSearchResults(inputObject)
+      }, 500)
+    },
+
+    removeFileByIndex(inputObject, index) {
+      if (inputObject.value) {
+        inputObject.value.splice(index, 1)
+      }
+    },
+
+    handleFileRemove(inputObject, file) {
+      // cancel the uploadTask, if there is one
+      file.fileUploadObject?.uploadTask.cancel()
+
+      // remove the file from the inputObject files queue
+      const index = inputObject.files.indexOf(file)
+      if (index !== -1) inputObject.files.splice(index, 1)
+
+      // if no files left, set loading to false
+      if (inputObject.files.length < 1) inputObject.loading = false
+    },
+
+    handleMultipleFileInputClear(inputObject, file) {
+      const index = inputObject.input.indexOf(file)
+
+      if (index !== -1) {
+        inputObject.input[index].fileUploadObject?.uploadTask.cancel()
+        inputObject.input.splice(index, 1)
+      }
+
+      // if no files left, set loading to false
+      if (inputObject.input.length < 1) {
+        inputObject.loading = false
+      }
+    },
+
+    handleMultipleFileInputChange(inputObject) {
+      this.$set(inputObject, 'loading', true)
+
+      // inputObject.input expected to be array
+      inputObject.input.forEach((currentFile) => {
+        uploadFile(this, currentFile, (file) => {
+          // add finished URL to value
+          inputObject.value.push(file.fileUploadObject.servingUrl)
+
+          // remove file from input
+          const index = inputObject.input.indexOf(file)
+          if (index !== -1) inputObject.input.splice(index, 1)
+
+          // if no files left, finish up
+          if (inputObject.input.length < 1) {
+            inputObject.loading = false
+            this.$notifier.showSnackbar({
+              message: 'File Uploaded',
+              variant: 'success',
+            })
+          }
+        })
+      })
+    },
+
+    handleSingleFileInputClear(inputObject) {
+      inputObject.value = null
+      if (inputObject.filesQueue) {
+        inputObject.filesQueue.forEach((file) => {
+          file.fileUploadObject?.uploadTask.cancel()
+        })
+      }
+      inputObject.filesQueue = []
+      inputObject.input = null
+      inputObject.loading = false
+    },
+
+    handleSingleFileInputChange(inputObject) {
+      if (!inputObject.input) {
+        this.handleSingleFileInputClear(inputObject)
+        return
+      }
+      this.$set(inputObject, 'loading', true)
+
+      if (inputObject.filesQueue) {
+        // cancel any existing file uploads, clear out file queue
+        inputObject.filesQueue.forEach((file) => {
+          file.fileUploadObject?.uploadTask.cancel()
+        })
+      }
+
+      // reset the filesQueue
+      inputObject.filesQueue = [inputObject.input]
+
+      // upload the file(s) to CDN, then load them into value on finish
+      uploadFile(this, inputObject.input, (file) => {
+        inputObject.value = file.fileUploadObject.servingUrl
+        inputObject.loading = false
+
+        // remove from filesQueue
+        const index = inputObject.filesQueue.indexOf(file)
+        if (index !== -1) inputObject.filesQueue.splice(index, 1)
+
+        this.$notifier.showSnackbar({
+          message: 'File Uploaded',
+          variant: 'success',
+        })
+      })
+    },
+
+    async loadSearchResults(inputObject) {
+      inputObject.loading = true
+      try {
+        const results = await executeJomql(this, {
+          [`get${capitalizeString(inputObject.fieldInfo.typename)}Paginator`]: {
+            edges: {
+              node: {
+                id: true,
+                name: true,
+              },
+            },
+            __args: {
+              first: 20,
+              search: inputObject.input,
+              filterBy: inputObject.fieldInfo.lookupFilters
+                ? inputObject.fieldInfo.lookupFilters(this)
+                : [],
+            },
+          },
+        })
+
+        inputObject.options = results.edges.map((edge) => edge.node)
+      } catch (err) {
+        handleError(this, err)
+      }
+      inputObject.loading = false
+    },
+  },
+}
+</script>
diff --git a/frontend/components/interface/crud/deleteRecordInterface.vue b/frontend/components/interface/crud/deleteRecordInterface.vue
index e48e54f..042a6ac 100644
--- a/frontend/components/interface/crud/deleteRecordInterface.vue
+++ b/frontend/components/interface/crud/deleteRecordInterface.vue
@@ -47,7 +47,7 @@ export default {
     itemIdentifier() {
       return this.recordInfo.renderItem
         ? this.recordInfo.renderItem(this.selectedItem)
-        : this.selectedItem
+        : JSON.stringify(this.selectedItem, null, 2)
     },
 
     capitalizedTypename() {
diff --git a/frontend/components/interface/crud/editRecordInterface.vue b/frontend/components/interface/crud/editRecordInterface.vue
index 4a55f4f..7e140b9 100644
--- a/frontend/components/interface/crud/editRecordInterface.vue
+++ b/frontend/components/interface/crud/editRecordInterface.vue
@@ -19,173 +19,7 @@
             cols="12"
             class="py-0"
           >
-            <div
-              v-if="item.fieldInfo.inputType === 'avatar'"
-              class="text-center pb-3"
-            >
-              <v-avatar size="64">
-                <v-img :src="item.value" contain></v-img>
-              </v-avatar>
-            </div>
-            <v-textarea
-              v-else-if="item.fieldInfo.inputType === 'textarea'"
-              v-model="item.value"
-              filled
-              dense
-              class="py-0"
-              :label="
-                (item.fieldInfo.text || item.field) +
-                (item.fieldInfo.optional ? ' (optional)' : '')
-              "
-              :readonly="item.readonly || mode === 'view'"
-            ></v-textarea>
-            <v-switch
-              v-else-if="item.fieldInfo.inputType === 'switch'"
-              v-model="item.value"
-              :label="
-                (item.fieldInfo.text || item.field) +
-                (item.fieldInfo.optional ? ' (optional)' : '')
-              "
-              :readonly="item.readonly || mode === 'view'"
-            ></v-switch>
-            <v-menu
-              v-else-if="item.fieldInfo.inputType === 'datepicker'"
-              v-model="item.focused"
-              :close-on-content-click="false"
-              :nudge-right="40"
-              transition="scale-transition"
-              offset-y
-              min-width="290px"
-            >
-              <template v-slot:activator="{ on, attrs }">
-                <v-text-field
-                  v-model="item.value"
-                  :label="
-                    (item.fieldInfo.text || item.field) +
-                    (item.fieldInfo.optional ? ' (optional)' : '')
-                  "
-                  :readonly="item.readonly || mode === 'view'"
-                  :clearable="!item.readonly && mode !== 'view'"
-                  filled
-                  autocomplete="off"
-                  v-bind="attrs"
-                  v-on="on"
-                ></v-text-field>
-              </template>
-              <v-date-picker
-                v-model="item.value"
-                color="primary"
-                no-title
-                :readonly="item.readonly || mode === 'view'"
-                @input="item.focused = false"
-              ></v-date-picker>
-            </v-menu>
-            <v-combobox
-              v-else-if="item.fieldInfo.inputType === 'combobox'"
-              ref="combobox"
-              v-model="item.value"
-              :items="item.options"
-              item-text="name"
-              item-value="id"
-              :label="
-                (item.fieldInfo.text || item.field) +
-                (item.fieldInfo.optional ? ' (optional)' : '')
-              "
-              :readonly="item.readonly || mode === 'view'"
-              :clearable="!item.readonly && mode !== 'view'"
-              filled
-              class="py-0"
-            ></v-combobox>
-            <v-combobox
-              v-else-if="item.fieldInfo.inputType === 'server-combobox'"
-              ref="combobox"
-              v-model="item.value"
-              :loading="item.loading"
-              :search-input.sync="item.search"
-              :items="item.options"
-              item-text="name"
-              item-value="id"
-              :label="
-                (item.fieldInfo.text || item.field) +
-                (item.fieldInfo.optional ? ' (optional)' : '')
-              "
-              :readonly="item.readonly || mode === 'view'"
-              :clearable="!item.readonly && mode !== 'view'"
-              filled
-              hide-no-data
-              cache-items
-              class="py-0"
-              @update:search-input="handleSearchUpdate(item)"
-              @blur="item.focused = false"
-              @focus="item.focused = true"
-            ></v-combobox>
-            <v-autocomplete
-              v-else-if="item.fieldInfo.inputType === 'autocomplete'"
-              v-model="item.value"
-              :items="item.options"
-              item-text="name"
-              item-value="id"
-              :label="
-                (item.fieldInfo.text || item.field) +
-                (item.fieldInfo.optional ? ' (optional)' : '')
-              "
-              :readonly="item.readonly || mode === 'view'"
-              :clearable="!item.readonly && mode !== 'view'"
-              filled
-              return-object
-              class="py-0"
-            ></v-autocomplete>
-            <v-autocomplete
-              v-else-if="item.fieldInfo.inputType === 'server-autocomplete'"
-              v-model="item.value"
-              :loading="item.loading"
-              :search-input.sync="item.search"
-              :items="item.options"
-              item-text="name"
-              item-value="id"
-              :label="
-                (item.fieldInfo.text || item.field) +
-                (item.fieldInfo.optional ? ' (optional)' : '')
-              "
-              :readonly="item.readonly || mode === 'view'"
-              :clearable="!item.readonly && mode !== 'view'"
-              filled
-              hide-no-data
-              cache-items
-              return-object
-              class="py-0"
-              @update:search-input="handleSearchUpdate(item)"
-              @blur="item.focused = false"
-              @focus="item.focused = true"
-            ></v-autocomplete>
-            <v-select
-              v-else-if="item.fieldInfo.inputType === 'select'"
-              v-model="item.value"
-              :items="item.options"
-              filled
-              :label="
-                (item.fieldInfo.text || item.field) +
-                (item.fieldInfo.optional ? ' (optional)' : '')
-              "
-              :readonly="item.readonly || mode === 'view'"
-              :clearable="!item.readonly && mode !== 'view'"
-              item-text="name"
-              item-value="id"
-              class="py-0"
-            ></v-select>
-            <v-text-field
-              v-else
-              v-model="item.value"
-              :label="
-                (item.fieldInfo.text || item.field) +
-                (item.fieldInfo.optional ? ' (optional)' : '')
-              "
-              :readonly="item.readonly || mode === 'view'"
-              :rules="item.fieldInfo.inputRules"
-              filled
-              dense
-              class="py-0"
-            ></v-text-field>
+            <GenericInput :item="item" :mode="mode"></GenericInput>
           </v-col>
         </v-row>
       </v-container>
diff --git a/frontend/components/interface/crud/shareRecordInterface.vue b/frontend/components/interface/crud/shareRecordInterface.vue
index 9f3792c..9bbb17d 100644
--- a/frontend/components/interface/crud/shareRecordInterface.vue
+++ b/frontend/components/interface/crud/shareRecordInterface.vue
@@ -59,7 +59,7 @@ export default {
     itemIdentifier() {
       return this.recordInfo.renderItem
         ? this.recordInfo.renderItem(this.selectedItem)
-        : this.selectedItem
+        : JSON.stringify(this.selectedItem, null, 2)
     },
   },
 
diff --git a/frontend/components/navigation/adminNavRoutes.vue b/frontend/components/navigation/adminNavRoutes.vue
new file mode 100644
index 0000000..6e3024a
--- /dev/null
+++ b/frontend/components/navigation/adminNavRoutes.vue
@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <v-divider></v-divider>
+    <v-list dense>
+      <v-list-group
+        v-for="item in adminItems"
+        :key="item.title"
+        v-model="item.active"
+        :prepend-icon="item.action"
+        no-action
+      >
+        <template v-slot:activator>
+          <v-list-item-content>
+            <v-list-item-title v-text="item.title"></v-list-item-title>
+          </v-list-item-content>
+        </template>
+        <template v-for="child in item.items">
+          <v-list-item :key="child.title" :to="child.to">
+            <v-list-item-content>
+              <v-list-item-title v-text="child.title"></v-list-item-title>
+            </v-list-item-content>
+          </v-list-item>
+        </template>
+      </v-list-group>
+    </v-list>
+  </div>
+</template>
+
+<script>
+import { capitalizeString } from '~/services/common'
+import * as models from '~/models'
+
+export default {
+  computed: {
+    adminItems() {
+      return [
+        {
+          action: 'mdi-star',
+          active: false,
+          title: 'Administration',
+          permissions: [],
+          items: Object.values(models).map((recordInfo) => ({
+            title: capitalizeString(recordInfo.pluralTypename),
+            to: '/admin/' + recordInfo.typename,
+          })),
+        },
+      ]
+    },
+  },
+  methods: {
+    close() {
+      this.$emit('close')
+    },
+    handleSubmit(data) {
+      this.close()
+      this.$emit('handleSubmit', data)
+    },
+  },
+}
+</script>
diff --git a/frontend/components/page/viewRecordPage.vue b/frontend/components/page/viewRecordPage.vue
index 6684e10..8e3fbec 100644
--- a/frontend/components/page/viewRecordPage.vue
+++ b/frontend/components/page/viewRecordPage.vue
@@ -56,7 +56,10 @@
                     <v-icon>mdi-delete</v-icon>
                   </v-btn>
                   <v-menu
-                    v-if="recordInfo.expandTypes.length > 0"
+                    v-if="
+                      recordInfo.expandTypes &&
+                      recordInfo.expandTypes.length > 0
+                    "
                     right
                     offset-x
                   >
@@ -124,6 +127,7 @@
 
 <script>
 import EditRecordInterface from '~/components/interface/crud/editRecordInterface.vue'
+import EditRecordDialog from '~/components/dialog/editRecordDialog.vue'
 import { executeJomql } from '~/services/jomql'
 import { capitalizeString, isObject, handleError } from '~/services/common'
 import CrudRecordInterface from '~/components/interface/crud/crudRecordInterface.vue'
@@ -131,6 +135,7 @@ import CrudRecordInterface from '~/components/interface/crud/crudRecordInterface
 export default {
   components: {
     EditRecordInterface,
+    EditRecordDialog,
   },
 
   props: {
@@ -138,6 +143,10 @@ export default {
       type: Object,
       required: true,
     },
+    lookupParams: {
+      type: Object,
+      default: () => null,
+    },
     head: {
       type: Object,
       default: () => null,
@@ -207,6 +216,7 @@ export default {
   methods: {
     handleSubmit() {
       this.loadRecord()
+      this.$emit('handle-submit')
     },
 
     toggleExpand(expandTypeObject) {
@@ -235,7 +245,7 @@ export default {
         const data = await executeJomql(this, {
           ['get' + this.capitalizedTypename]: {
             id: true,
-            __args: {
+            __args: this.lookupParams ?? {
               id: this.$route.query.id,
             },
           },
diff --git a/frontend/components/table/common/createdByColumn.vue b/frontend/components/table/common/createdByColumn.vue
deleted file mode 100644
index b8f3838..0000000
--- a/frontend/components/table/common/createdByColumn.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-  <div v-if="item.created_by">
-    <v-avatar size="24" class="mr-1">
-      <v-img v-if="avatar" :src="avatar"></v-img>
-      <v-icon v-else>mdi-account</v-icon>
-    </v-avatar>
-    {{ currentValue }}
-  </div>
-</template>
-
-<script>
-import columnMixin from '~/mixins/column'
-import { getNestedProperty } from '~/services/common'
-
-export default {
-  mixins: [columnMixin],
-  computed: {
-    avatar() {
-      return getNestedProperty(this.item, 'created_by.avatar')
-    },
-  },
-
-  methods: {},
-}
-</script>
diff --git a/frontend/components/table/common/userColumn.vue b/frontend/components/table/common/userColumn.vue
index 6a9c48e..219220a 100644
--- a/frontend/components/table/common/userColumn.vue
+++ b/frontend/components/table/common/userColumn.vue
@@ -1,19 +1,30 @@
 <template>
-  <div v-if="currentValue">
+  <div v-if="currentItem">
     <v-avatar size="24" class="mr-1">
-      <v-img v-if="item.avatar" :src="item.avatar"></v-img>
+      <v-img v-if="currentItem.avatar" :src="currentItem.avatar"></v-img>
       <v-icon v-else>mdi-account</v-icon>
     </v-avatar>
-    {{ currentValue }}
+    {{ currentItem.name }}
   </div>
 </template>
 
 <script>
 import columnMixin from '~/mixins/column'
+import { getNestedProperty } from '~/services/common'
 
 export default {
   mixins: [columnMixin],
 
+  computed: {
+    // attempt to find the nested "user" using the headerInfo.field, assuming the fieldpath's path prefix is the path to the "user"
+    currentItem() {
+      const fieldpathParts = this.fieldpath.split(/\./)
+      return fieldpathParts.length > 1
+        ? getNestedProperty(this.item, fieldpathParts.slice(0, -1).join('.'))
+        : this.item
+    },
+  },
+
   methods: {},
 }
 </script>
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index e3f4c04..69be8d6 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -7,10 +7,6 @@
       fixed
       app
     >
-      <nuxt-link to="/">
-        <v-img :src="require('../static/cubepb-trimmed.png')" class="ma-2" />
-      </nuxt-link>
-      <v-divider></v-divider>
       <v-list dense>
         <v-list-item
           v-for="(item, i) in items"
@@ -60,58 +56,20 @@
             <v-list-item-title v-text="item.title" />
           </v-list-item-content>
         </v-list-item>
-        <v-list-item
-          v-if="user"
-          key="-1"
-          :to="currentUserProfileRoute"
-          router
-          exact
-        >
-          <v-list-item-action>
-            <v-icon>mdi-card-account-details</v-icon>
-          </v-list-item-action>
-          <v-list-item-content>
-            <v-list-item-title>My Profile</v-list-item-title>
-          </v-list-item-content>
-        </v-list-item>
       </v-list>
       <v-divider></v-divider>
-      <v-list v-if="isAdmin" dense>
-        <v-list-group
-          v-for="item in adminItems"
-          :key="item.title"
-          v-model="item.active"
-          :prepend-icon="item.action"
-          no-action
-        >
-          <template v-slot:activator>
-            <v-list-item-content>
-              <v-list-item-title v-text="item.title"></v-list-item-title>
-            </v-list-item-content>
-          </template>
-          <template v-for="child in item.items">
-            <v-list-item
-              v-if="canSee(child.roles, child.permissions)"
-              :key="child.title"
-              :to="child.to"
-            >
-              <v-list-item-content>
-                <v-list-item-title v-text="child.title"></v-list-item-title>
-              </v-list-item-content>
-            </v-list-item>
-          </template>
-        </v-list-group>
-      </v-list>
+      <AdminNavRoutes v-if="isAdmin"></AdminNavRoutes>
     </v-navigation-drawer>
     <v-app-bar :clipped-left="clipped" fixed app>
       <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
-      <v-img
-        v-if="!drawer"
-        :src="require('../static/cubepb-trimmed.png')"
-        max-height="48"
-        max-width="130"
-        contain
-      />
+      <nuxt-link to="/">
+        <v-img
+          :src="require('../static/cubepb-trimmed.png')"
+          max-height="48"
+          max-width="130"
+          contain
+        />
+      </nuxt-link>
       <v-spacer />
       <template v-if="user">
         <v-menu :close-on-content-click="true" :max-width="300" offset-y bottom>
@@ -145,11 +103,6 @@
             <v-divider></v-divider>
 
             <v-list dense>
-              <v-list-item :key="-1" :to="currentUserProfileRoute" exact nuxt>
-                <v-list-item-content>
-                  <v-list-item-title>My Profile</v-list-item-title>
-                </v-list-item-content>
-              </v-list-item>
               <v-list-item
                 v-for="(item, i) in accountItems"
                 :key="i"
@@ -216,21 +169,17 @@
 import { mapGetters } from 'vuex'
 import Snackbar from '~/components/snackbar/snackbar'
 import { goToWcaAuth, handleLogout } from '~/services/auth'
-import {
-  copyToClipboard,
-  openLink,
-  capitalizeString,
-  handleError,
-} from '~/services/common'
-import * as models from '~/models'
+import { copyToClipboard, openLink, handleError } from '~/services/common'
+import AdminNavRoutes from '~/components/navigation/adminNavRoutes.vue'
 
 export default {
   components: {
     Snackbar,
+    AdminNavRoutes,
   },
   data() {
     return {
-      clipped: false,
+      clipped: true,
       drawer: true,
       fixed: true,
       items: [
@@ -246,6 +195,11 @@ export default {
           title: 'My PBs',
           to: '/my-pbs',
         },
+        {
+          icon: 'mdi-card-account-details',
+          title: 'My Profile',
+          to: '/my-profile',
+        },
       ],
       navItems: [
         {
@@ -261,7 +215,10 @@ export default {
           loginRequired: false,
         },
       ],
-      accountItems: [{ title: 'Settings', to: '/settings', exact: false }],
+      accountItems: [
+        { title: 'My Profile', to: '/my-profile', exact: false },
+        { title: 'Settings', to: '/settings', exact: false },
+      ],
       miniVariant: false,
     }
   },
@@ -276,31 +233,9 @@ export default {
         (item) => this.$store.getters['auth/user'] || !item.loginRequired
       )
     },
-
-    currentUserProfileRoute() {
-      return this.$store.getters['auth/user']
-        ? '/user?id=' + this.$store.getters['auth/user'].id
-        : null
-    },
     isAdmin() {
       return this.$store.getters['auth/user']?.role === 'ADMIN'
     },
-    adminItems() {
-      return [
-        {
-          action: 'mdi-star',
-          active: false,
-          title: 'Administration',
-          permissions: [],
-          items: Object.values(models).map((recordInfo) => ({
-            title: capitalizeString(recordInfo.pluralTypename),
-            to: '/admin/' + recordInfo.pluralTypename,
-            roles: ['ADMIN'],
-            permissions: [],
-          })),
-        },
-      ]
-    },
   },
 
   methods: {
diff --git a/frontend/middleware/router-auth.js b/frontend/middleware/router-auth.js
index 277d701..5f81066 100644
--- a/frontend/middleware/router-auth.js
+++ b/frontend/middleware/router-auth.js
@@ -1,9 +1,5 @@
 export default function ({ store, redirect, route }) {
-  if (
-    route.name === 'login' ||
-    route.name === 'register' ||
-    route.name === 'password-reset'
-  ) {
+  if (route.name === 'login' || route.name === 'register') {
     if (store.getters['auth/user']) {
       redirect('/')
     }
diff --git a/frontend/mixins/crud.js b/frontend/mixins/crud.js
index 617dab6..563f09b 100644
--- a/frontend/mixins/crud.js
+++ b/frontend/mixins/crud.js
@@ -1,6 +1,7 @@
 import { executeJomql, executeJomqlSubscription } from '~/services/jomql'
 import { unsubscribeChannels } from '~/services/pusher'
 import CrudRecordInterface from '~/components/interface/crud/crudRecordInterface.vue'
+import EditRecordDialog from '~/components/dialog/editRecordDialog.vue'
 import {
   collapseObject,
   getNestedProperty,
@@ -13,7 +14,9 @@ import {
 } from '~/services/common'
 
 export default {
-  components: {},
+  components: {
+    EditRecordDialog,
+  },
 
   props: {
     // replacement title to override default one
@@ -178,7 +181,9 @@ export default {
             text: fieldInfo.text ?? headerInfo.field,
             align: headerInfo.align ?? 'left',
             sortable: headerInfo.sortable,
-            value: fieldInfo.mainField ?? headerInfo.field,
+            value: headerInfo.field.match(/\+/)
+              ? headerInfo.field.split(/\+/)[0]
+              : headerInfo.field,
             width: headerInfo.width ?? null,
             fieldInfo,
             // headerInfo,
@@ -486,21 +491,18 @@ export default {
                   if (!fieldInfo)
                     throw new Error('Unknown field: ' + headerInfo.field)
 
-                  total[fieldInfo.mainField ?? headerInfo.field] = true
-                  serializeMap.set(
-                    fieldInfo.mainField ?? headerInfo.field,
-                    fieldInfo.serialize
-                  )
-
-                  // if fieldInfo.requiredFields, those fields must also be requested
-                  if (fieldInfo.requiredFields) {
-                    fieldInfo.requiredFields.forEach((field) => {
+                  // if field has '+', add all of the fields
+                  if (headerInfo.field.match(/\+/)) {
+                    headerInfo.field.split(/\+/).forEach((field) => {
                       total[field] = true
-                      // assuming the field is valid
+                      // assuming all fields are valid
                       serializeMap[field] = this.recordInfo.fields[
                         field
                       ].serialize
                     })
+                  } else {
+                    total[headerInfo.field] = true
+                    serializeMap.set(headerInfo.field, fieldInfo.serialize)
                   }
                   return total
                 },
diff --git a/frontend/mixins/editRecordInterface.js b/frontend/mixins/editRecordInterface.js
index dbc7c2d..59404f0 100644
--- a/frontend/mixins/editRecordInterface.js
+++ b/frontend/mixins/editRecordInterface.js
@@ -3,11 +3,14 @@ import {
   collapseObject,
   getNestedProperty,
   capitalizeString,
-  isObject,
   handleError,
 } from '~/services/common'
+import GenericInput from '~/components/input/genericInput.vue'
 
 export default {
+  components: {
+    GenericInput,
+  },
   props: {
     selectedItem: {
       type: Object,
@@ -97,60 +100,23 @@ export default {
       return inputObject.value
     },
 
-    handleSearchUpdate(inputObject) {
-      if (!inputObject.search || !inputObject.focused) return
-
-      // if inputObject is object and search === value.name, skip
+    handleSubmit() {
+      // if any comboboxes are focused, do nothing
       if (
-        isObject(inputObject.value) &&
-        inputObject.search === inputObject.value.name
+        Array.isArray(this.$refs.combobox) &&
+        this.$refs.combobox.some((ele) => ele.isFocused)
       ) {
         return
       }
 
-      // cancel pending call, if any
-      clearTimeout(this._timerId)
-
-      // delay new call 500ms
-      this._timerId = setTimeout(() => {
-        this.loadSearchResults(inputObject)
-      }, 500)
-    },
-
-    async loadSearchResults(inputObject) {
-      inputObject.loading = true
-      try {
-        const results = await executeJomql(this, {
-          [`get${capitalizeString(inputObject.fieldInfo.typename)}Paginator`]: {
-            edges: {
-              node: {
-                id: true,
-                name: true,
-              },
-            },
-            __args: {
-              first: 20,
-              search: inputObject.search,
-              filterBy: inputObject.fieldInfo.lookupFilters
-                ? inputObject.fieldInfo.lookupFilters(this)
-                : [],
-            },
-          },
-        })
-
-        inputObject.options = results.edges.map((edge) => edge.node)
-      } catch (err) {
-        handleError(this, err)
-      }
-      inputObject.loading = false
-    },
-
-    handleSubmit() {
-      // if any comboboxes are focused, do nothing
+      // if any inputs are loading, hold
       if (
-        Array.isArray(this.$refs.combobox) &&
-        this.$refs.combobox.some((ele) => ele.isFocused)
+        this.inputsArray.some((inputObject) => inputObject.loading === true)
       ) {
+        this.$notifier.showSnackbar({
+          message: 'Some inputs are not finished loading',
+          variant: 'error',
+        })
         return
       }
       this.submit()
@@ -382,7 +348,7 @@ export default {
             options: [],
             readonly,
             loading: false,
-            search: null,
+            input: null,
             focused: false,
           }
 
diff --git a/frontend/models/personalBest.ts b/frontend/models/personalBest.ts
index d29ec2f..c16999c 100644
--- a/frontend/models/personalBest.ts
+++ b/frontend/models/personalBest.ts
@@ -5,7 +5,7 @@ import {
 } from '../services/dropdown'
 import type { RecordInfo } from '~/types'
 import TimeagoColumn from '~/components/table/common/timeagoColumn.vue'
-import CreatedByColumn from '~/components/table/common/createdByColumn.vue'
+import UserColumn from '~/components/table/common/userColumn.vue'
 import { serializeTime } from '~/services/common'
 
 export const PersonalBest = <RecordInfo<'personalBest'>>{
@@ -22,9 +22,7 @@ export const PersonalBest = <RecordInfo<'personalBest'>>{
     },
     'created_by.name+created_by.avatar': {
       text: 'Created By',
-      mainField: 'created_by.name',
-      requiredFields: ['created_by.avatar'],
-      component: CreatedByColumn,
+      component: UserColumn,
     },
     'pb_class.id': {
       text: 'PB Type',
diff --git a/frontend/models/special/index.ts b/frontend/models/special/index.ts
index 3a16997..693f7b5 100644
--- a/frontend/models/special/index.ts
+++ b/frontend/models/special/index.ts
@@ -1,3 +1,4 @@
 export { MyPbs } from './myPbs'
 export { PbPublic } from './pbPublic'
 export { UserPublic } from './userPublic'
+export { MyProfile } from './myProfile'
diff --git a/frontend/models/special/myProfile.ts b/frontend/models/special/myProfile.ts
new file mode 100644
index 0000000..53f8526
--- /dev/null
+++ b/frontend/models/special/myProfile.ts
@@ -0,0 +1,8 @@
+import { UserPublic } from '.'
+
+export const MyProfile = {
+  ...UserPublic,
+  editOptions: {
+    fields: ['is_public'],
+  },
+}
diff --git a/frontend/models/user.ts b/frontend/models/user.ts
index 7ac0fc0..2d920f3 100644
--- a/frontend/models/user.ts
+++ b/frontend/models/user.ts
@@ -20,8 +20,6 @@ export const User = <RecordInfo<'user'>>{
     },
     'name+avatar': {
       text: 'Name',
-      mainField: 'name',
-      requiredFields: ['avatar'],
       component: UserColumn,
     },
     email: {
@@ -134,9 +132,7 @@ export const User = <RecordInfo<'user'>>{
     ],
   },
   deleteOptions: {},
-  shareOptions: {
-    route: '/user',
-  },
+  shareOptions: {},
   enterOptions: {},
 
   expandTypes: [
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 3eead83..88cb54b 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -10658,6 +10658,11 @@
         "is-plain-obj": "^1.0.0"
       }
     },
+    "sortablejs": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.2.tgz",
+      "integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A=="
+    },
     "source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -11978,6 +11983,14 @@
       "resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw=="
     },
+    "vuedraggable": {
+      "version": "2.24.3",
+      "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.24.3.tgz",
+      "integrity": "sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==",
+      "requires": {
+        "sortablejs": "1.10.2"
+      }
+    },
     "vuetify": {
       "version": "2.4.4",
       "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.4.4.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 1a07a42..d09d468 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -18,7 +18,8 @@
     "js-cookie": "^2.2.1",
     "nuxt": "^2.14.6",
     "pusher-js": "^7.0.1",
-    "timeago.js": "^4.0.2"
+    "timeago.js": "^4.0.2",
+    "vuedraggable": "^2.24.3"
   },
   "devDependencies": {
     "@nuxt/types": "^2.14.6",
diff --git a/frontend/pages/admin/_type/index.vue b/frontend/pages/admin/_type/index.vue
new file mode 100644
index 0000000..300ae5e
--- /dev/null
+++ b/frontend/pages/admin/_type/index.vue
@@ -0,0 +1,25 @@
+<template>
+  <CrudRecordPage
+    v-if="currentModel"
+    :record-info="currentModel"
+  ></CrudRecordPage>
+</template>
+
+<script>
+import CrudRecordPage from '~/components/page/crudRecordPage.vue'
+import * as models from '~/models'
+import { capitalizeString } from '~/services/common'
+
+export default {
+  // middleware: ['router-auth'],
+  components: {
+    CrudRecordPage,
+  },
+
+  computed: {
+    currentModel() {
+      return models[capitalizeString(this.$route.params.type)]
+    },
+  },
+}
+</script>
diff --git a/frontend/pages/admin/events.vue b/frontend/pages/admin/events.vue
deleted file mode 100644
index da3cde1..0000000
--- a/frontend/pages/admin/events.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<template>
-  <CrudRecordPage :record-info="recordInfo"></CrudRecordPage>
-</template>
-
-<script>
-import CrudRecordPage from '~/components/page/crudRecordPage.vue'
-import { Event } from '~/models'
-
-export default {
-  components: {
-    CrudRecordPage,
-  },
-
-  data() {
-    return {
-      recordInfo: Event,
-    }
-  },
-}
-</script>
diff --git a/frontend/pages/admin/personalBestClasses.vue b/frontend/pages/admin/personalBestClasses.vue
deleted file mode 100644
index 453ddf1..0000000
--- a/frontend/pages/admin/personalBestClasses.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<template>
-  <CrudRecordPage :record-info="recordInfo"></CrudRecordPage>
-</template>
-
-<script>
-import CrudRecordPage from '~/components/page/crudRecordPage.vue'
-import { PersonalBestClass } from '~/models'
-
-export default {
-  components: {
-    CrudRecordPage,
-  },
-
-  data() {
-    return {
-      recordInfo: PersonalBestClass,
-    }
-  },
-}
-</script>
diff --git a/frontend/pages/admin/personalBests.vue b/frontend/pages/admin/personalBests.vue
deleted file mode 100644
index 2c9cf9c..0000000
--- a/frontend/pages/admin/personalBests.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<template>
-  <CrudRecordPage :record-info="recordInfo"></CrudRecordPage>
-</template>
-
-<script>
-import CrudRecordPage from '~/components/page/crudRecordPage.vue'
-import { PersonalBest } from '~/models'
-
-export default {
-  components: {
-    CrudRecordPage,
-  },
-
-  data() {
-    return {
-      recordInfo: PersonalBest,
-    }
-  },
-}
-</script>
diff --git a/frontend/pages/admin/products.vue b/frontend/pages/admin/products.vue
deleted file mode 100644
index 62337e6..0000000
--- a/frontend/pages/admin/products.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<template>
-  <CrudRecordPage :record-info="recordInfo"></CrudRecordPage>
-</template>
-
-<script>
-import CrudRecordPage from '~/components/page/crudRecordPage.vue'
-import { Product } from '~/models'
-
-export default {
-  components: {
-    CrudRecordPage,
-  },
-
-  data() {
-    return {
-      recordInfo: Product,
-    }
-  },
-}
-</script>
diff --git a/frontend/pages/admin/users.vue b/frontend/pages/admin/users.vue
deleted file mode 100644
index aebc3ee..0000000
--- a/frontend/pages/admin/users.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<template>
-  <CrudRecordPage :record-info="recordInfo"></CrudRecordPage>
-</template>
-
-<script>
-import CrudRecordPage from '~/components/page/crudRecordPage.vue'
-import { User } from '~/models'
-
-export default {
-  components: {
-    CrudRecordPage,
-  },
-
-  data() {
-    return {
-      recordInfo: User,
-    }
-  },
-}
-</script>
diff --git a/frontend/pages/my-profile.vue b/frontend/pages/my-profile.vue
new file mode 100644
index 0000000..b519dad
--- /dev/null
+++ b/frontend/pages/my-profile.vue
@@ -0,0 +1,36 @@
+<template>
+  <ViewRecordPage
+    v-if="lookupParams"
+    :record-info="recordInfo"
+    :head="head"
+    :lookup-params="lookupParams"
+  ></ViewRecordPage>
+</template>
+
+<script>
+import ViewRecordPage from '~/components/page/viewRecordPage.vue'
+import { MyProfile } from '~/models/special'
+
+export default {
+  components: {
+    ViewRecordPage,
+  },
+  data() {
+    return {
+      recordInfo: MyProfile,
+      head: {
+        title: 'My Profile',
+      },
+    }
+  },
+  computed: {
+    lookupParams() {
+      return this.$store.getters['auth/user']
+        ? {
+            id: this.$store.getters['auth/user'].id,
+          }
+        : null
+    },
+  },
+}
+</script>
diff --git a/frontend/types/index.ts b/frontend/types/index.ts
index 10b6e7b..c906ea1 100644
--- a/frontend/types/index.ts
+++ b/frontend/types/index.ts
@@ -17,13 +17,10 @@ export type RecordInfo<T extends keyof MainTypes> = {
     [K in keyof MainTypes[T]['Type']]?: {
       text?: string
       icon?: string
-
-      // if this field is a virtual field, must specify the mainField
-      mainField?: string
-      // if any additional fields, other than the main field, are required
-      requiredFields?: string[]
-
       inputType?:
+        | 'html'
+        | 'single-image'
+        | 'multiple-image'
         | 'avatar'
         | 'datepicker'
         | 'switch'
@@ -50,7 +47,7 @@ export type RecordInfo<T extends keyof MainTypes> = {
       parseValue?: (val: unknown) => unknown
       // for crudRecordPage. parsing the query params
       parseQueryValue?: (val: string) => unknown
-      component?: any // component for rendering the field in table, if not using renderFn
+      component?: any // component for rendering the field in table
     }
   }