gamebrary/src/pages/GameBoard/GameBoard.vue

226 lines
6.2 KiB
Vue
Raw Normal View History

2018-10-19 05:15:28 +00:00
<template lang="html">
<div
class="lists"
ref="lists"
2019-01-12 05:33:01 +00:00
:class="{ dark: darkModeEnabled }"
2018-10-19 05:15:28 +00:00
>
2019-01-11 20:20:21 +00:00
<game-board-placeholder v-if="loading" />
2018-11-27 06:45:37 +00:00
2018-12-19 16:30:22 +00:00
<template>
2018-11-17 22:21:50 +00:00
<list
:name="list.name"
:games="list.games"
:listIndex="listIndex"
:key="`${list.name}-${listIndex}`"
2019-01-11 20:20:21 +00:00
v-if="list && !loading"
2018-11-17 22:21:50 +00:00
v-for="(list, listIndex) in gameLists[platform.code]"
@end="dragEnd"
@remove="tryDelete(listIndex)"
/>
<onboard v-if="!list" />
<list-options
@update="updateLists"
2018-11-17 22:21:50 +00:00
@scroll="scroll"
/>
</template>
2018-10-19 05:15:28 +00:00
</div>
</template>
<script>
import ListOptions from '@/components/Lists/ListOptions';
2019-01-11 20:20:21 +00:00
import GameBoardPlaceholder from '@/components/GameBoard/GameBoardPlaceholder';
import Onboard from '@/components/GameBoard/Onboard';
2018-12-19 16:30:22 +00:00
import Panel from '@/components/Panel/Panel';
import { $error, swal } from '@/shared/modals';
2018-10-19 05:15:28 +00:00
import List from '@/components/GameBoard/List';
import draggable from 'vuedraggable';
2018-12-21 21:52:11 +00:00
import { mapState, mapGetters } from 'vuex';
import firebase from 'firebase/app';
import 'firebase/firestore';
2018-10-19 05:15:28 +00:00
const db = firebase.firestore();
db.settings({
timestampsInSnapshots: true,
});
2018-10-19 05:15:28 +00:00
export default {
components: {
draggable,
List,
ListOptions,
2019-01-11 20:20:21 +00:00
GameBoardPlaceholder,
Onboard,
2018-12-19 16:30:22 +00:00
Panel,
2018-10-19 05:15:28 +00:00
},
data() {
return {
dragging: false,
draggingId: null,
2018-11-17 22:21:50 +00:00
loading: false,
2018-10-19 05:15:28 +00:00
gameData: null,
activeList: null,
showDeleteConfirm: false,
listDraggableOptions: {
animation: 500,
handle: '.list-drag-handle',
group: { name: 'lists' },
draggable: '.list',
ghostClass: 'list-placeholder',
},
};
},
computed: {
2018-12-21 21:52:11 +00:00
...mapState(['user', 'gameLists', 'platform']),
...mapGetters(['darkModeEnabled']),
2018-10-19 05:15:28 +00:00
list() {
2018-12-19 16:30:22 +00:00
return this.gameLists && this.gameLists[this.platform.code]
? this.gameLists[this.platform.code]
: null;
2018-10-19 05:15:28 +00:00
},
},
mounted() {
this.loadGameData();
2018-11-05 02:27:14 +00:00
document.title = `${this.platform.name} - Gamebrary`;
2018-10-19 05:15:28 +00:00
},
methods: {
scroll() {
this.$nextTick(() => {
const lists = this.$refs.lists;
lists.scrollLeft = lists.scrollWidth;
});
},
tryDelete(index) {
const hasGames = this.list[index].games.length > 0;
2018-10-19 05:15:28 +00:00
if (hasGames) {
this.showDeleteConfirm = true;
this.activeList = index;
2018-11-21 02:39:49 +00:00
swal({
2018-10-19 05:15:28 +00:00
title: 'Are you sure?',
text: 'This lists contains games, all games will be deleted as well.',
showCancelButton: true,
buttonsStyling: false,
confirmButtonClass: 'primary small',
cancelButtonClass: 'small',
confirmButtonText: 'Delete',
}).then(({ value }) => {
if (value) {
this.deleteList(this.activeList);
}
});
} else {
this.deleteList(index);
}
},
deleteList(index) {
this.$store.commit('REMOVE_LIST', index);
this.updateLists();
this.$bus.$emit('TOAST', { message: 'List deleted' });
2018-10-19 05:15:28 +00:00
},
dragEnd() {
this.dragging = false;
this.draggingId = null;
this.$bus.$emit('TOAST', { message: 'Collection updated' });
2018-10-19 05:15:28 +00:00
this.updateLists();
},
updateLists(force) {
db.collection('lists').doc(this.user.uid).set(this.gameLists, { merge: !force })
.catch(() => {
2018-11-21 02:39:49 +00:00
$error('Authentication error');
2018-10-19 05:15:28 +00:00
});
},
loadGameData() {
if (this.list) {
const gameList = [];
this.list.forEach((list) => {
if (list && list.games.length) {
list.games.forEach((id) => {
if (!gameList.includes(id)) {
gameList.push(id);
}
});
}
});
if (gameList.length > 0) {
2018-11-17 22:21:50 +00:00
this.loading = true;
this.$store.dispatch('LOAD_GAMES', gameList)
.catch(() => {
2018-11-21 02:39:49 +00:00
swal({
title: 'Uh no!',
text: 'There was an error loading your game data',
type: 'error',
showCancelButton: true,
confirmButtonClass: 'primary',
confirmButtonText: 'Retry',
}).then(({ value }) => {
if (value) {
this.loadGameData();
}
});
2018-11-17 22:21:50 +00:00
})
.finally(() => {
this.loading = false;
});
}
}
2018-10-19 05:15:28 +00:00
},
},
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
@import "~styles/styles.scss";
.draggable * {
color: $color-white;
}
2018-12-19 16:30:22 +00:00
.panel {
margin-right: $gp;
2019-01-11 20:20:21 +00:00
width: $list-width;
2018-12-19 16:30:22 +00:00
}
2018-10-29 23:53:49 +00:00
.lists {
2018-11-17 22:21:50 +00:00
user-select: none;
2018-10-29 23:53:49 +00:00
display: flex;
align-items: flex-start;
height: calc(100vh - 48px);
padding: $gp;
box-sizing: border-box;
background: $color-gray;
overflow-x: auto;
overflow-x: overlay;
display: flex;
2018-11-02 01:42:43 +00:00
&.dark {
background: #222 !important;
}
2018-10-29 23:53:49 +00:00
&.empty {
background: $color-white;
2018-10-19 05:15:28 +00:00
}
}
2018-10-29 23:53:49 +00:00
.list-placeholder {
opacity: 0.25;
}
2018-10-19 05:15:28 +00:00
</style>