gamebrary/src/components/Game/AddRemoveGame.vue

80 lines
1.9 KiB
Vue
Raw Normal View History

2020-08-22 12:21:15 +00:00
<template lang="html">
<b-button
v-if="game && !list.games.includes(game.id)"
2020-10-05 18:42:04 +00:00
:title="$t('board.list.addGame')"
2020-08-22 12:21:15 +00:00
variant="success"
2020-09-24 04:15:31 +00:00
v-b-tooltip.hover
2020-08-22 12:21:15 +00:00
@click="addGame"
>
<i class="fas fa-plus fa-fw" aria-hidden />
2020-08-22 12:21:15 +00:00
</b-button>
<b-button
v-else
variant="danger"
2020-09-24 04:15:31 +00:00
v-b-tooltip.hover
2020-10-05 18:42:04 +00:00
:title="$t('board.gameModal.removeFromList')"
2020-08-22 12:21:15 +00:00
@click="removeGame"
>
<i class="fas fa-trash-alt fa-fw" aria-hidden />
2020-08-22 12:21:15 +00:00
</b-button>
</template>
<script>
import { mapState } from 'vuex';
export default {
props: {
game: Object,
list: Object,
},
computed: {
...mapState(['board']),
},
methods: {
async addGame() {
const { list, game, board } = this;
const listIndex = board.lists.findIndex(({ name }) => name === list.name);
this.$store.commit('ADD_GAME_TO_LIST', {
listIndex,
game,
});
await this.$store.dispatch('SAVE_BOARD')
.catch(() => {
this.$bvToast.toast(`There was an error adding "${this.game.name}"`, { title: list.name, variant: 'danger' });
});
// TODO: CUSTOMIZE TO SHOW GAME COVER
this.$bvToast.toast(`${this.game.name} added`, { title: list.name, variant: 'success' });
// this.$ga.event({
// eventCategory: 'game',
// eventAction: 'add',
// eventLabel: 'addGame',
// eventValue: data,
// });
},
async removeGame() {
const { list, game, board } = this;
const listIndex = board.lists.findIndex(({ name }) => name === list.name);
this.$store.commit('REMOVE_GAME_FROM_LIST', { listIndex, game });
await this.$store.dispatch('SAVE_BOARD')
.catch(() => {
this.$bvToast.toast(`There was an error removing "${this.game.name}"`, { title: list.name, variant: 'danger' });
});
this.$bvToast.toast(`${this.game.name} removed`, { title: list.name, variant: 'success' });
},
},
};
</script>