gamebrary/src/pages/GameBoard.vue

150 lines
3.3 KiB
Vue
Raw Normal View History

2018-10-19 05:15:28 +00:00
<template lang="html">
2019-11-21 21:47:58 +00:00
<div v-if="loaded" class="game-board" >
2019-11-21 22:06:14 +00:00
<game-board-placeholder v-if="loading" />
<list
v-for="(list, listIndex) in gameLists[platform.code]"
v-if="list && !loading"
:name="list.name"
:game-list="list.games"
:list-index="listIndex"
:key="`${list.name}-${listIndex}`"
@end="dragEnd"
/>
2019-11-08 20:34:06 +00:00
2019-11-21 22:10:52 +00:00
<list-add-modal />
2019-11-21 22:06:14 +00:00
<game-modal />
<apply-tag-modal />
2019-11-08 20:34:06 +00:00
</div>
2018-10-19 05:15:28 +00:00
</template>
<script>
2019-01-11 20:20:21 +00:00
import GameBoardPlaceholder from '@/components/GameBoard/GameBoardPlaceholder';
2019-11-21 22:10:52 +00:00
import ListAddModal from '@/components/GameBoard/ListAddModal';
2019-11-21 22:06:14 +00:00
import ApplyTagModal from '@/components/GameBoard/ApplyTagModal';
import GameModal from '@/components/GameBoard/GameModal';
import List from '@/components/Lists/List';
2019-10-09 16:30:07 +00:00
import { chunk } from 'lodash';
import { mapState } from 'vuex';
2018-10-19 05:15:28 +00:00
import draggable from 'vuedraggable';
2018-10-19 05:15:28 +00:00
export default {
2019-11-08 19:56:03 +00:00
components: {
draggable,
List,
GameBoardPlaceholder,
2019-11-21 22:10:52 +00:00
ListAddModal,
2019-11-21 22:06:14 +00:00
ApplyTagModal,
GameModal,
2019-11-08 19:56:03 +00:00
},
data() {
return {
dragging: false,
draggingId: null,
loading: false,
gameData: null,
gameDetailListIndex: null,
queryLimit: 500,
};
},
computed: {
...mapState(['user', 'gameLists', 'platform', 'games']),
2019-11-08 19:56:03 +00:00
list() {
return this.gameLists && this.platform && this.gameLists[this.platform.code]
? this.gameLists[this.platform.code]
: null;
2018-10-19 05:15:28 +00:00
},
2019-11-21 21:47:58 +00:00
loaded() {
return this.user && this.platform;
2019-11-21 21:50:10 +00:00
},
2019-11-08 19:56:03 +00:00
},
2018-10-19 05:15:28 +00:00
2019-11-08 19:56:03 +00:00
mounted() {
if (!this.platform) {
this.$router.push({ name: 'platforms' });
return;
}
this.load();
},
methods: {
2018-10-19 05:15:28 +00:00
2019-11-08 19:56:03 +00:00
dragEnd() {
this.dragging = false;
this.draggingId = null;
this.updateLists();
},
updateLists() {
2019-11-14 21:10:10 +00:00
this.$store
.dispatch('SAVE_LIST', this.gameLists)
2019-11-08 19:56:03 +00:00
.then(() => {
this.$bus.$emit('TOAST', { message: 'List updated' });
})
.catch(() => {
this.$bus.$emit('TOAST', { message: 'Authentication error', type: 'error' });
this.$router.push({ name: 'sessionExpired' });
});
},
load() {
2019-11-14 21:10:10 +00:00
const flattenedList = this.list ? this.list.map(({ games }) => games).flat() : [];
2019-11-08 19:56:03 +00:00
const dedupedList = Array.from(new Set(flattenedList));
return dedupedList.length > this.queryLimit
? this.loadGamesInChunks(dedupedList)
: this.loadGames(dedupedList);
},
loadGames(gameList) {
if (gameList && gameList.length > 0) {
this.loading = true;
2019-11-14 21:10:10 +00:00
this.$store
.dispatch('LOAD_GAMES', gameList.toString())
2019-11-08 19:56:03 +00:00
.then(() => {
this.loading = false;
})
.catch(() => {
this.$bus.$emit('TOAST', { message: 'Error loading games', type: 'error' });
});
}
},
loadGamesInChunks(gameList) {
const chunkedGameList = chunk(gameList, this.queryLimit);
chunkedGameList.forEach((gameListChunk) => {
this.loadGames(gameListChunk);
});
2018-10-19 05:15:28 +00:00
},
2019-11-08 19:56:03 +00:00
},
2018-10-19 05:15:28 +00:00
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
2019-11-14 21:10:10 +00:00
@import '~styles/styles';
.game-board {
user-select: none;
display: flex;
align-items: flex-start;
height: calc(100vh - 48px);
padding: 0 $gp;
box-sizing: border-box;
overflow-x: auto;
overflow-x: overlay;
display: flex;
}
.list-placeholder {
opacity: 0.25;
}
2018-10-19 05:15:28 +00:00
</style>