Add sorting to pitching table

src/components/TeamPitchingTable.vue

@@ -6,35 +6,35 @@
         <table class="table table-sm table-striped" id="table-pitching-stats">
           <thead class="thead-dark">
             <tr>
-              <th>Player</th>
+              <th @click="sortBy('playerName')" :class="getArrow('playerName')">Player</th>
-              <th>W</th>
+              <th @click="sortBy('win')" :class="getArrow('win')">W</th>
-              <th>L</th>
+              <th @click="sortBy('loss')" :class="getArrow('loss')">L</th>
-              <th>W-L%</th>
+              <th @click="sortBy('winPct')" :class="getArrow('winPct')">W-L%</th>
-              <th>ERA</th>
+              <th @click="sortBy('era')" :class="getArrow('era')">ERA</th>
-              <th>G</th>
+              <th @click="sortBy('games')" :class="getArrow('games')">G</th>
-              <th>GS</th>
+              <th @click="sortBy('gs')" :class="getArrow('gs')">GS</th>
-              <th>SV</th>
+              <th @click="sortBy('save')" :class="getArrow('save')">SV</th>
-              <th>HD</th>
+              <th @click="sortBy('hold')" :class="getArrow('hold')">HD</th>
-              <th>BSV</th>
+              <th @click="sortBy('bsave')" :class="getArrow('bsave')">BSV</th>
-              <th>IP</th>
+              <th @click="sortBy('ip')" :class="getArrow('ip')">IP</th>
-              <th>H</th>
+              <th @click="sortBy('hits')" :class="getArrow('hits')">H</th>
-              <th>R</th>
+              <th @click="sortBy('run')" :class="getArrow('run')">R</th>
-              <th>ER</th>
+              <th @click="sortBy('e_run')" :class="getArrow('e_run')">ER</th>
-              <th>HR</th>
+              <th @click="sortBy('hr')" :class="getArrow('hr')">HR</th>
-              <th>BB</th>
+              <th @click="sortBy('bb')" :class="getArrow('bb')">BB</th>
-              <th>SO</th>
+              <th @click="sortBy('so')" :class="getArrow('so')">SO</th>
-              <th>HBP</th>
+              <th @click="sortBy('hbp')" :class="getArrow('hbp')">HBP</th>
-              <th>BK</th>
+              <th @click="sortBy('balk')" :class="getArrow('balk')">BK</th>
-              <th>WP</th>
+              <th @click="sortBy('wp')" :class="getArrow('wp')">WP</th>
-              <th>IR</th>
+              <th @click="sortBy('ir')" :class="getArrow('ir')">IR</th>
-              <th>IRS</th>
+              <th @click="sortBy('ir_sc')" :class="getArrow('ir_sc')">IRS</th>
-              <th>IRS%</th>
+              <th @click="sortBy('irsPct')" :class="getArrow('irsPct')">IRS%</th>
-              <th>WHIP</th>
+              <th @click="sortBy('whip')" :class="getArrow('whip')">WHIP</th>
-              <th>H/9</th>
+              <th @click="sortBy('hPer9')" :class="getArrow('hPer9')">H/9</th>
-              <th>HR/9</th>
+              <th @click="sortBy('hrPer9')" :class="getArrow('hrPer9')">HR/9</th>
-              <th>BB/9</th>
+              <th @click="sortBy('bbPer9')" :class="getArrow('bbPer9')">BB/9</th>
-              <th>SO/9</th>
+              <th @click="sortBy('kPer9')" :class="getArrow('kPer9')">SO/9</th>
-              <th>SO/BB</th>
+              <th @click="sortBy('kPerBB')" :class="getArrow('kPerBB')">SO/BB</th>
             </tr>
           </thead>
           <tbody id="team-pitching-stats">
@@ -118,6 +118,14 @@
 import { aggregatePitchingStats, fetchPitchingStatsBySeasonAndTeamId, type PitchingStat } from '@/services/pitchingStatsService'
 import { outsToInnings, winPercentage, hitsPer9, hrsPer9 } from '@/services/utilities'
 
+interface ExtendedPitchingStat extends PitchingStat {
+  playerName: string
+  winPct: string
+  irsPct: string
+  hPer9: string
+  hrPer9: string
+}
+
 export default {
   name: 'TeamPitchingTable',
   props: {
@@ -127,7 +135,9 @@ export default {
   },
   data() {
     return {
-      pitchingStats: [] as PitchingStat[]
+      pitchingStats: [] as ExtendedPitchingStat[],
+      sortKey: 'ip' as keyof ExtendedPitchingStat,
+      sortOrder: -1
     }
   },
   computed: {
@@ -144,14 +154,47 @@ export default {
   },
   watch: {
     teamId(newValue, oldValue) {
-      if (newValue !== oldValue)
+      if (newValue !== oldValue) {
+        this.pitchingStats = []
+        this.sortKey = 'ip'
+        this.sortOrder = -1
         this.fetchData()
+      }
     }
   },
   methods: {
     async fetchData(): Promise<void> {
       const unsortedPitchingStats: PitchingStat[] = await fetchPitchingStatsBySeasonAndTeamId(this.seasonNumber, this.teamId, this.isRegularSeason)
-      this.pitchingStats = unsortedPitchingStats.sort((s1, s2) => s2.outs - s1.outs)
+      this.pitchingStats = unsortedPitchingStats
+        .map(s => (
+          {
+            ...s,
+            playerName: s.player.name,
+            winPct: this.winPercentage(s),
+            irsPct: this.formatIRSPercentage(s),
+            hPer9: this.hitsPer9(s),
+            hrPer9: this.hrsPer9(s)
+          }))
+        .sort((s1, s2) => s2.ip - s1.ip)
+    },
+    sortBy(stat: keyof ExtendedPitchingStat): void {
+      this.setKey(stat)
+
+      this.pitchingStats.sort((s1, s2) => s2[stat] < s1[stat] ? this.sortOrder : -1 * this.sortOrder)
+    },
+    setKey(stat: keyof ExtendedPitchingStat): void {
+      if (this.sortKey === stat) {
+        // if key currently selected, flip sort order
+        this.sortOrder *= -1
+      } else {
+        this.sortKey = stat
+        this.sortOrder = stat === 'playerName' ? 1 : -1
+      }
+    },
+    getArrow(stat: keyof ExtendedPitchingStat): string {
+      if (this.sortKey !== stat) return 'faux-arrow'
+
+      return this.sortOrder > 0 ? 'up' : 'down'
     },
     outsToInnings(stat: PitchingStat): string {
       return outsToInnings(stat)
@@ -173,3 +216,18 @@ export default {
   }
 }
 </script>
+
+<style>
+.up::after {
+  content: "▵"
+}
+
+.down::after {
+  content: "▿"
+}
+
+.faux-arrow::after {
+  opacity: 0;
+  content: "▿"
+}
+</style>