Ajout d'un editeur markdown pour la creation de contenu

package.json

@@ -12,11 +12,15 @@
     "core-js": "^3.6.5",
     "jquery": "^3.6.0",
     "jquery-ui-bundle": "^1.12.1-migrate",
+    "markdown-it-vue": "^1.1.6",
+    "mavon-editor": "^2.9.1",
+    "showdown": "^1.9.1",
     "vue": "^2.6.11",
     "vue-cookie": "^1.1.4",
     "vue-cookies": "^1.7.4",
     "vue-js-modal": "^2.0.0-rc.6",
-    "vue-js-popover": "^1.2.1"
+    "vue-js-popover": "^1.2.1",
+    "vue-simplemde": "^2.0.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

src/Contenu.vue

 <template>
   <div id="app">
-    <Volet_Base @choix_variante="choixVariante" v-bind:auteur="auteur" />
+    <Volet_Base @choix_variante="choixVariante" @newContenu="newContenu" v-bind:auteur="auteur" />
   </div>
 </template>
 
@@ -17,6 +17,10 @@ export default {
 
         this.$emit("choix_variante", {variante: event.variante})
 
+    },
+    newContenu: function () {
+      this.$emit("newContenu")
+
     }
   },
   props: ['auteur']

src/Index.vue

@@ -3,12 +3,13 @@
     <Login v-show="etat === 'unlogged'" @user_logged="setLogged"></Login>
 
     <Menu v-show="etat !== 'unlogged'" v-bind:auteur="auteur" v-bind:etat="etat" v-bind:variante="variante" @menu_choisi="changerPage"></Menu>
-    <Contenu v-show="etat === 'Contenu'"  v-bind:auteur="auteur"  @choix_variante="choixVariante"></Contenu>
+    <Contenu v-show="etat === 'Contenu'"  v-bind:auteur="auteur"  @choix_variante="choixVariante" @newContenu="newContenu"></Contenu>
     <Maj v-show="etat === 'Mises à jour'" v-bind:auteur="auteur" v-bind:isRecu="isRecu" v-bind:isPropose="isPropose"
          v-bind:contenuEnPublication="contenuEnPublication" ></Maj>
     <Profil v-show="etat === 'Profil'"  ></Profil>
     <Tags v-show="etat === 'Tags'"  ></Tags>
     <p style="text-align: center" v-show="errorLogin">Login ou mot de passe erroné</p>
+    <NewContenu v-show="etat === 'newContenu'"></NewContenu>
 
   </div>
 </template>
@@ -20,6 +21,7 @@ import Menu from "@/Menu";
 import Maj from "@/Maj";
 import Profil from "@/Profil";
 import Tags from "@/Tags";
+import NewContenu from "@/NewContenu";
 
 export default {
   name: "Index.vue",
@@ -60,9 +62,13 @@ export default {
     choixVariante: function (event) {
       this.variante = event.variante
 
+    },
+    newContenu: function () {
+      this.etat = "newContenu"
     }
   },
   components:{
+    NewContenu,
     Login,
     Contenu,
     Menu,

src/Login.vue

 <template>
   <div id="loginForm" v-on:keyup="keymonitor">
 
-      <p>Deux comptes temporaires : Charles, Jacques</p>
+      <p>Trois comptes temporaires : Charles, Jacques, Valery</p>
       <label for="identifiant">Identifiant</label>
       <br>
       <input type="text" id="identifiant" placeholder="identifiant"  v-model="login"  >

src/Maj.vue

@@ -89,9 +89,7 @@ export default {
   props: ['contenuEnPublication', 'auteur', 'isRecu', 'isPropose'],
   methods: {
     naviguer: function (e) {
-      alert("recu " + this.isRecu)
       e.target.classList.toggle("niveau-down")
-      //alert(e.target.id)
       document.getElementById("detail" + e.target.id[0].toUpperCase() + e.target.id.substring(1)).classList.toggle('affiche')
     },
     conserver: function (item) {
@@ -120,12 +118,21 @@ export default {
     },
     gererPublication: function (item, reponse) {
       let that = this
+      let data = ""
+      if (item.auteurContenu === undefined) {
 
-      const data = {id_publication: JSON.stringify(item._id), reponse: reponse, auteur: item.auteurDemande}
+        data = {id_tiers: JSON.stringify(item[0]._id), reponse: reponse, auteur: this.auteur}
+        Service.gererMajTiers(data).then(function () {
+          that.publicationsRecues()
+        })
+
+      }else {
+        data = {id_publication: JSON.stringify(item._id), reponse: reponse, auteur: item.auteurDemande}
         this.contenusRecu = []
         Service.gererDemandePublication(data).then(function () {
           that.publicationsRecues()
         })
+      }
     },
     publicationsRecues: function () {
       let that = this
@@ -139,6 +146,12 @@ export default {
           }
         }
       })
+
+
+      Service.listeMajTiers(this.auteur).then(function (response){
+
+        that.contenusRecu.push(response.data)
+      })
     },
     publicationsProposees: function () {
       let that = this

src/Menu.vue

@@ -69,8 +69,12 @@ export default {
       })
     },
     majTiers: function () {
+      let that = this
       Service.isMajTiersDisponible(this.auteur).then(function (response) {
-        alert("Tiens, j'ai envie d'aller jorder un bon coup moua (aaaaaaaaaaaaaaaahhhhhhh) : " + response.data)
+        if (response.data === "True") {
+          that.isNotif = true
+          that.isRecu = that.isNotif
+        }
       })
     }
   },

