Commit ece9d9aa authored by Jérémie Passerat's avatar Jérémie Passerat

Sauvegarde avant suppression Consulter_Contenu

parent abebb66c
......@@ -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>
......
......@@ -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
}
},
......
<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%;
}
......
<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{
......
<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;
}
......
<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>
......
......@@ -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;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment