Feat(tag): forgot to add new_tag component

This commit is contained in:
Bertrand Benjamin 2019-01-28 20:55:58 +01:00
parent 1482c7f862
commit d486268921

View File

@ -0,0 +1,92 @@
<template>
<div class="item">
<div class="tag">
<div v-if="!isNewTag">
<b-button @click="toggle_new_tag" size="sm">
<font-awesome-icon icon="plus" class="fa" /> Ajouter un tag
</b-button>
</div>
<div class="description">
<div v-if="isNewTag" class="tag">
<edit-tag v-model="editedTag"></edit-tag>
</div>
</div>
</div>
<div class="actions">
<b-button-group vertical>
<div v-if="isNewTag">
<b-button @click="save()">Sauver</b-button>
<b-button @click="toggle_new_tag()">Annuler</b-button>
</div>
</b-button-group>
</div>
</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import editTag from './edit_tag'
export default {
name: 'newTag',
components: {
editTag: editTag
},
data () {
return {
isNewTag: false,
emptyTag: {
color: '',
icon: 'question',
name: '',
variant: '',
words: []
},
editedTag: {}
}
},
computed: {
},
methods: {
...mapActions('config', [
'edit_tag'
]),
toggle_new_tag () {
this.isNewTag = !this.isNewTag
this.editedTag = { ...this.emptyTag }
},
save () {
this.edit_tag(this.editedTag)
this.toggle_new_tag()
}
}
}
</script>
<style scoped>
.item {
display: flex;
}
.tag {
flex: 90%;
text-align: left;
align-self: center;
display: flex;
}
.actions {
flex: 10%;
text-align: left;
margin-left: 10px;
align-self: center;
}
.icon {
flex: 10%;
align-self: center;
}
.description {
flex: 90%;
text-align: left;
align-self: center;
}
</style>