Mirrors/gamebrary
2
0
Fork 0
mirror of https://github.com/romancm/gamebrary synced 2024-11-23 11:43:07 +00:00
Code Issues Projects Releases Packages Wiki Activity

use array filter and map for game tags

Browse source
This commit is contained in:
Gamebrary 2022-05-18 18:56:51 -07:00
parent cf960de16c
commit 1ddc861aa3
6 changed files with 44 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/components/GameCards/GameCardCompact.vue
View file

@ -37,20 +37,19 @@
height="6px"
/>
<!-- TODO: use array map/filter -->
<!-- <div v-if="showGameTags">
<template v-if="showGameTags">
<b-badge
v-for="({ games, hex, tagTextColor }, name) in tags"
v-if="games.includes(game.id)"
v-for="({ hex, tagTextColor }, name) in gameTags"
:key="name"
pill
class="mr-1"
variant="primary"
tag="small"
:style="`background-color: ${hex}; color: ${tagTextColor}`"
>
{{ name }}
<small>{{ name }}</small>
</b-badge>
</div> -->
</template>
</b-card-body>
</b-col>
</b-row>

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

@ -46,24 +46,18 @@
height="6px"
/> -->
<b-badge variant="primary" v-if="showGameTags">
<i class="fas fa-tags fa-fw" aria-hidden />
</b-badge>
<!-- TODO: use array filter instead of mixing v-for and v-if -->
<!-- <div v-if="showGameTags">
<template v-if="showGameTags">
<b-badge
v-for="({ games, hex, tagTextColor }, name) in tags"
v-if="games.includes(game.id)"
v-for="({ hex, tagTextColor }, name) in gameTags"
:key="name"
pill
class="mr-1"
variant="primary"
:style="`background-color: ${hex}; color: ${tagTextColor}`"
>
{{ name }}
<small>{{ name }}</small>
</b-badge>
</div> -->
</template>
</b-card-body>
</b-col>
</b-row>

12
src/components/GameCards/GameCardGrid.vue
View file

@ -21,20 +21,18 @@
height="6px"
/>
<!-- TODO: use array map/filter -->
<!-- <template v-if="showGameTags">
<template v-if="showGameTags">
<b-badge
v-for="({ games, hex, tagTextColor }, name) in tags"
v-if="games.includes(game.id)"
v-for="({ hex, tagTextColor }, name) in gameTags"
:key="name"
pill
class="mr-1"
variant="primary"
tag="small"
:style="`background-color: ${hex}; color: ${tagTextColor}`"
>
{{ name }}
<small>{{ name }}</small>
</b-badge>
</template> -->
</template>
<b-badge variant="warning" v-if="gameNotes">
<i class="far fa-sticky-note fa-fw" />

13
src/components/GameCards/GameCardText.vue
View file

@ -23,21 +23,18 @@
height="6px"
/>
<!-- TODO: use array map/filter -->
<!-- <div v-if="showGameTags">
<template v-if="showGameTags">
<b-badge
v-for="({ games, hex, tagTextColor }, name) in tags"
v-if="games.includes(game.id)"
v-for="({ hex, tagTextColor }, name) in gameTags"
:key="name"
pill
variant="primary"
tag="small"
class="mr-1"
:style="`background-color: ${hex}; color: ${tagTextColor}`"
>
{{ name }}
<small class="font-weight-bold">{{ name }}</small>
</b-badge>
</div> -->
</template>
</b-card-body>
</b-row>
</b-card>

17
src/mixins/gameCardMixin.js
View file

@ -11,20 +11,29 @@ export default {
computed: {
...mapState(['settings', 'games', 'tags', 'notes', 'progresses', 'board']),
...mapGetters(['gameTags', 'isRTL']),
...mapGetters(['isRTL']),
highlightCompletedGame() {
return this.gameProgress && Number(this.gameProgress) === 100;
},
gameTags() {
const tagsArray = Object.entries(this.tags);
const filteredTags = tagsArray.filter(([key, value]) => {
return value.games.includes(this.gameId);
});
const filteredTagsObject = Object.fromEntries(filteredTags);
return filteredTagsObject;
},
showGameProgress() {
return this.gameProgress > 0;
},
showGameTags() {
const { settings } = this.list;
return settings?.showGameTags && this.gameTags;
return this.list?.settings?.showGameTags && this.gameTags;
},
gameProgress() {

17
src/store/getters.js
View file

@ -12,10 +12,19 @@ export default {
},
isBoardOwner: ({ board, user }) => {
const boardOwner = board && board.owner;
const userId = user && user.uid;
return board?.owner === user?.uid;
},
return boardOwner === userId;
gameTags: ({ tags, game }) => {
// TODO: refactor architecture, don't use tag name as key
const tagsArray = Object.entries(tags);
const filteredTags = tagsArray.filter(([key, value]) => {
return value.games.includes(game.id);
});
const filteredTagsObject = Object.fromEntries(filteredTags);
return filteredTagsObject;
},
// Arabic is the only ltr language supported at the moment
@ -66,6 +75,4 @@ export default {
return { name, rating: ratings[rating] };
});
},
gameTags: state => Object.keys(state.tags) && Object.keys(state.tags).length > 0,
};