2018-10-19 05:15:28 +00:00
|
|
|
<template lang="html">
|
|
|
|
<div
|
|
|
|
class="lists"
|
|
|
|
ref="lists"
|
2019-01-24 06:16:08 +00:00
|
|
|
v-if="user && platform"
|
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)"
|
|
|
|
/>
|
|
|
|
|
2019-01-11 23:34:52 +00:00
|
|
|
<onboard v-if="!list" />
|
|
|
|
|
2019-01-16 05:01:31 +00:00
|
|
|
<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>
|
2019-01-16 05:01:31 +00:00
|
|
|
import ListOptions from '@/components/Lists/ListOptions';
|
2019-01-11 20:20:21 +00:00
|
|
|
import GameBoardPlaceholder from '@/components/GameBoard/GameBoardPlaceholder';
|
2019-01-11 23:34:52 +00:00
|
|
|
import Onboard from '@/components/GameBoard/Onboard';
|
2018-12-19 16:30:22 +00:00
|
|
|
import Panel from '@/components/Panel/Panel';
|
2019-01-19 06:02:03 +00:00
|
|
|
import { 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';
|
2018-11-05 02:26:27 +00:00
|
|
|
import firebase from 'firebase/app';
|
|
|
|
import 'firebase/firestore';
|
2018-10-19 05:15:28 +00:00
|
|
|
|
2018-10-25 06:33:15 +00:00
|
|
|
const db = firebase.firestore();
|
|
|
|
|
|
|
|
db.settings({
|
|
|
|
timestampsInSnapshots: true,
|
|
|
|
});
|
|
|
|
|
2018-10-19 05:15:28 +00:00
|
|
|
export default {
|
|
|
|
components: {
|
|
|
|
draggable,
|
|
|
|
List,
|
2019-01-16 05:01:31 +00:00
|
|
|
ListOptions,
|
2019-01-11 20:20:21 +00:00
|
|
|
GameBoardPlaceholder,
|
2019-01-11 23:34:52 +00:00
|
|
|
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
|
|
|
|
2018-10-25 06:33:15 +00:00
|
|
|
list() {
|
2019-01-24 06:16:08 +00:00
|
|
|
return this.gameLists && this.platform && this.gameLists[this.platform.code]
|
2018-12-19 16:30:22 +00:00
|
|
|
? this.gameLists[this.platform.code]
|
|
|
|
: null;
|
2018-10-19 05:15:28 +00:00
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
mounted() {
|
2019-01-24 06:16:08 +00:00
|
|
|
if (this.platform) {
|
|
|
|
this.loadGameData();
|
|
|
|
|
|
|
|
document.title = this.platform
|
|
|
|
? `${this.platform.name} - Gamebrary`
|
|
|
|
: 'Gamebrary';
|
|
|
|
} else {
|
|
|
|
// eslint-disable-next-line
|
|
|
|
if (this.user) {
|
|
|
|
this.$router.push({ name: 'platforms' });
|
|
|
|
} else {
|
|
|
|
this.$router.push({ name: 'auth' });
|
|
|
|
}
|
|
|
|
}
|
2018-10-19 05:15:28 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
methods: {
|
|
|
|
scroll() {
|
|
|
|
this.$nextTick(() => {
|
|
|
|
const lists = this.$refs.lists;
|
|
|
|
lists.scrollLeft = lists.scrollWidth;
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
tryDelete(index) {
|
2018-10-25 06:33:15 +00:00
|
|
|
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();
|
2019-01-19 05:57:52 +00:00
|
|
|
this.$bus.$emit('TOAST', { message: 'List deleted' });
|
2018-10-19 05:15:28 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
dragEnd() {
|
|
|
|
this.dragging = false;
|
|
|
|
this.draggingId = null;
|
2019-01-19 05:57:52 +00:00
|
|
|
this.$bus.$emit('TOAST', { message: 'Collection updated' });
|
2018-10-19 05:15:28 +00:00
|
|
|
this.updateLists();
|
|
|
|
},
|
|
|
|
|
2019-01-16 05:01:31 +00:00
|
|
|
updateLists(force) {
|
|
|
|
db.collection('lists').doc(this.user.uid).set(this.gameLists, { merge: !force })
|
2018-10-25 06:33:15 +00:00
|
|
|
.catch(() => {
|
2019-01-19 06:02:03 +00:00
|
|
|
this.$bus.$emit('TOAST', { message: 'Authentication error', type: 'error' });
|
2018-10-19 05:15:28 +00:00
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
loadGameData() {
|
2018-10-25 06:33:15 +00:00
|
|
|
if (this.list) {
|
2018-11-27 06:44:27 +00:00
|
|
|
const gameList = [];
|
|
|
|
|
|
|
|
this.list.forEach((list) => {
|
|
|
|
if (list && list.games.length) {
|
|
|
|
list.games.forEach((id) => {
|
|
|
|
if (!gameList.includes(id)) {
|
|
|
|
gameList.push(id);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
2018-10-25 06:33:15 +00:00
|
|
|
|
|
|
|
if (gameList.length > 0) {
|
2018-11-17 22:21:50 +00:00
|
|
|
this.loading = true;
|
|
|
|
|
2018-10-25 06:33:15 +00:00
|
|
|
this.$store.dispatch('LOAD_GAMES', gameList)
|
|
|
|
.catch(() => {
|
2018-11-21 02:39:49 +00:00
|
|
|
swal({
|
2018-10-25 06:33:15 +00:00
|
|
|
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-25 06:33:15 +00:00
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
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>
|