Mirrors/gamebrary
2
0
Fork 0
mirror of https://github.com/romancm/gamebrary synced 2024-12-01 07:19:14 +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 -->
<template lang="html">
<div class="platform-picker">
<b-button
v-b-modal.platforms
:variant="value.length ? 'success' : 'warning'"
<b-list-group class="platforms mb-3">
<b-list-group-item
v-for="platform in filteredPlatforms"
:key="platform.id"
button
:active="value.includes(platform.id)"
@click="handleClick(platform.id)"
>
{{ buttonLabel }}
</b-button>
<b-img
:src="`/static/platform-logos/${platform.slug}.${platform.logoFormat}`"
:alt="platform.name"
width="40"
class="pr-2"
/>
<b-modal
id="platforms"
scrollable
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>
{{ platform.name }}
</b-list-group-item>
</b-list-group>
</template>
<script>
import { mapState } from 'vuex';
import { mapState, mapGetters } from 'vuex';
export default {
props: {
@ -53,6 +30,7 @@ export default {
computed: {
...mapState(['platforms']),
...mapGetters(['filteredPlatforms']),
buttonLabel() {
return this.value.length
@ -84,7 +62,9 @@ export default {
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.dropdown {
.platforms {
max-height: 50vh;
overflow: scroll;
overflow-x: hidden;
}
</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';
export default {
@ -6,31 +6,34 @@ export default {
sortedBoards: ({ boards }) => orderby(boards, 'name'),
filteredPlatforms: (state) => {
const filterField = state.settings && state.settings.platformsFilterField
? state.settings.platformsFilterField
: null;
// const filterField = state.settings && state.settings.platformsFilterField
// ? state.settings.platformsFilterField
// : null;
const sortField = state.settings && state.settings.platformsSortField
? state.settings.platformsSortField
: 'generation';
// const sortField = state.settings && state.settings.platformsSortField
// ? state.settings.platformsSortField
// : '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') {
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);
const sortedPlatforms = orderby(filteredPlatforms, sortField);
return sortedPlatforms.reverse();
const reverseOrder = ['releaseYear', 'generation'].includes(sortField);
return reverseOrder
? sortedPlatforms.reverse()
: sortedPlatforms;
// const reverseOrder = ['releaseYear', 'generation'].includes(sortField);
//
// return reverseOrder
// ? sortedPlatforms.reverse()
// : sortedPlatforms;
},
platformNames: (state) => {