Mirrors/gamebrary
2
0
Fork 0
mirror of https://github.com/romancm/gamebrary synced 2025-03-01 21:27:08 +00:00
Code Issues Projects Releases Packages Wiki Activity

sort platforms

Browse source
This commit is contained in:
Gamebrary 2020-11-23 16:15:43 -07:00
parent 04e6598113
commit efa37a6420
2 changed files with 45 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,50 +1,27 @@
<!-- TODO: return filteredPlatforms getter and return sort/filters --> <!-- TODO: return filteredPlatforms getter and return sort/filters -->
<template lang="html"> <template lang="html">
<div class="platform-picker"> <b-list-group class="platforms mb-3">
<b-button <b-list-group-item
v-b-modal.platforms v-for="platform in filteredPlatforms"
:variant="value.length ? 'success' : 'warning'" :key="platform.id"
button
:active="value.includes(platform.id)"
@click="handleClick(platform.id)"
> >
{{ buttonLabel }} <b-img
</b-button> :src="`/static/platform-logos/${platform.slug}.${platform.logoFormat}`"
:alt="platform.name"
width="40"
class="pr-2"
/>
<b-modal {{ platform.name }}
id="platforms" </b-list-group-item>
scrollable </b-list-group>
hide-footer
>
<template v-slot:modal-header="{ close }">
<modal-header
title="Board Platforms"
subtitle="Game search will be limited to the platforms selected."
@close="close"
/>
</template>
<b-list-group>
<b-list-group-item
v-for="platform in platforms"
:key="platform.id"
button
:active="value.includes(platform.id)"
@click="handleClick(platform.id)"
>
<b-img
:src="`/static/platform-logos/${platform.slug}.${platform.logoFormat}`"
:alt="platform.name"
width="40"
class="pr-2"
/>
{{ platform.name }}
</b-list-group-item>
</b-list-group>
</b-modal>
</div>
</template> </template>
<script> <script>
import { mapState } from 'vuex'; import { mapState, mapGetters } from 'vuex';
export default { export default {
props: { props: {
@ -53,6 +30,7 @@ export default {
computed: { computed: {
...mapState(['platforms']), ...mapState(['platforms']),
...mapGetters(['filteredPlatforms']),
buttonLabel() { buttonLabel() {
return this.value.length return this.value.length
@ -84,7 +62,9 @@ export default {
</script> </script>
<style lang="scss" rel="stylesheet/scss" scoped> <style lang="scss" rel="stylesheet/scss" scoped>
.dropdown { .platforms {
max-height: 50vh; max-height: 50vh;
overflow: scroll;
overflow-x: hidden;
} }
</style> </style>

45
src/store/getters.js
View file

@ -1,4 +1,4 @@
import { PLATFORM_FILTER_FIELDS } from '@/constants'; // import { PLATFORM_FILTER_FIELDS } from '@/constants';
import orderby from 'lodash.orderby'; import orderby from 'lodash.orderby';
export default { export default {
@ -6,31 +6,34 @@ export default {
sortedBoards: ({ boards }) => orderby(boards, 'name'), sortedBoards: ({ boards }) => orderby(boards, 'name'),
filteredPlatforms: (state) => { filteredPlatforms: (state) => {
const filterField = state.settings && state.settings.platformsFilterField // const filterField = state.settings && state.settings.platformsFilterField
? state.settings.platformsFilterField // ? state.settings.platformsFilterField
: null; // : null;
const sortField = state.settings && state.settings.platformsSortField // const sortField = state.settings && state.settings.platformsSortField
? state.settings.platformsSortField // ? state.settings.platformsSortField
: 'generation'; // : 'generation';
let filteredPlatforms = []; // 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);
// }
if (filterField === 'all') { const sortedPlatforms = orderby(state.platforms, ['popular', 'generation']);
filteredPlatforms = state.platforms; // const sortedPlatforms = orderby(filteredPlatforms, sortField);
} else {
filteredPlatforms = filterField && PLATFORM_FILTER_FIELDS.includes(filterField)
? state.platforms.filter(({ category }) => category === filterField)
: filteredPlatforms = state.platforms.filter(({ popular }) => popular);
}
const sortedPlatforms = orderby(filteredPlatforms, sortField); return sortedPlatforms.reverse();
const reverseOrder = ['releaseYear', 'generation'].includes(sortField); // const reverseOrder = ['releaseYear', 'generation'].includes(sortField);
//
return reverseOrder // return reverseOrder
? sortedPlatforms.reverse() // ? sortedPlatforms.reverse()
: sortedPlatforms; // : sortedPlatforms;
}, },
platformNames: (state) => { platformNames: (state) => {