Sauvegarde avant suppression Consulter_Contenu

src/Contenu.vue

@@ -2,7 +2,8 @@
   <div id="app">
     <Volet_Base @rechercherNouvellesPublications="rechercherNouvellesPublications" @choix_variante="choixVariante"
                 @newContenu="newContenu" v-bind:nvoContenu="nvoContenu" v-bind:auteur="auteur"
-                v-bind:contenuAjoute="contenuAjoute" v-bind:majContenus="majContenus"  v-bind:darktheme="darktheme" />
+                v-bind:contenuAjoute="contenuAjoute" v-bind:majContenus="majContenus"  v-bind:darktheme="darktheme"
+                v-bind:deconnexion="deconnexion" />
   </div>
 </template>
 
@@ -51,7 +52,9 @@ export default {
     // Signal d'alerte pour mettre à jour les contenus
     majContenus: {},
     // Signal d'activation ou non du theme sombre
-    darktheme: {}
+    darktheme: {},
+    // Signal de déconnexion
+    deconnexion: {}
 }
 }
 </script>

src/Index.vue

@@ -7,7 +7,7 @@
     <Contenu v-show="etat === 'Contenu'" v-bind:auteur="auteur" v-bind:nvoContenu="nvoContenu" v-bind:contenuAjoute="contenuAjoute"
              @choix_variante="choixVariante" @newContenu="newContenu"
              @rechercherNouvellesPublications="rechercherPublications = !rechercherPublications"
-             v-bind:majContenus="majContenus" v-bind:darktheme="darktheme"></Contenu>
+             v-bind:majContenus="majContenus" v-bind:darktheme="darktheme" v-bind:deconnexion="deconnexion"></Contenu>
     <Maj v-show="etat === 'Mises à jour'" v-bind:auteur="auteur" v-bind:isRecu="isRecu" v-bind:isPropose="isPropose"
          v-bind:contenuEnPublication="contenuEnPublication" @recalculerNotif="recalculerNotification"
          @majNvoContenu="majNvoContenu" @majContenus="majContenus = !majContenus"
@@ -50,7 +50,8 @@ export default {
       rechercherPublications: false,
       majContenus: false,
       errorMessage: 'Login ou mot de passe erroné',
-      darktheme: ''
+      darktheme: '',
+      deconnexion: false
     }
   },
   methods: {
@@ -65,7 +66,7 @@ export default {
         this.auteur = event.auteur
       }
       else {
-          this.errorLogin = true
+        this.errorLogin = true
       }
     },
     /**
@@ -75,10 +76,16 @@ export default {
     changerPage: function (event) {
       if (event.choix === "Deconnexion"){
         this.etat = "unlogged"
+        this.deconnexion = !this.deconnexion
         localStorage.clear()
       }
       else
         this.etat = event.choix
+      if (event.choix === "Contenu"){
+        this.deconnexion = !this.deconnexion
+      }
+
+
       if (event.choix === "Mises à jour"){
         this.isRecu = event.isRecu
         this.isPropose = event.isPropose
@@ -101,8 +108,8 @@ export default {
         // alert("event.source : " + event.source)
         this.etat = "newContenu"
       } else if (event.source === '2') {
-      this.etat = "importContenu"
-    }
+        this.etat = "importContenu"
+      }
 
     },
     /**
@@ -137,8 +144,8 @@ export default {
      * @vuese
      * Passage d'information concernant l'activation ou non du theme sombre:
      */
-     darkTheme: function (event) {
-       this.darktheme = event.active
+    darkTheme: function (event) {
+      this.darktheme = event.active
     }
 
   },

src/Menu.vue

 <template>
   <div id="menuHaut" v-bind:class="darkMode ? 'dark' : ''">
     <DarkModeSwitch v-bind:style="{'margin-top': '10px', 'margin-left': '10px'}" @switched="onSwitched"/>
