Mirrors/gamebrary
2
0
Fork 0
mirror of https://github.com/romancm/gamebrary synced 2024-11-27 05:30:22 +00:00
Code Issues Projects Releases Packages Wiki Activity

more clean up

Browse source
This commit is contained in:
Gamebrary 2022-08-16 22:06:46 -07:00
parent 41948c697c
commit 1b86862799
8 changed files with 90 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/GameCards/GameCardDefault.vue
View file

@ -46,9 +46,9 @@
<b-badge
v-for="({ bgColor, textColor, name }) in tagsApplied"
:key="name"
pill
rounded
class="mr-1"
variant="primary"
variant="transparent"
:style="`background-color: ${bgColor}; color: ${textColor}`"
>
<small>{{ name }}</small>

97
src/components/GameCards/GameCardSearch.vue
View file

@ -2,19 +2,20 @@
<b-card
no-body
:title="game.name"
:img-src="coverUrl"
:img-alt="game.name"
img-top
class="mb-2"
footer-class="p-0 text-center font-weight-bold bold strong"
@click="$router.push({ name: 'game', params: { id: game.id, slug: game.slug }})"
class="mb-3"
:footer-class="['p-1 text-center font-weight-bold bold strong', selected ? 'bg-success' : 'text-muted']"
@click="handleClick"
>
<!-- :to="{ name: 'game', params: { id: game.id, slug: game.slug }}" -->
<!-- :to="{ name: 'game', params: { id: game.id, slug: game.slug }}" -->
<b-card-img
:src="coverUrl"
:img-alt="game.name"
:alt="game.name"
/>
<template #footer>
<small class="text-muted">
<!-- <pre>{{ selectedBoard }}</pre> -->
<!-- <pre>{{ selectedList }}</pre> -->
<small :class="[selected ? 'text-white' : 'text-muted']">
<strong>{{ game.name }}</strong>
</small>
</template>
@ -46,6 +47,10 @@ export default {
return this.boards.find(({ id }) => id === boardId);
},
selected() {
return this.selectedList?.games?.includes(this.game.id)
},
selectedList() {
const { listIndex } = this.$route.query;
@ -54,48 +59,64 @@ export default {
},
methods: {
// handleClick() {
// const { listIndex, boardId } = this.$route.query;
// isGameSelected(game.id)
// isGameSelected(gameId) {
// console.log(this.activeBoardList?.games?.includes(gameId));
//
// if (listIndex && boardId) return this.addGameToList();
//
// return this.user
// ? this.$bus.$emit('ADD_GAME', this.game.id)
// : this.$router.push({ name: 'game', params: { id: this.game.id, slug: this.game.slug }});
// return this.activeBoardList?.games?.includes(gameId);
// },
handleClick() {
// const activeBoardList = boards
const { boardId, listIndex } = this.$route?.query;
const hasActiveBoard = boardId && listIndex >= 0;
if (hasActiveBoard) {
this.addGameToList();
} else {
const { id, slug } = this.game;
this.$router.push({ name: 'game', params: { id, slug }});
}
// TODO: put guards when unauthed
// return this.user
// ? this.$bus.$emit('ADD_GAME', this.game.id)
// : this.$router.push({ name: 'game', params: { id: this.game.id, slug: this.game.slug }});
},
addGameToList() {
return this.selectedList.games.includes(this.game.id)
return this.selected
? this.removeGame()
: this.addGame();
},
async addGame() {
const boardIndex = this.boards.findIndex(({ id }) => id === this.selectedBoard.id);
const { boardId, listIndex } = this.$route?.query;
const boardIndex = this.boards.findIndex(({ id }) => id === boardId);
const board = this.boards[boardIndex];
console.log(board);
// board.lists[listIndex].games.push(this.game.id);
board.lists[listIndex].games.push(this.game.id);
// try {
// await this.$store.dispatch('SAVE_GAME_BOARD', board);
// } catch (e) {
// // this.$bvToast.toast(`There was an error adding "${this.game.name}"`, { title: list.name, variant: 'danger' });
// }
try {
await this.$store.dispatch('SAVE_GAME_BOARD', board);
} catch (e) {
// this.$bvToast.toast(`There was an error adding "${this.game.name}"`, { title: list.name, variant: 'danger' });
}
},
async removeGame({ listIndex, boardId }) {
// const boardIndex = this.boards.findIndex(({ id }) => id === boardId);
// const board = this.boards[boardIndex];
// const gameIndex = board.lists[listIndex].games.indexOf(this.gameId);
//
// board.lists[listIndex].games.splice(gameIndex, 1);
//
// try {
// await this.$store.dispatch('SAVE_GAME_BOARD', board);
// } catch (e) {
// // this.$bvToast.toast(`There was an error removing "${this.game.name}"`, { title: list.name, variant: 'danger' });
// }
async removeGame() {
const { boardId, listIndex } = this.$route?.query;
const boardIndex = this.boards.findIndex(({ id }) => id === boardId);
const board = this.boards[boardIndex];
board.lists[listIndex].games.splice(gameIndex, 1);
try {
await this.$store.dispatch('SAVE_GAME_BOARD', board);
} catch (e) {
// this.$bvToast.toast(`There was an error removing "${this.game.name}"`, { title: list.name, variant: 'danger' });
}
},
},
};

2
src/components/SearchBox.vue
View file

@ -56,7 +56,7 @@ export default {
search() {
if (this.$route.query?.q === this.searchText) return;
this.$router.push({ name: 'search', query: { q: this.searchText } });
this.$router.push({ name: 'search', query: { ...this.$route.query, q: this.searchText } });
},
},
};

