Tags libres, 1ere partie

src/GererTags.vue → src/GererTagsLibres.vue

 <template>
-<div>
-  <p>Tags (a définir et à réaliser)</p>
-</div>
+<div style="text-align: center">Bonjour, je suis le menu de gestion des tags libres</div>
 </template>
 
 <script>
 export default {
-  name: "Tags"
+  name: "GererTagsLibres"
 }
 </script>
 
 <style scoped>
-p {
-  text-align: center;
-}
+
 </style>
\ No newline at end of file

src/Index.vue

@@ -16,7 +16,8 @@
          @majNvoContenu="majNvoContenu" @majContenus="majContenus = !majContenus"
          v-bind:rechercherPublications="rechercherPublications"></Maj>
     <Profil v-show="etat === 'Profil'"  ></Profil>
-    <Tags v-show="etat === 'Tags'"  ></Tags>
+    <GererTagsLibres v-show="etat === 'Tags'" ></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>
     <ImporterFichier v-show="etat === 'importContenu'" v-bind:auteur="auteur" @contenuAjoute="ajouterUnContenu" @retourArriere="retourArriere"></ImporterFichier>
@@ -29,9 +30,10 @@ import Contenu from "./Contenu";
 import Menu from "./Menu";
 import Maj from "./Maj";
 import Profil from "./Profil";
-import Tags from "./GererTags";
 import NewContenu from "./NewContenu";
 import ImporterFichier from "./ImporterFichier";
+import GererTagsLibres from "@/GererTagsLibres";
+import TagsFixes from "@/TagsFixes";
 // import Service from "./service/Service";
 // import showdown from "showdown"
 
@@ -161,14 +163,15 @@ export default {
 
   },
   components:{
+    TagsFixes,
+    GererTagsLibres,
     ImporterFichier,
     NewContenu,
     Login,
     Contenu,
     Menu,
     Maj,
-    Profil,
-    Tags
+    Profil
   }
 }
 </script>

src/NewContenu.vue

 <template>
   <div>
+  <div id="markdown" v-show="isCreation">
     <div id="titreContenu">
       <label>Titre du contenu : </label><br>
       <input type="text" placeholder="titre du contenu"  v-model="titreContenu">
@@ -17,20 +18,25 @@
     </div>
     <div class="markdown">
       <br>
-      <button class="ajouterContenu" v-on:click="ajouterContenu">créer </button>
-      <button class="retourArriere" v-on:click="retourArriere"> revenir en arrière</button>
+      <button class="ajouterContenu" v-on:click="choisirTags">créer </button>
+      <button class="retourArriere" v-on:click="retourArriere(false)"> revenir en arrière</button>
 
     </div>
 
   </div>
+  <TagsFixes v-show="!isCreation" @tags="ajouterContenu"></TagsFixes>
+  </div>
+
 </template>
 
 <script>
 // import VueSimplemde from 'vue-simplemde'
 import Service from "./service/Service";
