Ajout des boutons de filtrage panier et pour la future notification

src/Menu.vue

@@ -2,8 +2,8 @@
   <div id="menuHaut">
 
     <Choix_Mode_Variante class="menuVariante" v-show="variante"></Choix_Mode_Variante>
-
-    <div class="circle" v-on:click="isAffiche = !isAffiche" v-bind:style="[!variante ? {'margin-left': '95%'} : {'margin-left': '36.75%'}]">
+    <div class="notif" v-bind:style="[!variante ? {'margin-left': '90%'} : {'margin-left': '31.78%'}]"></div>
+    <div class="circle" v-on:click="isAffiche = !isAffiche">
       Auteur 1
     </div>
     <div class="menu" v-show="isAffiche">
@@ -55,6 +55,7 @@ export default {
     justify-content: center;
     height: 75px;
     width: 75px;
+    margin-left: 3%;
   }
 
   .menuVariante{
@@ -70,7 +71,7 @@ export default {
     background: white;
     border: thin solid black;
     margin-top: 100px;
-    margin-left: 93.5%;
+    margin-left: 23.5%;
     position: absolute;
     display: flex;
     flex-direction: column;
@@ -80,6 +81,18 @@ export default {
     z-index: 1;
   }
 
+  .notif {
+    border: thin solid black;
+    border-radius: 30%;
+    height: 30px;
+    width: 30px;
+    margin-top: 1.5%;
+    z-index: 1;
+    margin-left: 90%;
+
+
+  }
+
   .sous_menu{
     flex-basis: 25%;
     border: thin solid black;

src/components/Consulter_Contenu.vue

@@ -5,10 +5,10 @@
     <p>(Dans le futur, ces actions varieront en fonction du type de contenu cliqué dans la 'fenetre principale')</p>
 
     <div id="actionsContenu">
-      <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>
+      <button v-show="contenuCliqueProvenance !== 'banque'" 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'" v-on:click="actionContenu('publier')">publier le contenu</button>
+      <button v-show="contenuCliqueProvenance === 'banque'" v-on:click="actionContenu('mettreFavori')">mettre le contenu en tiers</button>
   <br>
 
     </div>
@@ -23,13 +23,8 @@ export default {
   name: "Consulter_Contenu",
   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")
-
+    actionContenu: function (action) {
+      this.$emit("actionContenu", {action: action})
     },
     revenirArriere: function () {
       this.$emit("retour_arriere", {panierChoisi: this.contenuCliqueProvenance !== 'banque'})

src/components/Volet_Base.vue

@@ -2,8 +2,17 @@
 
   <div>
     <button id="changerVariante" v-show="!modeConsultation" v-on:click="changerVariante">changer</button>
-
+<!--    <div class="choixPanier">
+      <label>Perso</label>
+      <input type="checkbox" v-on:click="filtrerTableau" name="perso"/>
+      <label>Tiers</label>
+      <input type="checkbox" v-on:click="filtrerTableau" name="tiers"/>
+      <label>En Cours</label>
+      <input type="checkbox" v-on:click="filtrerTableau" name="en-cours"/>
+
+    </div>-->
     <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">
@@ -11,6 +20,7 @@
           <Volet_Contenu @mode_choisi="ajusterMode" v-bind:filtre_choisi="filtre_choisi" v-bind:variante="variante"/>
         </div>
       </div>
+
       <div id="tableau">
         <table>
           <thead>
@@ -71,7 +81,7 @@
 
       </div>
     </div>
-    <Consulter_Contenu @modifierContenu="modifierContenu" @retour_arriere="retourArriere" v-bind:contenuClique = "contenuClique" v-bind:contenuCliqueProvenance = "contenuCliqueProvenance" v-show="modeConsultation"/>
+    <Consulter_Contenu @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%'}">
 
@@ -141,7 +151,7 @@ export default {
 
 
       let inputs = document.querySelectorAll("input[type='checkbox']")
-     // alert(inputs.length)
+      // alert(inputs.length)
 
       for(let i = 0; i < inputs.length; i++) {
         let titre = inputs[i].parentElement.parentElement.innerText
@@ -152,14 +162,14 @@ export default {
             //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]){
+              if (contenusTmp[i].titre === titre[i]){
                 console.log("Je veux dégager l'auteur n° : " + i)
-                this.contenusbanque.splice(0, 1)
+                this.contenusbanque.splice(i, 1)
               }
             }
           }
           else {
-          inputs[i].parentElement.parentElement.style.display='none'
+            inputs[i].parentElement.parentElement.style.display='none'
           }
       }
     },
@@ -178,12 +188,48 @@ export default {
       this.modeConsultation = false
       this.panierChoisi = event.panierChoisi
     },
-    modifierContenu: function () {
+    actionContenu: function (event) {
       this.modeConsultation = false
-      this.panierChoisi = true
-      if (this.contenuCliqueProvenance !== 'en-cours'){
-        this.contenus.push(({titre: this.contenuClique , provenance: "en-cours"}))
+      switch (event.action) {
+        case "mettreFavori":
+          this.panierChoisi = false
+          this.contenus.push(({titre: this.contenuClique , provenance: "tiers"}))
+          break
+        case "modifier":
+          this.panierChoisi = true
+          if (this.contenuCliqueProvenance !== 'en-cours'){
+            this.contenus.push(({titre: this.contenuClique , provenance: "en-cours"}))
+          }
+          break
+        case "supprimer":
+          this.panierChoisi = true
+
+          // 3 cas : suppression perso, suppression tiers et suppression en cours
+          if (this.contenuCliqueProvenance !== 'perso'){
+            for (let i = 0; i < this.contenus.length; i++){
+              if (this.contenus[i].titre === this.contenuClique){
+                this.contenus.splice(i, 1)
+              }
+            }
+          } else {
+            for (let i = 0; i < this.contenus.length; i++){
+              if (this.contenus[i].titre === this.contenuClique){
+                this.contenus[i].auteur = "Aucun"
+              }
+            }
+
+          }
+
+          break
+        case "publier":
+          this.panierChoisi = true
+          break
+
       }
+
+    },
+    filtrerTableau: function () {
+      alert ('prout')
     }
   }
 }
@@ -196,8 +242,14 @@ export default {
 
 }
 
+.choixPanier{
+  margin-left: 335px;
+  margin-top: 0px;
+
+}
+
 table {
-  margin-top: 97.5px;
+  margin-top: 5px;
   margin-left: 20px;
   width: 1550px;
 }
@@ -229,7 +281,7 @@ tfoot {
 }
 
 #boutonVolet {
-  margin-top: 75px;
+  margin-top: 5px;
   margin-left: 10px;
 }