Début de la page mise à jour

src/Maj.vue

 <template>
   <div>
     <span class="niveau" id="recues" v-on:click="naviguer">Maj Recues</span><br>
-    <div id="detailRecues" class="masque"><p>Liste des maj recues</p></div>
+    <div id="detailRecues" class="masque">
+    <table>
+      <thead>
+      <tr>
+        <th colspan="6">Contenus</th>
+      </tr>
+      </thead>
+      <tr>
+        <th>Titre</th>
+        <th>Auteur</th>
+        <th>Version actuelle</th>
+        <th>Date Version actuelle</th>
+        <th>Accepter</th>
+        <th>Refuser</th>
+
+
+      </tr>
+      <tbody>
+
+      <tr>
+
+
+      </tr>
+      </tbody>
+    </table>
+    </div>
     <span class="niveau" id="proposees" v-on:click="naviguer">Maj Proposées</span>
-    <div id="detailProposees" class="masque"><p>Liste des maj proposees</p></div>
+    <div id="detailProposees" class="masque">
+    <table>
+      <thead>
+      <tr>
+        <th colspan="8">Contenus</th>
+      </tr>
+      </thead>
+      <tr>
+        <th>Titre</th>
+        <th>Auteur</th>
+        <th>Version proposée</th>
+        <th>Date Version proposée</th>
+        <th>Etat</th>
+        <th>Conserver</th>
+
+        <th>Créer Nouveau</th>
+        <th>Supprimer</th>
 
+
+      </tr>
+      <tbody>
+
+      <tr>
+
+
+      </tr>
+      </tbody>
+    </table>
+  </div>
   </div>
 </template>
 
@@ -46,4 +98,30 @@ div{
 .affiche {
   display: block;
 }
+
+table {
+  margin-top: 10px;
+  margin-left: 185px;
+  margin-bottom: 10px;
+
+  width: 1550px;
+}
+
+th,
+td {
+  border: 1px solid #333;
+
+}
+
+td {
+  text-align: center;
+  vertical-align: middle;
+}
+
+thead,
+tfoot {
+  background-color: #333;
+  color: #fff;
+}
+
 </style>
\ No newline at end of file

src/Menu.vue

@@ -30,6 +30,7 @@ export default {
   methods: {
     choixMenuAnnexe: function (e) {
       this.$emit("menu_choisi", {choix: e.target.innerText})
+      this.isAffiche = ! this.isAffiche
     }
   },
   components:{

src/components/Consulter_Contenu.vue

+<template>
+  <div>
+
+    <p>Bonjour, je suis l'intérieur de {{contenuClique}}</p>
+    <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>
+
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Consulter_Contenu",
+  props: ['contenuClique']
+}
+</script>
+
+<style scoped>
+div{
+  text-align: center;
+}
+#actionsContenu{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+#actionsContenu>button {
+  width: auto;
+  margin-left: 45%;
+  margin-right: 45%;
+
+}
+</style>
\ No newline at end of file

src/components/Volet_Base.vue

 <template>
 
   <div>
-    <button id="changerVariante" v-on:click="changerVariante">changer</button>
+    <button id="changerVariante" v-show="!modeConsultation" v-on:click="changerVariante">changer</button>
 
-    <div id="principal">
+    <div id="principal" v-show="!modeConsultation">
       <div id="ensemble">
         <button id="boutonVolet" v-on:click="desactiverVolet"></button>
         <div class="full" id="volet" v-show="isActif">
@@ -34,7 +34,7 @@
           <tbody>
 
           <tr v-show="panierChoisi" v-for="(index) in contenus" :key="index">
-            <td class="modal titreContenu" v-popover:tooltip="'prévisualisation'">{{ index }}</td>
+            <td class="modal titreContenu" v-on:click="chargerContenu" v-popover:tooltip="'prévisualisation'">{{ index }}</td>
             <td>Auteur 1</td>
             <td>with two columns</td>
             <td>The table body</td>
@@ -47,7 +47,7 @@
           </tr>
 
           <tr v-show="!panierChoisi" v-for="item in contenusbanque" :key="item.titre">
-            <td class="modal titreContenu" v-popover:tooltip="'prévisualisation'">{{ item.titre }}</td>
+            <td class="modal titreContenu" v-on:click="chargerContenu" v-popover:tooltip="'prévisualisation'">{{ item.titre }}</td>
             <td>{{ item.auteur }}</td>
             <td>The table body</td>
             <td>with two columns</td>
@@ -68,7 +68,9 @@
 
       </div>
     </div>
-    <div v-show="panierChoisi" class="circle" v-on:click="ajouterContenu" v-bind:style="{'margin-left': '95%'}">
+    <Consulter_Contenu v-bind:contenuClique = "contenuClique" v-show="modeConsultation"/>
+
+    <div v-show="panierChoisi && !modeConsultation" class="circle" v-on:click="ajouterContenu" v-bind:style="{'margin-left': '95%'}">
 
     </div>
 
@@ -80,12 +82,14 @@ import $ from 'jquery'
 import 'jquery-ui-bundle'
 import Volet_Menu from "@/components/Volet_Menu";
 import Volet_Contenu from "@/components/Volet_Contenu";
+import Consulter_Contenu from "@/components/Consulter_Contenu";
 
 export default {
   name: "Volet_Base",
   components: {
     Volet_Menu,
-    Volet_Contenu
+    Volet_Contenu,
+    Consulter_Contenu
   },
   data: function () {
     return {
@@ -95,12 +99,15 @@ export default {
       variante: false,
       contenus: [],
       contenusbanque: [({ auteur: "Auteur_4", titre: "Contenu_4" })],
+      contenuClique: "",
       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",
       imgPoubelle: "data:image/png;base64,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"
     }
   },
   mounted() {
+    this.modeConsultation = false
     $('#ensemble').draggable()
 
   },
@@ -154,6 +161,11 @@ export default {
     ajouterContenu: function () {
       this.contenus.push("nouveau contenu")
     },
+    chargerContenu: function (e){
+      this.modeConsultation = true;
+      this.contenuClique = e.target.innerText
+      alert(this.contenuClique)
+    }
   }
 }
 </script>