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" />
|
2019-11-21 21:44:51 +00:00
|
|
|
|
|
|
|
<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-12-13 07:07:15 +00:00
|
|
|
<list-add-modal ref="listAddModal" />
|
2019-11-21 22:06:14 +00:00
|
|
|
<game-modal />
|
2019-11-21 22:56:26 +00:00
|
|
|
<game-tags-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:56:26 +00:00
|
|
|
import GameTagsModal from '@/components/GameBoard/GameTagsModal';
|
2019-11-21 22:06:14 +00:00
|
|
|
import GameModal from '@/components/GameBoard/GameModal';
|
2019-05-17 05:37:58 +00:00
|
|
|
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-25 06:33:15 +00:00
|
|
|
|
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:56:26 +00:00
|
|
|
GameTagsModal,
|
2019-11-21 22:06:14 +00:00
|
|
|
GameModal,
|
2019-11-08 19:56:03 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
dragging: false,
|
|
|
|
draggingId: null,
|
|
|
|
loading: false,
|
|
|
|
gameData: null,
|
|
|
|
gameDetailListIndex: null,
|
|
|
|
queryLimit: 500,
|
|
|
|
};
|
|
|
|
},
|
|
|
|
|
|
|
|
computed: {
|
2019-11-21 21:44:51 +00:00
|
|
|
...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
|
|
|
|
2019-12-13 07:07:15 +00:00
|
|
|
const hasLists = this.list && this.list.length;
|
|
|
|
|
|
|
|
if (!hasLists && flattenedList.length === 0) {
|
2019-12-13 17:26:26 +00:00
|
|
|
this.$refs.listAddModal.$refs.addList.click();
|
2019-12-13 07:07:15 +00:00
|
|
|
}
|
|
|
|
|
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>
|