src/NewContenu.vue

+<template>
+  <div>
+    <p>Création de contenu</p>
+    <p>Dans cette zone vous pouvez renseigner (en langage markdown) le contenu que vous désirez</p>
+<!--    <div class="markdown">
+      <textarea rows="50" cols="150"/>
+
+    </div>-->
+<!--    <vue-simplemde id="markdownEditor" v-model="contenuSaisi"/>-->
+    <div class="mavonEditor">
+
+    <mavon-editor  :language="'fr'" style="min-height: 700px" v-model="contenuSaisi"/>
+    </div>
+    <div class="markdown">
+      <br>
+    <button v-on:click="ajouterContenu">créer</button><br><br>
+      <button>revenir en arrière</button>
+
+    </div>
+
+  </div>
+</template>
+
+<script>
+// import VueSimplemde from 'vue-simplemde'
+
+
+export default {
+  name: "NewContenu",
+  data() {
+    return {
+      contenuSaisi: '',
+      markdownOption: {
+        bold: true,
+        language: 'fr'
+      }
+    }
+  },
+  methods: {
+    ajouterContenu: function () {
+      alert("contenu : " + this.contenuSaisi  )
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+/*@import '~simplemde/dist/simplemde.min.css';*/
+
+.markdown, p{
+  text-align: center;
+
+}
+
+input {
+  width: 1500px;
+  height: 500px
+}
+
+button {
+  align-items: center;
+  width: auto;
+}
+
+#markdownEditor{
+  height: 1500px
+}
+
+.mavonEditor {
+  width: 100%;
+  height: 250%;
+}
+
+  </style>
\ No newline at end of file

src/components/Consulter_Contenu.vue

@@ -7,14 +7,13 @@
     <div id="actionsContenu">
       <button v-show="contenuCliqueProvenance !== 'banque' && contenuClique.etat !== 'refuse'" v-on:click="actionContenu('modifier')">modifier le contenu</button>
       <button v-show="contenuCliqueProvenance !== 'banque'" v-on:click="actionContenu('supprimer')">supprimer le contenu</button>
-      <button v-show="contenuCliqueProvenance === 'en-cours' && contenuClique.etat !== 'refuse'" v-on:click="actionContenu('publier')">publier le contenu</button>
+      <button v-if="auteur !== contenuClique.auteur" v-show="contenuCliqueProvenance === 'en-cours' && contenuClique.etat !== 'refuse'" v-on:click="actionContenu('publier')">publier le contenu</button>
+      <button v-else v-show="contenuCliqueProvenance === 'en-cours' && contenuClique.etat !== 'refuse'" v-on:click="actionContenu('validerModification')">valider la modification</button>
       <button v-show="contenuCliqueProvenance === 'banque' && contenuClique.etat !== 'refuse'" v-on:click="actionContenu('mettreFavori')">mettre le contenu en tiers</button>
       <br>
 
     </div>
 
-    <p v-if="contenuClique.etat === 'refuse'">Je suis un contenu en cours {{contenuClique.etat}}</p>
-
     <button id="ren" v-on:click="revenirArriere">Retour en arrière</button>
 
   </div>
@@ -23,7 +22,7 @@
 <script>
 export default {
   name: "Consulter_Contenu",
-  props: ['contenuClique', 'contenuCliqueProvenance'],
+  props: ['contenuClique', 'contenuCliqueProvenance', 'auteur'],
   methods: {
     actionContenu: function (action) {
       this.$emit("actionContenu", {action: action, contenu: this.contenuClique})

src/components/Volet_Base.vue

@@ -48,12 +48,14 @@
               v-bind:style="{
                 'background-color': item.provenance === 'perso' ? 'white' : item.provenance === 'tiers' ? 'red' : 'blue'
                      }" >
-            <td class="modal titreContenu" v-on:click="chargerContenu(item, item.provenance)" v-popover:tooltip="'prévisualisation'">{{ item._id }}</td>
+            <td class="modal titreContenu" v-on:click="chargerContenu(item, item.provenance)" v-popover:tooltip="'Open The Eyes\n'+
+'\n'+
+'Le **pipi** du *caca* est sur ton toit'">{{ item._id }}</td>
             <td>{{item.auteur}}</td>
-            <td v-if="item.provenance === 'en-cours'">{{ item.version }}</td>
+            <td v-if="item.provenance === 'tiers'">{{ item.version }}</td>
             <td v-else>{{ item.versionEnCours.numero }}</td>
             <td>The table body</td>
-            <td>with two columns</td>
+            <td class="prout">with two columns</td>
             <td>with two columns</td>
             <td class="modal tagContenu" v-popover:tooltip="'tags'">with two columns</td>
 
@@ -67,7 +69,7 @@
             <td>{{ item.auteur }}</td>
             <td>{{item.versionEnCours}}</td>
             <td>with two columns</td>
-            <td>with two columns</td>
+            <td class="prout">with two columns</td>
             <td>with two columns</td>
             <td class="modal tagContenu" v-popover:tooltip="'tags'">with two columns</td>
 
@@ -84,7 +86,7 @@
 
       </div>
     </div>
-    <Consulter_Contenu @actionContenu="actionContenu" @retour_arriere="retourArriere" v-bind:contenuClique = "contenuClique" v-bind:contenuCliqueProvenance = "contenuCliqueProvenance" v-show="modeConsultation"/>
+    <Consulter_Contenu v-bind:auteur="auteur" @actionContenu="actionContenu" @retour_arriere="retourArriere" v-bind:contenuClique = "contenuClique" v-bind:contenuCliqueProvenance = "contenuCliqueProvenance" v-show="modeConsultation"/>
 
     <div v-show="panierChoisi && !modeConsultation" class="circle" v-on:click="ajouterContenu" v-bind:style="{'margin-left': '95%'}">
     </div>
@@ -220,18 +222,16 @@ export default {
       }
       this.checkes = []
       $(".horns").prop( "checked", false );
-    },
-    majContenu: function () {
-
     },
     ajouterContenu: function () {
-      let data = {auteur: this.auteur, nom_fichier: "Contenu1", commit: ""}
+      this.$emit("newContenu")
+   /*   let data = {auteur: this.auteur, nom_fichier: "Contenu1", commit: ""}
       let that = this
       Service.creerContenuPerso(data).then(
           function () {
             that.contenusDuPanier()
           }
-      )
+      )*/
     },
     chargerContenu: function (item, provenance){
       this.modeConsultation = true;
@@ -306,6 +306,15 @@ export default {
               }
           )
           break
+        case "validerModification":
+          data = {id_contenu: JSON.stringify(event.contenu.reference), auteur: ""}
+          Service.majContenu(data).then(function () {
+            Service.supprimerEnCours( JSON.stringify(event.contenu.reference)).then(function () {
+              that.contenusDuPanier()
+            })
+
+          })
+          break
       }
     },
     ajouterCoche: function (idContenu, provenance) {

src/main.js

 import Vue from 'vue'
 import Index from '@/Index'
 import VPopover from 'vue-js-popover'
-
+import mavonEditor from 'mavon-editor';
+import 'mavon-editor/dist/css/index.css';
 //import Index from '@/Index'
 Vue.config.productionTip = false
 Vue.use(VPopover, { tooltip: true })
+Vue.use(mavonEditor)
 
 new Vue({
   render: h => h(Index),

src/service/Service.js

@@ -92,5 +92,8 @@ export default {
     },
     listeMajTiers(auteur){
         return axios.get(urlBase + "listeMajTiers/" + auteur )
+    },
+    gererMajTiers(data) {
+        return axios.patch(urlBase + "gererMajTiers", data)
     }
 }
\ No newline at end of file