5
src/pages/EditTagPage.vue
View file

@ -64,10 +64,9 @@
<b-button
v-if="tag.name"
rounded
block
size="sm"
class="mr-2 mb-2 field"
variant="outline-light"
class="mr-2 mb-2"
variant="transparent"
:style="`background-color: ${tag.bgColor}; color: ${tag.textColor}`"
>
{{ tag.name }}

1
src/pages/GamePage.vue
View file

@ -164,6 +164,7 @@
:key="name"
rounded
size="sm"
variant="transparent"
class="mr-1 my-2"
:style="`background-color: ${bgColor}; color: ${textColor}`"
@click="$router.push({ name: 'game.tags', params: { id: game.id, slug: game.slug } })"

4
src/pages/GameTagsPage.vue
View file

@ -55,7 +55,7 @@
:key="name"
rounded
block
variant="outline-light"
variant="transparent"
:class="{ 'd-none': !selected }"
:disabled="saving"
:style="`background-color: ${bgColor}; color: ${textColor}`"
@ -74,7 +74,7 @@
:key="name"
rounded
block
variant="outline-light"
variant="transparent"
:class="{ 'd-none': selected }"
:disabled="saving"
:style="`background-color: ${bgColor}; color: ${textColor}`"

25
src/pages/SearchPage.vue
View file

@ -1,5 +1,4 @@
<!-- TODO: add filters -->
<!-- TODO: add view toggle -->
<!-- TODO: add empty state with predefined searches -->
<!-- TODO: add pagination -->
<template lang="html">
@ -13,6 +12,18 @@
<b-skeleton v-if="loading" />
<b-row v-else-if="searchResults.length">
<b-col cols="12" class="bg-light py-2 mb-3">
<!-- TODO: allow to toggle boards -->
<b-button v-if="activeBoard" :to="{ name: 'board', params: { id: boardId } }">
{{ activeBoard.name }}
</b-button>
<!-- TODO: allow to toggle lists -->
<b-button v-if="activeBoard">
{{ activeBoardList.name }}
</b-button>
</b-col>
<b-col
cols="6"
md="4"
@ -59,7 +70,7 @@ export default {
},
computed: {
...mapState(['board']),
...mapState(['boards']),
query() {
return this.$route.query.q
@ -75,10 +86,18 @@ export default {
return this.$route.query?.listIndex;
},
selectable() {
return Boolean(this.boardListIndex >= 0 && this.boardId);
},
activeBoard() {
return this.boards.find(({ id }) => id === this.boardId);
},
activeBoardList() {
if (this.boardListIndex === undefined) return [];
return this.board?.lists[this.boardListIndex];
return this.activeBoard?.lists[this.boardListIndex];
},
},

2
src/pages/TagsPage.vue
View file

@ -44,7 +44,7 @@
@click="$router.push({ name: 'tag.edit', params: { id: index } })"
rounded
block
variant="outline-light"
variant="transparent"
:style="`background-color: ${bgColor}; color: ${textColor}`"
:key="name"
>