Add remove filter button

src/views/PlayerView.vue

@@ -11,25 +11,36 @@
       <option></option>
       <option v-for="weaponId in sortedWeaponList" v-bind:key="weaponId" :value="weaponId">{{ weaponId }}</option>
     </select> -->
-
+    <span class="multiselect-wrapper">
       <VueMultiselect selectLabel="" deselectLabel="remove" placeholder="Select server" v-model="model.server"
-      :options="groupedServers" group-values="servers" group_label="id" :group-select="false" :allow-empty="true" :multiple="false" :custom-label="((e:any) => e.name)" track-by="name" label="name"
+        :options="groupedServers" group-values="servers" group_label="id" :group-select="false" :allow-empty="true"
-      ></VueMultiselect>
+        :multiple="false" :custom-label="((e: any) => e.name)" track-by="name" label="name">
+      </VueMultiselect>
+      <button @click="model.server = undefined">X</button>
+    </span>
 
-    <VueMultiselect selectLabel="" deselectLabel="remove" placeholder="Select weapon" v-model="model.weapon" :custom-label="((e:any) => weaponLocale[e] || e)"
+    <span class="multiselect-wrapper">
-      :options="sortedWeaponList" :allow-empty="true"
+      <VueMultiselect selectLabel="" deselectLabel="remove" placeholder="Select weapon" v-model="model.weapon"
-      ></VueMultiselect>
+        :custom-label="((e: any) => weaponLocale[e] || e)" :options="sortedWeaponList" :allow-empty="true">
+      </VueMultiselect>
+      <button @click="model.weapon = undefined">X</button>
+    </span>
 
-    <VueMultiselect :options-limit="20" selectLabel="" deselectLabel="remove" placeholder="Search player" v-model="playerHighlighted"
+    <span class="multiselect-wrapper">
-      :options="sortedPlayerList" :allow-empty="true" :custom-label="((e:Player) => e?.username)"></VueMultiselect>
+      <VueMultiselect :options-limit="20" selectLabel="" deselectLabel="remove" placeholder="Search player"
+        v-model="playerHighlighted" :options="sortedPlayerList" :allow-empty="true"
+        :custom-label="((e: Player) => e?.username)"></VueMultiselect>
+      <button @click="playerHighlighted = undefined">X</button>
+    </span>
   </div>
 
   <div id="playerView">
-    <PlayerList :filters="filters" v-on:highlightPlayer="highlight_player"
+    <PlayerList :filters="filters" v-on:highlightPlayer="highlight_player" :playerHighlighted="playerHighlighted?.id">
-      :playerHighlighted="playerHighlighted?.id"></PlayerList>
+    </PlayerList>
-    <PlayerChart :filters="filters" v-on:highlightPlayer="highlight_player"
+    <PlayerChart :filters="filters" v-on:highlightPlayer="highlight_player" :playerHighlighted="playerHighlighted?.id">
-      :playerHighlighted="playerHighlighted?.id"></PlayerChart>
+    </PlayerChart>
-    <WeaponChart :filters="{player: playerHighlighted?.id, ...filters}" :playerHighlighted="playerHighlighted?.id"></WeaponChart>
+    <WeaponChart :filters="{ player: playerHighlighted?.id, ...filters }" :playerHighlighted="playerHighlighted?.id">
+    </WeaponChart>
   </div>
 </template>
 
@@ -51,7 +62,7 @@ export default defineComponent({
 
   data () {
     return {
-      model: { server: undefined, weapon: undefined } as unknown as {weapon:Weapon | Weapon[], server: (Server& {name?:string}) | (Server& {name?:string})[]},
+      model: { server: undefined, weapon: undefined } as unknown as { weapon: Weapon | Weapon[] | undefined, server: (Server & { name?: string }) | (Server & { name?: string })[] | undefined },
       filters: {} as Filters,
       store: useKillStore(),
       playerHighlighted: undefined as (Player & { id: string }) | undefined,