-    <Choix_Mode_Variante class="menuVariante" v-show="variante"></Choix_Mode_Variante>
-    <p v-show="!variante"> Open Quizz - Bienvenue {{auteur}}</p>
-    <div class="notif" v-on:click="choixIconeNotification" v-show="isNotif === true" v-bind:style="[!variante ? {'margin-left': '90%'} : {'margin-left': '32%'}]"></div>
+    <Choix_Mode_Variante v-bind:darkMode="darkMode" class="menuVariante" v-show="variante"></Choix_Mode_Variante>
+    <span id="prout">{{ titrePage }}</span>
+    <div class="notif" v-on:click="choixIconeNotification" v-show="isNotif === true"
+         v-bind:style="[!variante ? {'margin-left': '90%'} : {'margin-left': '32%'}]"></div>
     <div class="circle" id="menuAuteur" v-on:click="isAffiche = !isAffiche"  v-bind:style="styleCircle">
 
     </div>
     <div class="menu" v-bind:class="darkMode ? 'menuDark' : ''"   v-show="isAffiche">
-      <div class="sous_menu" v-bind:class="darkMode ? 'sous_menuDark' : ''"  v-on:click="choixMenuAnnexe">Profil</div>
+      <div v-if="etat !== 'Profil'" class="sous_menu" v-bind:class="darkMode ? 'sous_menuDark' : ''"  v-on:click="choixMenuAnnexe">Profil</div>
+      <div v-else class="sous_menu"  v-bind:class="darkMode ? 'sous_menuDark' : ''" v-on:click="choixMenuAnnexe">Contenu</div>
       <div v-if="etat !== 'Mises à jour'"  v-bind:class="darkMode ? 'sous_menuDark' : ''" class="sous_menu" v-on:click="choixMenuAnnexe">Mises à jour</div>
       <div v-else class="sous_menu"  v-bind:class="darkMode ? 'sous_menuDark' : ''" v-on:click="choixMenuAnnexe">Contenu</div>
-      <div class="sous_menu"  v-bind:class="darkMode ? 'sous_menuDark' : ''" v-on:click="choixMenuAnnexe">Tags</div>
-      <div class="sous_menu"   v-bind:class="darkMode ? 'sous_menuDark' : ''" v-on:click="evaluations">Evaluations</div>
+
+      <div v-if="etat !== 'Tags'"  class="sous_menu"  v-bind:class="darkMode ? 'sous_menuDark' : ''" v-on:click="choixMenuAnnexe">Tags</div>
+      <div v-else class="sous_menu"  v-bind:class="darkMode ? 'sous_menuDark' : ''" v-on:click="choixMenuAnnexe">Contenu</div>
+      <div v-if="etat !== 'Evaluations'"  class="sous_menu"   v-bind:class="darkMode ? 'sous_menuDark' : ''" v-on:click="evaluations">Evaluations</div>
+      <div v-else class="sous_menu"  v-bind:class="darkMode ? 'sous_menuDark' : ''" v-on:click="choixMenuAnnexe">Contenu</div>
       <div class="sous_menu"  v-bind:class="darkMode ? 'sous_menuDark' : ''" v-on:click="choixMenuAnnexe">Deconnexion</div>
     </div>
   </div>
@@ -35,6 +40,7 @@ export default {
       isPropose: false,
       styleCircle: {},
       darkMode: false,
+      titrePage: "",
       roblox: "https://www.google.com/url?sa=i&url=https%3A%2F%2Feducation.roblox.com%2F&psig=AOvVaw2WUZcaXl4Wpn3dLXhgO41R&ust=1626436473301000&source=images&cd=vfe&ved=0CAoQjRxqFwoTCIjmoJWC5fECFQAAAAAdAAAAABAD"
     }
   },