+import TagsFixes from "@/TagsFixes";
 
 export default {
   name: "NewContenu",
+  components: {TagsFixes},
   props: {
     // l'auteur connecté
     auteur: {}
@@ -42,13 +48,19 @@ export default {
         bold: true,
         language: 'fr'
       },
-      titreContenu: ""
+      titreContenu: "",
+      isCreation: true
     }
   },
   methods: {
-    ajouterContenu: function () {
+    choisirTags: function () {
+      this.isCreation = false
+
+    },
+    ajouterContenu: function (event) {
 
-      let data = {auteur: this.auteur, contenu_a_ecrire: this.contenuSaisi, titre: this.titreContenu}
+      //alert(event.tags)
+      let data = {auteur: this.auteur, contenu_a_ecrire: this.contenuSaisi, titre: this.titreContenu, tags: event.tags}
       let that = this
       Service.creerContenuPerso(data).then(
           function (reponse) {
@@ -56,7 +68,7 @@ export default {
             nouveauContenu.provenance = "perso"
             that.$emit("contenuAjoute", {contenu: nouveauContenu})
             that.contenuSaisi = ''
-            that.retourArriere()
+            that.retourArriere(true)
           }
       )
     },
@@ -64,9 +76,9 @@ export default {
      * @vuese
      * (A construire) Fonction de changement du mot de passe utilisateur
      */
-    retourArriere: function () {
+    retourArriere: function (cree) {
       // evenement pour retourner vers le volet Contenu_Base
-      this.$emit("retourArriere")
+      this.$emit("retourArriere", {cree: cree})
     }
   }
 }

src/TagsFixes.vue

+<template>
+  <div style="text-align: center">
+    <p>Bienvenue dans la page de choix des tags</p>
+    <p>Pour compléter le contenu ajouté, il va falloir lui associer des tags</p>
+
+    <label>Choisir le tag de niveau 1</label><br><br>
+    <select @change="niveau1()" v-model="tagUn">
+      <option>Tag1.1</option>
+      <option>Tag1.2</option>
+      <option>Tag1.3</option>
+    </select><br><br>
+    <label>Choisir le tag de niveau 2</label><br><br>
+
+    <select @change="niveau2()" :disabled="niveauDeux === 0" v-model="tagDeux">
+
+      <option v-for="i in 3" :key="i">{{tagUn}}{{ i }}</option>
+    </select><br><br>
+    <label>Choisir le tag de niveau 3</label><br><br>
+
+    <select @change="niveau3()" :disabled="niveauTrois === 0" v-model="tagTrois">
+      <option v-for="i in 5" :key="i">{{tagDeux}}{{ i }}</option>
+    </select><br><br>
+    <!--    <button v-on:click="validerTags">Valider</button>-->
+  </div>
+</template>
+
+<script>
+export default {
+  name: "TagsFixes",
+  data: function(){
+    return {
+      niveauDeux: 0,
+      niveauTrois: 0,
+      tagUn: '',
+      tagDeux: '',
+      tagTrois: ''
+    }
+  },
+  methods:{
+    validerTags: function () {
+      this.$emit("tags", {tags: []})
+    },
+    /**
+     * @vuese
+     Quand le 1er tag est choisi, on débloque le 2e tag
+     */
+    niveau1: function () {
+      this.niveauDeux = 1
+    },
+    /**
+     * @vuese
+     * Quand le 2e tag est choisi, on débloque le 3e tag
+     */
+    niveau2: function () {
+      this.niveauTrois = 1
+    },
+    /**
+     * @vuese
+     * QUand le 3e tag est choisi, on renvoie les infos à NewContenu ou à ImporterFichier
+      */
+    niveau3: function () {
+      //alert("en haut et en bas")
+      this.$emit("tags", {tags: [this.tagUn, this.tagDeux, this.tagTrois]})
+    }
+  }
+}
+</script>
+
+<style scoped>
+button {
+  width: auto;
+  text-align: center;
+  height: auto;
+}
+
+</style>
\ No newline at end of file

src/TagsLibres.vue

+<template>
+  <div>
+    <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 tagsDeAuteur" :key="tag">{{ tag }}</option>
+      </select><br><br>
+    </div>
+    <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"></button>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import Service from "./service/Service";
+export default {
+  name: "TagsLibres",
+  props: {
+    // récupération du contenu cliqué
+    contenu: {},
+    // récupération de l'auteur
+    auteur: {}
+  },
+  methods:{
+    ajouterLeTag: function () {
+      /*   let data = {auteur: this.auteur, id_contenu: JSON.stringify(this.contenu._id), tag: this.ajouterTagExistant}
+         Service.ajouterTagLibre(data)*/
+      // Associer le tag au contenu pour l'auteur connecté
+
+      // Et l'ajouter à l'array des tags libres de Vue
+
+      let data = {auteur: this.auteur, id_contenu: JSON.stringify(this.contenu._id), tag: this.ajouterTagExistant}
+      Service.associerTagLibre(data)
+      this.tagsLibres.push(this.ajouterTagExistant)
+      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.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}
+      Service.dissocierTagLibre(data)
+    }
+  },
+  data: function () {
+    return {
+      tagsLibres: [],
+      tagsDeAuteur: [],
+      ajouterTagExistant: '',
+      nouveauTag: ''
+    }
+  },
+  watch:{
+    contenu: function () {
+      let that = this
+      //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) {
+          // alert(response.data)
+          that.tagsLibres = response.data
+        })
+      })
+    },
+  }
+}
+</script>
+
+<style scoped>
+ul {
+  list-style:none;
+
+}
+
+.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;
+}
+</style>
\ No newline at end of file

src/components/Modifier_Contenu.vue

 <template>
-  <div >
+  <div>
     <div id="titreContenu">
       <!--      <select v-show="(contenuCliqueProvenance === 'banque'
             || contenuCliqueProvenance === 'perso')
@@ -14,6 +14,8 @@
         Note de la version : {{noteContenu}}<br>
         Popularité : {{contenuClique.popularite}}<br>
       </div>
+      <button id="tagsLibres" v-on:click="modifierTags">{{ titreModifierTags }}</button>
+
 
       <div id="modifTitre">
         <div id="changerTitre">
@@ -43,10 +45,11 @@
       </div>
     </div>
     <br>
