2
0
Fork 0
mirror of https://github.com/romancm/gamebrary synced 2024-12-27 03:23:08 +00:00
gamebrary/src/pages/Board.vue

134 lines
2.7 KiB
Vue
Raw Normal View History

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" />
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
<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';
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-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: {
...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
if (lists.length === 0) {
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-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>