Récupération du contenu d'un fichier ok

package.json

@@ -8,18 +8,23 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@popperjs/core": "^2.9.2",
     "axios": "^0.21.1",
+    "bootstrap": "^5.0.1",
+    "bootstrap-vue": "^2.21.2",
     "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",
+    "popper.js": "^1.16.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-showdown": "^3.1.0",
     "vue-simplemde": "^2.0.0"
   },
   "devDependencies": {

src/Contenu.vue

 <template>
   <div id="app">
-    <Volet_Base @choix_variante="choixVariante" @newContenu="newContenu" v-bind:auteur="auteur" />
+    <Volet_Base @choix_variante="choixVariante" @newContenu="newContenu" v-bind:auteur="auteur"  v-bind:contenuAjoute="contenuAjoute" />
   </div>
 </template>
 
@@ -23,7 +23,7 @@ export default {
 
     }
   },
-  props: ['auteur']
+  props: ['auteur', 'contenuAjoute']
 }
 </script>
 

src/Index.vue

@@ -3,14 +3,20 @@
     <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" @newContenu="newContenu"></Contenu>
+    <Contenu v-show="etat === 'Contenu'"  v-bind:auteur="auteur" v-bind:contenuAjoute="contenuAjoute"  @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>
-
+    <NewContenu v-show="etat === 'newContenu'" v-bind:auteur="auteur" @contenuAjoute="ajouterUnContenu"></NewContenu>
+    <!--    <p id="popover-target-1" style="text-align: center">
+          Hover Me
+        </p>
+        <b-popover target="popover-target-1" triggers="click" placement="bottom">
+          <template #title>Popover Title</template>
+          <h1>I am</h1> popover <b>component</b> content!
+        </b-popover>-->
   </div>
 </template>
 
@@ -22,6 +28,7 @@ import Maj from "@/Maj";
 import Profil from "@/Profil";
 import Tags from "@/Tags";
 import NewContenu from "@/NewContenu";
