gamebrary/src/components/Boards.vue

169 lines
4.3 KiB
Vue
Raw Normal View History

2020-08-18 18:56:10 +00:00
<template lang="html">
<div class="container-fluid">
<div class="px-2 my-2 d-flex justify-content-between align-items-center">
<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-08-22 12:24:24 +00:00
<b-overlay :show="loading && !platforms.length" rounded="sm" variant="transparent">
2020-08-25 23:38:19 +00:00
<b-row no-gutters>
2020-08-28 22:29:56 +00:00
<b-col cols="12" sm="6" md="4" lg="2" v-for="board in sortedBoards" :key="board.id">
2020-08-18 18:56:10 +00:00
<b-card
2020-08-26 21:23:28 +00:00
:header="board.name"
2020-08-28 21:56:20 +00:00
:img-src="getWallpaper(board.wallpaper)"
img-alt="Wallpaper"
img-top
tag="article"
2020-08-26 16:32:38 +00:00
class="m-2 clickable"
2020-08-26 16:29:08 +00:00
@click="viewBoard(board.id)"
2020-08-18 18:56:10 +00:00
>
2020-08-26 21:23:28 +00:00
<b-card-text>
<p v-if="board.description">
{{ board.description }}
</p>
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-08-28 21:56:20 +00:00
</b-card-text>
2020-08-18 18:56:10 +00:00
<!-- <b-button
2020-08-18 18:56:10 +00:00
variant="danger"
2020-08-22 12:24:24 +00:00
@click="confirmDelete(board.id)"
2020-08-18 18:56:10 +00:00
>
Delete board
</b-button> -->
2020-08-22 12:24:24 +00:00
2020-08-26 16:29:08 +00:00
<!-- <b-button
2020-08-22 12:24:24 +00:00
variant="primary"
@click="viewBoard(board.id)"
>
Open board
2020-08-26 16:29:08 +00:00
</b-button> -->
2020-08-18 18:56:10 +00:00
</b-card>
</b-col>
</b-row>
</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,
};
},
computed: {
2020-08-28 21:56:20 +00:00
...mapState(['boards', 'platforms', 'platformNames', 'wallpapers']),
2020-09-01 17:43:19 +00:00
...mapGetters(['platformNames', 'sortedBoards']),
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-08-28 21:56:20 +00:00
getWallpaper(wallpaper) {
const wallpaperObject = this.wallpapers.length
? this.wallpapers.find(({ fullPath }) => fullPath === wallpaper)
: null;
return wallpaperObject && wallpaperObject.url;
},
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>