Sort player names for search, mark news as coming soon

src/components/NavBar.vue

@@ -183,10 +183,10 @@
         </li>
       </ul>
 
-      <form class="form-inline" action="/players">
+      <form class="form-inline" @submit.stop.prevent="searchPlayers">
-        <input type="text" name="name" placeholder="Player Search" list="player-names" id="player-choice">
+        <input type="text" name="name" placeholder="Player Search" list="player-names" v-model="searchPlayerName">
         <datalist id="player-names">
-          <option v-for="name in playerNames" :value="name">{{ name }}</option>
+          <option v-for="name in sortedPlayerNames" :value="name">{{ name }}</option>
         </datalist>
       </form>
 
@@ -225,7 +225,8 @@ export default {
   name: 'NavBar',
   data() {
     return {
-      playerNames: [] as string[],
+      players: [] as Player[],
+      searchPlayerName: undefined
     }
   },
   created() {
@@ -421,6 +422,9 @@ export default {
     seasonNumber(): number {
       // TODO pull this from DB?
       return CURRENT_SEASON
+    },
+    sortedPlayerNames(): string[] {
+      return this.players.sort((p1, p2) => p2.wara - p1.wara).map(p => p.name)
     }
   },
   methods: {
@@ -428,8 +432,10 @@ export default {
       return await fetchPlayers(this.seasonNumber)
     },
     async populatePlayerNames(): Promise<void> {
-      const players: Player[] = await this.getPlayers()
+      this.players = await this.getPlayers()
-      this.playerNames = players.sort(p => p.wara).map(p => p.name)
+    },
+    searchPlayers(): void {
+      this.$router.push({ path: `/players/${this.seasonNumber}/${this.searchPlayerName}` })
     }
   }
 }

src/views/HomeView.vue

@@ -30,7 +30,9 @@
 
         <div class="col-md-6">
           <h3>Latest News</h3>
-          <div id="news-posts"></div>
+          <div id="news-posts">
+            🚧 Coming soon 🚧
+          </div>
         </div>
       </div>
     </div>

src/views/PlayerView.vue

@@ -1238,6 +1238,14 @@ export default {
   created() {
     this.fetchData()
   },
+  watch: {
+    seasonNumber(newValue, oldValue) {
+      if (newValue !== oldValue) this.fetchData()
+    },
+    playerName(newName, oldName) {
+      if (newName !== oldName) this.fetchData()
+    }
+  },
   methods: {
     async fetchData(): Promise<void> {
       this.player = await fetchPlayerByName(this.seasonNumber, this.playerName)