Merge pull request #162 from zusorio/search-override

Allow searching for people with very short names
slmnio · Aug 13, 2023 · f32ec8d · f32ec8d
2 parents f694235 + ec7665d
commit f32ec8d
Showing 1 changed file with 16 additions and 6 deletions.
diff --git a/website/src/views/lists/Players.vue b/website/src/views/lists/Players.vue
@@ -5,14 +5,13 @@
             <div class="input-group-prepend">
                 <span class="input-group-text" id="basic-addon1">Search</span>
             </div>
-            <input type="text" class="form-control" v-model="search" placeholder="Type a player's name here" aria-label="Player name" aria-describedby="basic-addon1">
+            <input type="text" class="form-control" @keydown.enter="override" v-model="search" placeholder="Type a player's name here" aria-label="Player name" aria-describedby="basic-addon1">
         </div>
         <h1><LoadingIcon v-if="!players.length"></LoadingIcon></h1>
 
         <div class="player-list">
-            <div class="search-helper default-thing" v-if="search && search.length < minCharacters">Use {{ minCharacters }} or more characters to search</div>
-            <ContentThing v-for="player in filteredPlayers" :key="player.id"
-                          :text="player.name" :thing="player" type="player" />
+            <div class="search-helper default-thing" v-if="search && search.length < minCharacters && !overrideMinCharacters">Use {{ minCharacters }} or more characters to search</div>
+            <ContentThing v-for="player in filteredPlayers" :key="player.id" :text="player.name" :thing="player" type="player" />
         </div>
     </div>
 </template>
@@ -28,7 +27,8 @@ export default {
     components: { ContentThing, LoadingIcon },
     data: () => ({
         search: null,
-        minCharacters: 3
+        minCharacters: 3,
+        overrideMinCharacters: false
     }),
     computed: {
         players() {
@@ -45,10 +45,20 @@ export default {
         },
         filteredPlayers() {
             if (!this.search || this.search.length === 0) return this.players;
-            if (this.search.length < this.minCharacters) return [];
+            if (this.search.length < this.minCharacters && !this.overrideMinCharacters) return [];
             return searchInCollection(this.players, this.search, "name");
         }
     },
+    watch: {
+        search() {
+            if (!this.search) this.overrideMinCharacters = false;
+        }
+    },
+    methods: {
+        override() {
+            this.overrideMinCharacters = true;
+        }
+    },
     metaInfo() {
         return {
             title: "Players"