Make team fielding leaderboard table sortable

src/components/LeaderboardTeamFieldingTable.vue

@@ -4,15 +4,15 @@
       <table class="table table-sm table-striped" id="table-fielding-stats">
         <thead class="thead-dark">
           <tr>
-            <th>Team</th>
+            <th @click="sortBy('teamName')" :class="getArrow('teamName')">Team</th>
-            <th>XCh</th>
+            <th @click="sortBy('xCheckCount')" :class="getArrow('xCheckCount')">XCh</th>
-            <th>XH</th>
+            <th @click="sortBy('hit')" :class="getArrow('hit')">XH</th>
-            <th>E</th>
+            <th @click="sortBy('error')" :class="getArrow('error')">E</th>
-            <th>PB</th>
+            <th @click="sortBy('passedBallCount')" :class="getArrow('passedBallCount')">PB</th>
-            <th>SBa</th>
+            <th @click="sortBy('stolenBaseCheckCount')" :class="getArrow('stolenBaseCheckCount')">SBa</th>
-            <th>CSc</th>
+            <th @click="sortBy('caughtStealingCount')" :class="getArrow('caughtStealingCount')">CSc</th>
-            <th>CS%</th>
+            <th @click="sortBy('caughtStealingPercent')" :class="getArrow('caughtStealingPercent')">CS%</th>
-            <th>wF%</th>
+            <th @click="sortBy('weightedFieldingPercent')" :class="getArrow('weightedFieldingPercent')">wF%</th>
           </tr>
         </thead>
         <tbody v-if="fieldingStats.length" >
@@ -53,6 +53,10 @@
 <script lang="ts">
 import { aggregateFieldingStats, fetchTeamFieldingStatsBySeason, type FieldingStat } from '@/services/fieldingStatsService'
 
+interface ExtendedFieldingStat extends FieldingStat {
+  teamName: string
+}
+
 export default {
   name: 'LeaderboardTeamFieldingTable',
   props: {
@@ -60,7 +64,9 @@ export default {
   },
   data() {
     return {
-      fieldingStats: [] as FieldingStat[]
+      fieldingStats: [] as ExtendedFieldingStat[],
+      sortKey: 'teamName' as keyof ExtendedFieldingStat,
+      sortOrder: 1
     }
   },
   computed: {
@@ -79,6 +85,8 @@ export default {
     seasonNumber(newValue, oldValue) {
       if (newValue !== oldValue) {
         this.fieldingStats = []
+        this.sortKey = 'teamName'
+        this.sortOrder = 1
         this.fetchData()
       }
     }
@@ -86,7 +94,28 @@ export default {
   methods: {
     async fetchData(): Promise<void> {
       const unsortedFieldingStats: FieldingStat[] = await fetchTeamFieldingStatsBySeason(this.seasonNumber)
-      this.fieldingStats = unsortedFieldingStats.sort((s1, s2) => s2.team.sname < s1.team.sname ? 1 : -1)
+      this.fieldingStats = unsortedFieldingStats
+        .map(s => ({...s, teamName: s.team.sname}))
+        .sort((s1, s2) => s2.teamName < s1.teamName ? 1 : -1)
+    },
+    sortBy(stat: keyof ExtendedFieldingStat): void {
+      this.setKey(stat)
+      
+      this.fieldingStats.sort((s1, s2) => s2[stat] < s1[stat] ? this.sortOrder : -1 * this.sortOrder)
+    },
+    setKey(stat: keyof ExtendedFieldingStat): void {
+      if (this.sortKey === stat) {
+        // if key currently selected, flip sort order
+        this.sortOrder *= -1
+      } else {
+        this.sortKey = stat
+        this.sortOrder = stat === 'teamName' ? 1 : -1
+      }
+    },
+    getArrow(stat: keyof ExtendedFieldingStat): string {
+      if (this.sortKey !== stat) return 'faux-arrow'
+      
+      return this.sortOrder > 0 ? 'up' : 'down'
     },
     formatCaughtStealingPercent(stat: FieldingStat): string {
       if (stat.stolenBaseCheckCount === 0 || Number.isNaN(stat.caughtStealingPercent)) {
@@ -101,3 +130,16 @@ export default {
   }
 }
 </script>
+
+<style>
+.up::after {
+  content: "▵"
+}
+.down::after {
+  content: "▿"
+}
+.faux-arrow::after {
+  opacity: 0;
+  content: "▿"
+}
+</style>