Skirda/LiveAtlas
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move player search into PlayerList

Browse Source
This commit is contained in:
James Lyne 2022-01-13 11:51:06 +00:00
parent 763b4d907e
commit 9bed746ccc
2 changed files with 71 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
src/components/list/PlayerList.vue
View File

@ -15,16 +15,22 @@
-->
<template>
<RadioList v-if="players.length">
<PlayerListItem v-for="player in players" :key="player.name" :player="player"></PlayerListItem>
<input v-if="filteredPlayers && search" id="players__search" type="text" name="search"
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>

53
src/components/sidebar/PlayersSection.vue
View File

@ -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"
v-model="searchQuery" :placeholder="messagePlayersSearchPlaceholder" @keydown="onKeydown">
<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>
<PlayerList :players="players" :search="searchEnabled" aria-labelledby="players-heading">
</PlayerList>
</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(() => {
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();
};
maxPlayers = computed(() => store.state.maxPlayers || 0);
return {
messageHeading,
messageSkeletonPlayers,
messageSkeletonPlayersSearch,
messagePlayersSearchPlaceholder,
searchEnabled,
searchQuery,
players,
filteredPlayers,
maxPlayers,
onKeydown
maxPlayers
}
}
});
</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>