From 9199d91844c5435b8c75cb91261b7db96dc0e54c Mon Sep 17 00:00:00 2001
From: James Chang <jc4095@nyu.edu>
Date: Sat, 10 Apr 2021 11:32:46 -0400
Subject: [PATCH] Switch to dropdown instead of chips for public-pbs presets

---
 frontend/layouts/default.vue  |   2 +-
 frontend/pages/index.vue      |  33 +++++++---
 frontend/pages/public-pbs.vue | 115 +++++++++++++++++++++++-----------
 3 files changed, 106 insertions(+), 44 deletions(-)

diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index d93062f..1207db8 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -251,7 +251,7 @@ export default {
       navItems: [
         {
           icon: 'mdi-podium',
-          title: 'Fastest PBs',
+          title: 'Leaderboard',
           to: generateRoute('/public-pbs', {
             sortBy: ['score'],
             sortDesc: [false],
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index 55bede9..f626755 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -48,8 +48,9 @@
           </v-card-text>
           <v-card-actions>
             <v-spacer></v-spacer>
-            <v-btn v-if="user" color="primary" nuxt to="/my-pb-card"
-              >Track My PBs</v-btn
+            <v-btn v-if="user" color="primary" nuxt to="/my-pb-card">
+              <v-icon left> mdi-card-text </v-icon>
+              Track My PBs</v-btn
             >
             <v-btn v-else text @click="goToWcaAuth()">
               <img
@@ -61,8 +62,9 @@
               Login
             </v-btn>
 
-            <v-btn color="primary" nuxt :to="latestPbsRoute"
-              >View Latest PBs</v-btn
+            <v-btn color="primary" nuxt :to="fastestPbsRoute">
+              <v-icon left> mdi-podium </v-icon>
+              Leaderboard</v-btn
             >
           </v-card-actions>
         </v-card>
@@ -89,10 +91,27 @@ export default {
       user: 'auth/user',
     }),
 
-    latestPbsRoute() {
+    fastestPbsRoute() {
       return generateRoute('/public-pbs', {
-        sortBy: ['happenedOn'],
-        sortDesc: [true],
+        sortBy: ['score'],
+        sortDesc: [false],
+        filters: [
+          {
+            field: 'event.id',
+            operator: 'eq',
+            value: 4, // 3x3x3 on prod db
+          },
+          {
+            field: 'pbClass.id',
+            operator: 'eq',
+            value: 1, // pbClass single on prod db
+          },
+          {
+            field: 'setSize',
+            operator: 'eq',
+            value: 1,
+          },
+        ],
       })
     },
   },
diff --git a/frontend/pages/public-pbs.vue b/frontend/pages/public-pbs.vue
index d62e0ba..ba2e88c 100644
--- a/frontend/pages/public-pbs.vue
+++ b/frontend/pages/public-pbs.vue
@@ -5,31 +5,32 @@
         v-if="loading.presets"
         indeterminate
       ></v-progress-circular>
-      <div v-else>
-        <div>Events</div>
-        <v-chip
-          v-for="(item, i) in events"
-          :key="i"
-          class="ma-2"
-          @click="applyEventPreset(item)"
-        >
-          <v-avatar left>
-            <span class="cubing-icon" :class="item.cubingIcon"></span>
-          </v-avatar>
-          {{ item.name }}
-        </v-chip>
-
-        <v-divider class="my-2" />
-        <div>PB Types</div>
-        <v-chip
-          v-for="item in pbTypes"
-          :key="item.text"
-          class="ma-2"
-          @click="applyPbPreset(item.attributes)"
-        >
-          {{ item.text }}
-        </v-chip>
-      </div>
+      <v-row v-else justify="center" class="pt-3">
+        <v-col :key="-1" cols="12" lg="3" class="pb-0">
+          <v-autocomplete
+            v-model="inputs.event"
+            :items="events"
+            item-text="name"
+            item-value="id"
+            label="Event"
+            filled
+            return-object
+            @change="applyEventPreset"
+          ></v-autocomplete>
+        </v-col>
+        <v-col :key="-2" cols="12" lg="3" class="pb-0">
+          <v-autocomplete
+            v-model="inputs.pbType"
+            :items="pbTypes"
+            item-text="text"
+            label="PB Type"
+            clearable
+            filled
+            return-object
+            @change="applyPbPreset"
+          ></v-autocomplete>
+        </v-col>
+      </v-row>
     </v-container>
     <CrudRecordPage
       :record-info="recordInfo"
@@ -73,6 +74,11 @@ export default {
         },
       ],
       title: 'Public PBs',
+      inputs: {
+        event: null,
+        pbType: null,
+      },
+
       events: [],
       pbTypes: [
         {
@@ -124,10 +130,6 @@ export default {
             setSize: 1000,
           },
         },
-        {
-          text: 'All',
-          attributes: null,
-        },
       ],
 
       loading: {
@@ -135,11 +137,16 @@ export default {
       },
     }
   },
+  watch: {
+    '$route.query.pageOptions'() {
+      this.loadPresets()
+    },
+  },
 
   mounted() {
-    // load first 18 events only
     this.loadPresets()
   },
+
   methods: {
     applyEventPreset(event) {
       // get the original sortBy/sortDesc
@@ -170,7 +177,7 @@ export default {
       )
     },
 
-    applyPbPreset(attributes) {
+    applyPbPreset(pbType) {
       // get the original sortBy/sortDesc/filters
       const originalPageOptions = this.$route.query.pageOptions
         ? JSON.parse(atob(decodeURIComponent(this.$route.query.pageOptions)))
@@ -189,17 +196,17 @@ export default {
               )
             : []
           ).concat(
-            attributes
+            pbType
               ? [
                   {
                     field: 'pbClass.id',
                     operator: 'eq',
-                    value: attributes['pbClass.id'],
+                    value: pbType.attributes['pbClass.id'],
                   },
                   {
                     field: 'setSize',
                     operator: 'eq',
-                    value: attributes.setSize,
+                    value: pbType.attributes.setSize,
                   },
                 ]
               : []
@@ -211,9 +218,45 @@ export default {
     async loadPresets() {
       this.loading.presets = true
 
-      const events = await getEvents(this)
+      this.events = await getEvents(this)
+
+      // populate dropdown inputs
+      const originalPageOptions = this.$route.query.pageOptions
+        ? JSON.parse(atob(decodeURIComponent(this.$route.query.pageOptions)))
+        : null
+
+      // determine if a preset was applied
+      if (originalPageOptions.filters) {
+        const eventFilterObject = originalPageOptions.filters.find(
+          (filterObject) => filterObject.field === 'event.id'
+        )
+
+        if (eventFilterObject) {
+          this.inputs.event = this.events.find(
+            (event) => event.id === eventFilterObject.value
+          )
+        } else {
+          this.inputs.event = null
+        }
+
+        const setSizeFilterObject = originalPageOptions.filters.find(
+          (filterObject) => filterObject.field === 'setSize'
+        )
+
+        const pbClassFilterObject = originalPageOptions.filters.find(
+          (filterObject) => filterObject.field === 'pbClass.id'
+        )
 
-      this.events = events.slice(0, 18)
+        if (setSizeFilterObject && pbClassFilterObject) {
+          this.inputs.pbType = this.pbTypes.find(
+            (pbType) =>
+              pbType.attributes.setSize === setSizeFilterObject.value &&
+              pbType.attributes['pbClass.id'] === pbClassFilterObject.value
+          )
+        } else {
+          this.inputs.pbType = null
+        }
+      }
 
       this.loading.presets = false
     },