Resolve issue with personalBest cube name not displaying, add presets…

… at the top of public-pbs page
cubing · Apr 5, 2021 · c6af9a1 · c6af9a1
1 parent 879840d
commit c6af9a1
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 9 deletions.
diff --git a/frontend/components/interface/crud/viewRecordTableInterface.vue b/frontend/components/interface/crud/viewRecordTableInterface.vue
@@ -34,7 +34,9 @@
                         : item.field
                     "
                   ></component>
-                  <span v-else>{{ currentItem[item.field] }}</span>
+                  <span v-else>{{
+                    getNestedProperty(currentItem, item.field)
+                  }}</span>
                 </td>
               </tr>
             </tbody>
@@ -60,9 +62,13 @@
 
 <script>
 import editRecordInterfaceMixin from '~/mixins/editRecordInterface'
+import { getNestedProperty } from '~/services/base'
 
 export default {
   mixins: [editRecordInterfaceMixin],
+  methods: {
+    getNestedProperty,
+  },
 }
 </script>
 

diff --git a/frontend/mixins/crud.js b/frontend/mixins/crud.js
@@ -291,6 +291,7 @@ export default {
       this.syncFilters()
       this.reset({
         resetCursor: true,
+        resetSort: true,
       })
     },
   },

diff --git a/frontend/pages/public-pbs.vue b/frontend/pages/public-pbs.vue
@@ -1,17 +1,35 @@
 <template>
-  <CrudRecordPage
-    :record-info="recordInfo"
-    :locked-filters="lockedFilters"
-    :hidden-filters="hiddenFilters"
-    :head="head"
-    :title="title"
-    icon="mdi-star"
-  ></CrudRecordPage>
+  <div>
+    <div class="text-center pt-3">
+      <v-chip
+        v-for="(item, i) in events"
+        :key="i"
+        class="ma-2"
+        @click="applyPresetRoute(item)"
+      >
+        <v-avatar left>
+          <span class="cubing-icon" :class="item.cubingIcon"></span>
+        </v-avatar>
+        {{ item.name }}
+      </v-chip>
+    </div>
+
+    <CrudRecordPage
+      :record-info="recordInfo"
+      :locked-filters="lockedFilters"
+      :hidden-filters="hiddenFilters"
+      :head="head"
+      :title="title"
+      icon="mdi-star"
+    ></CrudRecordPage>
+  </div>
 </template>
 
 <script>
 import CrudRecordPage from '~/components/page/crudRecordPage.vue'
 import { PublicPbs } from '~/models/special'
+import { generateRoute } from '~/services/base'
+import { getEvents } from '~/services/dropdown'
 
 export default {
   components: {
@@ -38,7 +56,30 @@ export default {
         },
       ],
       title: 'Public PBs',
+      events: [],
     }
   },
+
+  mounted() {
+    // load first 18 events only
+    getEvents(this).then((res) => (this.events = res.slice(0, 18)))
+  },
+  methods: {
+    applyPresetRoute(event) {
+      this.$router.push(
+        generateRoute(this.$route.path, {
+          sortBy: ['happenedOn'],
+          sortDesc: [true],
+          filters: [
+            {
+              field: 'event.id',
+              operator: 'eq',
+              value: event.id,
+            },
+          ],
+        })
+      )
+    },
+  },
 }
 </script>