Mise en tiers basique

package-lock.json

@@ -9137,6 +9137,11 @@
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
       "dev": true
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "resolve": {
       "version": "1.20.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
@@ -10895,6 +10900,19 @@
       "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
       "dev": true
     },
+    "vue-js-modal": {
+      "version": "2.0.0-rc.6",
+      "resolved": "https://registry.npmjs.org/vue-js-modal/-/vue-js-modal-2.0.0-rc.6.tgz",
+      "integrity": "sha512-bJOm7Yhrl0ur/QyXjoC3gMMmE7UxiVEcS2rl8v9iPXIe9QLvjiCSZElSOvvyps8LNuG1X0rPifZGxI/CWKCFaw==",
+      "requires": {
+        "resize-observer-polyfill": "^1.5.1"
+      }
+    },
+    "vue-js-popover": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/vue-js-popover/-/vue-js-popover-1.2.1.tgz",
+      "integrity": "sha512-kcnbv2qIJ26fCWtaDgzBq7A+K8/+w78fr0sQhmqLv66NewggwbsbFX4yqN9KeL4PwHrLfqr1QTBgaR+/TKZWyQ=="
+    },
     "vue-loader": {
       "version": "15.9.7",
       "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.7.tgz",

package.json

@@ -12,7 +12,9 @@
     "jquery": "^3.6.0",
     "jquery-ui-bundle": "^1.12.1-migrate",
     "vue": "^2.6.11",
-    "vue-cookies": "^1.7.4"
+    "vue-cookies": "^1.7.4",
+    "vue-js-modal": "^2.0.0-rc.6",
+    "vue-js-popover": "^1.2.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

src/Login.vue

@@ -26,7 +26,6 @@ export default {
   methods: {
     logIn: function () {
 
-      this.$cookies.set("isLogged", true)
       this.$emit("user_logged", {"isLogged" : true})
     }
   },

src/components/Barre_Filtre.vue

@@ -4,7 +4,7 @@
     <select class="filtre" name="filtre" v-model="selected" v-on:change="a()" size="1">
       <option disabled value="">Choix du filtre</option>
       <option>tags officiels</option>
-      <option v-show="modeChoisi === 'Panier'">tags libres</option>
+      <option v-show="panierChoisi">tags libres</option>
       <option>auteur</option>
       <option>type / source</option>
       <option>date</option>
@@ -17,7 +17,7 @@
 <script>
 export default {
   name: "Barre_Filtre",
-  props: ['modeChoisi'],
+  props: ['panierChoisi'],
   methods: {
     a: function (){
       this.$emit("filtre_choisi", {filtre: this.selected})    }

src/components/Volet_Base.vue

@@ -7,7 +7,7 @@
       <div id="ensemble">
         <button id="boutonVolet" v-on:click="desactiverVolet"></button>
         <div class="full" id="volet" v-show="isActif">
-          <Volet_Menu v-bind:mode-choisi = "modeChoisi" @filtre_choisi="passerFiltre"/>
+          <Volet_Menu v-bind:panierChoisi = "panierChoisi" @filtre_choisi="passerFiltre"/>
           <Volet_Contenu @mode_choisi="ajusterMode" v-bind:filtre_choisi="filtre_choisi" v-bind:variante="variante"/>
         </div>
       </div>
@@ -15,51 +15,63 @@
         <table>
           <thead>
           <tr>
-            <th colspan="7">Contenus</th>
+            <th colspan="8 ">Contenus</th>
           </tr>
           </thead>
           <tr>
             <th>Titre</th>
+            <th>Auteur</th>
             <th>Version actuelle</th>
             <th>Date Version actuelle</th>
+
             <th>Nbre d'Utilisations</th>
             <th>Likes</th>
             <th>Tags</th>
-            <th v-on:click="supprimerContenus"><img src="../assets/img/balai.png" alt="pipi" height=20 width=20/></th>
+            <th v-on:click="supprimerContenus"  >
+              <img v-bind:src="panierChoisi ? imgPoubelle : imgEtoile" alt='' height=20 width=20/></th>
 
           </tr>
           <tbody>
 
-            <tr v-for="(index) in contenus" :key="index">
-              <td class="titreContenu">{{ index }}</td>
-              <td>with two columns</td>
-              <td>The table body</td>
-              <td>with two columns</td>
-              <td>with two columns</td>
-              <td>with two columns</td>
+          <tr v-show="panierChoisi" v-for="(index) in contenus" :key="index">
+            <td class="modal titreContenu" v-popover:tooltip="'prévisualisation'">{{ index }}</td>
+            <td>Auteur 1</td>
+            <td>with two columns</td>
+            <td>The table body</td>
+            <td>with two columns</td>
+            <td>with two columns</td>
+            <td class="modal tagContenu" v-popover:tooltip="'tags'">with two columns</td>
 
-              <td class="boutonSupprimer">  <input type="checkbox" id="horns" name="horns"/></td>
+            <td class="boutonSupprimer">  <input type="checkbox" id="horns" name="horns"/></td>
 
-            </tr>
-<!--          <tr>
-            <td class="titreContenu">Titre td</td>
-            <td>with two columns</td>
+          </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>{{ item.auteur }}</td>
             <td>The table body</td>
             <td>with two columns</td>
             <td>with two columns</td>
             <td>with two columns</td>
+            <td class="modal tagContenu" v-popover:tooltip="'tags'">with two columns</td>
+
+            <td class="boutonSupprimer">  <input type="checkbox" id="cca" name="horns"/></td>
 
-            <td class="boutonSupprimer"><input type="checkbox" id="horns" name="horns"/></td>
+          </tr>
 
-          </tr>-->
 
           </tbody>
         </table>
+
+        <tooltip />
+
+
       </div>
     </div>
-    <div class="circle" v-on:click="ajouterContenu" v-bind:style="{'margin-left': '95%'}">
+    <div v-show="panierChoisi" class="circle" v-on:click="ajouterContenu" v-bind:style="{'margin-left': '95%'}">
 
     </div>
+
   </div>
 </template>
 
@@ -78,26 +90,26 @@ export default {
   data: function () {
     return {
       isActif: true,
-      modeChoisi: "Panier",
+      panierChoisi: true,
       filtre_choisi: "",
       variante: false,
-      contenus: []
+      contenus: [],
+      contenusbanque: [({ auteur: "Auteur_4", titre: "Contenu_4" })],
+      modalOn: 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() {
     $('#ensemble').draggable()
+
   },
   methods: {
     desactiverVolet: function () {
       this.isActif = !this.isActif
     },
-    ajusterMode: function (event) {
-      if (event.mode === true){
-        this.modeChoisi = "Panier"
-      }
-      else {
-        this.modeChoisi = "Banque"
-      }
+    ajusterMode: function () {
+      this.panierChoisi = !this.panierChoisi
     },
     passerFiltre: function(event){
       this.filtre_choisi = event.filtre
@@ -111,19 +123,37 @@ export default {
     },
     supprimerContenus: function () {
 
-     /*/ $(':checkbox:checked').each(function () {
-        console.log($(this).prev(".titreContenu").id)
-      })*/
+      /*/ $(':checkbox:checked').each(function () {
+         console.log($(this).prev(".titreContenu").id)
+       })*/
+
+
 
       let inputs = document.querySelectorAll("input[type='checkbox']")
+     // alert(inputs.length)
+
       for(let i = 0; i < inputs.length; i++) {
+        let titre = inputs[i].parentElement.parentElement.innerText
+        titre = titre.split('\t')
+        let contenusTmp = this.contenusbanque
         if ( inputs[i].checked)
-        inputs[i].parentElement.parentElement.style.display='none'
+          if (!this.panierChoisi){
+            this.contenus.push(titre[0])
+            for (let i = 0; i < contenusTmp.length; i++){
+              if (contenusTmp[i].titre === titre[0]){
+                console.log("Je veux dégager l'auteur n° : " + i)
+                this.contenusbanque.splice(0, 1)
+              }
+            }
+          }
+          else {
+          inputs[i].parentElement.parentElement.style.display='none'
+          }
       }
     },
     ajouterContenu: function () {
       this.contenus.push("nouveau contenu")
-    }
+    },
   }
 }
 </script>
@@ -189,5 +219,23 @@ tfoot {
   background-size: cover;
 }
 
+/*[data-popover]{*/
+/*  display: inline-block;*/
+/*}*/
+
+.supprimerContenu {
+  height: 20px;
+  width: 20px;
+  background:  url(../assets/img/balai.png);
+
+}
+
+.ajouterTiers {
+  height: 20px;
+  width: 20px;
+  background: url(../assets/img/etoile.png);
+
+}
 
+/*<img src="@/assets/img/etoile.png" alt="" height=20 width=20/>*/
 </style>
\ No newline at end of file

src/components/Volet_Menu.vue

 <template>
   <div class="menu">
    <div id="listeFiltres" class="filtre">
-      <Barre_Filtre v-bind:modeChoisi="modeChoisi" v-show="modeFiltre" @filtre_choisi="passerFiltre"/>
+      <Barre_Filtre v-bind:panierChoisi="panierChoisi" v-show="modeFiltre" @filtre_choisi="passerFiltre"/>
      <Barre_Recherche v-show="!modeFiltre"/>
     </div>
     <button id="recherche" v-bind:class="{'modeFiltre': modeFiltre, 'modeRecherche': !modeFiltre}" v-on:click="changerModeMenu"></button>
@@ -17,7 +17,7 @@ export default {
     Barre_Recherche,
     Barre_Filtre
   },
-  props: ['modeChoisi'],
+  props: ['panierChoisi'],
   data: function () {
     return {
       modeFiltre: true

src/main.js

 import Vue from 'vue'
 import Index from '@/Index'
-import VueCookies from 'vue-cookies'
+import VPopover from 'vue-js-popover'
 
 //import Index from '@/Index'
 Vue.config.productionTip = false
-Vue.use(VueCookies);
+Vue.use(VPopover, { tooltip: true })
 
 
 new Vue({
-  VueCookies,
   render: h => h(Index),
 }).$mount('#app')