Feat(tag): edit form for tag (no saving yet)

src/components/edit_tag.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="tag">
+    <div class="icon">
+      <font-awesome-icon :style="{ color: value.color}" :icon="value.icon" class="fa-2x"/>
+    </div>
+    <div class="description">
+        <div v-if="value.name">
+          <h4>{{ value.name }}</h4>
+        </div>
+        <div v-else>
+          <b-form-input type="text" v-model="value.name"></b-form-input>
+        </div>
+          <b-form-group horizontal
+                        label="Icône:"
+                        label-class="text-sm"
+                        label-for="icon">
+            <b-form-input type="text" v-model="value.icon" id="icon"></b-form-input>
+          </b-form-group>
+          <b-form-group horizontal
+                        label="Couleur:"
+                        label-class="text-sm"
+                        label-for="color">
+            <b-form-input type="color" v-model="value.color" id="color"></b-form-input>
+          </b-form-group>
+          <b-form-group horizontal
+                        label="Mots clés:"
+                        label-class="text-sm"
+                        label-for="keywords"
+                        description="Une expression clé par ligne">
+            <b-form-textarea v-model="keywords" id="keywords"></b-form-textarea>
+          </b-form-group>
+    </div>
+  </div>
+
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex'
+export default {
+  name: 'editTag',
+  props: {
+    value: {
+      type: Object,
+      default: {
+        color: '',
+        icon: '',
+        name: '',
+        variant: ''
+      }
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+    keywords: {
+      get: function () {
+        return this.value.words.join('\n')
+      },
+      set: function (keywords) {
+        var kwds = keywords.split('\n')
+        this.value.words = kwds
+      }
+    }
+  },
+  methods: {
+  }
+}
+
+</script>
+
+<style scoped>
+.tag {
+  text-align: left;
+  align-self: center;
+  display: flex;
+}
+.icon {
+  flex: 10%;
+  align-self: center;
+}
+.description {
+  flex: 90%;
+  text-align: left;
+  align-self: center;
+}
+</style>

src/components/item_tag.vue

@@ -1,60 +1,46 @@
 <template>
-  <div>
+  <div class="item">
     <div v-if="edit_mode" class="tag">
-      <div class="icon">
-        <font-awesome-icon :icon="edited_tag.icon" class="fa-2x"/>
-          <!--
-        Icône inconnue
-          -->
+        <edit-tag v-model="edited_tag"></edit-tag>
     </div>
-      <div class="description">
-        <b-form-input type="text" v-model="edited_tag.name"></b-form-input>
-        <b-form-input type="text" v-model="edited_tag.icon"></b-form-input>
-        <b-form-input type="color" v-model="edited_tag.color"></b-form-input>
-      </div>
-      <div class="actions">
-        <b-button-group vertical v-if="editable">
-          <b-button @click="save()" >Sauver</b-button>
-          <b-button @click="toggleEdit()">Annuler</b-button>
-        </b-button-group>
-      </div>
-    </div>
-
     <div v-else class="tag">
       <div class="icon">
         <font-awesome-icon :style="{ color: tag.color}" :icon="tag.icon" class="fa-2x"/>
       </div>
       <div class="description">
         <h4>{{ tag.name }}</h4>
-
         Mots clés<span v-if="tag.invert"> (tout sauf)</span>: {{ tag.words.join(" - ") }}
       </div>
-      <div class="actions">
-      <!--
-        <b-button-group vertical v-if="editable">
-          <b-button @click="toggleEdit()">Editer</b-button>
-          <b-button>Supprimer</b-button>
-        </b-button-group>
-      -->
     </div>
+
+    <div class="actions">
+      <b-button-group vertical>
+        <div v-if="edit_mode">
+          <b-button @click="save()">Sauver</b-button>
+          <b-button @click="toggleEdit()">Annuler</b-button>
+          <b-button>Supprimer</b-button>
+        </div>
+        <div v-else>
+          <b-button @click="toggleEdit()">Editer</b-button>
+        </div>
+      </b-button-group>
     </div>
   </div>
 </template>
 
 <script>
 import { mapGetters, mapActions } from 'vuex'
+import editTag from './edit_tag'
 export default {
   name: 'tagItem',
+  components: {
+    editTag: editTag
+  },
   props: [
     'tagname'
   ],
   data () {
     return {
-      default_tag: {
-        name: 'Tout',
-        variant: 'info',
-        icon: 'file-invoice-dollar'
-      },
       edit_mode: false,
       edited_tag: {}
     }
@@ -64,19 +50,8 @@ export default {
       getTag: 'tag'
     }),
     tag () {
-      if (this.tagname) {
       return this.getTag(this.tagname)
-      } else {
-        return this.default_tag
-      }
     },
-    editable () {
-      if (this.tagname) {
-        return true
-      } else {
-        return false
-      }
-    }
   },
   methods: {
     ...mapActions('config', [
@@ -96,17 +71,14 @@ export default {
 </script>
 
 <style scoped>
-.tag {
+.item {
   display: flex;
 }
-.icon {
-  flex: 10%;
-  align-self: center;
-}
-.description {
-  flex: 80%;
+.tag {
+  flex: 90%;
   text-align: left;
   align-self: center;
+  display: flex;
 }
 .actions {
   flex: 10%;
@@ -114,4 +86,13 @@ export default {
   margin-left: 10px;
   align-self: center;
 }
+.icon {
+  flex: 10%;
+  align-self: center;
+}
+.description {
+  flex: 90%;
+  text-align: left;
+  align-self: center;
+}
 </style>