TagsLibres.vue

<template>
  <div id="pageTagLibre" v-bind:style="darktheme ? 'background-color: black; color: white' : 'background-color: white'">
    <div id="tagsPresents"><br>
      <label>Voici les tags libres présents sur ce contenu :</label><br>
      <p v-if="tagsLibres.length === 0">Aucun tag présent</p>
      <ul v-else>
        <li v-for="tag in tagsLibres" :key="tag">{{tag}} <button class="supprimerTag" @click="supprimerTag(tag)"></button></li>
      </ul>
    </div>
    <div id="ajouterTag">
      <label>Ajouter un tag existant :</label><br>
      <select @change="ajouterLeTag" v-model="ajouterTagExistant">
        <option></option>
        <option v-for="tag in tagsAuteurDisponibles" :key="tag">{{ tag }}</option>
      </select><br><br>
      <span id="versGestionTags" style="font-size: smaller" @click="chargerGestionTagsLibres"> Gestion des tags libres</span>
    </div>
    <p>----------------------------------------------------------------------------</p>
    <TagsFixes v-bind:isModif="isModif" v-bind:tagsBanque="tagsBanque" v-bind:id_contenu="id_contenu"></TagsFixes>
  </div>
</template>

<script>

import Service from "./service/Service";
import TagsFixes from "@/TagsFixes";
export default {
  name: "TagsLibres",
  components: {TagsFixes},
  props: {
    // récupération du contenu cliqué
    contenu: {},
    // récupération de l'auteur
    auteur: {},
    // provenance du contenu
    contenuCliqueProvenance: {},
    // Signal d'activation ou non du theme sombre
    darktheme: {}
  },
  methods:{
    /**
     * @vuese
     * permet d'associer un tag libre à un contenu
     */
    ajouterLeTag: function () {

      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)
    },*/
    /**
     * @vuese
     * dissocier un tag d'un contenu
     */
    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)
    },
    /**
     * @vuese
     * Permet de charger le composant GererTagsLibres
     */
    chargerGestionTagsLibres: function () {
      this.$emit("chargerTagsLibres")
    }
  },
  data: function () {
    return {
      tagsLibres: [],
      tagsDeAuteur: [],
      ajouterTagExistant: '',
      nouveauTag: '',
      isModif: false,
      tagsBanque: [],
      id_contenu: ''
    }
  },
  watch:{
    /**
     * @vuese
     * Dès que le contenu est cliqué, on récupère les tags libres associés au contenu & les tags libres de l'auteur
     */
    contenu: function () {
      let that = this
      this.isModif = true
      this.tagsBanque = this.contenu.tags_fixes
      this.id_contenu = this.contenu._id
      this.tagsDeAuteur = []
      //this.tagsLibres = this.contenu.tags_libres
      Service.recupererTagLibre(this.auteur).then(function (response) {
        that.tagsDeAuteur = response.data
        Service.recupererTagLibreContenu(JSON.stringify(that.contenu._id), that.auteur).then(function (response) {
          that.tagsLibres = response.data
        })
      })
    },
  },
  computed: {
    /**
     * @vuese
     * permet de filtrer la liste des tags libres ajoutables (en filtrant les tags déja actifs sur le contenu)
     */
    tagsAuteurDisponibles: function () {
      return this.tagsDeAuteur.filter(tagLibre => !this.tagsLibres.includes(tagLibre))
    }
  }
}
</script>

<style scoped>
ul {
  list-style:none;

}

/*#pageTagLibre {
  margin-left: 20%;
  margin-right: 20%;
}*/

.supprimerTag {
  background: aqua url(assets/img/croix2.png);
  background-size: cover;
  border: none;

}

#creerTag {
  background: aqua url(assets/img/coche2.png);
  background-size: cover;
  border: none;
  margin-left: 3px;
}

#tagsPresents {
  padding-top: 0.75 %;
}
#ajouterTag {
  padding-bottom: 0.25%;
}

#versGestionTags::before {
  content: "\01F4D3";
}

</style>