Version démonstration finie

src/Contenu.vue

 <template>
   <div id="app">
-    <Volet_Base @choix_variante="choixVariante"/>
+    <Volet_Base @choix_variante="choixVariante" @publication="publication"/>
   </div>
 </template>
 
@@ -17,6 +17,10 @@ export default {
 
         this.$emit("choix_variante", {variante: event.variante})
 
+    },
+    publication: function (event) {
+      this.$emit("publication", {document: event.document})
+
     }
   }
 }

src/Index.vue

@@ -2,9 +2,9 @@
   <div>
     <Login v-show="etat === 'unlogged'" @user_logged="setLogged"></Login>
 
-    <Menu v-show="etat !== 'unlogged'" v-bind:etat="etat"  v-bind:variante="variante" @menu_choisi="changerPage"></Menu>
-    <Contenu v-show="etat === 'Contenu'"  @choix_variante="choixVariante"></Contenu>
-    <Maj v-show="etat === 'Mises à jour'"  ></Maj>
+    <Menu v-show="etat !== 'unlogged'" v-bind:etat="etat" v-bind:isNotif="isNotif"  v-bind:variante="variante" @menu_choisi="changerPage"></Menu>
+    <Contenu v-show="etat === 'Contenu'"  @choix_variante="choixVariante" @publication="publication"></Contenu>
+    <Maj v-show="etat === 'Mises à jour'"  v-bind:contenuEnPublication="contenuEnPublication" ></Maj>
     <Profil v-show="etat === 'Profil'"  ></Profil>
     <Tags v-show="etat === 'Tags'"  ></Tags>
 
@@ -25,7 +25,9 @@ export default {
   data: function () {
     return {
       etat: "unlogged",
-      variante: false
+      variante: false,
+      contenuEnPublication: "",
+      isNotif: false
     }
   },
   methods: {
@@ -42,6 +44,10 @@ export default {
     choixVariante: function (event) {
       this.variante = event.variante
 
+    },
+    publication: function (event) {
+      this.contenuEnPublication = event.document
+      this.isNotif = true
     }
   },
   components:{

src/Maj.vue

@@ -20,8 +20,14 @@
       </tr>
       <tbody>
 
-      <tr>
 
+      <tr>
+        <td>Contenu1</td>
+        <td>Auteur1</td>
+        <td>1</td>
+        <td>01/06/2021</td>
+        <td id="valider"><img v-bind:src="imageCoche"  alt='' height=20 width=20></td>
+        <td id="refuser"><img v-bind:src="imageCroix"   alt='' height=20 width=20></td>
 
       </tr>
       </tbody>
@@ -51,6 +57,32 @@
       <tbody>
 
       <tr>
+        <td>Contenu1</td>
+        <td>Auteur1</td>
+        <td>1</td>
+        <td>01/06/2021</td>
+        <td>En Cours</td>
+        <td></td>
+        <td></td>
+        <td></td>
+
+        <!--        <td id="valider"><img v-bind:src="imageCoche"  alt='' height=20 width=20></td>
+                <td id="refuser"><img v-bind:src="imageCroix"   alt='' height=20 width=20></td>-->
+
+
+      </tr>
+      <tr>
+      <td>Contenu1</td>
+      <td>Auteur1</td>
+      <td>1</td>
+      <td>01/06/2021</td>
+      <td>Refusée</td>
+      <td><img v-bind:src="imageCoche"  alt='' height=20 width=20></td>
+      <td><img v-bind:src="imgNouveau"  alt='' height=20 width=20></td>
+      <td><img v-bind:src="imgPoubelle"  alt='' height=20 width=20></td>
+
+      <!--        <td id="valider"><img v-bind:src="imageCoche"  alt='' height=20 width=20></td>
+              <td id="refuser"><img v-bind:src="imageCroix"   alt='' height=20 width=20></td>-->
 
 
       </tr>
@@ -63,12 +95,21 @@
 <script>
 export default {
   name: "Maj",
+  props: ['contenuEnPublication'],
   methods: {
     naviguer: function (e) {
       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')
     }
+  },
+  data: function () {
+    return{
+      imageCoche: "https://e7.pngegg.com/pngimages/485/477/png-clipart-check-mark-computer-icons-green-check-circle-angle-text.png",
+      imageCroix: "https://e7.pngegg.com/pngimages/993/267/png-clipart-computer-icons-red-cross-miscellaneous-logo.png",
+      imgPoubelle: "data:image/png;base64,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",
+      imgNouveau: "https://png.pngtree.com/png-vector/20190129/ourmid/pngtree-vector-new-icon-png-image_423422.jpg"
+    }
   }
 }
 </script>

src/Menu.vue

@@ -2,8 +2,8 @@
   <div id="menuHaut">
 
     <Choix_Mode_Variante class="menuVariante" v-show="variante"></Choix_Mode_Variante>
-    <div class="notif" v-bind:style="[!variante ? {'margin-left': '90%'} : {'margin-left': '31.78%'}]"></div>
-    <div class="circle" v-on:click="isAffiche = !isAffiche">
+    <div class="notif" v-on:click="choixIconeNotification" v-show="isNotif" v-bind:style="[!variante ? {'margin-left': '90%'} : {'margin-left': '31.78%'}]"></div>
+    <div class="circle" v-on:click="isAffiche = !isAffiche" v-bind:style="[!isNotif ? {'margin-left': '94.75%'} : {'margin-left': '3%'}]">
       Auteur 1
     </div>
     <div class="menu" v-show="isAffiche">
@@ -23,14 +23,18 @@ export default {
   name: "Menu",
   data: function () {
     return {
-      isAffiche: false,
+      isAffiche: false
     }
   },
-  props: ['etat', 'variante'],
+  props: ['etat', 'variante', 'isNotif'],
   methods: {
     choixMenuAnnexe: function (e) {
       this.$emit("menu_choisi", {choix: e.target.innerText})
       this.isAffiche = ! this.isAffiche
+    },
+    choixIconeNotification: function(){
+      this.$emit("menu_choisi", {choix: "Mises à jour"})
+      this.isAffiche = ! this.isAffiche
     }
   },
   components:{
@@ -55,7 +59,6 @@ export default {
     justify-content: center;
     height: 75px;
     width: 75px;
-    margin-left: 3%;
   }
 
   .menuVariante{
@@ -89,7 +92,8 @@ export default {
     margin-top: 1.5%;
     z-index: 1;
     margin-left: 90%;
-
+    background-image: url(assets/img/cloche.png);
+    background-size: cover;
 
   }
 

src/components/Volet_Base.vue

@@ -229,6 +229,7 @@ export default {
           break
         case "publier":
           this.panierChoisi = true
+          this.$emit("publication", {document: this.contenuClique})
           break
 
       }