From 966c9bf0e45f4ce7b03a85a5921e240ad412f964 Mon Sep 17 00:00:00 2001
From: James Chang <jc4095@nyu.edu>
Date: Tue, 13 Apr 2021 12:10:32 -0400
Subject: [PATCH] Add ability to copy/duplicate existing records

---
 .../components/dialog/editRecordDialog.vue    | 100 ++-------
 .../help/viewPbCardInterface/helpButton.vue   |   7 +-
 frontend/components/input/genericInput.vue    |  19 +-
 .../interface/crud/crudRecordInterface.vue    | 159 ++------------
 .../interface/crud/editRecordInterface.vue    |   2 +-
 .../special/crudPersonalBestInterface.vue     | 201 +++---------------
 .../special/editPersonalBestInterface.vue     |   2 +-
 .../crud/special/viewUserInterface.vue        |   2 +-
 .../interface/crud/viewRecordInterface.vue    |   2 +-
 frontend/components/menu/recordActionMenu.vue | 148 +++++++++++++
 frontend/components/page/viewRecordPage.vue   |  75 ++-----
 frontend/mixins/crud.js                       |   2 +
 frontend/mixins/editRecordInterface.js        |  36 +++-
 frontend/models/personalBest.ts               |   4 +
 frontend/types/index.ts                       |   7 +
 15 files changed, 289 insertions(+), 477 deletions(-)
 create mode 100644 frontend/components/menu/recordActionMenu.vue

diff --git a/frontend/components/dialog/editRecordDialog.vue b/frontend/components/dialog/editRecordDialog.vue
index 85b9cc2..960ecb1 100644
--- a/frontend/components/dialog/editRecordDialog.vue
+++ b/frontend/components/dialog/editRecordDialog.vue
@@ -21,82 +21,15 @@
             <span class="headline">{{ title }}</span>
           </v-toolbar-title>
           <v-spacer></v-spacer>
-          <v-menu v-if="computedMode !== 'add'" left offset-x>
-            <template v-slot:activator="{ on, attrs }">
-              <v-icon v-bind="attrs" v-on="on">mdi-dots-vertical</v-icon>
-            </template>
-
-            <v-list dense>
-              <v-list-item
-                v-if="recordInfo.enterOptions"
-                key="enter"
-                @click="goToPage(true)"
-              >
-                <v-list-item-icon>
-                  <v-icon>mdi-open-in-new</v-icon>
-                </v-list-item-icon>
-                <v-list-item-title
-                  >Go To Page
-                  <v-icon small right>mdi-open-in-new</v-icon>
-                </v-list-item-title>
-              </v-list-item>
-              <v-list-item
-                v-if="recordInfo.shareOptions"
-                key="view"
-                @click="openEditDialog('view')"
-              >
-                <v-list-item-icon>
-                  <v-icon>mdi-eye</v-icon>
-                </v-list-item-icon>
-                <v-list-item-title>View</v-list-item-title>
-              </v-list-item>
-              <v-list-item
-                v-if="recordInfo.shareOptions"
-                key="share"
-                @click="openEditDialog('share')"
-              >
-                <v-list-item-icon>
-                  <v-icon>mdi-share-variant</v-icon>
-                </v-list-item-icon>
-                <v-list-item-title>Share</v-list-item-title>
-              </v-list-item>
-              <v-list-item
-                v-if="recordInfo.editOptions"
-                key="edit"
-                @click="openEditDialog('edit')"
-              >
-                <v-list-item-icon>
-                  <v-icon>mdi-pencil</v-icon>
-                </v-list-item-icon>
-                <v-list-item-title>Edit</v-list-item-title>
-              </v-list-item>
-              <v-list-item
-                v-if="recordInfo.deleteOptions"
-                key="delete"
-                @click="openEditDialog('delete')"
-              >
-                <v-list-item-icon>
-                  <v-icon>mdi-delete</v-icon>
-                </v-list-item-icon>
-                <v-list-item-title>Delete</v-list-item-title>
-              </v-list-item>
-              <v-divider v-if="recordInfo.expandTypes.length > 0"></v-divider>
-              <v-list-item
-                v-for="(item, i) in recordInfo.expandTypes"
-                :key="i"
-                dense
-                @click="goToPage(true, i)"
-              >
-                <v-list-item-icon>
-                  <v-icon>{{ item.icon || item.recordInfo.icon }}</v-icon>
-                </v-list-item-icon>
-                <v-list-item-title
-                  >{{ item.name || item.recordInfo.name }}
-                  <v-icon small right>mdi-open-in-new</v-icon>
-                </v-list-item-title>
-              </v-list-item>
-            </v-list>
-          </v-menu>
+          <RecordActionMenu
+            v-if="computedMode !== 'add'"
+            :record-info="recordInfo"
+            :item="selectedItem"
+            expand-mode="openInNew"
+            left
+            offset-x
+            @handle-action-click="openEditDialog"
+          ></RecordActionMenu>
           <v-btn icon @click="close()">
             <v-icon>mdi-close</v-icon>
           </v-btn>
