Mirrors/gamebrary
2
0
Fork 0
mirror of https://github.com/romancm/gamebrary synced 2025-02-25 03:07:08 +00:00
Code Issues Projects Releases Packages Wiki Activity

Move apply tag modal to its own component

Browse source
This commit is contained in:
Roman Cervantes 2019-11-21 14:44:51 -07:00
parent f2891a2a46
commit e9a5a05f64
2 changed files with 108 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

94
src/components/Tags/ApplyTag.vue Normal file
View file

@ -0,0 +1,94 @@
<template lang="html">
<modal
ref="tag"
:title="$t('tags.applyTag')"
:message="$t('tags.useTags')"
>
<div slot="content">
<h3>All tags</h3>
<tag
v-for="(tag, name) in tags"
v-if="!tag.platform"
:key="name"
:label="name"
:hex="tag.hex"
:text-hex="tag.tagTextColor"
:readonly="!tag.games.includes(gameTagsId)"
@action="tryAdd(tag.games, name)"
@close="removeTag(name)"
/>
<h3>{{ platform.name }} tags</h3>
<tag
v-for="(tag, name) in tags"
v-if="tag.platform && tag.platform === platform.id"
:key="name"
:label="name"
:hex="tag.hex"
:text-hex="tag.tagTextColor"
:readonly="!tag.games.includes(gameTagsId)"
@action="tryAdd(tag.games, name)"
@close="removeTag(name)"
/>
</div>
</modal>
</template>
<script>
import { mapState } from 'vuex';
import Tag from '@/components/Tag';
import Modal from '@/components/Modal';
export default {
components: {
Tag,
Modal,
},
data() {
return {
gameTagsId: null,
};
},
computed: {
...mapState(['tags', 'platform']),
},
mounted() {
this.$bus.$on('OPEN_TAGS', this.openTags);
},
beforeDestroy() {
this.$bus.$off('OPEN_TAGS');
},
methods: {
openTags(id) {
this.gameTagsId = id;
this.$refs.tag.open(id);
},
tryAdd(games, tagName) {
if (!games.includes(this.gameTagsId)) {
this.addTag(tagName);
}
},
addTag(tagName) {
this.$store.commit('ADD_GAME_TAG', { tagName, gameId: this.gameTagsId });
this.$bus.$emit('SAVE_TAGS', this.tags);
},
removeTag(tagName) {
this.$store.commit('REMOVE_GAME_TAG', { tagName, gameId: this.gameTagsId });
this.$bus.$emit('SAVE_TAGS', this.tags);
},
},
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
</style>

89
src/pages/GameBoard.vue
View file

@ -22,63 +22,26 @@
/>
</modal>
<!-- TODO: move this to its own component -->
<modal
ref="tag"
:title="$t('tags.applyTag')"
:message="$t('tags.useTags')"
>
<div slot="content">
<h3>All tags</h3>
<apply-tag />
<tag
v-for="(tag, name) in tags"
v-if="!tag.platform"
:key="name"
:label="name"
:hex="tag.hex"
:text-hex="tag.tagTextColor"
:readonly="!tag.games.includes(gameTagsId)"
@action="tryAdd(tag.games, name)"
@close="removeTag(name)"
/>
<list
v-for="(list, listIndex) in gameLists[platform.code]"
v-if="list && !loading"
:name="list.name"
:game-list="list.games"
:list-index="listIndex"
:key="`${list.name}-${listIndex}`"
@end="dragEnd"
/>
<h3>{{ platform.name }} tags</h3>
<tag
v-for="(tag, name) in tags"
v-if="tag.platform && tag.platform === platform.id"
:key="name"
:label="name"
:hex="tag.hex"
:text-hex="tag.tagTextColor"
:readonly="!tag.games.includes(gameTagsId)"
@action="tryAdd(tag.games, name)"
@close="removeTag(name)"
/>
</div>
</modal>
<template>
<list
v-for="(list, listIndex) in gameLists[platform.code]"
v-if="list && !loading"
:name="list.name"
:game-list="list.games"
:list-index="listIndex"
:key="`${list.name}-${listIndex}`"
@end="dragEnd"
/>
<list-add />
</template>
<list-add />
</div>
</template>
<script>
import GameBoardPlaceholder from '@/components/GameBoard/GameBoardPlaceholder';
import Tag from '@/components/Tag';
import ListAdd from '@/components/Lists/ListAdd';
import ApplyTag from '@/components/Tags/ApplyTag';
import Modal from '@/components/Modal';
import List from '@/components/Lists/List';
import Game from '@/pages/Game';
@ -92,7 +55,7 @@ export default {
List,
GameBoardPlaceholder,
ListAdd,
Tag,
ApplyTag,
Game,
Modal,
},
@ -105,13 +68,12 @@ export default {
gameData: null,
gameDetailListIndex: null,
gameDetailId: null,
gameTagsId: null,
queryLimit: 500,
};
},
computed: {
...mapState(['user', 'gameLists', 'platform', 'tags', 'games']),
...mapState(['user', 'gameLists', 'platform', 'games']),
list() {
return this.gameLists && this.platform && this.gameLists[this.platform.code]
@ -129,26 +91,13 @@ export default {
this.load();
this.setPageTitle();
this.$bus.$on('OPEN_GAME', this.openGame);
this.$bus.$on('OPEN_TAGS', this.openTags);
},
beforeDestroy() {
this.$bus.$off('OPEN_GAME');
this.$bus.$off('OPEN_TAGS');
},
methods: {
tryAdd(games, tagName) {
if (!games.includes(this.gameTagsId)) {
this.addTag(tagName);
}
},
addTag(tagName) {
this.$store.commit('ADD_GAME_TAG', { tagName, gameId: this.gameTagsId });
this.$bus.$emit('SAVE_TAGS', this.tags);
},
closeGame() {
this.setPageTitle();
this.gameDetailId = null;
@ -159,22 +108,12 @@ export default {
document.title = this.platform ? `${this.platform.name} - Gamebrary` : 'Gamebrary';
},
removeTag(tagName) {
this.$store.commit('REMOVE_GAME_TAG', { tagName, gameId: this.gameTagsId });
this.$bus.$emit('SAVE_TAGS', this.tags);
},
openGame({ id, listId }) {
this.gameDetailId = id;
this.gameDetailListIndex = listId;
this.$refs.game.open();
},
openTags(id) {
this.gameTagsId = id;
this.$refs.tag.open(id);
},
dragEnd() {
this.dragging = false;
this.draggingId = null;