Move player search into PlayerList

src/components/list/PlayerList.vue

@@ -15,16 +15,22 @@
   -->
 
 <template>
-	<RadioList v-if="players.length">
+	<input v-if="filteredPlayers && search" id="players__search" type="text" name="search"
-		<PlayerListItem v-for="player in players" :key="player.name" :player="player"></PlayerListItem>
+			       v-model="searchQuery" :placeholder="messagePlayersSearchPlaceholder" @keydown="onKeydown">
+	<RadioList v-if="filteredPlayers.length" :aria-labelledby="ariaLabelledby">
+		<PlayerListItem v-for="player in filteredPlayers" :key="player.name" :player="player"></PlayerListItem>
 	</RadioList>
+	<div v-else-if="searchQuery" class="section__skeleton">{{ messageSkeletonPlayersSearch }}</div>
+	<div v-else class="section__skeleton">{{ messageSkeletonPlayers }}</div>
 </template>
 
 <script lang="ts">
 import PlayerListItem from "./PlayerListItem.vue";
-import {defineComponent} from "@vue/runtime-core";
+import {computed, defineComponent} from "@vue/runtime-core";
 import RadioList from "@/components/util/RadioList.vue";
 import {LiveAtlasPlayer} from "@/index";
+import {useStore} from "@/store";
+import {ref} from "vue";
 
 export default defineComponent({
 	components: {
@@ -32,10 +38,68 @@ export default defineComponent({
 		PlayerListItem
 	},
 	props: {
+		search: {
+			type: Boolean,
+			default: true,
+		},
 		players: {
 			type: Object as () => LiveAtlasPlayer[],
 			required: true,
+		},
+		ariaLabelledby: {
+			type: String,
+			default: '',
+		}
+	},
+
+	setup(props) {
+		const store = useStore(),
+			messageSkeletonPlayers = computed(() => store.state.messages.playersSkeleton),
+			messageSkeletonPlayersSearch = computed(() => store.state.messages.playersSearchSkeleton),
+			messagePlayersSearchPlaceholder = computed(() => store.state.messages.playersSearchPlaceholder),
+
+			searchQuery = ref(""),
+
+			filteredPlayers = computed(() => {
+				const query = searchQuery.value.toLowerCase();
+
+				return query ? props.players.filter(p => {
+					return p.name.toLowerCase().indexOf(query) > -1;
+				}) : props.players;
+			}),
+
+			onKeydown = (e: KeyboardEvent) => {
+				e.stopImmediatePropagation();
+			};
+
+		return {
+			messageSkeletonPlayers,
+			messageSkeletonPlayersSearch,
+			messagePlayersSearchPlaceholder,
+
+			searchQuery,
+
+			filteredPlayers,
+			onKeydown
 		}
 	}
 });
 </script>
+
+<style lang="scss" scoped>
+	.players {
+		#players__search {
+			margin-bottom: 1.5rem;
+			padding: 0.5rem 1rem;
+			box-sizing: border-box;
+			width: 100%;
+			position: sticky;
+			top: 4.8rem;
+			z-index: 3;
+
+			& + .section__skeleton {
+				margin-top: 0;
+			}
+		}
+	}
+</style>

src/components/sidebar/PlayersSection.vue

@@ -18,11 +18,8 @@
 	<SidebarSection name="players" class="players">
 		<template v-slot:heading>{{ messageHeading }}</template>
 		<template v-slot:default>
-			<input v-if="players && searchEnabled" id="players__search" type="text" name="search"
+			<PlayerList :players="players" :search="searchEnabled" aria-labelledby="players-heading">
-			       v-model="searchQuery" :placeholder="messagePlayersSearchPlaceholder" @keydown="onKeydown">
+			</PlayerList>
-			<PlayerList v-if="filteredPlayers.length" :players="filteredPlayers" aria-labelledby="players-heading"></PlayerList>
-			<div v-else-if="searchQuery" class="section__skeleton">{{ messageSkeletonPlayersSearch }}</div>
-			<div v-else class="section__skeleton">{{ messageSkeletonPlayers }}</div>
 		</template>
 	</SidebarSection>
 </template>
@@ -30,7 +27,6 @@
 <script lang="ts">
 import {computed, defineComponent} from "@vue/runtime-core";
 import {useStore} from "@/store";
-import {ref} from "vue";
 import SidebarSection from "@/components/sidebar/SidebarSection.vue";
 import PlayerList from "@/components/list/PlayerList.vue";
 
@@ -43,59 +39,18 @@ export default defineComponent({
 	setup() {
 		const store = useStore(),
 			messageHeading = computed(() => store.getters.playersHeading),
-			messageSkeletonPlayers = computed(() => store.state.messages.playersSkeleton),
-			messageSkeletonPlayersSearch = computed(() => store.state.messages.playersSearchSkeleton),
-			messagePlayersSearchPlaceholder = computed(() => store.state.messages.playersSearchPlaceholder),
 
 			searchEnabled = computed(() => store.state.ui.playersSearch),
-			searchQuery = ref(""),
 
 			players = computed(() => store.state.sortedPlayers),
-			filteredPlayers = computed(() => {
+			maxPlayers = computed(() => store.state.maxPlayers || 0);
-				const query = searchQuery.value.toLowerCase();
-
-				return query ? store.state.sortedPlayers.filter(p => {
-					return p.name.toLowerCase().indexOf(query) > -1;
-				}) : store.state.sortedPlayers;
-			}),
-			maxPlayers = computed(() => store.state.maxPlayers || 0),
-
-			onKeydown = (e: KeyboardEvent) => {
-				e.stopImmediatePropagation();
-			};
 
 		return {
 			messageHeading,
-			messageSkeletonPlayers,
-			messageSkeletonPlayersSearch,
-			messagePlayersSearchPlaceholder,
-
 			searchEnabled,
-			searchQuery,
-
 			players,
-			filteredPlayers,
+			maxPlayers
-			maxPlayers,
-			onKeydown
 		}
 	}
 });
 </script>
-
-<style lang="scss" scoped>
-	.players {
-		#players__search {
-			margin-bottom: 1.5rem;
-			padding: 0.5rem 1rem;
-			box-sizing: border-box;
-			width: 100%;
-			position: sticky;
-			top: 4.8rem;
-			z-index: 3;
-
-			& + .section__skeleton {
-				margin-top: 0;
-			}
-		}
-	}
-</style>