event modification contenu ok

src/components/Consulter_Contenu.vue

@@ -5,20 +5,36 @@
     <p>(Dans le futur, ces actions varieront en fonction du type de contenu cliqué dans la 'fenetre principale')</p>
 
     <div id="actionsContenu">
-      <button>modifier le contenu</button>
-      <button>supprimer le contenu</button>
-      <button>publier le contenu</button>
-      <button>mettre le contenu en tiers</button>
+      <button v-show="contenuCliqueProvenance !== 'banque'" v-on:click="modifierContenu">modifier le contenu</button>
+      <button v-show="contenuCliqueProvenance !== 'banque'">supprimer le contenu</button>
+      <button v-show="contenuCliqueProvenance === 'en-cours'">publier le contenu</button>
+      <button v-show="contenuCliqueProvenance === 'banque'">mettre le contenu en tiers</button>
+  <br>
 
     </div>
 
+    <button id="ren" v-on:click="revenirArriere">Retour en arrière</button>
+
   </div>
 </template>
 
 <script>
 export default {
   name: "Consulter_Contenu",
-  props: ['contenuClique']
+  props: ['contenuClique', 'contenuCliqueProvenance'],
+  methods: {
+    modifierContenu: function () {
+    /*  if (this.contenuCliqueProvenance === 'en-cours')
+        alert ("Je veux modifier le contenu qui est déja en cours")
+      else
+        alert ("Je créée un contenu en cours") */
+      this.$emit("modifierContenu")
+
+    },
+    revenirArriere: function () {
+      this.$emit("retour_arriere", {panierChoisi: this.contenuCliqueProvenance !== 'banque'})
+    }
+  }
 }
 </script>
 
@@ -38,4 +54,10 @@ div{
   margin-right: 45%;
 
 }
+
+#ren {
+  width: auto;
+}
+
+
 </style>
\ No newline at end of file

src/components/Volet_Base.vue

@@ -33,8 +33,11 @@
           </tr>
           <tbody>
 
-          <tr v-show="panierChoisi" v-for="(index) in contenus" :key="index">
-            <td class="modal titreContenu" v-on:click="chargerContenu" v-popover:tooltip="'prévisualisation'">{{ index }}</td>
+          <tr v-show="panierChoisi" v-for="item in contenus" :key="item.titre"
+              v-bind:style="{
+                'background-color': item.provenance === 'perso' ? 'white' : (item.provenance === 'banque' ? 'red' : 'green')
+              }">
+            <td class="modal titreContenu" v-on:click="chargerContenu($event, item.provenance)" v-popover:tooltip="'prévisualisation'">{{ item.titre }}</td>
             <td>Auteur 1</td>
             <td>with two columns</td>
             <td>The table body</td>
@@ -47,7 +50,7 @@
           </tr>
 
           <tr v-show="!panierChoisi" v-for="item in contenusbanque" :key="item.titre">
-            <td class="modal titreContenu" v-on:click="chargerContenu" v-popover:tooltip="'prévisualisation'">{{ item.titre }}</td>
+            <td class="modal titreContenu" v-on:click="chargerContenu($event, 'banque')" v-popover:tooltip="'prévisualisation'">{{ item.titre }}</td>
             <td>{{ item.auteur }}</td>
             <td>The table body</td>
             <td>with two columns</td>
@@ -68,7 +71,7 @@
 
       </div>
     </div>
-    <Consulter_Contenu v-bind:contenuClique = "contenuClique" v-show="modeConsultation"/>
+    <Consulter_Contenu @modifierContenu="modifierContenu" @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%'}">
 
@@ -100,6 +103,7 @@ export default {
       contenus: [],
       contenusbanque: [({ auteur: "Auteur_4", titre: "Contenu_4" })],
       contenuClique: "",
+      contenuCliqueProvenance: "",
       modalOn: false,
       modeConsultation: false,
       imgEtoile: "https://previews.123rf.com/images/ylivdesign/ylivdesign1612/ylivdesign161208906/67933171-ic%C3%B4ne-%C3%A9toile-%C3%A0-cinq-branches-jaunes-illustration-de-dessin-anim%C3%A9-d-ic%C3%B4ne-de-vecteur-%C3%A9toile-jaune-%C3%A0-cinq-branches-.jpg",
@@ -145,7 +149,8 @@ export default {
         let contenusTmp = this.contenusbanque
         if ( inputs[i].checked)
           if (!this.panierChoisi){
-            this.contenus.push(titre[0])
+            //this.contenus.push(titre[0])
+            this.contenus.push(({titre: titre[0] , provenance: "tiers"}))
             for (let i = 0; i < contenusTmp.length; i++){
               if (contenusTmp[i].titre === titre[0]){
                 console.log("Je veux dégager l'auteur n° : " + i)
@@ -159,12 +164,26 @@ export default {
       }
     },
     ajouterContenu: function () {
-      this.contenus.push("nouveau contenu")
+      this.contenus.push(({titre: "nouveau contenu" , provenance: "perso"}))
+      // A titre purement indicatif car un auteur ne voit pas ses publications en banque
+      this.contenusbanque.push(({ auteur: "Auteur_1", titre: "nouveau contenu" }))
+
     },
-    chargerContenu: function (e){
+    chargerContenu: function (e, provenance){
       this.modeConsultation = true;
       this.contenuClique = e.target.innerText
-      alert(this.contenuClique)
+      this.contenuCliqueProvenance = provenance
+    },
+    retourArriere: function (event) {
+      this.modeConsultation = false
+      this.panierChoisi = event.panierChoisi
+    },
+    modifierContenu: function () {
+      this.modeConsultation = false
+      this.panierChoisi = true
+      if (this.contenuCliqueProvenance !== 'en-cours'){
+        this.contenus.push(({titre: this.contenuClique , provenance: "en-cours"}))
+      }
     }
   }
 }