@@ -54,7 +60,13 @@ export default {
      * Gestion du clic sur un des éléments du menu 'auteur' (en haut à droite)
      */
     choixMenuAnnexe: function (e) {
-      this.$emit("menu_choisi", {choix: e.target.innerText})
+      const menuClique = e.target.innerText
+      if (menuClique !== 'Contenu'){
+        this.titrePage = menuClique
+      } else {
+        this.titrePage = "OpenQuizz - Bienvenue " + this.auteur
+      }
+      this.$emit("menu_choisi", {choix: menuClique})
       this.isAffiche = false
     },
     /**
@@ -170,6 +182,7 @@ export default {
       this.publicationsProposees()
 
       this.changerStyle()
+      this.titrePage = "OpenQuizz - Bienvenue " + this.auteur
     },
     /**
      * @vuese
@@ -192,6 +205,7 @@ export default {
 #menuHaut{
   display: flex;
   background-color: white;
+  justify-content: center;
 }
 .circle {
   border: 1px solid yellow;
@@ -222,13 +236,13 @@ export default {
   border: thin solid black;
   margin-top: 46px;
   margin-left: 94.75%;
-  position: absolute;
+  position: fixed;
   display: flex;
   flex-direction: column;
   text-align: center;
   vertical-align: middle;
 
-  z-index: 1;
+  z-index: 5;
 }
 
 .notif {
@@ -238,7 +252,7 @@ export default {
   width: 30px;
   margin-top: 1.5%;
   z-index: 1;
-    margin-left: 90%;
+  margin-left: 90%;
   background-image: url(assets/img/cloche.png);
   background-size: cover;
 
@@ -248,15 +262,14 @@ export default {
   flex-basis: 20%;
   border: thin solid black;
   line-height: 36px;
+  z-index: 1;
 
 }
 
-p {
-  text-align: center;
-  align-content: center;
+#prout {
+
   display: flex;
   position: absolute;
-  left: 44%;
   margin-top: 0.5%;
   margin-bottom: 0.1%;
 }

src/NewContenu.vue

 <template>
   <div>
-    <p style="text-decoration: underline; margin-top: -2%">Création de contenu</p>
     <div id="titreContenu">
       <label>Titre du contenu : </label><br>
       <input type="text" placeholder="titre du contenu"  v-model="titreContenu">
@@ -14,12 +13,12 @@
     <!--    <vue-simplemde id="markdownEditor" v-model="contenuSaisi"/>-->
     <div class="mavonEditor">
 
-      <mavon-editor  :language="'fr'" style="min-height: 700px" v-model="contenuSaisi"/>
+      <mavon-editor  :language="'fr'" style="height: 78vh; margin-top: -0.5%; z-index: -1" v-model="contenuSaisi"/>
     </div>
     <div class="markdown">
       <br>
-      <button class="ajouterContenu" v-on:click="ajouterContenu">créer</button><br><br>
-      <button class="retourArriere" v-on:click="retourArriere">revenir en arrière</button>
+      <button class="ajouterContenu" v-on:click="ajouterContenu">créer </button>
+      <button class="retourArriere" v-on:click="retourArriere"> revenir en arrière</button>
 
     </div>
 
@@ -92,6 +91,7 @@ button {
   width: auto;
   text-align: center;
   line-height: 1em;
+  margin-left: 5px;
 }
 
 #markdownEditor{

src/components/Choix_Mode_Variante.vue

 <template>
-<div>
+  <div>
 
-  <div id = "choixDuMode" class="contenusPersos" v-on:click="changerChoix">
-    <div id = "contenusPanier" v-bind:class="{'clicked': contenuPanier, 'nonClicked': !contenuPanier}">
-      <p>Panier</p>
-    </div>
+    <div id = "choixDuMode" class="contenusPersos" v-on:click="changerChoix">
+      <div class = "contenusPanier" v-if="!darkMode"  v-bind:class="{'clicked': contenuPanier, 'nonClicked': !contenuPanier}">
+        <p>Panier</p>
+      </div>
+
+      <div class= "contenusPanier" v-else v-bind:class="{'clicked': contenuPanier, 'nonClickedDark': !contenuPanier}">
+        <p>Panier</p>
+      </div>
+
+      <div class = "contenusBanque" v-if="!darkMode"  v-bind:class="{'clicked': !contenuPanier, 'nonClicked': contenuPanier}">
+        <p>Banque</p>
+      </div>
+
+      <div  class = "contenusBanque" v-else v-bind:class="{'clicked': !contenuPanier, 'nonClickedDark': contenuPanier}">
+
+        <p>Banque</p>
 
-    <div id = "contenusBanque" v-bind:class="{'clicked': !contenuPanier, 'nonClicked': contenuPanier}">
-      <p>Banque</p>
+      </div>
     </div>
 
   </div>
-
-</div>
 </template>
 
 <script>
@@ -23,6 +32,10 @@ export default {
       contenuPanier: true,
     }
   },
+  props: {
+    // Permet de déterminer si on est dans le mode sombre
+    darkMode: {}
+  },
   methods: {
     /**
      * @vuese
@@ -49,7 +62,7 @@ export default {
   height: 20px
 }
 
-#contenusPanier, #contenusBanque {
+.contenusPanier, .contenusBanque {
 
   width: 100px;
   text-align: center;
@@ -59,6 +72,10 @@ export default {
   outline: 1px solid black;
 }
 
+.nonClickedDark {
+  outline: 1px solid white;
+}
+
 .clicked {
   outline: 5px solid yellow;
 }

src/components/Modifier_Contenu.vue

 <template>
   <div >
-    <p id="modifTitre"> Modification du contenu </p>
     <div id="titreContenu">
       <label>Titre du contenu : </label><br>
       <input type="text" placeholder="titre du contenu"  v-model="titreContenu">
@@ -8,7 +7,7 @@
     <br>
     <div class="mavonEditor">
 
-      <mavon-editor  :language="'fr'" style="min-height: 700px" v-model="texteDuContenu"/>
+      <mavon-editor  :language="'fr'" style="height: 80vh; margin-top: -0.5%; z-index: -1" v-model="texteDuContenu"/>
     </div>
     <div class="markdown">
       <br>

src/components/Volet_Base.vue

@@ -2,8 +2,8 @@
   <div id="divPrincipale" >
 
     <div id="principal" v-show="!modeConsultation && !modeModification">
-<!--   width: 330px;
- -->
+      <!--   width: 330px;
+       -->
       <div id="ensemble" class="ensemble" :class="darktheme ? 'ensembledark' : ''" :style="isActif ? {width: '340px'} : {width: '40px'}">
         <button id="changerVariante" :style="isActif ? {width: 'auto'} : {width: '20px'}"
                 v-show="!modeConsultation && !modeModification" v-on:click="changerVariante">{{ texteBoutonvariante }}</button>
@@ -30,7 +30,7 @@
                  v-on:click="enCoursChecked = !enCoursChecked" name="en-cours" value="en-cours"/>
 
         </div>
-<!--        <table v-bind:style="panierChoisi ? {'margin-top': '0%'} : {'margin-top': '24px'}">-->
+        <!--        <table v-bind:style="panierChoisi ? {'margin-top': '0%'} : {'margin-top': '24px'}">-->
         <table :style="{
    'margin-top': (panierChoisi ? '0%' : '24px' ),
    'margin-left': (isActif ? '20px' : '11%' ),
@@ -42,16 +42,16 @@
           </tr>
           </thead>
           <tr v-bind:style="!darktheme ? {'background-color': 'orange'} : {'background-color': '#FF8C00'}">
-            <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-show="!isActif">Type</th>
-            <th v-show="!isActif">Source</th>
+            <th v-on:click="trierColonne">Titre</th>
+            <th v-on:click="trierColonne">Auteur</th>
+            <th v-on:click="trierColonne">Version actuelle</th>
+            <th v-on:click="trierColonne">Date Version actuelle</th>
+
+            <th v-on:click="trierColonne">Nbre d'Utilisations</th>
+            <th v-on:click="trierColonne">Likes</th>
+            <th v-on:click="trierColonne">Tags</th>
+            <th v-on:click="trierColonne" v-show="!isActif">Type</th>
+            <th v-on:click="trierColonne" v-show="!isActif">Source</th>
             <th v-on:click="supprimerContenus" class="supprimerContenus">
               <img v-bind:style="{'background-color': 'orange'}" v-bind:src="panierChoisi ? imgPoubelle : imgEtoile" alt='' height=20 width=20/></th>
 
@@ -96,8 +96,8 @@
           <tr v-show="!panierChoisi" v-for="item in contenusbanque" :key="item.titre">
             <td :id="'a' + JSON.stringify(item._id)" v-on:click="chargerContenu(item, 'banque')">{{ item.titre }}</td>
             <b-popover :target="'a' + JSON.stringify(item._id)"  v-on:show="rechercherTexte(item._id, 'banque', item.source)" triggers="hover" placement="bottom">
-              <!--              <p id="beautiful" v-html="texteDuContenu"></p>-->
-              <div class="previsualisationBanque"></div>
+              <p v-html="texteDuContenu" v-if="!isMoodle"></p>
+              <Test v-else></Test>
             </b-popover>
             <td>{{ item.auteur }}</td>
             <td>{{item.versionEnCours.numero}}</td>
@@ -125,7 +125,8 @@
 
       </div>
     </div>
-    <Consulter_Contenu v-bind:auteur="auteur" @actionContenu="actionContenu" @retour_arriere="retourArriere" v-bind:contenuClique = "contenuClique" v-bind:contenuCliqueProvenance = "contenuCliqueProvenance" v-show="modeConsultation && !modeModification"/>
+    <Consulter_Contenu v-bind:auteur="auteur" @actionContenu="actionContenu" @retour_arriere="retourArriere" v-bind:contenuClique = "contenuClique"
+                       v-bind:contenuCliqueProvenance = "contenuCliqueProvenance" v-show="modeConsultation && !modeModification"/>
     <Modifier_Contenu v-bind:auteur="auteur" v-bind:texteDuContenu = "texteDuContenu" v-bind:contenuCliqueProvenance = "contenuCliqueProvenance"
                       v-show="!modeConsultation && modeModification" @choixModif="choixModif" v-bind:titreContenu="titreContenu"/>
 
@@ -165,7 +166,9 @@ export default {
     // Signal d'alerte pour mettre à jour les contenus
     majContenus: {},
     // Signal d'activation ou non du theme sombre
-    darktheme: {}
+    darktheme: {},
+    // Signal de déconnexion
+    deconnexion: {}
   },
   data: function () {
     return {
@@ -211,6 +214,15 @@ export default {
     }
   },
   watch: {
+    /**
+     * @vuese
+     * Dès qu'on se deconnecte on réinitialise la vue en cours sur le tableau des contenus
+     */
+    deconnexion: function () {
+      this.modeConsultation = false
+      this.modeModification = false
+      this.panierChoisi = true
+    },
     /**
      * @vuese
      * Dès que l'auteur est connu, on charge tous les contenus auxquels il pourrait s'intéresser
@@ -379,7 +391,7 @@ export default {
     },
     /**
      * @vuese
-     * Charger un contenu (dans Consulter_COntenu)
+     * Charger un contenu (dans Consulter_Contenu)
      */
     chargerContenu: function (item, provenance){
       this.panierChoisi = false
@@ -654,6 +666,39 @@ export default {
     },
     basculeRechercheFiltre: function (event) {
       this.modeFiltre = event.choix
+    },
+    trierColonne: function (event) {
+      let titreColonne = event.target.innerHTML
+      if (this.panierChoisi){
+        switch (titreColonne) {
+          case "Titre":
+            this.contenus.sort((a,b) => (a.titre.toLowerCase() > b.titre.toLowerCase()) ? 1 : ((b.titre.toLowerCase() > a.titre.toLowerCase()) ? -1 : 0))
+            break
+          case "Auteur":
+            this.contenus.sort((a,b) => (a.auteur > b.auteur) ? 1 : ((b.auteur > a.auteur) ? -1 : 0))
+            break
+          case "Version Actuelle":
+            break
+          case "Date version actuelle":
+            break
+          case "Nbre d'utilisations":
+            break
+          case "Likes":
+            break
+          case "Type":
+            break
+          case "Source":
+            break
+
+          default:
+            alert('prout')
+        }
+        /*  console.log(this.contenus.sort((x, y) => x.titre - y.titre))
+          console.log(this.contenus.sort())*/
+
+      } else {
+        console.log(titreColonne)
+      }
     }
   }
 }
@@ -730,14 +775,14 @@ tfoot {
 }
 
 .circleDark{
-/*  border: 1px solid black ;
-  border-radius: 50%;
-  display: flex; !* or inline-flex *!
-  align-items: center;
-  justify-content: center;
-  height: 75px;
-  width: 75px;
-  !*background: white url(../assets/img/plus.png);*!*/
+  /*  border: 1px solid black ;
+    border-radius: 50%;
+    display: flex; !* or inline-flex *!
+    align-items: center;
+    justify-content: center;
+    height: 75px;
+    width: 75px;
+    !*background: white url(../assets/img/plus.png);*!*/
   border: 1px solid white;
   background: black url(../assets/img/plus2.png);
   background-size: cover;
@@ -765,7 +810,7 @@ th{
   text-align: center;
 }
 
- #choixDuMode::v-deep {
+#choixDuMode::v-deep {
   border-color: white;
 }