+// import showdown from "showdown"
 
 export default {
   name: "Index.vue",
@@ -34,7 +41,8 @@ export default {
       errorLogin: false,
       auteur: "",
       isRecu: false,
-      isPropose: false
+      isPropose: false,
+      contenuAjoute: false
     }
   },
   methods: {
@@ -65,7 +73,11 @@ export default {
     },
     newContenu: function () {
       this.etat = "newContenu"
+    },
+    ajouterUnContenu:function () {
+      this.contenuAjoute = true
     }
+
   },
   components:{
     NewContenu,
@@ -80,5 +92,4 @@ export default {
 </script>
 
 <style scoped>
-
 </style>
\ No newline at end of file

src/Login.vue

@@ -56,7 +56,7 @@ export default {
   width : 1000px;
   text-align: center;
   align-content: center;
-  margin: 20% auto 0;
+  margin: 15% auto 0;
 }
 
 input{
@@ -65,7 +65,7 @@ input{
 }
 
 button {
-  height: 20px;
+  height: auto;
   width: auto;
   text-align: center;
 }

src/NewContenu.vue

 <template>
   <div>
+    <p></p>
     <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">
+    <!--    <div class="markdown">
           <textarea rows="50" cols="150"/>
 
         </div>-->
-<!--    <vue-simplemde id="markdownEditor" v-model="contenuSaisi"/>-->
+    <!--    <vue-simplemde id="markdownEditor" v-model="contenuSaisi"/>-->
     <div class="mavonEditor">
 
       <mavon-editor  :language="'fr'" style="min-height: 700px" v-model="contenuSaisi"/>
@@ -23,10 +24,11 @@
 
 <script>
 // import VueSimplemde from 'vue-simplemde'
-
+import Service from "@/service/Service";
 
 export default {
   name: "NewContenu",
+  props: ['auteur'],
   data() {
     return {
       contenuSaisi: '',
@@ -38,7 +40,14 @@ export default {
   },
   methods: {
     ajouterContenu: function () {
-      alert("contenu : " + this.contenuSaisi  )
+
+      let data = {auteur: this.auteur, contenu_a_ecrire: this.contenuSaisi}
+      let that = this
+      Service.creerContenuPerso(data).then(
+          function () {
+            that.$emit("contenuAjoute")
+          }
+      )
     }
   }
 }
@@ -72,4 +81,4 @@ button {
   height: 250%;
 }
 
-  </style>
+</style>
\ No newline at end of file

src/components/Consulter_Contenu.vue

@@ -11,7 +11,9 @@
       <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>
-
+      <span contenteditable="false" v-html="formatterMarkdown()">
+      </span>
+      <br>
     </div>
 
     <button id="ren" v-on:click="revenirArriere">Retour en arrière</button>
@@ -20,17 +22,40 @@
 </template>
 
 <script>
+import Service from "@/service/Service";
+
 export default {
   name: "Consulter_Contenu",
   props: ['contenuClique', 'contenuCliqueProvenance', 'auteur'],
   methods: {
+    formatterMarkdown: function () {
+      let showdown  = require('showdown'),
+          converter = new showdown.Converter()
+      return converter.makeHtml(this.contenu)
+    },
     actionContenu: function (action) {
       this.$emit("actionContenu", {action: action, contenu: this.contenuClique})
     },
     revenirArriere: function () {
       this.$emit("retour_arriere", {panierChoisi: this.contenuCliqueProvenance !== 'banque'})
     }
+  },
+  data: function () {
+    return {
+      contenu: ''
     }
+  },
+  watch: {
+    contenuClique: function () {
+      let that = this
+      Service.recupererTexteContenu(JSON.stringify(this.contenuClique._id)).then(
+          function (response) {
+            that.contenu = response.data
+            // alert(response.data)
+          }
+      )
+    }
+  },
 }
 </script>
 
@@ -46,6 +71,7 @@ div{
 
 #actionsContenu>button {
   width: auto;
+  height: auto;
   margin-left: 45%;
   margin-right: 45%;
 
@@ -53,6 +79,7 @@ div{
 
 #ren {
   width: auto;
+  height: auto;
 }
 
 

src/components/Modifier_Contenu.vue

+<template>
+<div >
+  <p id="modifTitre"> Modification du contenu </p>
+  <div class="mavonEditor">
+
+    <mavon-editor  :language="'fr'" style="min-height: 700px" v-model="contenu"/>
+  </div>
+  <div class="markdown">
+    <br>
+    <button id="validerModif" v-on:click="validerUneModif">modifier </button>
+    <button> revenir en arrière</button>
+
+  </div>
+
+</div>
+</template>
+
+<script>
+import Service from "@/service/Service";
+
+export default {
+  name: "Modifier_Contenu",
+  props: ['contenuClique', 'auteur', 'contenuCliqueProvenance'],
+  data: function () {
+    return {
+      contenu: ''
+    }
+  },
+  methods: {
+    validerUneModif: function (message) {
+      // Modification du contenu en cours (au niveau de l'intérieur du fichier)
+
+      }
+
+  },
+  watch: {
+    contenuClique: function () {
+      let that = this
+      Service.recupererTexteContenu(JSON.stringify(this.contenuClique._id)).then(
+          function (response) {
+            that.contenu = response.data
+           // alert(response.data)
+          }
+      )
+    }
+  },
+
+}
+
+/*  this.panierChoisi = true
+          if (this.contenuCliqueProvenance !== 'en-cours'){
+            data = {auteur: this.auteur, id_contenu: JSON.stringify(event.contenu._id), version: event.contenu.versionEnCours["numero"]}
+            Service.creerEnCours(data).then(
+                function () {
+                  that.contenusDuPanier()
+                }
+            )
+          }*/
+
+</script>
+
+<style scoped>
+div {
+  text-align: center;
+}
+button {
+  height: auto;
+  width: auto;
+}
+
+#validerModif {
+  margin-right: 5px;
+  margin-bottom: 5px;
+}
+
+#modifTitre{
+  margin-top: -35px;
+}
+</style>
\ No newline at end of file

src/main.js

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

src/service/Service.js

@@ -14,86 +14,92 @@ export default {
         return axios.get(urlBase + "checkUser?login=" + login + "&password=" + motDePasse)
     },
 
-    getPanierAuteur(auteur){
+    getPanierAuteur(auteur) {
         return axios.get(urlBase + "getContenuPanier/" + auteur + "?perso=True&tiers=True&enCours=true")
     },
 
-    getBanqueAuteur(auteur){
+    getBanqueAuteur(auteur) {
         return axios.get(urlBase + "getContenuBanque/" + auteur)
     },
 
-    getContenuById(idContenu){
+    getContenuById(idContenu) {
         return axios.get(urlBase + "getContenu/" + idContenu)
     },
 
-    creerContenuTiers(data){
+    creerContenuTiers(data) {
         return axios.patch(urlBase + "ajouterTiers", data)
     },
 
-    creerContenuPerso(data){
+    creerContenuPerso(data) {
         return axios.post(urlBase + "addContenu", data)
     },
 
 
-    creerEnCours(data){
+    creerEnCours(data) {
         return axios.post(urlBase + "newEnCours", data)
     },
 
-    creerEnCoursRefuse(data){
+    creerEnCoursRefuse(data) {
         return axios.post(urlBase + "newEnCoursRefuse", data)
     },
 
-    supprimerEnCours(idContenu){
+    supprimerEnCours(idContenu) {
         return axios.delete(urlBase + "supprimerEnCours/" + idContenu)
     },
 
-    supprimerEnCoursParLid(idEnCours){
+    supprimerEnCoursParLid(idEnCours) {
         return axios.delete(urlBase + "supprimerEnCoursParId/" + idEnCours)
     },
 
-    supprimerContenu(idContenu){
+    supprimerContenu(idContenu) {
         return axios.delete(urlBase + "deletePerso/" + idContenu)
     },
 
-    supprimerTiers(auteur, id_tiers){
+    supprimerTiers(auteur, id_tiers) {
         return axios.delete(urlBase + "deleteTiers?auteur=" + auteur + "&id_tiers=" + id_tiers)
     },
-    majContenu(data){
+    majContenu(data) {
         return axios.patch(urlBase + "majContenu", data)
 
     },
 
     // bonus : fonction de récupération des tags pour getPanier et getBanque
 
-    getPublicationsRecues(auteur){
+    getPublicationsRecues(auteur) {
         return axios.get(urlBase + "demandePublication/" + auteur + "/False")
     },
 
-    getPublicationsProposees(auteur){
+    getPublicationsProposees(auteur) {
         return axios.get(urlBase + "demandePublication/" + auteur + "/True")
     },
 
     creerDemandePublication(data) {
-        return axios.post(urlBase + "demandePublication" , data)
+        return axios.post(urlBase + "demandePublication", data)
 
     },
-    supprimerDemandePublication(idDemandePublication){
+    supprimerDemandePublication(idDemandePublication) {
         return axios.delete(urlBase + "demandePublication/" + idDemandePublication)
     },
-    creerNouveauContenu(data){
+    creerNouveauContenu(data) {
         return axios.post(urlBase + "newContenu", data)
     },
-    gererDemandePublication(data){
+    gererDemandePublication(data) {
         return axios.patch(urlBase + "gererDemandePub", data)
     },
 
-    isMajTiersDisponible(auteur){
-        return axios.get(urlBase + "isMajTiersDisponible/" + auteur )
+    isMajTiersDisponible(auteur) {
+        return axios.get(urlBase + "isMajTiersDisponible/" + auteur)
     },
-    listeMajTiers(auteur){
-        return axios.get(urlBase + "listeMajTiers/" + auteur )
+    listeMajTiers(auteur) {
+        return axios.get(urlBase + "listeMajTiers/" + auteur)
     },
     gererMajTiers(data) {
         return axios.patch(urlBase + "gererMajTiers", data)
+    },
+    modifierContenuBasique(data) {
+        return axios.patch(urlBase + "modifierContenuBasique", data)
+    },
+    recupererTexteContenu(idContenu){
+        return axios.get(urlBase + "getTexteContenu/" + idContenu)
     }
 }
\ No newline at end of file