@@ -114,6 +47,8 @@ import EditRecordInterface from '~/components/interface/crud/editRecordInterface
 import ViewRecordInterface from '~/components/interface/crud/viewRecordInterface.vue'
 import DeleteRecordInterface from '~/components/interface/crud/deleteRecordInterface.vue'
 import ShareRecordInterface from '~/components/interface/crud/shareRecordInterface.vue'
+import RecordActionMenu from '~/components/menu/recordActionMenu.vue'
+
 import { goToPage } from '~/services/base'
 
 const modesMap = {
@@ -122,6 +57,11 @@ const modesMap = {
     prefix: 'New',
     defaultInterface: EditRecordInterface,
   },
+  copy: {
+    icon: 'mdi-content-copy',
+    prefix: 'Copy',
+    defaultInterface: EditRecordInterface,
+  },
   edit: {
     icon: 'mdi-pencil',
     prefix: 'Edit',
@@ -145,6 +85,10 @@ const modesMap = {
 }
 
 export default {
+  components: {
+    RecordActionMenu,
+  },
+
   props: {
     status: {
       type: Boolean,
@@ -165,7 +109,9 @@ export default {
       type: String,
       required: true,
       validator: (value) => {
-        return ['add', 'edit', 'view', 'delete', 'share'].includes(value)
+        return ['add', 'edit', 'view', 'delete', 'copy', 'share'].includes(
+          value
+        )
       },
     },
 
diff --git a/frontend/components/help/viewPbCardInterface/helpButton.vue b/frontend/components/help/viewPbCardInterface/helpButton.vue
index 3e1861a..1dcd544 100644
--- a/frontend/components/help/viewPbCardInterface/helpButton.vue
+++ b/frontend/components/help/viewPbCardInterface/helpButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-dialog v-model="dialog" width="500">
+  <v-dialog v-model="dialog" width="500" scrollable>
     <template v-slot:activator="{ on, attrs }">
       <v-btn icon v-bind="attrs" v-on="on">
         <v-icon>mdi-help</v-icon>
@@ -8,7 +8,7 @@
     <v-card>
       <v-card-title class="headline"> How to Use This Page </v-card-title>
 
-      <v-card-text>
+      <v-card-text style="max-height: 600px">
         This page shows all of the events alongside several commonly-used PB
         types, like Single, Ao5, Ao12, etc.
         <br /><br />
@@ -23,10 +23,9 @@
         If you notice an error with one of the PBs that you have entered (for
         example, a typo), you can remove that PB by clicking the
         <v-icon small color="pink">mdi-close</v-icon> button.
+        <v-divider></v-divider>
       </v-card-text>
 
-      <v-divider></v-divider>
-
       <v-card-actions>
         <v-spacer></v-spacer>
         <v-btn color="primary" text @click="dialog = false">Close</v-btn>
diff --git a/frontend/components/input/genericInput.vue b/frontend/components/input/genericInput.vue
index 749de67..1fb0243 100644
--- a/frontend/components/input/genericInput.vue
+++ b/frontend/components/input/genericInput.vue
@@ -11,7 +11,7 @@
         <Draggable
           v-model="item.value"
           class="layout row wrap"
-          :disabled="mode === 'view'"
+          :disabled="item.readonly"
         >
           <v-flex
             v-for="(imageUrl, imageIndex) in item.value"
@@ -19,7 +19,7 @@
             :class="'xs3'"
           >
             <v-card flat>
-              <v-system-bar v-if="mode !== 'view'" lights-out>
+              <v-system-bar v-if="!item.readonly" lights-out>
                 <v-icon @click="void 0">mdi-arrow-all</v-icon>
                 <v-spacer></v-spacer>
                 <v-btn icon @click.native="removeFileByIndex(item, imageIndex)">
@@ -76,7 +76,7 @@
       ></v-img>
       <v-icon v-else>mdi-file-image</v-icon>
       <v-file-input
-        v-if="!item.readonly && mode !== 'view'"
+        v-if="!item.readonly"
         v-model="item.input"
         :append-icon="item.value ? 'mdi-close' : null"
         :clearable="false"
@@ -120,7 +120,7 @@
         <v-icon v-else>mdi-account</v-icon></v-avatar
       >
       <v-file-input
-        v-if="!item.readonly && mode !== 'view'"
+        v-if="!item.readonly"
         v-model="item.input"
         :append-icon="item.value ? 'mdi-close' : null"
         :clearable="false"
@@ -451,20 +451,11 @@ export default {
       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)
-      },
-    },
   },
 
   computed: {
     isReadonly() {
-      return this.item.readonly || this.mode === 'view'
+      return this.item.readonly
     },
   },
   methods: {
diff --git a/frontend/components/interface/crud/crudRecordInterface.vue b/frontend/components/interface/crud/crudRecordInterface.vue
index 9a14a84..c844233 100644
--- a/frontend/components/interface/crud/crudRecordInterface.vue
+++ b/frontend/components/interface/crud/crudRecordInterface.vue
@@ -46,7 +46,6 @@
             inset
             vertical
           ></v-divider>
-
           <SearchDialog
             v-if="recordInfo.paginationOptions.hasSearch"
             v-model="searchInput"
@@ -239,78 +238,19 @@
               class="text-center"
               style="width: 100%"
             >
-              <v-menu bottom offset-y>
+              <RecordActionMenu
+                :record-info="recordInfo"
+                :item="props.item"
+                expand-mode="emit"
+                bottom
+                offset-y
+                @handle-action-click="openEditDialog"
+                @handle-expand-click="openExpandDialog(props, ...$event)"
+              >
                 <template v-slot:activator="{ on, attrs }">
                   <v-btn block text v-bind="attrs" v-on="on"> Actions </v-btn>
                 </template>
-
-                <v-list dense class="expanded-table-bg">
-                  <v-list-item
-                    v-if="recordInfo.enterOptions"
-                    key="enter"
-                    @click="goToPage(props.item)"
-                  >
-                    <v-list-item-icon>
-                      <v-icon>mdi-location-enter</v-icon>
-                    </v-list-item-icon>
-                    <v-list-item-title>Go To Page</v-list-item-title>
-                  </v-list-item>
-                  <v-list-item
-                    v-if="recordInfo.shareOptions"
-                    key="share"
-                    @click="openEditDialog('share', props.item)"
-                  >
-                    <v-list-item-icon>
-                      <v-icon>mdi-share-variant</v-icon>
-                    </v-list-item-icon>
-                    <v-list-item-title>Share</v-list-item-title>
-                  </v-list-item>
-                  <v-list-item
-                    v-if="recordInfo.viewOptions"
-                    key="view"
-                    @click="openEditDialog('view', props.item)"
-                  >
-                    <v-list-item-icon>
-                      <v-icon>mdi-eye</v-icon>
-                    </v-list-item-icon>
-                    <v-list-item-title>View</v-list-item-title>
-                  </v-list-item>
-                  <v-list-item
-                    v-if="recordInfo.editOptions"
-                    key="edit"
-                    @click="openEditDialog('edit', props.item)"
-                  >
-                    <v-list-item-icon>
-                      <v-icon>mdi-pencil</v-icon>
-                    </v-list-item-icon>
-                    <v-list-item-title>Edit</v-list-item-title>
-                  </v-list-item>
-                  <v-list-item
-                    v-if="recordInfo.deleteOptions"
-                    key="delete"
-                    @click="openEditDialog('delete', props.item)"
-                  >
-                    <v-list-item-icon>
-                      <v-icon>mdi-delete</v-icon>
-                    </v-list-item-icon>
-                    <v-list-item-title>Delete</v-list-item-title>
-                  </v-list-item>
-                  <v-divider v-if="hasNested"></v-divider>
-                  <v-list-item
-                    v-for="(item, i) in recordInfo.expandTypes"
-                    :key="i"
-                    dense
-                    @click="openExpandDialog(props, item)"
-                  >
-                    <v-list-item-icon>
-                      <v-icon>{{ item.icon || item.recordInfo.icon }}</v-icon>
-                    </v-list-item-icon>
-                    <v-list-item-title>{{
-                      item.name || item.recordInfo.name
-                    }}</v-list-item-title>
-                  </v-list-item>
-                </v-list>
-              </v-menu>
+              </RecordActionMenu>
             </div>
             <template v-else>
               <div class="v-data-table__mobile-row__header">
@@ -345,80 +285,21 @@
             class="truncate"
           >
             <div v-if="headerItem.value === null">
-              <v-menu left offset-x>
+              <RecordActionMenu
+                :record-info="recordInfo"
+                :item="props.item"
+                expand-mode="emit"
+                left
+                offset-x
+                @handle-action-click="openEditDialog"
+                @handle-expand-click="toggleItemExpanded(props, ...$event)"
+              >
                 <template v-slot:activator="{ on, attrs }">
                   <v-icon small v-bind="attrs" v-on="on"
                     >mdi-dots-vertical</v-icon
                   >
                 </template>
-
-                <v-list dense>
-                  <v-list-item
-                    v-if="recordInfo.enterOptions"
-                    key="enter"
-                    @click="goToPage(props.item)"
-                  >
-                    <v-list-item-icon>
-                      <v-icon>mdi-location-enter</v-icon>
-                    </v-list-item-icon>
-                    <v-list-item-title>Go To Page</v-list-item-title>
-                  </v-list-item>
-                  <v-list-item
-                    v-if="recordInfo.shareOptions"
-                    key="share"
-                    @click="openEditDialog('share', props.item)"
-                  >
-                    <v-list-item-icon>
-                      <v-icon>mdi-share-variant</v-icon>
-                    </v-list-item-icon>
-                    <v-list-item-title>Share</v-list-item-title>
-                  </v-list-item>
-                  <v-list-item
-                    v-if="recordInfo.viewOptions"
-                    key="view"
-                    @click="openEditDialog('view', props.item)"
-                  >
-                    <v-list-item-icon>
-                      <v-icon>mdi-eye</v-icon>
-                    </v-list-item-icon>
-                    <v-list-item-title>View</v-list-item-title>
-                  </v-list-item>
-                  <v-list-item
-                    v-if="recordInfo.editOptions"
-                    key="edit"
-                    @click="openEditDialog('edit', props.item)"
-                  >
-                    <v-list-item-icon>
-                      <v-icon>mdi-pencil</v-icon>
-                    </v-list-item-icon>
-                    <v-list-item-title>Edit</v-list-item-title>
-                  </v-list-item>
-                  <v-list-item
-                    v-if="recordInfo.deleteOptions"
-                    key="delete"
-                    @click="openEditDialog('delete', props.item)"
-                  >
-                    <v-list-item-icon>
-                      <v-icon>mdi-delete</v-icon>
-                    </v-list-item-icon>
-                    <v-list-item-title>Delete</v-list-item-title>
-                  </v-list-item>
-                  <v-divider v-if="hasNested"></v-divider>
-                  <v-list-item
-                    v-for="(item, i) in recordInfo.expandTypes"
-                    :key="i"
-                    dense
-                    @click="toggleItemExpanded(props, item)"
-                  >
-                    <v-list-item-icon>
-                      <v-icon>{{ item.icon || item.recordInfo.icon }}</v-icon>
-                    </v-list-item-icon>
-                    <v-list-item-title>{{
-                      item.name || item.recordInfo.name
-                    }}</v-list-item-title>
-                  </v-list-item>
-                </v-list>
-              </v-menu>
+              </RecordActionMenu>
             </div>
             <span v-else>
               <component
diff --git a/frontend/components/interface/crud/editRecordInterface.vue b/frontend/components/interface/crud/editRecordInterface.vue
index 7e140b9..329fd5b 100644
--- a/frontend/components/interface/crud/editRecordInterface.vue
+++ b/frontend/components/interface/crud/editRecordInterface.vue
@@ -19,7 +19,7 @@
             cols="12"
             class="py-0"
           >
-            <GenericInput :item="item" :mode="mode"></GenericInput>
+            <GenericInput :item="item"></GenericInput>
           </v-col>
         </v-row>
       </v-container>
diff --git a/frontend/components/interface/crud/special/crudPersonalBestInterface.vue b/frontend/components/interface/crud/special/crudPersonalBestInterface.vue
index 0fe9a0a..c115e14 100644
--- a/frontend/components/interface/crud/special/crudPersonalBestInterface.vue
+++ b/frontend/components/interface/crud/special/crudPersonalBestInterface.vue
@@ -48,8 +48,15 @@
           ></v-divider>
           <SearchDialog
             v-if="recordInfo.paginationOptions.hasSearch"
+            v-model="searchInput"
             @handleSubmit="handleSearchDialogSubmit"
-          ></SearchDialog>
+          >
+            <template slot="icon">
+              <v-badge :value="!!search" dot color="secondary">
+                <v-icon>mdi-magnify</v-icon>
+              </v-badge>
+            </template>
+          </SearchDialog>
           <v-spacer></v-spacer>
           <v-btn
             v-if="hasFilters"
@@ -231,117 +238,26 @@
               class="text-center"
               style="width: 100%"
             >
-              <v-menu bottom offset-y>
+              <RecordActionMenu
+                :record-info="recordInfo"
+                :item="props.item"
+                expand-mode="emit"
+                bottom
+                offset-y
+                @handle-action-click="openEditDialog"
+                @handle-expand-click="openExpandDialog(props, ...$event)"
+              >
                 <template v-slot:activator="{ on, attrs }">
                   <v-btn block text v-bind="attrs" v-on="on"> Actions </v-btn>
                 </template>
-
-                <v-list dense class="expanded-table-bg">
-                  <v-list-item
-                    v-if="recordInfo.enterOptions"
-                    key="enter"
-                    @click="goToPage(props.item)"
-                  >
-                    <v-list-item-icon>
-                      <v-icon>mdi-location-enter</v-icon>
-                    </v-list-item-icon>
-                    <v-list-item-title>Go To Page</v-list-item-title>
-                  </v-list-item>
-                  <v-list-item
-                    v-if="recordInfo.shareOptions"
-                    key="share"
-                    @click="openEditDialog('share', props.item)"
-                  >
-                    <v-list-item-icon>
-                      <v-icon>mdi-share-variant</v-icon>
-                    </v-list-item-icon>
-                    <v-list-item-title>Share</v-list-item-title>
-                  </v-list-item>
-                  <v-list-item
-                    v-if="recordInfo.viewOptions"
-                    key="view"
-                    @click="openEditDialog('view', props.item)"
-                  >
-                    <v-list-item-icon>
-                      <v-icon>mdi-eye</v-icon>
-                    </v-list-item-icon>
-                    <v-list-item-title>View</v-list-item-title>
-                  </v-list-item>
-                  <v-list-item
-                    v-if="recordInfo.editOptions"
-                    key="edit"
-                    @click="openEditDialog('edit', props.item)"
-                  >
-                    <v-list-item-icon>
-                      <v-icon>mdi-pencil</v-icon>
-                    </v-list-item-icon>
-                    <v-list-item-title>Edit</v-list-item-title>
-                  </v-list-item>
-                  <v-list-item
-                    v-if="recordInfo.deleteOptions"
-                    key="delete"
-                    @click="openEditDialog('delete', props.item)"
-                  >
-                    <v-list-item-icon>
-                      <v-icon>mdi-delete</v-icon>
-                    </v-list-item-icon>
-                    <v-list-item-title>Delete</v-list-item-title>
-                  </v-list-item>
-                  <v-divider v-if="hasNested"></v-divider>
-                  <v-list-item
-                    v-for="(item, i) in recordInfo.expandTypes"
-                    :key="i"
-                    dense
-                    @click="openExpandDialog(props, item)"
-                  >
-                    <v-list-item-icon>
-                      <v-icon>{{ item.icon || item.recordInfo.icon }}</v-icon>
-                    </v-list-item-icon>
-                    <v-list-item-title>{{
-                      item.name || item.recordInfo.name
-                    }}</v-list-item-title>
-                  </v-list-item>
-                </v-list>
-              </v-menu>
+              </RecordActionMenu>
             </div>
             <template v-else>
               <div class="v-data-table__mobile-row__header">
                 {{ headerItem.text }}
               </div>
               <div class="v-data-table__mobile-row__cell truncate-mobile-row">
-                <div v-if="headerItem.value === null">
-                  <nuxt-link
-                    v-if="recordInfo.enterOptions && recordInfo.viewRecordRoute"
-                    :to="recordInfo.viewRecordRoute + '?id=' + props.item.id"
-                  >
-                    <v-icon small icon>mdi-location-enter</v-icon>
-                  </nuxt-link>
-                  <v-icon
-                    v-if="recordInfo.shareOptions"
-                    class="mr-2"
-                    @click.stop="openEditDialog('share', props.item)"
-                    >mdi-share-variant</v-icon
-                  >
-                  <v-icon
-                    v-if="recordInfo.viewOptions"
-                    class="mr-2"
-                    @click.stop="openEditDialog('view', props.item)"
-                    >mdi-eye</v-icon
-                  >
-                  <v-icon
-                    v-if="recordInfo.editOptions"
-                    class="mr-2"
-                    @click.stop="openEditDialog('edit', props.item)"
-                    >mdi-pencil</v-icon
-                  >
-                  <v-icon
-                    v-if="recordInfo.deleteOptions"
-                    class="mr-2"
-                    @click.stop="openEditDialog('delete', props.item)"
-                    >mdi-delete</v-icon
-                  >
-                </div>
-                <div v-else-if="headerItem.value === 'rank'">
+                <div v-if="headerItem.value === 'rank'">
                   {{ renderRank(props.index) }}
                 </div>
                 <div v-else>
@@ -374,80 +290,21 @@
             class="truncate"
           >
             <div v-if="headerItem.value === null">
-              <v-menu left offset-x>
+              <RecordActionMenu
+                :record-info="recordInfo"
+                :item="props.item"
+                left
+                offset-x
+                expand-mode="emit"
+                @handle-action-click="openEditDialog"
+                @handle-expand-click="toggleItemExpanded(props, ...$event)"
+              >
                 <template v-slot:activator="{ on, attrs }">
                   <v-icon small v-bind="attrs" v-on="on"
                     >mdi-dots-vertical</v-icon
                   >
                 </template>
-
-                <v-list dense>
-                  <v-list-item
-                    v-if="recordInfo.enterOptions"
-                    key="enter"
-                    @click="goToPage(props.item)"
-                  >
-                    <v-list-item-icon>
-                      <v-icon>mdi-location-enter</v-icon>
-                    </v-list-item-icon>
-                    <v-list-item-title>Go To Page</v-list-item-title>
-                  </v-list-item>
-                  <v-list-item
-                    v-if="recordInfo.shareOptions"
-                    key="share"
-                    @click="openEditDialog('share', props.item)"
-                  >
-                    <v-list-item-icon>
-                      <v-icon>mdi-share-variant</v-icon>
-                    </v-list-item-icon>
-                    <v-list-item-title>Share</v-list-item-title>
-                  </v-list-item>
-                  <v-list-item
-                    v-if="recordInfo.viewOptions"
-                    key="view"
-                    @click="openEditDialog('view', props.item)"
-                  >
-                    <v-list-item-icon>
-                      <v-icon>mdi-eye</v-icon>
-                    </v-list-item-icon>
-                    <v-list-item-title>View</v-list-item-title>
-                  </v-list-item>
-                  <v-list-item
-                    v-if="recordInfo.editOptions"
-                    key="edit"
-                    @click="openEditDialog('edit', props.item)"
-                  >
-                    <v-list-item-icon>
-                      <v-icon>mdi-pencil</v-icon>
-                    </v-list-item-icon>
-                    <v-list-item-title>Edit</v-list-item-title>
-                  </v-list-item>
-                  <v-list-item
-                    v-if="recordInfo.deleteOptions"
-                    key="delete"
-                    @click="openEditDialog('delete', props.item)"
-                  >
-                    <v-list-item-icon>
-                      <v-icon>mdi-delete</v-icon>
-                    </v-list-item-icon>
-                    <v-list-item-title>Delete</v-list-item-title>
-                  </v-list-item>
-                  <v-divider v-if="hasNested"></v-divider>
-                  <v-list-item
-                    v-for="(item, i) in recordInfo.expandTypes"
-                    :key="i"
-                    dense
-                    @click="toggleItemExpanded(props, item)"
-                  >
-                    <v-list-item-icon>
-                      <v-icon>{{ item.icon || item.recordInfo.icon }}</v-icon>
-                    </v-list-item-icon>
-                    <v-list-item-title>{{
-                      item.name || item.recordInfo.name
-                    }}</v-list-item-title>
-                  </v-list-item>
-                </v-list>
-              </v-menu>
+              </RecordActionMenu>
             </div>
             <span v-else-if="headerItem.value === 'rank'">
               {{ renderRank(props.index) }}
diff --git a/frontend/components/interface/crud/special/editPersonalBestInterface.vue b/frontend/components/interface/crud/special/editPersonalBestInterface.vue
index 0fbdc83..ff2ce05 100644
--- a/frontend/components/interface/crud/special/editPersonalBestInterface.vue
+++ b/frontend/components/interface/crud/special/editPersonalBestInterface.vue
@@ -44,7 +44,7 @@
               @click:append="item.value = null"
             ></v-text-field>
 
-            <GenericInput v-else :item="item" :mode="mode"></GenericInput>
+            <GenericInput v-else :item="item"></GenericInput>
           </v-col>
         </v-row>
       </v-container>
diff --git a/frontend/components/interface/crud/special/viewUserInterface.vue b/frontend/components/interface/crud/special/viewUserInterface.vue
index 848bcfe..915df60 100644
--- a/frontend/components/interface/crud/special/viewUserInterface.vue
+++ b/frontend/components/interface/crud/special/viewUserInterface.vue
@@ -27,7 +27,7 @@
                 >{{ item.value ? 'Following' : 'Follow' }}</v-btn
               >
             </div>
-            <GenericInput v-else :item="item" :mode="mode"></GenericInput>
+            <GenericInput v-else :item="item"></GenericInput>
           </v-col>
         </v-row>
       </v-container>
diff --git a/frontend/components/interface/crud/viewRecordInterface.vue b/frontend/components/interface/crud/viewRecordInterface.vue
index fe05565..0bc5493 100644
--- a/frontend/components/interface/crud/viewRecordInterface.vue
+++ b/frontend/components/interface/crud/viewRecordInterface.vue
@@ -33,7 +33,7 @@
               ></component>
             </div>
 
-            <GenericInput v-else :item="item" :mode="mode"></GenericInput>
+            <GenericInput v-else :item="item"></GenericInput>
           </v-col>
         </v-row>
       </v-container>
diff --git a/frontend/components/menu/recordActionMenu.vue b/frontend/components/menu/recordActionMenu.vue
new file mode 100644
index 0000000..8ce5fd2
--- /dev/null
+++ b/frontend/components/menu/recordActionMenu.vue
@@ -0,0 +1,148 @@
+<template>
+  <v-menu v-bind="$attrs">
+    <!-- pass through scoped slots -->
+    <template v-slot:activator="slotData">
+      <slot v-if="$scopedSlots.activator" name="activator" v-bind="slotData" />
+      <v-icon v-else v-bind="slotData.attrs" v-on="slotData.on"
+        >mdi-dots-vertical</v-icon
+      >
+    </template>
+
+    <v-list dense>
+      <v-list-item
+        v-if="recordInfo.enterOptions && !hideEnter"
+        key="enter"
+        @click="goToPage(true)"
+      >
+        <v-list-item-icon>
+          <v-icon>mdi-open-in-new</v-icon>
+        </v-list-item-icon>
+        <v-list-item-title
+          >Go To Page
+          <v-icon small right>mdi-open-in-new</v-icon>
+        </v-list-item-title>
+      </v-list-item>
+      <v-list-item
+        v-if="recordInfo.shareOptions && !hideView"
+        key="view"
+        @click="openEditDialog('view')"
+      >
+        <v-list-item-icon>
+          <v-icon>mdi-eye</v-icon>
+        </v-list-item-icon>
+        <v-list-item-title>View</v-list-item-title>
+      </v-list-item>
+      <v-list-item
+        v-if="recordInfo.shareOptions"
+        key="share"
+        @click="openEditDialog('share')"
+      >
+        <v-list-item-icon>
+          <v-icon>mdi-share-variant</v-icon>
+        </v-list-item-icon>
+        <v-list-item-title>Share</v-list-item-title>
+      </v-list-item>
+      <v-list-item
+        v-if="recordInfo.editOptions"
+        key="edit"
+        @click="openEditDialog('edit')"
+      >
+        <v-list-item-icon>
+          <v-icon>mdi-pencil</v-icon>
+        </v-list-item-icon>
+        <v-list-item-title>Edit</v-list-item-title>
+      </v-list-item>
+      <v-list-item
+        v-if="recordInfo.copyOptions"
+        key="copy"
+        @click="openEditDialog('copy')"
+      >
+        <v-list-item-icon>
+          <v-icon>mdi-content-copy</v-icon>
+        </v-list-item-icon>
+        <v-list-item-title>Copy</v-list-item-title>
+      </v-list-item>
+      <v-list-item
+        v-if="recordInfo.deleteOptions"
+        key="delete"
+        @click="openEditDialog('delete')"
+      >
+        <v-list-item-icon>
+          <v-icon>mdi-delete</v-icon>
+        </v-list-item-icon>
+        <v-list-item-title>Delete</v-list-item-title>
+      </v-list-item>
+      <v-divider v-if="recordInfo.expandTypes.length > 0"></v-divider>
+      <v-list-item
+        v-for="(item, i) in recordInfo.expandTypes"
+        :key="i"
+        dense
+        @click="openExpandType(item, i)"
+      >
+        <v-list-item-icon>
+          <v-icon>{{ item.icon || item.recordInfo.icon }}</v-icon>
+        </v-list-item-icon>
+        <v-list-item-title
+          >{{ item.name || item.recordInfo.name }}
+          <v-icon v-if="expandMode === 'openInNew'" small right
+            >mdi-open-in-new</v-icon
+          >
+        </v-list-item-title>
+      </v-list-item>
+    </v-list>
+  </v-menu>
+</template>
+
+<script>
+import { goToPage } from '~/services/base'
+
+export default {
+  props: {
+    item: {
+      type: Object,
+      default: () => ({}),
+    },
+
+    recordInfo: {
+      type: Object,
+      required: true,
+    },
+    hideView: {
+      type: Boolean,
+    },
+    hideEnter: {
+      type: Boolean,
+    },
+    expandMode: {
+      type: String,
+      default: 'emit',
+      validator: (value) => {
+        return ['emit', 'openInNew'].includes(value)
+      },
+    },
+  },
+
+  data() {
+    return {
+      status: false,
+    }
+  },
+
+  methods: {
+    openEditDialog(mode) {
+      this.$emit('handle-action-click', mode, this.item)
+    },
+
+    openExpandType(expandTypeObject, index) {
+      if (this.expandMode === 'emit')
+        this.$emit('handle-expand-click', expandTypeObject, index)
+      else
+        goToPage(this, this.recordInfo.viewRecordRoute, this.item, true, index)
+    },
+
+    goToPage() {
+      goToPage(this, this.recordInfo.viewRecordRoute, this.item, ...arguments)
+    },
+  },
+}
+</script>
diff --git a/frontend/components/page/viewRecordPage.vue b/frontend/components/page/viewRecordPage.vue
index b50f835..a01e4c4 100644
--- a/frontend/components/page/viewRecordPage.vue
+++ b/frontend/components/page/viewRecordPage.vue
@@ -35,64 +35,17 @@
                     {{ recordInfo.name }}
                   </v-toolbar-title>
                   <v-spacer></v-spacer>
-                  <v-menu left offset-x>
-                    <template v-slot:activator="{ on, attrs }">
-                      <v-icon v-bind="attrs" v-on="on"
-                        >mdi-dots-vertical</v-icon
-                      >
-                    </template>
-
-                    <v-list dense>
-                      <v-list-item
-                        v-if="recordInfo.shareOptions"
-                        key="share"
-                        @click="openEditDialog('share')"
-                      >
-                        <v-list-item-icon>
-                          <v-icon>mdi-share-variant</v-icon>
-                        </v-list-item-icon>
-                        <v-list-item-title>Share</v-list-item-title>
-                      </v-list-item>
-                      <v-list-item
-                        v-if="recordInfo.editOptions"
-                        key="edit"
-                        @click="openEditDialog('edit')"
-                      >
-                        <v-list-item-icon>
-                          <v-icon>mdi-pencil</v-icon>
-                        </v-list-item-icon>
-                        <v-list-item-title>Edit</v-list-item-title>
-                      </v-list-item>
-                      <v-list-item
-                        v-if="recordInfo.deleteOptions"
-                        key="delete"
-                        @click="openEditDialog('delete')"
-                      >
-                        <v-list-item-icon>
-                          <v-icon>mdi-delete</v-icon>
-                        </v-list-item-icon>
-                        <v-list-item-title>Delete</v-list-item-title>
-                      </v-list-item>
-                      <v-divider
-                        v-if="recordInfo.expandTypes.length > 0"
-                      ></v-divider>
-                      <v-list-item
-                        v-for="(item, i) in recordInfo.expandTypes"
-                        :key="i"
-                        dense
-                        @click="toggleExpand(i)"
-                      >
-                        <v-list-item-icon>
-                          <v-icon>{{
-                            item.icon || item.recordInfo.icon
-                          }}</v-icon>
-                        </v-list-item-icon>
-                        <v-list-item-title>{{
-                          item.name || item.recordInfo.name
-                        }}</v-list-item-title>
-                      </v-list-item>
-                    </v-list>
-                  </v-menu>
+                  <RecordActionMenu
+                    :record-info="recordInfo"
+                    :item="selectedItem"
+                    hide-view
+                    hide-enter
+                    expand-mode="emit"
+                    left
+                    offset-x
+                    @handle-action-click="openEditDialog"
+                    @handle-expand-click="handleExpandClick"
+                  ></RecordActionMenu>
                 </v-toolbar>
               </template>
             </component>
@@ -136,6 +89,7 @@
 <script>
 import ViewRecordInterface from '~/components/interface/crud/viewRecordInterface.vue'
 import EditRecordDialog from '~/components/dialog/editRecordDialog.vue'
+import RecordActionMenu from '~/components/menu/recordActionMenu.vue'
 import { executeGiraffeql } from '~/services/giraffeql'
 import {
   capitalizeString,
@@ -149,6 +103,7 @@ export default {
   components: {
     ViewRecordInterface,
     EditRecordDialog,
+    RecordActionMenu,
   },
 
   props: {
@@ -249,6 +204,10 @@ export default {
       this.$emit('handle-submit')
     },
 
+    handleExpandClick(_expandTypeObject, index) {
+      this.toggleExpand(index)
+    },
+
     toggleExpand(index) {
       const query = {
         ...this.$route.query,
diff --git a/frontend/mixins/crud.js b/frontend/mixins/crud.js
index b70df1f..9a02a05 100644
--- a/frontend/mixins/crud.js
+++ b/frontend/mixins/crud.js
@@ -5,6 +5,7 @@ import {
 import { unsubscribeChannels } from '~/services/pusher'
 import EditRecordDialog from '~/components/dialog/editRecordDialog.vue'
 import SearchDialog from '~/components/dialog/searchDialog.vue'
+import RecordActionMenu from '~/components/menu/recordActionMenu.vue'
 import {
   collapseObject,
   getNestedProperty,
@@ -26,6 +27,7 @@ export default {
   components: {
     EditRecordDialog,
     SearchDialog,
+    RecordActionMenu,
   },
 
   props: {
diff --git a/frontend/mixins/editRecordInterface.js b/frontend/mixins/editRecordInterface.js
index 2ea8b1e..cd9b051 100644
--- a/frontend/mixins/editRecordInterface.js
+++ b/frontend/mixins/editRecordInterface.js
@@ -24,12 +24,12 @@ export default {
       required: true,
     },
 
-    // must be add, edit, or view
+    // must be add, edit, view, or copy
     mode: {
       type: String,
       required: true,
       validator: (value) => {
-        return ['add', 'edit', 'view'].includes(value)
+        return ['add', 'edit', 'view', 'copy'].includes(value)
       },
     },
 
@@ -66,13 +66,17 @@ export default {
     },
     title() {
       return (
-        (this.mode === 'add' ? 'New' : this.mode === 'edit' ? 'Edit' : 'View') +
+        ((this.mode === 'add') | (this.mode === 'copy')
+          ? 'New'
+          : this.mode === 'edit'
+          ? 'Edit'
+          : 'View') +
         ' ' +
         this.recordInfo.name
       )
     },
     icon() {
-      return this.mode === 'add'
+      return this.mode === 'add' || this.mode === 'copy'
         ? 'mdi-plus'
         : this.mode === 'edit'
         ? 'mdi-pencil'
@@ -200,9 +204,9 @@ export default {
             : value
         }
 
-        // add mode
+        // add/copy mode
         let query
-        if (this.mode === 'add') {
+        if (this.mode === 'add' || this.mode === 'copy') {
           query = {
             [this.recordInfo.addOptions.operationName ??
             'create' + this.capitalizedType]: {
@@ -229,7 +233,9 @@ export default {
         this.$notifier.showSnackbar({
           message:
             this.recordInfo.name +
-            (this.mode === 'add' ? ' Added' : ' Updated'),
+            (this.mode === 'add' || this.mode === 'copy'
+              ? ' Added'
+              : ' Updated'),
           variant: 'success',
         })
 
@@ -247,7 +253,9 @@ export default {
         const serializeMap = new Map()
 
         const fields =
-          this.mode === 'edit'
+          this.mode === 'copy'
+            ? this.recordInfo.copyOptions.fields
+            : this.mode === 'edit'
             ? this.recordInfo.editOptions.fields
             : this.recordInfo.viewOptions.fields
         const data = await executeGiraffeql(this, {
@@ -297,8 +305,12 @@ export default {
           serializeNestedProperty(data, field, serialzeFn)
         })
 
+        // if copy mode, load all add fields
+        const inputFields =
+          this.mode === 'copy' ? this.recordInfo.addOptions.fields : fields
+
         // build inputs Array
-        this.inputsArray = fields.map((fieldKey) => {
+        this.inputsArray = inputFields.map((fieldKey) => {
           const fieldInfo = this.recordInfo.fields[fieldKey]
 
           // field unknown, abort
@@ -312,6 +324,12 @@ export default {
             fieldInfo,
             value: fieldValue, // already serialized
             options: [],
+            readonly:
+              this.mode === 'view'
+                ? true
+                : this.mode === 'copy'
+                ? fields.includes(fieldKey)
+                : false,
           }
 
           // if inputType === 'server-autocomplete', only populate the options with the specific entry, if any, and if inputObject.value not null
diff --git a/frontend/models/personalBest.ts b/frontend/models/personalBest.ts
index 1e83f2b..6f9a912 100644
--- a/frontend/models/personalBest.ts
+++ b/frontend/models/personalBest.ts
@@ -342,6 +342,10 @@ export const PersonalBest = <RecordInfo<'personalBest'>>{
   },
   deleteOptions: {},
   shareOptions: {},
+  copyOptions: {
+    fields: ['event.id', 'pbClass.id', 'setSize'],
+    component: EditPersonalBestInterface,
+  },
 
   expandTypes: [],
 }
diff --git a/frontend/types/index.ts b/frontend/types/index.ts
index 0e55ec7..069c42d 100644
--- a/frontend/types/index.ts
+++ b/frontend/types/index.ts
@@ -133,6 +133,13 @@ export type RecordInfo<T extends keyof MainTypes> = {
     // operationName?: string
   }
 
+  copyOptions?: {
+    // required: fields that should be copied
+    fields: string[]
+    // custom component
+    component?: any
+  }
+
   shareOptions?: {
     // custom component
     component?: any