mirror of
https://github.com/romancm/gamebrary
synced 2024-11-27 05:30:22 +00:00
Remove old search and recent games components
This commit is contained in:
Gamebrary
parent
9951033c1f
commit
0f9fc46139
3 changed files with 0 additions and 349 deletions
|
|
@ -1,83 +0,0 @@
|
|||
<template lang="html">
|
||||
<b-card
|
||||
no-body
|
||||
class="game-card"
|
||||
@click="addGame"
|
||||
>
|
||||
<b-row no-gutters v-if="game && game.name">
|
||||
<b-col cols="2">
|
||||
<b-card-img
|
||||
:src="coverUrl"
|
||||
:alt="game.name"
|
||||
/>
|
||||
</b-col>
|
||||
|
||||
<b-col cols="10">
|
||||
<b-card-body body-class="p-2">
|
||||
<b-card-title class="mb-2" title-tag="h6">
|
||||
{{ game.name }}
|
||||
</b-card-title>
|
||||
</b-card-body>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import gameCardMixin from '@/mixins/gameCardMixin';
|
||||
|
||||
export default {
|
||||
mixins: [gameCardMixin],
|
||||
|
||||
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' });
|
||||
});
|
||||
|
||||
this.showGameToast();
|
||||
},
|
||||
|
||||
showGameToast() {
|
||||
const h = this.$createElement;
|
||||
|
||||
const vNodesMsg = h(
|
||||
'div', { class: 'image-toast' }, [
|
||||
h('b-img', {
|
||||
props: {
|
||||
src: this.coverUrl,
|
||||
alt: this.game.name,
|
||||
width: 80,
|
||||
},
|
||||
}),
|
||||
h('small', `${this.game.name} added`),
|
||||
],
|
||||
);
|
||||
|
||||
this.$bvToast.toast([vNodesMsg], {
|
||||
title: this.list.name,
|
||||
solid: true,
|
||||
variant: 'info',
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" rel="stylesheet/scss" scoped>
|
||||
.image-toast {
|
||||
display: grid;
|
||||
grid-gap: .5rem;
|
||||
}
|
||||
|
||||
.game-card {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -1,114 +0,0 @@
|
|||
<!-- TODO: limit platform search to board platforms, allow to change -->
|
||||
<!-- TODO: show tip to edit board if need to change platforms -->
|
||||
|
||||
<template lang="html">
|
||||
<b-tab title="Recent games">
|
||||
<b-button
|
||||
v-if="board.platforms.length > 1"
|
||||
v-b-modal.recentGamesPlatforms
|
||||
class="mb-2 ml-auto"
|
||||
>
|
||||
<i class="fas fa-sliders-h fa-fw" aria-hidden />
|
||||
</b-button>
|
||||
|
||||
<b-modal
|
||||
id="recentGamesPlatforms"
|
||||
hide-footer
|
||||
>
|
||||
<template v-slot:modal-header="{ close }">
|
||||
<modal-header
|
||||
title="Change platforms to display"
|
||||
:subtitle="board.name"
|
||||
@close="close"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<platform-toggle-field @change="reload" />
|
||||
|
||||
<b-alert
|
||||
show
|
||||
class="mt-2 mb-0"
|
||||
>
|
||||
Missing something?
|
||||
|
||||
<b-button variant="link" v-b-modal:board-settings>
|
||||
Edit board
|
||||
</b-button>
|
||||
</b-alert>
|
||||
</b-modal>
|
||||
|
||||
<game-card-recent
|
||||
v-for="{ id } in filteredRecentGames"
|
||||
:key="id"
|
||||
class="mb-2"
|
||||
:game-id="id"
|
||||
:list="list"
|
||||
/>
|
||||
</b-tab>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import GameCardRecent from '@/components/GameCards/GameCardRecent';
|
||||
import PlatformToggleField from '@/components/PlatformToggleField';
|
||||
import { mapState } from 'vuex';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
GameCardRecent,
|
||||
PlatformToggleField,
|
||||
},
|
||||
|
||||
props: {
|
||||
list: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
recentGames: null,
|
||||
platforms: [],
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['board']),
|
||||
|
||||
filteredRecentGames() {
|
||||
return this.recentGames
|
||||
? this.recentGames.filter(({ id }) => !this.list.games.includes(id))
|
||||
: [];
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.platforms = JSON.parse(JSON.stringify(this.board.platforms));
|
||||
|
||||
this.loadRecentGames();
|
||||
},
|
||||
|
||||
methods: {
|
||||
reload(updatedPlatforms) {
|
||||
this.platforms = JSON.parse(JSON.stringify(updatedPlatforms));
|
||||
this.loadRecentGames();
|
||||
},
|
||||
|
||||
loadRecentGames() {
|
||||
const payload = {
|
||||
sortQuery: 'first_release_date desc',
|
||||
platforms: this.platforms.join(','),
|
||||
};
|
||||
|
||||
this.$store.dispatch('CUSTOM_SEARCH', payload)
|
||||
.then((data) => {
|
||||
this.recentGames = data;
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" rel="stylesheet/scss" scoped>
|
||||
</style>
|
||||
|
|
@ -1,152 +0,0 @@
|
|||
<template lang="html">
|
||||
<b-tab title="Search" active>
|
||||
<b-form @submit.prevent="search" class="mb-2">
|
||||
<b-input-group>
|
||||
<b-form-input
|
||||
v-model="searchText"
|
||||
autofocus
|
||||
debounce="500"
|
||||
:placeholder="$t('board.addGame.inputPlaceholder')"
|
||||
/>
|
||||
|
||||
<b-input-group-append>
|
||||
<b-button variant="primary" @click="search">
|
||||
<i
|
||||
:class="`fas ${loading ? 'fa-sync fa-spin' : 'fa-search'}`"
|
||||
aria-hidden
|
||||
/>
|
||||
</b-button>
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
|
||||
<b-form-text v-if="gamesInList.length">
|
||||
<!-- Searching <strong>{{ board.platforms.length }} platforms</strong>.
|
||||
<b-button>edit</b-button> -->
|
||||
|
||||
<!-- <template v-if="gamesInList.length"> -->
|
||||
<template>
|
||||
<strong>{{ gamesInList.length }}</strong>
|
||||
{{ $t('board.addGame.alreadyInList') }}
|
||||
</template>
|
||||
</b-form-text>
|
||||
</b-form>
|
||||
|
||||
<div
|
||||
v-if="filteredResults.length > 0"
|
||||
ref="searchResults"
|
||||
body-class="p-1 pb-0 search-results"
|
||||
>
|
||||
<game-card-compact
|
||||
v-for="{ id } in filteredResults"
|
||||
:key="id"
|
||||
:game-id="id"
|
||||
:list="list"
|
||||
class="mb-2"
|
||||
@click.native="addGame(id)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<b-alert :show="noResults" variant="warning" class="mt-2 mb-0">
|
||||
{{ $t('board.addGame.noResults') }}
|
||||
</b-alert>
|
||||
</b-tab>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import GameCardCompact from '@/components/GameCards/GameCardCompact';
|
||||
import { mapState } from 'vuex';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
GameCardCompact,
|
||||
},
|
||||
|
||||
props: {
|
||||
list: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
searchText: '',
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
// TODO: stop storing this in store?
|
||||
...mapState(['results', 'board']),
|
||||
|
||||
noResults() {
|
||||
return !this.loading
|
||||
&& this.filteredResults.length === 0
|
||||
&& this.searchText.trim().length > 0;
|
||||
},
|
||||
|
||||
filteredResults() {
|
||||
return this.results
|
||||
? this.results.filter(({ id }) => !this.list.games.includes(id))
|
||||
: [];
|
||||
},
|
||||
|
||||
gamesInList() {
|
||||
return this.results
|
||||
? this.results.filter(({ id }) => this.list.games.includes(id))
|
||||
: [];
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
searchText(value) {
|
||||
if (value) {
|
||||
this.loading = true;
|
||||
this.search();
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.searchText = '';
|
||||
this.$store.commit('CLEAR_SEARCH_RESULTS');
|
||||
},
|
||||
|
||||
methods: {
|
||||
async addGame() {
|
||||
const { list, game, board } = this;
|
||||
|
||||
if (!list) return;
|
||||
|
||||
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' });
|
||||
});
|
||||
|
||||
this.showGameToast();
|
||||
},
|
||||
|
||||
async search() {
|
||||
await this.$store.dispatch('SEARCH_BOARD_GAMES', this.searchText)
|
||||
.catch(() => {
|
||||
this.$bvToast.toast('Error', { variant: 'danger' });
|
||||
|
||||
this.loading = false;
|
||||
});
|
||||
|
||||
this.error = null;
|
||||
this.loading = false;
|
||||
|
||||
if (this.$refs.searchResults) {
|
||||
this.$refs.searchResults.scrollTop = 0;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" rel="stylesheet/scss" scoped>
|
||||
</style>
|
||||
Loading…
Reference in a new issue