2018-10-19 05:15:28 +00:00
|
|
|
<template lang="html">
|
2020-08-18 18:56:10 +00:00
|
|
|
<div class="board" :class="{ dragging }" >
|
2020-08-15 00:00:55 +00:00
|
|
|
<board-placeholder v-if="loading" />
|
2019-11-21 21:44:51 +00:00
|
|
|
|
2020-08-18 18:56:10 +00:00
|
|
|
<template v-else>
|
|
|
|
<list
|
2020-08-21 06:49:49 +00:00
|
|
|
v-for="(list, listIndex) in board.lists"
|
2020-08-21 06:13:45 +00:00
|
|
|
:list="list"
|
2020-08-21 06:49:49 +00:00
|
|
|
:listIndex="listIndex"
|
2020-08-21 06:13:45 +00:00
|
|
|
:key="list.name"
|
2020-08-18 18:56:10 +00:00
|
|
|
/>
|
|
|
|
</template>
|
2019-11-08 20:34:06 +00:00
|
|
|
|
2020-08-15 06:52:35 +00:00
|
|
|
<add-list />
|
2019-11-21 22:06:14 +00:00
|
|
|
<game-modal />
|
2019-11-08 20:34:06 +00:00
|
|
|
</div>
|
2018-10-19 05:15:28 +00:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2020-08-15 00:00:55 +00:00
|
|
|
import BoardPlaceholder from '@/components/Board/BoardPlaceholder';
|
|
|
|
import AddList from '@/components/Board/AddList';
|
2020-08-18 18:56:10 +00:00
|
|
|
import GameModal from '@/components/Game/GameModal';
|
2019-05-17 05:37:58 +00:00
|
|
|
import List from '@/components/Lists/List';
|
2020-08-21 06:13:45 +00:00
|
|
|
import chunk from 'lodash.chunk';
|
2019-10-09 16:30:07 +00:00
|
|
|
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,
|
2020-08-15 00:00:55 +00:00
|
|
|
BoardPlaceholder,
|
2020-08-11 04:16:43 +00:00
|
|
|
AddList,
|
2019-11-21 22:06:14 +00:00
|
|
|
GameModal,
|
2019-11-08 19:56:03 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
data() {
|
|
|
|
return {
|
2020-08-18 18:56:10 +00:00
|
|
|
loading: true,
|
2019-11-08 19:56:03 +00:00
|
|
|
gameData: null,
|
|
|
|
gameDetailListIndex: null,
|
|
|
|
queryLimit: 500,
|
|
|
|
};
|
|
|
|
},
|
|
|
|
|
|
|
|
computed: {
|
2020-08-22 18:59:27 +00:00
|
|
|
...mapState(['user', 'dragging', 'board']),
|
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() {
|
2020-08-18 18:56:10 +00:00
|
|
|
this.load();
|
2019-11-08 19:56:03 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
methods: {
|
2020-08-18 18:56:10 +00:00
|
|
|
load() {
|
|
|
|
// TODO: handle loading public board
|
|
|
|
if (this.$route.params.id && this.user) {
|
|
|
|
this.loadBoard(this.$route.params.id);
|
|
|
|
} else {
|
|
|
|
this.$router.push({ name: 'dashboard' });
|
|
|
|
}
|
2019-11-08 19:56:03 +00:00
|
|
|
},
|
|
|
|
|
2020-08-18 18:56:10 +00:00
|
|
|
async loadBoard(id) {
|
|
|
|
this.loading = true;
|
|
|
|
|
|
|
|
await this.$store.dispatch('LOAD_BOARD', id)
|
|
|
|
.catch(() => {
|
|
|
|
this.$router.replace({ path: '/' });
|
|
|
|
});
|
|
|
|
|
|
|
|
this.loadBoardGames();
|
|
|
|
},
|
2019-11-08 19:56:03 +00:00
|
|
|
|
2020-08-18 18:56:10 +00:00
|
|
|
loadBoardGames() {
|
|
|
|
const { lists } = this.board;
|
2019-12-13 07:07:15 +00:00
|
|
|
|
2020-08-18 21:35:32 +00:00
|
|
|
if (lists.length === 0) {
|
2020-08-22 18:58:44 +00:00
|
|
|
this.$bvModal.show('add-list');
|
2019-12-13 07:07:15 +00:00
|
|
|
}
|
|
|
|
|
2020-08-21 06:13:45 +00:00
|
|
|
const boardGames = Array.from(new Set(lists.map(({ games }) => games).flat()));
|
2019-11-08 19:56:03 +00:00
|
|
|
|
2020-08-21 06:13:45 +00:00
|
|
|
if (boardGames.length === 0) {
|
|
|
|
this.loading = false;
|
2020-08-18 18:56:10 +00:00
|
|
|
|
2020-08-21 06:13:45 +00:00
|
|
|
return boardGames;
|
|
|
|
}
|
2020-08-18 21:35:32 +00:00
|
|
|
|
2020-08-21 06:13:45 +00:00
|
|
|
return boardGames.length > this.queryLimit
|
|
|
|
? this.loadGamesInChunks(boardGames)
|
|
|
|
: this.loadGames(boardGames);
|
2019-11-08 19:56:03 +00:00
|
|
|
},
|
|
|
|
|
2020-08-21 06:13:45 +00:00
|
|
|
async loadGames(gameList) {
|
|
|
|
this.loading = true;
|
|
|
|
|
|
|
|
await this.$store.dispatch('LOAD_BOARD_GAMES', gameList.toString())
|
|
|
|
.catch(() => {
|
|
|
|
this.$bvToast.toast('Error loading games', { title: 'Error', variant: 'error' });
|
|
|
|
});
|
|
|
|
|
|
|
|
this.loading = false;
|
2019-11-08 19:56:03 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
loadGamesInChunks(gameList) {
|
2020-08-21 06:13:45 +00:00
|
|
|
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>
|
2020-08-15 00:00:55 +00:00
|
|
|
.board {
|
2019-11-14 21:10:10 +00:00
|
|
|
user-select: none;
|
|
|
|
display: flex;
|
|
|
|
align-items: flex-start;
|
2020-08-15 00:00:55 +00:00
|
|
|
height: calc(100vh - 58px);
|
2020-07-22 20:44:48 +00:00
|
|
|
padding: 0 1rem;
|
2019-11-14 21:10:10 +00:00
|
|
|
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>
|