First pass at sorting player career stats table

src/components/PlayerCareerPitchingTable.vue

@@ -6,39 +6,39 @@
         <table class="table table-sm table-striped" id="career-pitching">
           <thead class="thead-dark">
             <tr>
-              <th>Season</th>
+              <th @click="setKey('sortableSeason')" :class="getArrow('sortableSeason')">Season</th>
-              <th>W</th>
+              <th @click="setKey('win')" :class="getArrow('win')">W</th>
-              <th>L</th>
+              <th @click="setKey('loss')" :class="getArrow('loss')">L</th>
-              <th>W-L%</th>
+              <th @click="setKey('winPct')" :class="getArrow('winPct')">W-L%</th>
-              <th>ERA</th>
+              <th @click="setKey('era')" :class="getArrow('era')">ERA</th>
-              <th>G</th>
+              <th @click="setKey('games')" :class="getArrow('games')">G</th>
-              <th>GS</th>
+              <th @click="setKey('gs')" :class="getArrow('gs')">GS</th>
-              <th>SV</th>
+              <th @click="setKey('save')" :class="getArrow('save')">SV</th>
-              <th>HD</th>
+              <th @click="setKey('hold')" :class="getArrow('hold')">HD</th>
-              <th>BSV</th>
+              <th @click="setKey('bsave')" :class="getArrow('bsave')">BSV</th>
-              <th>IP</th>
+              <th @click="setKey('ip')" :class="getArrow('ip')">IP</th>
-              <th>H</th>
+              <th @click="setKey('hits')" :class="getArrow('hits')">H</th>
-              <th>R</th>
+              <th @click="setKey('run')" :class="getArrow('run')">R</th>
-              <th>ER</th>
+              <th @click="setKey('e_run')" :class="getArrow('e_run')">ER</th>
-              <th>HR</th>
+              <th @click="setKey('hr')" :class="getArrow('hr')">HR</th>
-              <th>BB</th>
+              <th @click="setKey('bb')" :class="getArrow('bb')">BB</th>
-              <th>SO</th>
+              <th @click="setKey('so')" :class="getArrow('so')">SO</th>
-              <th>HBP</th>
+              <th @click="setKey('hbp')" :class="getArrow('hbp')">HBP</th>
-              <th>BK</th>
+              <th @click="setKey('balk')" :class="getArrow('balk')">BK</th>
-              <th>WP</th>
+              <th @click="setKey('wp')" :class="getArrow('wp')">WP</th>
-              <th>IR</th>
+              <th @click="setKey('ir')" :class="getArrow('ir')">IR</th>
-              <th>IRS</th>
+              <th @click="setKey('ir_sc')" :class="getArrow('ir_sc')">IRS</th>
-              <th>IRS%</th>
+              <th @click="setKey('irsPct')" :class="getArrow('irsPct')">IRS%</th>
-              <th>WHIP</th>
+              <th @click="setKey('whip')" :class="getArrow('whip')">WHIP</th>
-              <th>H/9</th>
+              <th @click="setKey('hPer9')" :class="getArrow('hPer9')">H/9</th>
-              <th>HR/9</th>
+              <th @click="setKey('hrPer9')" :class="getArrow('hrPer9')">HR/9</th>
-              <th>BB/9</th>
+              <th @click="setKey('bbPer9')" :class="getArrow('bbPer9')">BB/9</th>
-              <th>SO/9</th>
+              <th @click="setKey('kPer9')" :class="getArrow('kPer9')">SO/9</th>
-              <th>SO/BB</th>
+              <th @click="setKey('kPerBB')" :class="getArrow('kPerBB')">SO/BB</th>
             </tr>
           </thead>
           <tbody id="career-pitching-table">
-            <tr v-for="stat in sortedRegularAndPostSeasonPitching" :key="stat.seasonNumber">
+            <tr v-for="stat in sortedRegularAndPostSeasonPitching" :key="stat.sortableSeason">
               <td>S{{ stat.seasonNumber }}{{ stat.isRegularSeason ? '' : ' / Playoffs' }}</td>
               <td>{{ stat.win }}</td>
               <td>{{ stat.loss }}</td>
