mirror of
https://github.com/romancm/gamebrary
synced 2025-02-18 20:18:25 +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…
Add table
Reference in a new issue