Refonte consultation - 1ere version

src/NewContenu.vue

@@ -13,7 +13,7 @@
     <!--    <vue-simplemde id="markdownEditor" v-model="contenuSaisi"/>-->
     <div class="mavonEditor">
 
-      <mavon-editor  :language="'fr'" style="height: 78vh; margin-top: -0.5%; z-index: -1" v-model="contenuSaisi"/>
+      <mavon-editor :language="'fr'" style="position: static; height: 78vh; margin-top: -0.5%" v-model="contenuSaisi"/>
     </div>
     <div class="markdown">
       <br>
@@ -49,6 +49,7 @@ export default {
     ajouterContenu: function () {
 
       let data = {auteur: this.auteur, contenu_a_ecrire: this.contenuSaisi, titre: this.titreContenu}
+      alert(this.titreContenu)
       let that = this
       Service.creerContenuPerso(data).then(
           function (reponse) {

src/components/Modifier_Contenu.vue

 <template>
   <div >
     <div id="titreContenu">
+<!--      <select v-show="(contenuCliqueProvenance === 'banque'
+      || contenuCliqueProvenance === 'perso')
+
+       && versionMax > 1" v-model="versionChoisie" v-on:change="changerVersion" >-->
+
       <label>Titre du contenu : </label><br>
+      <select v-show="contenuCliqueProvenance === 'perso' && versionMax > 1" v-model="versionChoisie" v-on:change="changerVersion" >
+        <option v-for="i in versionMax" v-bind:key="i"> {{i}}</option>
+      </select>
       <input type="text" placeholder="titre du contenu"  v-model="titreContenu">
+
+      <button v-on:click="actionContenu('supprimer')">Supprimer</button>
+      <button v-show="contenuCliqueProvenance !== 'maj' && contenuCliqueProvenance === 'en-cours' &&
+      contenuClique.origine === 'tiers' && contenuClique.anonyme !== 'oui'" v-on:click="actionContenu('publier')">Publier le contenu</button>
+      <button v-show="contenuCliqueProvenance !== 'maj' && contenuCliqueProvenance === 'en-cours' &&
+      (contenuClique.origine === 'perso' || contenuClique.anonyme === 'oui')"  v-on:click="actionContenu('validerModification')">Valider la modification</button>
+
     </div>
     <br>
     <div class="mavonEditor">
 
-      <mavon-editor  :language="'fr'" style="height: 80vh; margin-top: -0.5%; z-index: -1" v-model="texteDuContenu"/>
+      <mavon-editor  :language="'fr'" style="position: static; height: 78vh; margin-top: -0.5%" v-model="texteDuContenu"/>
     </div>
     <div class="markdown">
       <br>
@@ -21,6 +36,8 @@
 
 <script>
 
+import Service from "@/service/Service";
+
 export default {
   name: "Modifier_Contenu",
   props: {
@@ -30,12 +47,18 @@ export default {
     auteur: {},
     // la provenance (perso, tiers, en-cours)
     contenuCliqueProvenance: {},
-    // le titre du contenu cliqué
-    titreContenu: {}
+    // la version du contenu cliqué
+    contenuCliqueVersion: {},
+    // le contenu clique
+    contenuClique: {}
   },
   data: function () {
     return {
-      contenu: ''
+      contenu: '',
+      versionChoisie: 0,
+      titreContenu: '',
+      isContenuRefuse: false,
+      versionMax: 0
     }
   },
   methods: {
@@ -55,9 +78,25 @@ export default {
         // @arg l'action choisie, ici 'arriere'
         this.$emit("choixModif", {action: actionChoisie})
       }
+    },
+    changerVersion: function () {
+      let that = this
+     Service.recupererTexteVersionContenu(JSON.stringify(this.contenuClique._id), this.versionChoisie).then(
+          function (response) {
+            that.texteDuContenu = response.data
+          }
+      )
+    },
+    actionContenu: function (action) {
+      // Dès qu'une action est sélectionnée, la renvoie à Volet_Base
+      // @arg action l'action choisie
+      // @arg contenu le contenu cliqué
+      // @arg le texte associé au contenu (sert potentiellement à rien)
+
+      this.$emit("actionContenu", {action: action, contenu: this.contenuClique, texte: this.texteDuContenu})
     }
 
-  }/*,
+  },/*,
   watch: {
     /!**
      * @vuese
@@ -67,6 +106,21 @@ export default {
      // this.titreContenu
     }
   }*/
+  watch: {
+    contenuClique: function () {
+
+      console.log(this.contenuClique)
+
+      this.titreContenu = this.contenuClique.titre
+
+      this.isContenuRefuse = Object.prototype.hasOwnProperty.call(this.contenuClique, 'refuse');
+
+        if (this.contenuCliqueProvenance === 'perso'){
+          this.versionMax = this.contenuClique.versionEnCours.numero
+          this.versionChoisie = this.versionMax
+        }
+    }
+  }
 }
 
 </script>

src/components/Volet_Base.vue

 <template>
   <div id="divPrincipale" >
 
-    <div id="principal" v-show="!modeConsultation && !modeModification">
+    <div id="principal" v-show="!modeModification">
       <!--   width: 330px;
        -->
       <div id="ensemble" class="ensemble" :class="darktheme ? 'ensembledark' : ''" :style="isActif ? {width: '340px'} : {width: '40px'}">
         <button id="changerVariante" :style="isActif ? {width: 'auto'} : {width: '20px'}"
-                v-show="!modeConsultation && !modeModification" v-on:click="changerVariante">{{ texteBoutonvariante }}</button>
+                v-show="!modeModification" v-on:click="changerVariante">{{ texteBoutonvariante }}</button>
         <br>
 
         <button id="boutonVolet" v-on:click="desactiverVolet"  v-bind:style="{'margin-top': '0%'}"></button>
@@ -18,7 +18,7 @@
       </div>
 
       <div id="tableau"  :class="darktheme ? 'tableaudark' : ''" :style="isActif ? {width: '90%'} : {width: '98%'}" >
-        <div class="choixPanier" v-show="panierChoisi && !modeConsultation && !modeModification">
+        <div class="choixPanier" v-show="panierChoisi && !modeModification">
           <label id="labelPerso" :style="isActif ? {'margin-left': '-5px'} : {'margin-left': '148px'}">Perso </label>
           <input type="checkbox" class="filtreTableau" id="filtrePerso" v-model="persoChecked"
                  v-on:click="persoChecked = !persoChecked" name="perso" value="tiers"/>
@@ -114,7 +114,7 @@
         </table>
 
         <tooltip />
-        <div id="ajouterContenu" v-show="panierChoisi && !modeConsultation" class="circle" v-bind:class="darktheme ? 'circleDark' : ''"
+        <div id="ajouterContenu" v-show="panierChoisi && !modeModification" class="circle" v-bind:class="darktheme ? 'circleDark' : ''"
              v-bind:style="{'margin-left': (!isActif ? '94.8%' : '94%')}">
           <b-popover target="ajouterContenu" triggers="click" placement="lefttop">
             <template #title>Choix : </template>
@@ -125,11 +125,11 @@
 
       </div>
     </div>
-    <Consulter_Contenu v-bind:auteur="auteur" @actionContenu="actionContenu" @retour_arriere="retourArriere" v-bind:contenuClique = "contenuClique"
-                       v-bind:contenuCliqueProvenance = "contenuCliqueProvenance" v-show="modeConsultation && !modeModification"/>
+<!--    <Consulter_Contenu v-bind:auteur="auteur" @actionContenu="actionContenu" @retour_arriere="retourArriere" v-bind:contenuClique = "contenuClique"
+                       v-bind:contenuCliqueProvenance = "contenuCliqueProvenance" v-show="modeConsultation && !modeModification"/>-->
     <Modifier_Contenu v-bind:auteur="auteur" v-bind:texteDuContenu = "texteDuContenu" v-bind:contenuCliqueProvenance = "contenuCliqueProvenance"
-                      v-show="!modeConsultation && modeModification" @choixModif="choixModif" v-bind:titreContenu="titreContenu"/>
-
+                      v-show="modeModification" @actionContenu="actionContenu"  v-bind:contenuClique = "contenuClique"
+                      @choixModif="choixModif" v-bind:titreContenu="titreContenu"/>
 
   </div>
 </template>
@@ -142,7 +142,6 @@ window.$ = window.jQuery = $;
 require("jquery-ui-bundle");
 import Volet_Menu from "./Volet_Menu";
 import Volet_Contenu from "./Volet_Contenu";
-import Consulter_Contenu from "./Consulter_Contenu";
 import Service from '../../src/service/Service'
 import Modifier_Contenu from "./Modifier_Contenu";
 import Test from "../Test"
@@ -153,8 +152,7 @@ export default {
     Test,
     Modifier_Contenu,
     Volet_Menu,
-    Volet_Contenu,
-    Consulter_Contenu
+    Volet_Contenu
   },
   props: {
     // L'auteur connecté
@@ -183,7 +181,6 @@ export default {
       contenuClique: "",
       contenuCliqueProvenance: "",
       modalOn: false,
-      modeConsultation: false,
       modeModification: false,
       persoChecked: true,
       tiersChecked: true,
@@ -219,7 +216,6 @@ export default {
      * Dès qu'on se deconnecte on réinitialise la vue en cours sur le tableau des contenus
      */
     deconnexion: function () {
-      this.modeConsultation = false
       this.modeModification = false
       this.panierChoisi = true
     },
@@ -264,7 +260,7 @@ export default {
      * @vuese
      * Permet de rendre le volet latéral bougeable à la souris
      */
-    this.modeConsultation = false
+    this.modeModification = false
     $('#ensemble').draggable()
   },
   methods: {
@@ -395,25 +391,33 @@ export default {
      */
     chargerContenu: function (item, provenance){
       this.panierChoisi = false
-      this.modeConsultation = true
+      this.modeModification = true
       this.contenuClique = item
       this.contenuCliqueProvenance = provenance
+    //  this.titreContenu = item.titre
+      //this.contenuCliqueVersion = item.version
+      let showdown = require('showdown'),
+          converter = new showdown.Converter()
+
+      this.texteDuContenu = converter.makeMarkdown(this.texteDuContenu)
+
     },
-    /**
+/*    /!**
      * @vuese
      * Retour de Consulter_Contenu à Volet_Base
-     */
+     *!/
     retourArriere: function (event) {
       this.modeConsultation = false
       this.panierChoisi = event.panierChoisi
-    },
+    },*/
     /**
      * @vuese
      * Récupération de lm'action choisie dans Consulter_Contenu,
      * parmi les 4 possibilités : mettre en favori, modifier, supprimer et validerModification / Demander la Publication
      */
     actionContenu: function (event) {
-      this.modeConsultation = false
+      alert("L'appel de la forêt")
+      this.modeModification = false
       let data = {}
       let that = this
       let auteur = ""