GererTagsLibres, 1ere version

src/GererTagsLibres.vue

 <template>
-<div style="text-align: center">Bonjour, je suis le menu de gestion des tags libres</div>
+
+  <div>
+    <div style="text-align: center"><br>Bonjour, je suis le menu de gestion des tags libres<br><br>
+      Vous avez {{tagsLibresAuteur.length}} tags libres existants : <br><br>
+
+      <ul>
+        <li v-for="tag in tagsLibresAuteur" :key="tag">{{tag}} <button v-on:click="supprimerTag(tag)">supprimer</button></li>
+      </ul>
+      <div id="creationTag">
+        <label>Creer un tag libre :</label><br>
+        <input type="text" placeholder="tag a créer" v-model="nouveauTag">
+        <button id="creerTag" v-on:click="creerTag"> Creer</button>
+      </div>
+
+
+    </div>
+  </div>
 </template>
 
 <script>
+import Service from "./service/Service";
+
 export default {
-  name: "GererTagsLibres"
+  name: "GererTagsLibres",
+  data: function () {
+    return {
+      tagsLibresAuteur: [],
+      nouveauTag: ''
+    }
+  },
+  props: {
+    //l'auteur connecte
+    auteur: {}
+  },
+  methods: {
+    creerTag: function () {
+      //alert("Créer le tag " + this.nouveauTag)
+
+      let data = {auteur: this.auteur, id_contenu: "", tag: this.nouveauTag}
+      Service.ajouterTagLibre(data)
+      this.tagsLibresAuteur.push(this.nouveauTag)
+      this.nouveauTag = ""
+    },
+    supprimerTag: function (tagAVirer) {
+      //alert("Supprimer le tag " + tag)
+      //let data = {auteur: this.auteur, id_contenu: "", tag: tagAVirer}
+      //this.$emit("actionTagLibre", {suppression: tagAVirer, id_contenu: this.contenu._id})
+      Service.supprimerTagLibre(this.auteur, tagAVirer)
+      this.tagsLibresAuteur = this.tagsLibresAuteur.filter(tag => tag !== tagAVirer)
+    }
+  },
+  watch:{
+    auteur: function () {
+      let that = this
+      Service.recupererTagLibre(this.auteur).then(function (response) {
+        that.tagsLibresAuteur = response.data
+      })
+      //  alert("Na wa")
+    }
+  }
 }
 </script>
 
 <style scoped>
+ul {
+  list-style:none;
+
+}
+button {
+  width: auto;
+  height: auto;
+}
+
+#creerTag {
+  margin-left: 5px;
+}
 
 </style>
\ No newline at end of file

src/Index.vue

@@ -16,7 +16,7 @@
          @majNvoContenu="majNvoContenu" @majContenus="majContenus = !majContenus"
          v-bind:rechercherPublications="rechercherPublications"></Maj>
     <Profil v-show="etat === 'Profil'"  ></Profil>
-    <GererTagsLibres v-show="etat === 'Tags'" ></GererTagsLibres>
+    <GererTagsLibres v-show="etat === 'Tags'" v-bind:auteur="auteur" ></GererTagsLibres>
     <TagsFixes v-show="etat === 'newContenu_Tags'"></TagsFixes>
     <p style="text-align: center" v-show="errorLogin">{{errorMessage}}</p>
     <NewContenu v-show="etat === 'newContenu'" v-bind:auteur="auteur" @contenuAjoute="ajouterUnContenu" @retourArriere="retourArriere"></NewContenu>

src/TagsLibres.vue

@@ -11,7 +11,7 @@
       <label>Ajouter un tag existant :</label><br>
       <select @change="ajouterLeTag" v-model="ajouterTagExistant">
         <option></option>
-        <option v-for="tag in tagsDeAuteur" :key="tag">{{ tag }}</option>
+        <option v-for="tag in tagsAuteurDisponibles" :key="tag">{{ tag }}</option>
       </select><br><br>
     </div>
     <div id="creationTag">
@@ -44,18 +44,21 @@ export default {
       let data = {auteur: this.auteur, id_contenu: JSON.stringify(this.contenu._id), tag: this.ajouterTagExistant}
       Service.associerTagLibre(data)
       this.tagsLibres.push(this.ajouterTagExistant)
+      this.$emit("actionTagLibre", {creation: this.ajouterTagExistant, id_contenu: this.contenu._id})
       this.ajouterTagExistant = ""
     },
     creerTag: function () {
       this.tagsLibres.push(this.nouveauTag)
       let data = {auteur: this.auteur, id_contenu: JSON.stringify(this.contenu._id), tag: this.nouveauTag}
       Service.ajouterTagLibre(data)
+      this.$emit("actionTagLibre", {creation: this.nouveauTag, id_contenu: this.contenu._id})
       this.nouveauTag = ""
       // this.ajouterTag(this.nouveauTag)
     },
     supprimerTag: function (tagAVirer) {
       this.tagsLibres = this.tagsLibres.filter(tag => tag !== tagAVirer)
       let data = {auteur: this.auteur, id_contenu: JSON.stringify(this.contenu._id), tag: tagAVirer}
+      this.$emit("actionTagLibre", {suppression: tagAVirer, id_contenu: this.contenu._id})
       Service.dissocierTagLibre(data)
     }
   },
@@ -79,6 +82,11 @@ export default {
         })
       })
     },
+  },
+  computed: {
+    tagsAuteurDisponibles: function () {
+      return this.tagsDeAuteur.filter(tagLibre => !this.tagsLibres.includes(tagLibre))
+    }
   }
 }
 </script>

