gamebrary/src/components/Boards.vue

323 lines
8.7 KiB
Vue
Raw Normal View History

2020-08-18 18:56:10 +00:00
<template lang="html">
2020-09-01 22:04:43 +00:00
<div>
<div class="d-flex justify-content-between align-items-center">
2020-08-18 18:56:10 +00:00
<h5>Boards</h5>
<create-board />
</div>
2020-08-25 23:38:19 +00:00
<div class="text-right" v-if="!loading && !boards.length">
<b-img src="/static/img/empty-state.png" fluid class="mr-5" />
</div>
2020-09-06 22:01:25 +00:00
<b-overlay :show="loading" rounded="sm" variant="transparent">
2020-09-01 22:04:43 +00:00
<b-form-row>
<b-col
v-for="board in sortedBoards"
:key="board.id"
class="d-flex mt-2"
cols="12"
sm="6"
md="4"
lg="3"
>
2020-08-18 18:56:10 +00:00
<b-card
2020-09-06 14:53:04 +00:00
no-body
2020-09-01 22:04:43 +00:00
class="clickable w-100"
2020-08-26 16:29:08 +00:00
@click="viewBoard(board.id)"
2020-08-18 18:56:10 +00:00
>
2020-09-06 14:53:04 +00:00
<template v-slot:header>
<h4 class="mb-0">{{ board.name }}</h4>
</template>
2020-08-26 21:23:28 +00:00
2020-09-06 14:53:04 +00:00
<b-card-body>
<b-card-text v-if="board.description">
{{ board.description }}
</b-card-text>
2020-08-28 21:56:20 +00:00
<b-avatar-group v-if="Object.keys(platformNames).length">
2020-08-26 21:23:28 +00:00
<!-- eslint-disable-next-line -->
2020-08-28 21:56:20 +00:00
<b-avatar :src="getPlatformImage(id)"
2020-08-26 21:23:28 +00:00
v-for="id in board.platforms"
2020-08-27 17:10:19 +00:00
:key="id"
2020-08-26 21:23:28 +00:00
variant="light"
size="sm"
/>
</b-avatar-group>
2020-09-06 14:53:04 +00:00
</b-card-body>
<b-card-img
:src="getWallpaper(board)"
:alt="board.name"
bottom
/>
</b-card>
</b-col>
<b-col
class="d-flex mt-2"
cols="12"
sm="6"
md="4"
lg="3"
v-for="platform in ownedPlatforms"
:key="platform.id"
>
<b-card
no-body
border-variant="warning"
class="clickable w-100"
@click="openDeprecationWarning(platform)"
>
<template v-slot:header>
<h4 class="mb-0">
{{ platform.name }}
<b-badge variant="warning">Deprecated</b-badge>
</h4>
</template>
<b-card-body>
<b-avatar
:src="`/static/img/platforms/logos/${platform.code}.svg`"
variant="light"
size="sm"
/>
</b-card-body>
2020-08-18 18:56:10 +00:00
</b-card>
</b-col>
2020-09-01 22:04:43 +00:00
</b-form-row>
2020-09-06 14:53:04 +00:00
<b-modal
id="deprecation-warning"
:title="tempPlatform && tempPlatform.name ? tempPlatform.name : 'Migration warning'"
hide-footer
@hidden="resetLegacyPlatform"
>
<b-alert show variant="warning">
<h4>Deprecation warning</h4>
<p>Platform-based boards will be phased out soon</p>
<p>Please click the button below to convert this platform into a board.</p>
<p>If you have any questions or need help feel free to email
<strong>contact@gamebrary.com</strong> and/or open defects in
<a href="https://github.com/romancm/gamebrary/issues" target="_blank">GitHub</a></p>
</b-alert>
<b-button
variant="success"
@click="convertLegacyBoard({ tempPlatform, migratePlatform })"
:disabled="saving"
>
<b-spinner small v-if="saving" />
<span v-else>Convert to board</span>
</b-button>
<b-button
variant="danger"
@click="deleteLegacyPlatform(tempPlatform)"
>
Delete legacy board
</b-button>
</b-modal>
2020-08-18 18:56:10 +00:00
</b-overlay>
</div>
</template>
<script>
import CreateBoard from '@/components/Board/CreateBoard';
2020-08-26 18:07:13 +00:00
import { mapState, mapGetters } from 'vuex';
2020-08-18 18:56:10 +00:00
export default {
components: {
CreateBoard,
},
data() {
return {
loading: false,
2020-09-06 14:53:04 +00:00
tempPlatform: null,
migratePlatform: null,
saving: false,
2020-08-18 18:56:10 +00:00
};
},
computed: {
2020-09-06 14:53:04 +00:00
...mapState(['boards', 'platforms', 'platformNames', 'wallpapers', 'gameLists', 'settings']),
2020-09-01 17:43:19 +00:00
...mapGetters(['platformNames', 'sortedBoards']),
2020-09-06 14:53:04 +00:00
hasLists() {
return Object.keys(this.gameLists).length > 0;
},
ownedPlatforms() {
return this.platforms.filter(({ code }) => this.gameLists[code]);
},
2020-08-18 18:56:10 +00:00
},
mounted() {
this.load();
},
methods: {
load() {
this.loadBoards();
2020-08-22 12:24:24 +00:00
this.loadPlatforms();
},
2020-09-06 14:53:04 +00:00
async convertLegacyBoard({ tempPlatform, migratePlatform }) {
this.saving = true;
const lists = migratePlatform.map(({ games, name }) => {
const list = {
name,
games,
settings: {},
};
return list;
});
const { id } = tempPlatform;
const parsedPlatforms = isNaN(id) && id.includes(',')
? id.split(',').map(platformId => Number(platformId))
: [id];
const newBoard = {
description: '',
lists,
name: tempPlatform.name,
platforms: parsedPlatforms,
theme: null,
wallpaper: null,
};
await this.$store.dispatch('CREATE_BOARD', newBoard)
.catch(() => {
this.saving = false;
this.$bvToast.toast('There was an error creating board', { title: 'Error', variant: 'error' });
});
this.saving = false;
this.$bvToast.toast('Board converted', { title: 'Success', variant: 'success' });
this.$bvModal.hide('deprecation-warning');
this.showDeleteLegacyPlatform(tempPlatform);
},
showDeleteLegacyPlatform(tempPlatform) {
this.$bvModal.msgBoxConfirm('You can now safely delete your legacy platform', {
title: 'Board converted',
okVariant: 'danger',
cancelTitle: 'Dismiss',
okTitle: 'Delete legacy board',
})
.then((value) => {
if (value) {
this.deleteLegacyPlatform(tempPlatform);
}
});
},
openDeprecationWarning(platform) {
this.migratePlatform = this.gameLists[platform.code];
this.tempPlatform = platform;
this.$bvModal.show('deprecation-warning');
},
resetLegacyPlatform() {
this.tempPlatform = null;
this.migratePlatform = null;
},
deleteLegacyPlatform(platform) {
this.$store.commit('SET_PLATFORM_LEGACY', platform);
this.$store.commit('REMOVE_PLATFORM_LEGACY');
this.$store.dispatch('SAVE_LEGACY_LISTS', this.gameLists)
.then(() => {
this.$bvModal.hide('deprecation-warning');
this.$bvToast.toast('Legacy board deleted', { title: 'Success', variant: 'success' });
})
.catch(() => {
this.$bvToast.toast('Authentication error', { title: 'Error', variant: 'danger' });
});
},
2020-09-01 22:04:43 +00:00
getWallpaper({ wallpaper, name }) {
const boardWallpaper = this.wallpapers.find(({ fullPath }) => fullPath === wallpaper);
2020-08-28 21:56:20 +00:00
2020-09-01 22:04:43 +00:00
return this.wallpapers.length && boardWallpaper && boardWallpaper.url
? boardWallpaper.url
: `https://via.placeholder.com/512x288?text=${name}`;
2020-08-28 21:56:20 +00:00
},
getPlatformImage(id) {
const { platformNames } = this;
return id && platformNames && platformNames[id] && platformNames[id].logoFormat
? `/static/platform-logos/${platformNames[id].slug}.${platformNames[id].logoFormat}`
: '';
},
2020-08-22 12:24:24 +00:00
async loadPlatforms() {
await this.$store.dispatch('LOAD_IGDB_PLATFORMS')
.catch(() => {
this.$bvToast.toast('There was an error loading platforms', { title: 'Error', variant: 'error' });
});
2020-08-18 18:56:10 +00:00
},
async loadBoards() {
this.loading = true;
await this.$store.dispatch('LOAD_BOARDS')
.catch(() => {
this.loading = false;
this.$bvToast.toast('There was an error loading boards', { title: 'Error', variant: 'error' });
});
this.loading = false;
},
viewBoard(id) {
this.$router.push({ name: 'board', params: { id } });
},
confirmDelete(id) {
this.$bvModal.msgBoxConfirm('Are you sure you want to delete this board?', {
title: 'Delete board',
okVariant: 'danger',
okTitle: 'Yes, delete board',
})
.then((value) => {
if (value) {
this.deleteBoard(id);
}
});
},
async deleteBoard(id) {
this.loading = true;
await this.$store.dispatch('DELETE_BOARD', id)
.catch(() => {
this.loading = false;
this.$bvToast.toast('There was an error deleting board', { title: 'Error', variant: 'error' });
});
this.loading = false;
this.$bvToast.toast('Board removed', { title: 'Success', variant: 'success' });
},
},
};
</script>
2020-08-26 21:23:28 +00:00
<style lang="scss" rel="stylesheet/scss">
.b-avatar .b-avatar-img img {
width: 40px !important;
height: auto !important;
max-width: 100% !important;
max-height: 100% !important;
}
</style>