Add sorting to career fielding table

src/components/PlayerCareerFieldingTable.vue

@@ -6,20 +6,20 @@
         <table class="table table-sm table-striped" id="career-fielding">
           <thead class="thead-dark">
             <tr>
-              <th>Season</th>
+              <th @click="setKey('sortableSeason')" :class="getArrow('sortableSeason')">Season</th>
-              <th>Pos</th>
+              <th @click="setKey('pos')" :class="getArrow('pos')">Pos</th>
-              <th>XCh</th>
+              <th @click="setKey('xCheckCount')" :class="getArrow('xCheckCount')">XCh</th>
-              <th>XH</th>
+              <th @click="setKey('hit')" :class="getArrow('hit')">XH</th>
-              <th>E</th>
+              <th @click="setKey('error')" :class="getArrow('error')">E</th>
-              <th>PB</th>
+              <th @click="setKey('passedBallCount')" :class="getArrow('passedBallCount')">PB</th>
-              <th>SBa</th>
+              <th @click="setKey('stolenBaseCheckCount')" :class="getArrow('stolenBaseCheckCount')">SBa</th>
-              <th>CSc</th>
+              <th @click="setKey('caughtStealingCount')" :class="getArrow('caughtStealingCount')">CSc</th>
-              <th>CS%</th>
+              <th @click="setKey('caughtStealingPercent')" :class="getArrow('caughtStealingPercent')">CS%</th>
-              <th>wF%</th>
+              <th @click="setKey('weightedFieldingPercent')" :class="getArrow('weightedFieldingPercent')">wF%</th>
             </tr>
           </thead>
           <tbody id="career-fielding-table">
-            <tr v-for="stat in sortedRegularAndPostSeasonFielding">
+            <tr v-for="stat in sortedRegularAndPostSeasonFielding" :key="stat.sortableSeason">
               <td>S{{ stat.seasonNumber }}{{ stat.isRegularSeason ? '' : ' / Playoffs' }}</td>
               <td>{{ stat.pos }}</td>
               <td>{{ stat.xCheckCount }}</td>
@@ -33,7 +33,7 @@
             </tr>
           </tbody>
           <tfoot>
-            <tr v-for="stat in sortedCareerFieldingStats">
+            <tr v-for="stat in sortedCareerFieldingStats" :key="stat.pos">
               <th>Career</th>
               <th>{{ stat.pos }}</th>
               <th>{{ stat.xCheckCount }}</th>
@@ -45,7 +45,7 @@
               <th>{{ formatCaughtStealingPercent(stat) }}</th>
               <th>{{ formatWeightedFieldingPercent(stat) }}</th>
             </tr>
-            <tr v-for="stat in sortedPlayoffsCareerFieldingStats">
+            <tr v-for="stat in sortedPlayoffsCareerFieldingStats" :key="stat.pos">
               <th>Career / Playoffs</th>
               <th>{{ stat.pos }}</th>
               <th>{{ stat.xCheckCount }}</th>
@@ -71,31 +71,23 @@ import { POS_MAP } from '@/services/utilities'
 interface FieldingStatWithSeason extends FieldingStat {
   seasonNumber: number
   isRegularSeason: boolean
-}
 
-function compareFieldingStats(s1: FieldingStatWithSeason, s2: FieldingStatWithSeason): number {
+  sortableSeason: string // constructed to sort S1 -> S1 Playoffs -> S2 -> etc
-  if (s1.seasonNumber - s2.seasonNumber !== 0) {
-    return s1.seasonNumber - s2.seasonNumber
-  }
-
-  if (s1.isRegularSeason !== s2.isRegularSeason) {
-    return s1.isRegularSeason
-      ? -1
-      : 1
-  }
-
-  // at this point stats are same season and also both regular or post season stats
-  // and must be sorted on position order
-  return POS_MAP[s1.pos] - POS_MAP[s2.pos]
 }
 
 export default {
-  name: "PlayerCareerFieldingTable",
+  name: 'PlayerCareerFieldingTable',
   props: {
     regularSeasonFieldingStats: { type: Array<FieldingStat>, required: true },
     postSeasonFieldingStats: { type: Array<FieldingStat>, required: true },
     showPostSeasonStats: { type: Boolean, required: true }
   },
+  data() {
+    return {
+      sortKey: 'sortableSeason' as keyof FieldingStatWithSeason,
+      sortOrder: 1
+    }
+  },
   computed: {
     hasFieldingStats(): boolean {
       return !!(this.regularSeasonFieldingStats.length + this.postSeasonFieldingStats.length)
@@ -125,7 +117,8 @@ export default {
           return {
             ...stat,
             seasonNumber: stat.player.season,
-            isRegularSeason: true
+            isRegularSeason: true,
+            sortableSeason: `${`${stat.player.season}`.padStart(3, '0')}-A-Regular-${POS_MAP[stat.pos]}`
           }
         }))
       }
@@ -135,15 +128,30 @@ export default {
           return {
             ...stat,
             seasonNumber: stat.player.season,
-            isRegularSeason: false
+            isRegularSeason: false,
+            sortableSeason: `${`${stat.player.season}`.padStart(3, '0')}-B-Playoffs-${POS_MAP[stat.pos]}`
           }
         }))
       }
 
-      return seasonStats.sort(compareFieldingStats)
+      return seasonStats.sort((s1, s2) => s2[this.sortKey] < s1[this.sortKey] ? this.sortOrder : -1 * this.sortOrder)
     },
   },
   methods: {
+    setKey(stat: keyof FieldingStatWithSeason): void {
+      if (this.sortKey === stat) {
+        // if key currently selected, flip sort order
+        this.sortOrder *= -1
+      } else {
+        this.sortKey = stat
+        this.sortOrder = stat === 'sortableSeason' ? 1 : -1
+      }
+    },
+    getArrow(stat: keyof FieldingStatWithSeason): 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)) {
         return '-'