src/components/Modifier_Contenu.vue

@@ -49,7 +49,8 @@
 
       <mavon-editor  :language="'fr'" style="position: static; height: 79vh; margin-top: -0.5%" v-model="texteDuContenu"/>
     </div>
-    <TagsLibres v-show="isModeTag" v-bind:contenu="this.contenuClique" v-bind:auteur="auteur" style="position: static; height: 79vh; margin-top: -0.5%"></TagsLibres>
+    <TagsLibres v-show="isModeTag" v-bind:contenu="this.contenuClique" v-bind:auteur="auteur" @actionTagLibre="actionTagLibre"
+                style="position: static; height: 79vh; margin-top: -0.5%"></TagsLibres>
     <div class="markdown">
       <br>
       <button id="validerModif" v-on:click="action('valider')">modifier </button>
@@ -149,7 +150,6 @@ export default {
      */
     setRating: function () {
       let that = this
-      alert(this.contenuClique.version)
       let data = {
         id_contenu: JSON.stringify(this.contenuClique._id),
         note: this.rating,
@@ -181,6 +181,20 @@ export default {
       } else {
         this.titreModifierTags = "modifier tags"
       }
+    },
+    /**
+     * @vuese
+     * ajout ou suppression d'un tag à destination de Volet_Base
+     */
+    actionTagLibre: function (event) {
+      // on est dans le cadre de la suppression d'un tag
+      if(event.creation === undefined){
+        this.$emit("actionTagLibre", {suppression: event.suppression, id_contenu: event.id_contenu})
+      }
+      // on est dans le cadre de l'ajout d'un tag
+      else {
+        this.$emit("actionTagLibre", {creation: event.creation, id_contenu: event.id_contenu})
+      }
     }
 
 

src/components/Volet_Base.vue

@@ -88,7 +88,8 @@
             <td>{{ item.note_perso }}</td>
             <td v-show="!isActif" v-if="item.provenance !== 'en-cours'" v-b-popover.hover.bottom="item.tags_fixes.toString()">{{item.tags_fixes.toString()}}</td>
             <td v-show="!isActif" v-else v-b-popover.hover.bottom="'tags non disponibles'">tags non disponibles</td>
-            <td v-show="!isActif" v-if="item.provenance !== 'en-cours'" v-b-popover.hover.bottom="'tags_libres'">tags_libres</td>
+            <td v-show="!isActif" v-if="item.provenance !== 'en-cours'" v-b-popover.hover.bottom="item.tags_libres.toString()">
+              {{ item.tags_libres.toString() }}</td>
             <td v-show="!isActif" v-else v-b-popover.hover.bottom="'tags non disponibles'">tags non disponibles</td>
             <td>{{ item.type }}</td>
             <td>{{ item.source }}</td>
@@ -134,7 +135,7 @@
                        v-bind:contenuCliqueProvenance = "contenuCliqueProvenance" v-show="modeConsultation"/>
     <Modifier_Contenu v-bind:auteur="auteur" v-bind:texteDuContenu = "texteDuContenu" v-bind:contenuCliqueProvenance = "contenuCliqueProvenance"
                       v-show="modeModification" @actionContenu="actionContenu"  v-bind:contenuClique = "contenuClique"
-                      @choixModif="choixModif" v-bind:titreContenu="titreContenu" @majMoyenne="majMoyenne"/>
+                      @choixModif="choixModif" v-bind:titreContenu="titreContenu" @majMoyenne="majMoyenne"  @actionTagLibre="actionTagLibre"/>
 
   </div>
 </template>
@@ -927,6 +928,35 @@ export default {
           break
         }
       }
+    },
+    /**
+     * @vuese
+     * ajout ou suppression d'un tag à destination de Volet_Base
+     */
+    actionTagLibre: function (event) {
+      if(event.creation === undefined){
+
+        let contenu = this.contenus.filter(cont => cont._id === event.id_contenu )
+        this.contenus = this.contenus.filter(cont => cont._id !== event.id_contenu )
+
+        for (let tag in contenu[0].tags_libres){
+          if(contenu[0].tags_libres[tag] === event.suppression){
+            contenu[0].tags_libres.splice(tag)
+          }
+        }
+        //contenu = contenu.tags_libres.filter(tag => tag !== event.suppression)
+        this.contenus.push(contenu[0])
+      }
+      // on est dans le cadre de l'ajout d'un tag
+      else {
+        console.log(event)
+        let contenu = this.contenus.filter(cont => cont._id === event.id_contenu )
+        this.contenus = this.contenus.filter(cont => cont._id !== event.id_contenu )
+
+        contenu[0].tags_libres.push(event.creation)
+
+        this.contenus.push(contenu[0])
+      }
     }
   }
 }

src/service/Service.js

@@ -127,9 +127,9 @@ export default {
     dissocierTagLibre(data){
         return axios.patch(urlBase + contenus + "dissocierTagLibre", data, this.getHeader(localStorage.token))
     },
-/*    supprimerTagLibre(idContenu, auteur, version){
-        //return axios.delete(urlBase + contenus + "recupererNote?auteur=" + auteur + "&version=" + version + "&id_contenu=" + idContenu, this.getHeader(localStorage.token))
-    },*/
+    supprimerTagLibre(auteur, tag){
+        return axios.delete(urlBase + contenus + "supprimerTagLibre?auteur=" + auteur + "&tag=" + tag, this.getHeader(localStorage.token))
+    },
     // gestion des en-cours
     creerEnCours(data) {
         return axios.post(urlBase + en_cours + "newEnCours", data, this.getHeader(localStorage.token))