Add sorting to TeamBattingTable and fix duplicate key issue

src/components/TeamBattingTable.vue

@@ -3,40 +3,40 @@
     <div class="col-sm-12">
       <h3>Team Batting {{ isRegularSeason ? '' : ' - Postseason' }}</h3>
       <div class="table-responsive-xl">
-        <table class="table table-sm table-striped" id="table-batting-stats">
+        <table class="table table-sm table-striped">
           <thead class="thead-dark">
             <tr style="min-width: 75px">
-              <th>Player</th>
-              <th>PA</th>
-              <th>AB</th>
-              <th>R</th>
-              <th>H</th>
-              <th>2B</th>
-              <th>3B</th>
-              <th>HR</th>
-              <th>RBI</th>
-              <th>SB</th>
-              <th>CS</th>
-              <th>BB</th>
-              <th>SO</th>
-              <th>BA</th>
-              <th>OBP</th>
-              <th>SLG</th>
-              <th>OPS</th>
-              <th>wOBA</th>
-              <th>K%</th>
-              <th>BPHR</th>
-              <th>BPFO</th>
-              <th>BP1B</th>
-              <th>BPLO</th>
-              <th>GIDP</th>
-              <th>HBP</th>
-              <th>SAC</th>
-              <th>IBB</th>
+              <th @click="sortBy('playerName')" :class="getArrow('playerName')">Player</th>
+              <th @click="sortBy('pa')" :class="getArrow('pa')">PA</th>
+              <th @click="sortBy('ab')" :class="getArrow('ab')">AB</th>
+              <th @click="sortBy('run')" :class="getArrow('run')">R</th>
+              <th @click="sortBy('hit')" :class="getArrow('hit')">H</th>
+              <th @click="sortBy('double')" :class="getArrow('double')">2B</th>
+              <th @click="sortBy('triple')" :class="getArrow('triple')">3B</th>
+              <th @click="sortBy('hr')" :class="getArrow('hr')">HR</th>
+              <th @click="sortBy('rbi')" :class="getArrow('rbi')">RBI</th>
+              <th @click="sortBy('sb')" :class="getArrow('sb')">SB</th>
+              <th @click="sortBy('cs')" :class="getArrow('cs')">CS</th>
+              <th @click="sortBy('bb')" :class="getArrow('bb')">BB</th>
+              <th @click="sortBy('so')" :class="getArrow('so')">SO</th>
+              <th @click="sortBy('avg')" :class="getArrow('avg')">BA</th>
+              <th @click="sortBy('obp')" :class="getArrow('obp')">OBP</th>
+              <th @click="sortBy('slg')" :class="getArrow('slg')">SLG</th>
+              <th @click="sortBy('ops')" :class="getArrow('ops')">OPS</th>
+              <th @click="sortBy('woba')" :class="getArrow('woba')">wOBA</th>
+              <th @click="sortBy('kPct')" :class="getArrow('kPct')">K%</th>
+              <th @click="sortBy('bphr')" :class="getArrow('bphr')">BPHR</th>
+              <th @click="sortBy('bpfo')" :class="getArrow('bpfo')">BPFO</th>
+              <th @click="sortBy('bp1b')" :class="getArrow('bp1b')">BP1B</th>
+              <th @click="sortBy('bplo')" :class="getArrow('bplo')">BPLO</th>
+              <th @click="sortBy('gidp')" :class="getArrow('gidp')">GIDP</th>
+              <th @click="sortBy('hbp')" :class="getArrow('hbp')">HBP</th>
+              <th @click="sortBy('sac')" :class="getArrow('sac')">SAC</th>
+              <th @click="sortBy('ibb')" :class="getArrow('ibb')">IBB</th>
             </tr>
           </thead>
           <tbody id="career-batting-table">
-            <tr v-for="stat in battingStats" :key="stat.player.bbref_id">
+            <tr v-for="stat in battingStats" :key="stat.player.name">
               <td>
                 <RouterLink
                   :to="{ name: 'player', params: { seasonNumber: seasonNumber, playerName: stat.player.name } }">
@@ -111,6 +111,11 @@
 <script lang="ts">
 import { aggregateBattingStats, fetchBattingStatsBySeasonAndTeamId, type BattingStat } from '@/services/battingStatsService'
 
+interface ExtendedBattingStat extends BattingStat {
+  playerName: string
+  kPct: string
+}
+
 export default {
   name: 'TeamBattingTable',
   props: {
@@ -120,7 +125,9 @@ export default {
   },
   data() {
     return {
-      battingStats: [] as BattingStat[]
+      battingStats: [] as ExtendedBattingStat[],
+      sortKey: 'pa' as keyof ExtendedBattingStat,
+      sortOrder: -1
     }
   },
   computed: {
@@ -137,14 +144,39 @@ export default {
   },
   watch: {
     teamId(newValue, oldValue) {
-      if (newValue !== oldValue)
+      if (newValue !== oldValue) {
+        this.battingStats = []
+        this.sortKey = 'pa'
+        this.sortOrder = -1
         this.fetchData()
+      }
     }
   },
   methods: {
     async fetchData(): Promise<void> {
       const unsortedBattingStats: BattingStat[] = await fetchBattingStatsBySeasonAndTeamId(this.seasonNumber, this.teamId, this.isRegularSeason)
-      this.battingStats = unsortedBattingStats.sort((s1, s2) => s2.pa - s1.pa)
+      this.battingStats = unsortedBattingStats
+        .map(s => ({ ...s, playerName: s.player.name, kPct: this.calculateStrikeoutPercent(s) }))
+        .sort((s1, s2) => s2.pa - s1.pa)
+    },
+    sortBy(stat: keyof ExtendedBattingStat): void {
+      this.setKey(stat)
+
+      this.battingStats.sort((s1, s2) => s2[stat] < s1[stat] ? this.sortOrder : -1 * this.sortOrder)
+    },
+    setKey(stat: keyof ExtendedBattingStat): 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 ExtendedBattingStat): string {
+      if (this.sortKey !== stat) return 'faux-arrow'
+
+      return this.sortOrder > 0 ? 'up' : 'down'
     },
     calculateStrikeoutPercent(stat: BattingStat): string {
       if (!stat.pa) return 'N/A'
@@ -153,3 +185,18 @@ export default {
   }
 }
 </script>
+
+<style>
+.up::after {
+  content: "▵"
+}
+
+.down::after {
+  content: "▿"
+}
+
+.faux-arrow::after {
+  opacity: 0;
+  content: "▿"
+}
+</style>