@@ -116,6 +116,14 @@ import { hitsPer9, hrsPer9, outsToInnings, winPercentage } from '@/services/util
 interface PitchingStatWithSeason extends PitchingStat {
   seasonNumber: number
   isRegularSeason: boolean
+
+  sortableSeason: string // constructed to sort S1 -> S1 Playoffs -> S2 -> etc
+
+  // added for sortable table
+  winPct: string
+  irsPct: string
+  hPer9: string
+  hrPer9: string
 }
 
 export default {
@@ -125,6 +133,12 @@ export default {
     postSeasonPitchingStats: { type: Array<PitchingStat>, required: true },
     showPostSeasonStats: { type: Boolean, required: true }
   },
+  data() {
+    return {
+      sortKey: 'sortableSeason' as keyof PitchingStatWithSeason,
+      sortOrder: 1
+    }
+  },
   computed: {
     hasPitchingStats(): boolean {
       return !!(this.regularSeasonPitchingStats.length + this.postSeasonPitchingStats.length)
@@ -158,7 +172,12 @@ export default {
           return {
             ...stat,
             seasonNumber: stat.player.season,
-            isRegularSeason: true
+            isRegularSeason: true,
+            sortableSeason: `${`${stat.player.season}`.padStart(3, '0')}-A-Regular`,
+            winPct: this.winPercentage(stat),
+            irsPct: this.formatIRSPercentage(stat),
+            hPer9: this.hitsPer9(stat),
+            hrPer9: this.hrsPer9(stat)
           }
         }))
       }
@@ -168,21 +187,47 @@ export default {
           return {
             ...stat,
             seasonNumber: stat.player.season,
-            isRegularSeason: false
+            isRegularSeason: false,
+            sortableSeason: `${`${stat.player.season}`.padStart(3, '0')}-B-Playoffs`,
+            winPct: this.winPercentage(stat),
+            irsPct: this.formatIRSPercentage(stat),
+            hPer9: this.hitsPer9(stat),
+            hrPer9: this.hrsPer9(stat)
           }
         }))
       }
 
-      return seasonStats.sort((s1, s2) => {
+      return seasonStats.sort((s1, s2) => s2[this.sortKey] < s1[this.sortKey] ? this.sortOrder : -1 * this.sortOrder)
-        return s1.seasonNumber - s2.seasonNumber === 0
+
-          ? s1.isRegularSeason
+      // return seasonStats.sort((s1, s2) => {
-            ? -1
+      //   return s1.seasonNumber - s2.seasonNumber === 0
-            : 1
+      //     ? s1.isRegularSeason
-          : s1.seasonNumber - s2.seasonNumber
+      //       ? -1
-      })
+      //       : 1
+      //     : s1.seasonNumber - s2.seasonNumber
+      // })
     },
   },
   methods: {
+    // setKey(stat: keyof PitchingStatWithSeason): void {
+    //   this.setKey(stat)
+
+    //   this.pitchingStats.sort((s1, s2) => s2[stat] < s1[stat] ? this.sortOrder : -1 * this.sortOrder)
+    // },
+    setKey(stat: keyof PitchingStatWithSeason): 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 PitchingStatWithSeason): string {
+      if (this.sortKey !== stat) return 'faux-arrow'
+
+      return this.sortOrder > 0 ? 'up' : 'down'
+    },
     outsToInnings(stat: PitchingStat): string {
       return outsToInnings(stat)
     },
@@ -203,3 +248,18 @@ export default {
   }
 }
 </script>
+
+<style>
+.up::after {
+  content: "▵"
+}
+
+.down::after {
+  content: "▿"
+}
+
+.faux-arrow::after {
+  opacity: 0;
+  content: "▿"
+}
+</style>