Feat(tag): New tag and delete tags

This commit is contained in:
Bertrand Benjamin 2019-01-28 17:08:14 +01:00
parent 62ec65ce53
commit 1482c7f862
4 changed files with 25 additions and 39 deletions

View File

@ -39,20 +39,9 @@
import { mapGetters, mapActions } from 'vuex' import { mapGetters, mapActions } from 'vuex'
export default { export default {
name: 'editTag', name: 'editTag',
props: { props: [
value: { 'value'
type: Object, ],
default: function () {
return {
color: '',
icon: 'question',
name: '',
variant: '',
words: []
}
}
}
},
data () { data () {
return { return {
} }

View File

@ -18,7 +18,7 @@
<div v-if="edit_mode"> <div v-if="edit_mode">
<b-button @click="save()">Sauver</b-button> <b-button @click="save()">Sauver</b-button>
<b-button @click="toggleEdit()">Annuler</b-button> <b-button @click="toggleEdit()">Annuler</b-button>
<b-button>Supprimer</b-button> <b-button @click="deleteIt()">Supprimer</b-button>
</div> </div>
<div v-else> <div v-else>
<b-button @click="toggleEdit()">Editer</b-button> <b-button @click="toggleEdit()">Editer</b-button>
@ -55,15 +55,23 @@ export default {
}, },
methods: { methods: {
...mapActions('config', [ ...mapActions('config', [
'edit_tag' 'edit_tag',
'delete_tag'
]), ]),
toggleEdit () { toggleEdit () {
// toggle edit mod for the tag
this.edited_tag = { ...this.tag } this.edited_tag = { ...this.tag }
this.edit_mode = !this.edit_mode this.edit_mode = !this.edit_mode
}, },
save () { save () {
// Save the edited tag
this.edit_tag(this.edited_tag) this.edit_tag(this.edited_tag)
this.toggleEdit() this.toggleEdit()
},
deleteIt () {
// Delete the edited tag
this.delete_tag(this.edited_tag.name)
this.toggleEdit()
} }
} }
} }

View File

@ -43,6 +43,9 @@ export default {
APPEND_TAG: (state, { tag }) => { APPEND_TAG: (state, { tag }) => {
Vue.set(state.tags, tag.name.toLowerCase(), tag) Vue.set(state.tags, tag.name.toLowerCase(), tag)
}, },
DELETE_TAG: (state, { tagname }) => {
Vue.delete(state.tags, tagname.toLowerCase())
},
SET_CATEGORIES: (state, { categories }) => { SET_CATEGORIES: (state, { categories }) => {
state.categories = Object.keys(categories) state.categories = Object.keys(categories)
.reduce((c, k) => (c[k.toLowerCase()] = categories[k], c), {}) .reduce((c, k) => (c[k.toLowerCase()] = categories[k], c), {})
@ -75,11 +78,16 @@ export default {
if (err) throw err if (err) throw err
console.log('The file has been saved!') console.log('The file has been saved!')
}) })
}, },
edit_tag (context, tag) { edit_tag (context, tag) {
// Edit or append a tag to config
context.commit('APPEND_TAG', { tag: tag }) context.commit('APPEND_TAG', { tag: tag })
context.dispatch('save') context.dispatch('save')
}, },
delete_tag (context, tagname) {
// Revome a tag from the config
context.commit('DELETE_TAG', { tagname: tagname })
context.dispatch('save')
}
} }
} }

View File

@ -40,18 +40,7 @@
<h2>Tags</h2> <h2>Tags</h2>
<b-list-group> <b-list-group>
<b-list-group-item> <b-list-group-item>
<div v-if="!newTag"> <new-tag></new-tag>
<b-button @click="toggle_new_tag" size="sm">
<font-awesome-icon icon="plus" class="fa" /> Ajouter un tag
</b-button>
</div>
<div v-else>
<h4> Nouveau tag </h4>
<tag-edit></tag-edit>
<b-button @click="toggle_new_tag" size="sm">
<font-awesome-icon icon="ban" class="fa" /> Annuler
</b-button>
</div>
</b-list-group-item> </b-list-group-item>
<b-list-group-item v-for="tag in tags"> <b-list-group-item v-for="tag in tags">
<tag-item :tagname="tag.name"></tag-item> <tag-item :tagname="tag.name"></tag-item>
@ -70,6 +59,7 @@
import { mapGetters, mapActions } from 'vuex' import { mapGetters, mapActions } from 'vuex'
import tagItem from '../components/item_tag' import tagItem from '../components/item_tag'
import tagEdit from '../components/edit_tag' import tagEdit from '../components/edit_tag'
import newTag from '../components/new_tag'
import categorieItem from '../components/item_categorie' import categorieItem from '../components/item_categorie'
export default { export default {
@ -77,15 +67,9 @@ export default {
components: { components: {
'tag-item': tagItem, 'tag-item': tagItem,
'tag-edit': tagEdit, 'tag-edit': tagEdit,
'new-tag': newTag,
'categorie-item': categorieItem 'categorie-item': categorieItem
}, },
data () {
return {
newTag: false
}
},
mounted: function () {
},
computed: { computed: {
...mapGetters({ ...mapGetters({
'data_dir': 'config/data_dir', 'data_dir': 'config/data_dir',
@ -106,9 +90,6 @@ export default {
}), }),
open_filebrowser (dir) { open_filebrowser (dir) {
console.log("plop") console.log("plop")
},
toggle_new_tag () {
this.newTag = !this.newTag
} }
} }
} }