gamebrary/src/pages/GameBoard/GameBoard.vue

223 lines
5.8 KiB
Vue
Raw Normal View History

2018-10-19 05:15:28 +00:00
<template lang="html">
<div
class="lists"
ref="lists"
@dragscrollstart="dragScrollActive = true"
@dragscrollend="dragScrollActive = false"
2018-11-02 01:42:43 +00:00
:class="{ dark: settings.nightMode, 'drag-scroll-active': dragScrollActive }"
2018-10-19 05:15:28 +00:00
v-dragscroll:nochilddrag
>
<list
:name="list.name"
:games="list.games"
:listIndex="listIndex"
2018-11-02 01:42:43 +00:00
:key="`${list.name}-${listIndex}`"
2018-10-19 05:15:28 +00:00
v-if="list"
v-for="(list, listIndex) in gameLists[platform.code]"
2018-10-19 05:15:28 +00:00
@end="dragEnd"
@remove="tryDelete(listIndex)"
/>
<add-list
@update="updateLists()"
2018-10-19 05:15:28 +00:00
@scroll="scroll"
/>
</div>
</template>
<script>
import { dragscroll } from 'vue-dragscroll';
import AddList from '@/components/Lists/AddList';
import toasts from '@/mixins/toasts';
import List from '@/components/GameBoard/List';
import draggable from 'vuedraggable';
import { mapState } 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,
AddList,
},
directives: {
dragscroll,
},
mixins: [toasts],
data() {
return {
dragging: false,
draggingId: null,
gameData: null,
activeList: null,
showDeleteConfirm: false,
dragScrollActive: false,
listDraggableOptions: {
animation: 500,
handle: '.list-drag-handle',
group: { name: 'lists' },
draggable: '.list',
ghostClass: 'list-placeholder',
},
};
},
computed: {
2018-11-02 01:42:43 +00:00
...mapState(['user', 'gameLists', 'platform', 'settings']),
2018-10-19 05:15:28 +00:00
list() {
return this.gameLists[this.platform.code];
2018-10-19 05:15:28 +00:00
},
nightMode() {
return this.user && this.user.settings ? this.user.settings.nightMode : false;
},
},
mounted() {
this.loadGameData();
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;
this.$swal({
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.$success('List deleted');
},
dragEnd() {
this.dragging = false;
this.draggingId = null;
this.updateLists();
},
updateLists() {
db.collection('lists').doc(this.user.uid).set(this.gameLists, { merge: true })
2018-10-19 05:15:28 +00:00
.then(() => {
this.$success('List saved');
})
.catch(() => {
this.$error('Authentication error');
2018-10-19 05:15:28 +00:00
});
},
loadGameData() {
const gameList = [];
if (this.list) {
this.list.forEach((list) => {
if (list && list.games.length) {
list.games.forEach((id) => {
if (!gameList.includes(id)) {
gameList.push(id);
}
});
}
2018-10-19 05:15:28 +00:00
});
if (gameList.length > 0) {
this.$store.dispatch('LOAD_GAMES', gameList)
.catch(() => {
this.$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-10-19 05:15:28 +00:00
},
},
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
@import "~styles/styles.scss";
.draggable * {
color: $color-white;
}
2018-10-29 23:53:49 +00:00
.lists {
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;
@include drag-cursor;
2018-11-02 01:42:43 +00:00
&.dark {
background: #222 !important;
}
2018-10-29 23:53:49 +00:00
&.drag-scroll-active {
@include dragging-cursor;
2018-10-19 05:15:28 +00:00
}
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;
}
.card-placeholder {
opacity: 0.25;
}
2018-10-19 05:15:28 +00:00
</style>