Customize text on recordActionMenu

cubing · Apr 18, 2021 · 6192389 · 6192389
1 parent 9445546
commit 6192389
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 13 deletions.
diff --git a/frontend/components/interface/crud/special/editPersonalBestInterface.vue b/frontend/components/interface/crud/special/editPersonalBestInterface.vue
@@ -152,13 +152,15 @@ export default {
 
   watch: {
     pbClass(val) {
-      if (!isObject(val)) return
-      // eslint-disable-next-line camelcase
-      if (!val?.setSize) {
-        this.setInputValue('setSize', null)
-      } else {
-        this.setInputValue('setSize', val.setSize)
+      if (isObject(val)) {
+        if (!val?.setSize) {
+          this.setInputValue('setSize', null)
+        } else {
+          this.setInputValue('setSize', val.setSize)
+        }
       }
+
+      if (val && this.getInputValue('setSize')) this.focusTimeElapsedInput()
     },
     timeElapsed(val) {
       if (!val) return
@@ -181,13 +183,17 @@ export default {
   mounted() {
     // focus the time field if the event and pbClass are set
     if (this.event && this.pbClass) {
-      setTimeout(() => {
-        this.$refs.timeElapsed[0].focus()
-      }, 0)
+      this.focusTimeElapsedInput()
     }
   },
 
   methods: {
+    focusTimeElapsedInput() {
+      setTimeout(() => {
+        this.$refs.timeElapsed[0].focus()
+      }, 0)
+    },
+
     isNumber(evt) {
       const charCode = evt.which ? evt.which : evt.keyCode
       if (charCode > 31 && (charCode < 48 || charCode > 57)) {

diff --git a/frontend/components/menu/recordActionMenu.vue b/frontend/components/menu/recordActionMenu.vue
@@ -48,19 +48,25 @@
         @click="openEditDialog('edit')"
       >
         <v-list-item-icon>
-          <v-icon>mdi-pencil</v-icon>
+          <v-icon>{{ recordInfo.editOptions.icon || 'mdi-pencil' }}</v-icon>
         </v-list-item-icon>
-        <v-list-item-title>Edit</v-list-item-title>
+        <v-list-item-title>{{
+          recordInfo.editOptions.text || '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-icon>
+            {{ recordInfo.copyOptions.icon || 'mdi-content-copy' }}</v-icon
+          >
         </v-list-item-icon>
-        <v-list-item-title>Duplicate</v-list-item-title>
+        <v-list-item-title>{{
+          recordInfo.copyOptions.text || 'Duplicate'
+        }}</v-list-item-title>
       </v-list-item>
       <v-list-item
         v-if="recordInfo.deleteOptions"

diff --git a/frontend/models/personalBest.ts b/frontend/models/personalBest.ts
@@ -335,6 +335,8 @@ export const PersonalBest = <RecordInfo<'personalBest'>>{
   },
   editOptions: {
     fields: ['publicComments', 'product.id'],
+    icon: 'mdi-comment-edit',
+    text: 'Comments',
   },
   viewOptions: {
     fields: [
@@ -355,6 +357,8 @@ export const PersonalBest = <RecordInfo<'personalBest'>>{
   copyOptions: {
     fields: ['event.id', 'pbClass.id', 'setSize'],
     component: EditPersonalBestInterface,
+    icon: 'mdi-plus',
+    text: 'New PB',
   },
 
   expandTypes: [],

diff --git a/frontend/types/index.ts b/frontend/types/index.ts
@@ -113,6 +113,10 @@ export type RecordInfo<T extends keyof MainTypes> = {
     component?: any
     // if not createX, the custom create operation name
     operationName?: string
+    // replacement icon
+    icon?: string
+    // replacement text
+    text?: string
   }
 
   deleteOptions?: {
@@ -138,6 +142,11 @@ export type RecordInfo<T extends keyof MainTypes> = {
     fields: string[]
     // custom component
     component?: any
+
+    // replacement icon
+    icon?: string
+    // replacement text
+    text?: string
   }
 
   shareOptions?: {