Mirrors/gamebrary
2
0
Fork 0
mirror of https://github.com/romancm/gamebrary synced 2024-11-15 15:57:59 +00:00
Code Issues Projects Releases Packages Wiki Activity

platform picker filtering and sorting wip

Browse source
This commit is contained in:
Gamebrary 2021-03-10 17:05:07 -07:00
parent e7bf483681
commit aa1d231e13
2 changed files with 54 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
src/components/Board/PlatformPicker.vue
View file

@ -1,43 +1,77 @@
<!-- TODO: return filteredPlatforms getter and return sort/filters -->
<template lang="html">
<b-list-group class="platforms mb-3">
<b-list-group-item
v-for="platform in filteredPlatforms"
:key="platform.id"
:variant="value.includes(platform.id) ? 'success' : ''"
button
@click="handleClick(platform.id)"
>
<b-img
:src="`/static/platform-logos/${platform.slug}.${platform.logoFormat}`"
:alt="platform.name"
width="60"
thumbnail
class="pr-2"
/>
<div class="platform-picker">
<div class="d-flex mb-2">
<div class="filter mr-2">
<small class="d-block text-muted">Show:</small>
<b-button size="sm">All</b-button>
<b-button size="sm">Consoles</b-button>
<b-button size="sm">Handhelds</b-button>
<b-button size="sm">PC</b-button>
</div>
{{ platform.name }}
</b-list-group-item>
</b-list-group>
<div class="sort">
<small class="d-block text-muted">Sort by:</small>
<b-button size="sm">All</b-button>
<b-button size="sm">All</b-button>
<b-button size="sm">All</b-button>
</div>
</div>
<pre>{{ filteredPlatforms }}</pre>
<b-list-group class="platforms mb-3">
<b-list-group-item
v-for="platform in filteredPlatforms"
:key="platform.id"
:variant="value.includes(platform.id) ? 'success' : ''"
button
@click="handleClick(platform.id)"
>
<b-img
:src="`/static/platform-logos/${platform.slug}.${platform.logoFormat}`"
:alt="platform.name"
width="60"
thumbnail
class="pr-2"
/>
{{ platform.name }}
</b-list-group-item>
</b-list-group>
</div>
</template>
<script>
import { mapState, mapGetters } from 'vuex';
import orderby from 'lodash.orderby';
export default {
props: {
value: Array,
},
data() {
return {
// sort: ,
// filter: ,
};
},
computed: {
...mapState(['platforms', 'settings']),
...mapGetters(['filteredPlatforms', 'darkTheme']),
...mapGetters(['darkTheme']),
buttonLabel() {
return this.value.length
? this.$t('board.settings.platformLabel', { platformCount: this.value.length })
: this.$t('board.settings.platformPlaceholder');
},
filteredPlatforms() {
const sortedPlatforms = orderby(this.platforms, ['popular', 'generation']);
return sortedPlatforms.reverse();
},
},
methods: {

32
src/store/getters.js
View file

@ -4,38 +4,6 @@ import orderby from 'lodash.orderby';
export default {
darkTheme: ({ settings }) => settings && settings.theme && settings.theme === 'dark',
sortedBoards: ({ boards }) => orderby(boards, 'name'),
filteredPlatforms: (state) => {
// const filterField = state.settings && state.settings.platformsFilterField
// ? state.settings.platformsFilterField
// : null;
// const sortField = state.settings && state.settings.platformsSortField
// ? state.settings.platformsSortField
// : 'generation';
// let filteredPlatforms = [];
//
// if (filterField === 'all') {
// filteredPlatforms = state.platforms;
// } else {
// filteredPlatforms = filterField && PLATFORM_FILTER_FIELDS.includes(filterField)
// ? state.platforms.filter(({ category }) => category === filterField)
// : filteredPlatforms = state.platforms.filter(({ popular }) => popular);
// }
const sortedPlatforms = orderby(state.platforms, ['popular', 'generation']);
// const sortedPlatforms = orderby(filteredPlatforms, sortField);
return sortedPlatforms.reverse();
// const reverseOrder = ['releaseYear', 'generation'].includes(sortField);
//
// return reverseOrder
// ? sortedPlatforms.reverse()
// : sortedPlatforms;
},
activeGameCoverUrl: ({ activeGame, games }) => {
const gameId = activeGame && activeGame.gameId;
const game = games[gameId];