-    <div class="mavonEditor">
+    <div class="mavonEditor" v-show="!isModeTag">
 
       <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>
     <div class="markdown">
       <br>
       <button id="validerModif" v-on:click="action('valider')">modifier </button>
@@ -61,11 +64,13 @@
 
 import Service from "@/service/Service";
 import StarRating from 'vue-star-rating'
+import TagsLibres from "@/TagsLibres";
 
 
 export default {
   name: "Modifier_Contenu",
   components: {
+    TagsLibres,
     StarRating
   },
   props: {
@@ -92,6 +97,8 @@ export default {
       messageNoter: "noter",
       populariteContenu: 0,
       noteContenu: 0,
+      isModeTag: false,
+      titreModifierTags: "modifier Tags"
     }
   },
   methods: {
@@ -100,7 +107,7 @@ export default {
      * Gestion de l'action choisie par l'utilisateur : soit valider une modification de l'intérieur du contenu, soit revenir en arrière
      */
     action: function (actionChoisie) {
-
+      this.isModeTag = false
       if (actionChoisie === 'valider'){
         // evenement de modification du texte d'un contenu
         // @arg l'action choisie, ici 'valider'
@@ -142,20 +149,41 @@ export default {
      */
     setRating: function () {
       let that = this
-      let data={id_contenu: JSON.stringify(this.contenuClique._id), note: this.rating, auteur: this.auteur, version: this.contenuClique.version}
+      alert(this.contenuClique.version)
+      let data = {
+        id_contenu: JSON.stringify(this.contenuClique._id),
+        note: this.rating,
+        auteur: this.auteur,
+        version: this.contenuClique.version
+      }
       Service.noterContenu(data).then(function (response) {
         document.getElementById('noterContenu').click()
         that.notePresente = true
         that.messageNoter = "Voir votre note"
         let notes = JSON.parse(response.data)
 
-        that.$emit("majMoyenne", {id: that.contenuClique._id, note: notes[0], nbreNotes: notes[1], notePerso: that.rating})
+        that.$emit("majMoyenne", {
+          id: that.contenuClique._id,
+          note: notes[0],
+          nbreNotes: notes[1],
+          notePerso: that.rating
+        })
 
       })
-
-
+    },
+    /**
+     * Déclencheur du mode "edition de tag"
+     */
+    modifierTags: function () {
+      this.isModeTag = !this.isModeTag
+      if (this.isModeTag){
+        this.titreModifierTags = "modifier contenu"
+      } else {
+        this.titreModifierTags = "modifier tags"
+      }
     }
 
+
   },computed: {
     /**
      * @vuese
@@ -189,7 +217,6 @@ export default {
     contenuClique: function () {
 
       this.titreContenu = this.contenuClique.titre
-
       this.noteContenu = this.calculerNoteContenu
 
       this.isContenuRefuse = Object.prototype.hasOwnProperty.call(this.contenuClique, 'refuse');
@@ -198,7 +225,7 @@ export default {
         this.versionMax = this.contenuClique.versionEnCours.numero
         this.versionChoisie = this.versionMax
       }
-
+      
       let that = this
       Service.recupererNoteContenu(JSON.stringify(this.contenuClique._id), this.auteur, this.contenuClique.version).then(function (result) {
         let nombre = result.data
@@ -227,7 +254,13 @@ div {
 }
 button {
   height: auto;
-  width: auto;
+    width: auto;
+}
+
+#tagsLibres {
+  margin: 20px 10px;
+  flex-basis: 9%;
+
 }
 
 #titreDuContenu {
@@ -248,7 +281,7 @@ button {
 
 #typeEtSource, #notePopularite {
   margin-top: 10px;
-  flex-basis: 12.5%;
+  flex-basis: 9%;
   margin-bottom: 10px;
 
 }
@@ -262,7 +295,7 @@ button {
 
 #modifTitre {
   margin-top: 5px;
-  flex-basis: 50%;
+  flex-basis: 43%;
   margin-right: 5px;
   display: flex;
   justify-content: center;

src/components/Volet_Base.vue

@@ -86,9 +86,9 @@
             <td v-if="item.provenance === 'en-cours'"> - </td>
             <td v-else>{{ calculerNote(item) }}</td>
             <td>{{ item.note_perso }}</td>
-            <td v-show="!isActif" v-if="item.provenance !== 'en-cours'" v-b-popover.hover.bottom="item.tags_banque_fixes.toString()">{{item.tags_banque_fixes.toString()}}</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="item.tags_banque_libres.toString()">{{item.tags_banque_libres.toString()}}</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-else v-b-popover.hover.bottom="'tags non disponibles'">tags non disponibles</td>
             <td>{{ item.type }}</td>
             <td>{{ item.source }}</td>
@@ -108,7 +108,7 @@
             <td>{{item.versionEnCours.date}}</td>
             <td class="prout">{{item.popularite}}</td>
             <td>{{calculerNote(item)}}</td>
-            <td v-show="!isActif" v-b-popover.hover.bottom="item.tags_banque_fixes.toString()">{{item.tags_banque_fixes.toString()}}</td>
+            <td v-show="!isActif" v-b-popover.hover.bottom="item.tags_fixes.toString()">{{item.tags_fixes.toString()}}</td>
             <td>{{ item.type }}</td>
             <td>{{ item.source }}</td>
             <td class="boutonSupprimer">  <input type="checkbox" v-on:change="ajouterCoche(item._id, item.versionEnCours)" class="horns" name="horns"/></td>
@@ -740,14 +740,14 @@ export default {
         let filtre_tags_libres = (event.filtres.filter(contenu => contenu.type === 'tags libres').map(contenu => contenu.filtre))
 
         for (let i = 0; i < filtre_tags_libres.length; i++) {
-          contenusFiltres = contenusFiltres.filter(contenu => contenu.tags_banque_libres.includes(filtre_tags_libres[i]))
+          contenusFiltres = contenusFiltres.filter(contenu => contenu.tags_libres.includes(filtre_tags_libres[i]))
         }
       }
       if (event.filtres.filter(contenu => contenu.type === 'tags officiels').length > 0) {
         // tags officiels
         let filtre_tags_fixes = (event.filtres.filter(contenu => contenu.type === 'tags officiels').map(contenu => contenu.filtre))
         for (let i = 0; i < filtre_tags_fixes.length; i++) {
-          contenusFiltres = contenusFiltres.filter(contenu => contenu.tags_banque_fixes.includes(filtre_tags_fixes[i]))
+          contenusFiltres = contenusFiltres.filter(contenu => contenu.tags_fixes.includes(filtre_tags_fixes[i]))
         }
       }
       if (event.filtres.filter(contenu => contenu.type === 'type').length > 0) {
@@ -839,7 +839,6 @@ export default {
             break
           case "Date Version actuelle":
             this.dateTriee = !this.dateTriee
-              alert("Mais oui")
             if (this.dateTriee)
               this.contenus.sort((a,b) => (a.versionEnCours.date > b.versionEnCours.date) ? 1 : ((b.versionEnCours.date > a.versionEnCours.date) ? -1 : 0))
             else
@@ -899,7 +898,6 @@ export default {
       if (item.version !== undefined && item.version !== item.versionEnCours.numero){
 
         for (let it in item.historique){
-          alert(item.historique[it].numero +  " " +  item.version)
           if (item.historique[it].numero === item.version){
             if (item.historique[it].note === 0){
               return 0

src/service/Service.js

@@ -111,6 +111,25 @@ export default {
     recupererNoteContenu(idContenu, auteur, version){
         return axios.get(urlBase + contenus + "recupererNote?auteur=" + auteur + "&version=" + version + "&id_contenu=" + idContenu, this.getHeader(localStorage.token))
     },
+    // gestion des contenus - fonctions spéciales tags
+    ajouterTagLibre(data){
+        return axios.patch(urlBase + contenus + "newTagLibre", data, this.getHeader(localStorage.token))
+    },
+    recupererTagLibre(auteur){
+        return axios.get(urlBase + contenus + "getTagLibre/" + auteur, this.getHeader(localStorage.token))
+    },
+    recupererTagLibreContenu(idContenu, auteur){
+        return axios.get(urlBase + contenus + "getTagLibreContenu/" + idContenu + "/" + auteur, this.getHeader(localStorage.token))
+    },
+    associerTagLibre(data){
+        return axios.patch(urlBase + contenus + "associerTagLibre", data, this.getHeader(localStorage.token))
+    },
+    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))
+    },*/
     // gestion des en-cours
     creerEnCours(data) {
         return axios.post(urlBase + en_cours + "newEnCours", data, this.getHeader(localStorage.token))

src/tests/Tags.test.js

-import Login from "../Login.vue";
-import {mount} from "@vue/test-utils";
-import { shallowMount } from '@vue/test-utils'
-import Service from "../service/Service";
-import Tags from "../GererTags";
-
-// Rien a tester dans Index.vue, car c'est juste un "aggrégateur" pour d'autres composants.
-
-test('Tags', () => {
-
-    const wrapper = shallowMount(Tags)
-
-    expect(wrapper.vm).toBeTruthy();
-})
\ No newline at end of file