Skip to content

O
OpenQuizz
Commit f8214df8 authored by Jérémie Passerat's avatar Jérémie Passerat
Browse files
Options

Integration navigation arborescence tags libres

parent 2076cd5f
Hide whitespace changes
Inline Side-by-side
Showing with 853 additions and 136 deletions
src/Contenu.vue
View file @ f8214df8
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<Volet_Base @rechercherNouvellesPublications="rechercherNouvellesPublications" @choix_variante="choixVariante" <Volet_Base @rechercherNouvellesPublications="rechercherNouvellesPublications" @choix_variante="choixVariante"
@newContenu="newContenu" v-bind:nvoContenu="nvoContenu" v-bind:auteur="auteur" @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" @ChangerTitre="ChangerTitre" /> v-bind:deconnexion="deconnexion" v-bind:etat="etat" @ChangerTitre="ChangerTitre" />
</div> </div>
</template> </template>
...@@ -61,7 +61,9 @@ export default { ...@@ -61,7 +61,9 @@ export default {
// Signal d'activation ou non du theme sombre // Signal d'activation ou non du theme sombre
darktheme: {}, darktheme: {},
// Signal de déconnexion // Signal de déconnexion
deconnexion: {} deconnexion: {},
// etat. Sera utile pour certaines réinitialisations de l'affichage
etat: {}
} }
} }
</script> </script>
......
src/GererTagsLibres.vue
View file @ f8214df8
<template> <template>
<div> <div>
<div style="text-align: center"><br>Bonjour, je suis le menu de gestion des tags libres<br><br> <Filtre_Tag_Libre v-bind:modeGestion = "modeGestion" v-bind:auteur="auteur"></Filtre_Tag_Libre>
Vous avez {{tagsLibresAuteur.length}} tags libres existants : <br><br>
<ul>
<li v-for="tag in tagsLibresAuteur" :key="tag">{{tag}} <button v-on:click="supprimerTag(tag)">supprimer</button></li>
</ul>
<div id="creationTag">
<label>Creer un tag libre :</label><br>
<input type="text" placeholder="tag a créer" v-model="nouveauTag">
<button id="creerTag" v-on:click="creerTag"> Creer</button>
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
import Service from "./service/Service"; import Service from "./service/Service";
import Filtre_Tag_Libre from "@/components/filtres/Filtre_Tag_Libre";
export default { export default {
name: "GererTagsLibres", name: "GererTagsLibres",
components: {Filtre_Tag_Libre},
data: function () { data: function () {
return { return {
tagsLibresAuteur: [], tagsLibresAuteur: [],
...@@ -31,7 +20,9 @@ export default { ...@@ -31,7 +20,9 @@ export default {
}, },
props: { props: {
//l'auteur connecte //l'auteur connecte
auteur: {} auteur: {},
// signal permettant de déterminer si on accede a filtre_tags_libres via cette page ou pas
modeGestion: {}
}, },
methods: { methods: {
creerTag: function () { creerTag: function () {
...@@ -46,6 +37,7 @@ export default { ...@@ -46,6 +37,7 @@ export default {
//alert("Supprimer le tag " + tag) //alert("Supprimer le tag " + tag)
//let data = {auteur: this.auteur, id_contenu: "", tag: tagAVirer} //let data = {auteur: this.auteur, id_contenu: "", tag: tagAVirer}
//this.$emit("actionTagLibre", {suppression: tagAVirer, id_contenu: this.contenu._id}) //this.$emit("actionTagLibre", {suppression: tagAVirer, id_contenu: this.contenu._id})
alert("hi hi")
Service.supprimerTagLibre(this.auteur, tagAVirer) Service.supprimerTagLibre(this.auteur, tagAVirer)
this.tagsLibresAuteur = this.tagsLibresAuteur.filter(tag => tag !== tagAVirer) this.tagsLibresAuteur = this.tagsLibresAuteur.filter(tag => tag !== tagAVirer)
} }
......
src/Index.vue
View file @ f8214df8
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
</Menu> </Menu>
<Contenu v-show="etat === 'Contenu'" v-bind:auteur="auteur" v-bind:nvoContenu="nvoContenu" v-bind:contenuAjoute="contenuAjoute" <Contenu v-show="etat === 'Contenu'" v-bind:auteur="auteur" v-bind:nvoContenu="nvoContenu" v-bind:contenuAjoute="contenuAjoute"
@choix_variante="choixVariante" @newContenu="newContenu" @choix_variante="choixVariante" @newContenu="newContenu"
@rechercherNouvellesPublications="rechercherPublications = !rechercherPublications" @rechercherNouvellesPublications="rechercherPublications = !rechercherPublications" v-bind:etat="etat"
v-bind:majContenus="majContenus" v-bind:darktheme="darktheme" v-bind:deconnexion="deconnexion" v-bind:majContenus="majContenus" v-bind:darktheme="darktheme" v-bind:deconnexion="deconnexion"
@ChangerTitre="ChangerTitre"></Contenu> @ChangerTitre="ChangerTitre"></Contenu>
<Maj v-show="etat === 'Mises à jour'" v-bind:auteur="auteur" v-bind:isRecu="isRecu" v-bind:isPropose="isPropose" <Maj v-show="etat === 'Mises à jour'" v-bind:auteur="auteur" v-bind:isRecu="isRecu" v-bind:isPropose="isPropose"
...@@ -16,11 +16,14 @@ ...@@ -16,11 +16,14 @@
@majNvoContenu="majNvoContenu" @majContenus="majContenus = !majContenus" @majNvoContenu="majNvoContenu" @majContenus="majContenus = !majContenus"
v-bind:rechercherPublications="rechercherPublications"></Maj> v-bind:rechercherPublications="rechercherPublications"></Maj>
<Profil v-show="etat === 'Profil'" ></Profil> <Profil v-show="etat === 'Profil'" ></Profil>
<GererTagsLibres v-show="etat === 'Tags'" v-bind:auteur="auteur" ></GererTagsLibres> <GererTagsLibres v-show="etat === 'Tags'" v-bind:auteur="auteur" v-bind:modeGestion="modeGestion" ></GererTagsLibres>
<TagsFixes v-show="etat === 'newContenu_Tags'"></TagsFixes> <TagsFixes v-show="etat === 'newContenu_Tags'"></TagsFixes>
<p style="text-align: center" v-show="errorLogin">{{errorMessage}}</p> <p style="text-align: center" v-show="errorLogin">{{errorMessage}}</p>
<NewContenu v-show="etat === 'newContenu'" v-bind:auteur="auteur" @contenuAjoute="ajouterUnContenu" @retourArriere="retourArriere"></NewContenu> <NewContenu v-show="etat === 'newContenu'" v-bind:auteur="auteur" @contenuAjoute="ajouterUnContenu" @retourArriere="retourArriere"></NewContenu>
<ImporterFichier v-show="etat === 'importContenu'" v-bind:auteur="auteur" @contenuAjoute="ajouterUnContenu" @retourArriere="retourArriere"></ImporterFichier> <ImporterFichier v-show="etat === 'importContenu'" v-bind:auteur="auteur" @contenuAjoute="ajouterUnContenu" @retourArriere="retourArriere"></ImporterFichier>
<span id="prout" v-show="hoverManuel">Manuel d'utilisation d'OpenQuizz</span>
<span :class="etat !== 'manuel' ? 'manuel' : 'retourManuel'" v-on:mouseover="popoverManuel" v-on:mouseleave="popoverManuel" v-on:click="consulterManuel"> </span>
<Manuel v-show="etat === 'manuel'" v-bind:etatTmp="etatTmp" v-bind:darktheme="darktheme"></Manuel>
</div> </div>
</template> </template>
...@@ -34,6 +37,7 @@ import NewContenu from "./NewContenu"; ...@@ -34,6 +37,7 @@ import NewContenu from "./NewContenu";
import ImporterFichier from "./ImporterFichier"; import ImporterFichier from "./ImporterFichier";
import GererTagsLibres from "@/GererTagsLibres"; import GererTagsLibres from "@/GererTagsLibres";
import TagsFixes from "@/TagsFixes"; import TagsFixes from "@/TagsFixes";
import Manuel from "@/Manuel";
// import Service from "./service/Service"; // import Service from "./service/Service";
// import showdown from "showdown" // import showdown from "showdown"
...@@ -57,7 +61,11 @@ export default { ...@@ -57,7 +61,11 @@ export default {
errorMessage: 'Login ou mot de passe erroné', errorMessage: 'Login ou mot de passe erroné',
darktheme: '', darktheme: '',
deconnexion: false, deconnexion: false,
nouveauTitre: '' nouveauTitre: '',
couleurFond: 'aqua',
modeGestion: false,
hoverManuel: false,
etatTmp: ''
} }
}, },
methods: { methods: {
...@@ -90,8 +98,9 @@ export default { ...@@ -90,8 +98,9 @@ export default {
if (event.choix === "Contenu"){ if (event.choix === "Contenu"){
this.deconnexion = !this.deconnexion this.deconnexion = !this.deconnexion
} }
if (event.choix === "Tags"){
this.modeGestion = !this.modeGestion
}
if (event.choix === "Mises à jour"){ if (event.choix === "Mises à jour"){
this.isRecu = event.isRecu this.isRecu = event.isRecu
this.isPropose = event.isPropose this.isPropose = event.isPropose
...@@ -152,6 +161,13 @@ export default { ...@@ -152,6 +161,13 @@ export default {
*/ */
darkTheme: function (event) { darkTheme: function (event) {
this.darktheme = event.active this.darktheme = event.active
if (this.darktheme === true){
document.body.style.backgroundColor = "lightslategray";
//document.body.style.color = "white";
} else {
document.body.style.backgroundColor = "aqua";
//document.body.style.color = "black";
}
}, },
/** /**
* @vuese * @vuese
...@@ -159,10 +175,27 @@ export default { ...@@ -159,10 +175,27 @@ export default {
*/ */
ChangerTitre: function (event) { ChangerTitre: function (event) {
this.nouveauTitre = event.titre this.nouveauTitre = event.titre
},
popoverManuel: function () {
this.hoverManuel = !this.hoverManuel
},
consulterManuel: function () {
if (this.etat === 'manuel'){
this.etat = this.etatTmp
this.nouveauTitre = ""
} else {
this.etatTmp = this.etat
this.etat = 'manuel'
this.nouveauTitre = "Manuel d'utilisation de l'application OpenQuizz"
}
} }
}, },
mounted() {
document.body.style.backgroundColor = "aqua";
},
components:{ components:{
Manuel,
TagsFixes, TagsFixes,
GererTagsLibres, GererTagsLibres,
ImporterFichier, ImporterFichier,
...@@ -177,4 +210,31 @@ export default { ...@@ -177,4 +210,31 @@ export default {
</script> </script>
<style scoped> <style scoped>
.manuel::before {
content: "\01F4D6";
position: fixed;
bottom: 1%;
left: 1%;
font-size: 32px;
}
.retourManuel::before {
content: "\2B05";
position: fixed;
bottom: 1%;
left: 1%;
font-size: 32px;
}
#prout {
background-color: white;
padding: 10px;
position: absolute;
bottom: 6%;
left: 1%;
}
</style> </style>
\ No newline at end of file
src/Login.vue
View file @ f8214df8
...@@ -31,9 +31,7 @@ import Service from './service/Service' ...@@ -31,9 +31,7 @@ import Service from './service/Service'
export default { export default {
name: "Login", name: "Login",
mounted() {
document.body.style.backgroundColor = "aqua";
},
methods: { methods: {
logIn: function () { logIn: function () {
let that = this let that = this
......
src/Maj.vue
View file @ f8214df8
...@@ -32,8 +32,11 @@ ...@@ -32,8 +32,11 @@
<td>{{ item.auteurDemande }}</td> <td>{{ item.auteurDemande }}</td>
<td>{{ item.version_en_cours }}</td> <td>{{ item.version_en_cours }}</td>
<td>01/06/2021</td> <td>01/06/2021</td>
<td id="valider" v-on:click="gererPublication(item, 'o')"><img v-bind:src="imageCoche" alt='' height=20 width=20></td> <!-- <td id="valider" v-on:click="gererPublication(item, 'o')"><img v-bind:src="imageCoche" alt='' height=20 width=20></td>-->
<td id="refuser" v-on:click="gererPublication(item, 'n')"><img v-bind:src="imageCroix" alt='' height=20 width=20></td> <td id="valider" v-on:click="gererPublication(item, 'o')"><span class="validerPublicationRecue"></span></td>
<!-- <td id="refuser" v-on:click="gererPublication(item, 'n')"><img v-bind:src="imageCroix" alt='' height=20 width=20></td>-->
<td id="valider" v-on:click="gererPublication(item, 'n')"><span class="supprimerPublicationRecue"></span></td>
</tr> </tr>
</tbody> </tbody>
...@@ -73,11 +76,11 @@ ...@@ -73,11 +76,11 @@
<td>1</td> <td>1</td>
<td>01/06/2021</td> <td>01/06/2021</td>
<td>{{ item.etat }}</td> <td>{{ item.etat }}</td>
<td v-if="item.etat === 'refus'" v-on:click="conserver(item)"><img v-bind:src="imageCoche" alt='' height=20 width=20></td> <td v-if="item.etat === 'refus'" v-on:click="conserver(item)"><span class="conserverPublicationRefusee"></span></td>
<td v-else></td> <td v-else></td>
<td v-if="item.etat === 'refus'" v-on:click="creerNouveau(item)"><img v-bind:src="imgNouveau" alt='' height=20 width=20></td> <td v-if="item.etat === 'refus'" v-on:click="creerNouveau(item)"><span class="creerNouveauContenu"></span></td>
<td v-else></td> <td v-else></td>
<td v-if="item.etat !== 'enCours'" v-on:click="supprimer(item)"><img v-bind:src="imgPoubelle" alt='' height=20 width=20></td> <td v-if="item.etat !== 'enCours'" v-on:click="supprimer(item)"><span class="supprimerPublicationProposee"></span></td>
<td v-else></td> <td v-else></td>
</tr> </tr>
</tbody> </tbody>
...@@ -377,4 +380,31 @@ tfoot { ...@@ -377,4 +380,31 @@ tfoot {
color: #fff; color: #fff;
} }
.validerPublicationRecue::before {
/*content: "\2713";*/
content: "\2705";
color: white;
}
.supprimerPublicationRecue::before {
/*content: "\2717";*/
content: "\274E";
color: white;
}
.supprimerPublicationProposee::before {
content: "\01F5D1";
color: white;
}
.creerNouveauContenu::before {
content: "\1F195";
color: white;
}
.conserverPublicationRefusee::before {
content: "\1F512";
color: white;
}
</style> </style>
\ No newline at end of file
src/Manuel.vue 0 → 100644
View file @ f8214df8
<template>
<div style="text-align: center">
<h1>Bienvenue sur le manuel d'utilisation de l'application OpenQuizz</h1>
<div style="display: flex">
<div id="menuLateral">
<ul>
<li><h5><span class="aucuneEducation" @click="naviguer"></span><a href="#titreUn"> I - La connexion</a></h5></li>
<ul class="cache">
<li>Dos Santos</li>
<li>Ribeiro</li>
</ul>
<li><h5>Manuel</h5></li>
</ul>
</div>
<div id="ohHolyNight">
<br>
<h2 id="titreUn">I - La connexion</h2>
<br>
<p style="text-align: left; text-indent: 3vh;"> Pour vous connecter sur le site, il vous suffit de vous rendre sur l'adresse {adresse} et de renseigner
votre identifiant et votre mot de passe dans les zones prévues à cet effet. En cas d'échec, un message d'erreur apparaitra.</p>
<p style="text-align: left; text-indent: 3vh;"> Dans un futur proche cette page permettra également de s'inscrire à OpenQuizz.</p>
<p>Lorem ipsum dolor sit amet. Ut beatae cumque aut saepe voluptatibus aut quasi aliquid a deserunt ad minima alias et molestiae quia.
Sed praesentium consequuntur qui iusto aspernatur in voluptatem debitis? Et provident fugit sit officia internos qui nihil modi et ullam dignissimos.
Ut accusamus laboriosam eum blanditiis magni qui esse rerum rem esse tempora in explicabo recusandae! Aut totam praesentium quo illum quia et eligendi
velit est dolorum voluptate ad voluptatem sapiente qui quibusdam iure. Et officia voluptas ut tempora debitis At magni nihil ut impedit harum hic vitae
minima sit harum minima et minus eligendi. Rem enim error quo dolores enim in omnis consequuntur nam quia praesentium ut sapiente sunt. Aut eligendi rerum
aut quos exercitationem est omnis quaerat et saepe voluptatem. Est commodi dolore ut recusandae corrupti non dolor libero et autem maxime et error aperiam.
</p>
<p>Lorem ipsum dolor sit amet. Ut beatae cumque aut saepe voluptatibus aut quasi aliquid a deserunt ad minima alias et molestiae quia.
Sed praesentium consequuntur qui iusto aspernatur in voluptatem debitis? Et provident fugit sit officia internos qui nihil modi et ullam dignissimos.
Ut accusamus laboriosam eum blanditiis magni qui esse rerum rem esse tempora in explicabo recusandae! Aut totam praesentium quo illum quia et eligendi
velit est dolorum voluptate ad voluptatem sapiente qui quibusdam iure. Et officia voluptas ut tempora debitis At magni nihil ut impedit harum hic vitae
minima sit harum minima et minus eligendi. Rem enim error quo dolores enim in omnis consequuntur nam quia praesentium ut sapiente sunt. Aut eligendi rerum
aut quos exercitationem est omnis quaerat et saepe voluptatem. Est commodi dolore ut recusandae corrupti non dolor libero et autem maxime et error aperiam.
</p>
<p>Lorem ipsum dolor sit amet. Ut beatae cumque aut saepe voluptatibus aut quasi aliquid a deserunt ad minima alias et molestiae quia.
Sed praesentium consequuntur qui iusto aspernatur in voluptatem debitis? Et provident fugit sit officia internos qui nihil modi et ullam dignissimos.
Ut accusamus laboriosam eum blanditiis magni qui esse rerum rem esse tempora in explicabo recusandae! Aut totam praesentium quo illum quia et eligendi
velit est dolorum voluptate ad voluptatem sapiente qui quibusdam iure. Et officia voluptas ut tempora debitis At magni nihil ut impedit harum hic vitae
minima sit harum minima et minus eligendi. Rem enim error quo dolores enim in omnis consequuntur nam quia praesentium ut sapiente sunt. Aut eligendi rerum
aut quos exercitationem est omnis quaerat et saepe voluptatem. Est commodi dolore ut recusandae corrupti non dolor libero et autem maxime et error aperiam.
</p>
<p>Lorem ipsum dolor sit amet. Ut beatae cumque aut saepe voluptatibus aut quasi aliquid a deserunt ad minima alias et molestiae quia.
Sed praesentium consequuntur qui iusto aspernatur in voluptatem debitis? Et provident fugit sit officia internos qui nihil modi et ullam dignissimos.
Ut accusamus laboriosam eum blanditiis magni qui esse rerum rem esse tempora in explicabo recusandae! Aut totam praesentium quo illum quia et eligendi
velit est dolorum voluptate ad voluptatem sapiente qui quibusdam iure. Et officia voluptas ut tempora debitis At magni nihil ut impedit harum hic vitae
minima sit harum minima et minus eligendi. Rem enim error quo dolores enim in omnis consequuntur nam quia praesentium ut sapiente sunt. Aut eligendi rerum
aut quos exercitationem est omnis quaerat et saepe voluptatem. Est commodi dolore ut recusandae corrupti non dolor libero et autem maxime et error aperiam.
</p>
<p>Lorem ipsum dolor sit amet. Ut beatae cumque aut saepe voluptatibus aut quasi aliquid a deserunt ad minima alias et molestiae quia.
Sed praesentium consequuntur qui iusto aspernatur in voluptatem debitis? Et provident fugit sit officia internos qui nihil modi et ullam dignissimos.
Ut accusamus laboriosam eum blanditiis magni qui esse rerum rem esse tempora in explicabo recusandae! Aut totam praesentium quo illum quia et eligendi
velit est dolorum voluptate ad voluptatem sapiente qui quibusdam iure. Et officia voluptas ut tempora debitis At magni nihil ut impedit harum hic vitae
minima sit harum minima et minus eligendi. Rem enim error quo dolores enim in omnis consequuntur nam quia praesentium ut sapiente sunt. Aut eligendi rerum
aut quos exercitationem est omnis quaerat et saepe voluptatem. Est commodi dolore ut recusandae corrupti non dolor libero et autem maxime et error aperiam.
</p>
<p>Lorem ipsum dolor sit amet. Ut beatae cumque aut saepe voluptatibus aut quasi aliquid a deserunt ad minima alias et molestiae quia.
Sed praesentium consequuntur qui iusto aspernatur in voluptatem debitis? Et provident fugit sit officia internos qui nihil modi et ullam dignissimos.
Ut accusamus laboriosam eum blanditiis magni qui esse rerum rem esse tempora in explicabo recusandae! Aut totam praesentium quo illum quia et eligendi
velit est dolorum voluptate ad voluptatem sapiente qui quibusdam iure. Et officia voluptas ut tempora debitis At magni nihil ut impedit harum hic vitae
minima sit harum minima et minus eligendi. Rem enim error quo dolores enim in omnis consequuntur nam quia praesentium ut sapiente sunt. Aut eligendi rerum
aut quos exercitationem est omnis quaerat et saepe voluptatem. Est commodi dolore ut recusandae corrupti non dolor libero et autem maxime et error aperiam.
</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Manuel",
props: {
// mode sombre activé ou non
darktheme: {},
// permet de récupérer la précedente page affichée
etatTmp: {},
},
methods: {
naviguer: function (e) {
e.target.classList.toggle("aucuneEducationDown")
console.log(e.target.parentNode.parentNode.nextSibling)
e.target.parentNode.parentNode.nextElementSibling.classList.toggle('affiche')
}
}
}
</script>
<style scoped>
#menuLateral{
height: 50vh;
width: 30vh;
margin-left: 10vh;
margin-top: 10vh;
border: 1px solid black;
position: fixed;
}
#ohHolyNight {
width: 120vh;
min-height: 100%;
height: 100%;
margin-top: 10vh;
margin-bottom: 5vh;
margin-left: 65vh;
border: 1px solid coral;
}
ul {
list-style: none;
padding-left: 1vh;
padding-top: 1vh;
text-align: left;
}
a {
text-decoration: none;
color: black;
}
.aucuneEducation::before {
content: "\27A2";
display: inline-block;
}
.aucuneEducationDown::before {
transform: rotate(90deg);
}
.cache {
display: none;
}
.affiche {
display: block;
margin-top: -1vh;
}
</style>
\ No newline at end of file
src/Menu.vue
View file @ f8214df8
<template> <template>
<div id="menuHaut" v-bind:class="darkMode ? 'dark' : ''"> <div v-bind:class="[darkMode ? 'dark' : '', etat === 'manuel' ? 'menuManuel' : 'menuHaut']">
<DarkModeSwitch v-bind:style="{'margin-top': '10px', 'margin-left': '10px'}" @switched="onSwitched"/> <DarkModeSwitch v-bind:style="[etat === 'manuel' ? {'margin-top': '10px', 'padding-top': '0px', 'padding-bottom': '5px', 'padding-left': '4px'} : {'margin-top': '10px'}, {'margin-left': '10px'}]" @switched="onSwitched"/>
<Choix_Mode_Variante v-bind:darkMode="darkMode" class="menuVariante" v-show="variante"></Choix_Mode_Variante> <Choix_Mode_Variante v-bind:darkMode="darkMode" class="menuVariante" v-show="variante"></Choix_Mode_Variante>
<span id="prout">{{ titrePage }}</span> <span :class="etat !== 'manuel' ? 'prout' : 'proutManuel'">{{ titrePage }}</span>
<div class="notif" v-on:click="choixIconeNotification" v-show="isNotif === true" <div class="notif" v-on:click="choixIconeNotification" v-show="isNotif === true"
v-bind:style="[!variante ? {'margin-left': '90%'} : {'margin-left': '32%'}]"></div> 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 class="circle" id="menuAuteur" v-if="etat !=='manuel'" v-on:click="isAffiche = !isAffiche" v-bind:style="styleCircle">
</div> </div>
<div :class="darkMode ? 'circleVideDark' : 'circleVide'" v-else> </div>
<div class="menu" v-bind:class="darkMode ? 'menuDark' : ''" v-show="isAffiche"> <div class="menu" v-bind:class="darkMode ? 'menuDark' : ''" v-show="isAffiche">
<div v-if="etat !== 'Profil'" 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-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-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 v-else class="sous_menu" v-bind:class="darkMode ? 'sous_menuDark' : ''" v-on:click="choixMenuAnnexe">Contenu</div>
<div v-if="etat !== 'Tags'" class="sous_menu" v-bind:class="darkMode ? 'sous_menuDark' : ''" v-on:click="choixMenuAnnexe">Tags</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-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-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 v-else class="sous_menu" v-bind:class="darkMode ? 'sous_menuDark' : ''" v-on:click="choixMenuAnnexe">Contenu</div>
...@@ -44,6 +45,11 @@ export default { ...@@ -44,6 +45,11 @@ export default {
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" 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"
} }
}, },
computed: {
menuHaut: function () {
return "menuProut"
}
},
props: { props: {
// Permet de déterminer si on est dans le mode mise à jour ou pas // Permet de déterminer si on est dans le mode mise à jour ou pas
etat: {}, etat: {},
...@@ -63,9 +69,10 @@ export default { ...@@ -63,9 +69,10 @@ export default {
*/ */
choixMenuAnnexe: function (e) { choixMenuAnnexe: function (e) {
const menuClique = e.target.innerText const menuClique = e.target.innerText
if (menuClique !== 'Contenu'){ if (menuClique !== "Contenu"){
this.titrePage = menuClique this.titrePage = menuClique
} else { }
else {
this.titrePage = "OpenQuizz - Bienvenue " + this.auteur this.titrePage = "OpenQuizz - Bienvenue " + this.auteur
} }
this.$emit("menu_choisi", {choix: menuClique}) this.$emit("menu_choisi", {choix: menuClique})
...@@ -213,18 +220,25 @@ export default { ...@@ -213,18 +220,25 @@ export default {
} else { } else {
this.titrePage = this.nouveauTitre this.titrePage = this.nouveauTitre
} }
} },
} }
} }
</script> </script>
<style scoped> <style scoped>
#menuHaut{ .menuHaut{
display: flex; display: flex;
background-color: white; background-color: white;
justify-content: center; justify-content: center;
} }
.menuManuel{
display: flex;
background-color: white;
justify-content: space-between;
}
.circle { .circle {
border: 1px solid yellow; border: 1px solid yellow;
margin-top: 0.25%; margin-top: 0.25%;
...@@ -241,6 +255,33 @@ export default { ...@@ -241,6 +255,33 @@ export default {
} }
.circleVide {
border: 1px solid white;
margin-top: 0.25%;
margin-bottom: 0.25%;
border-radius: 50%;
display: flex; /* or inline-flex */
align-items: center;
justify-content: center;
height: 37.5px;
width: 37.5px;
margin-right: 0.25%;
}
.circleVideDark {
border: 1px solid black;
margin-top: 0.25%;
margin-bottom: 0.25%;
border-radius: 50%;
display: flex; /* or inline-flex */
align-items: center;
justify-content: center;
height: 37.5px;
width: 37.5px;
margin-right: 0.25%;
}
.menuVariante{ .menuVariante{
margin-top: 1%; margin-top: 1%;
z-index: 1; z-index: 1;
...@@ -285,7 +326,7 @@ export default { ...@@ -285,7 +326,7 @@ export default {
} }
#prout { .prout {
display: flex; display: flex;
position: absolute; position: absolute;
...@@ -293,6 +334,12 @@ export default { ...@@ -293,6 +334,12 @@ export default {
margin-bottom: 0.1%; margin-bottom: 0.1%;
} }
.proutManuel {
margin-top: 0.5%;
margin-bottom: 0.1%;
}
.dark, .menuDark, .sous_menuDark { .dark, .menuDark, .sous_menuDark {
background-color: #111 !important; background-color: #111 !important;
color: #eee; color: #eee;
......
src/TagsFixes.vue
View file @ f8214df8
...@@ -127,7 +127,7 @@ export default { ...@@ -127,7 +127,7 @@ export default {
this.tagsModifies = "" this.tagsModifies = ""
this.validationTags = 1 this.validationTags = 1
this.niveauDeux = 1 this.niveauDeux = 1
alert(this.tagsBanque.length) //alert(this.tagsBanque.length)
this.tagUn = this.tagsBanque[0] this.tagUn = this.tagsBanque[0]
if (this.tagsBanque.length > 1){ if (this.tagsBanque.length > 1){
//ert("Hihi") //ert("Hihi")
......
src/TagsLibres.vue
View file @ f8214df8
<template> <template>
<div> <div id="pageTagLibre" v-bind:style="darktheme ? 'background-color: black; color: white' : 'background-color: white'">
<div id="tagsPresents"><br> <div id="tagsPresents"><br>
<label>Voici les tags libres présents sur ce contenu :</label><br> <label>Voici les tags libres présents sur ce contenu :</label><br>
<p v-if="tagsLibres.length === 0">Aucun tag présent</p> <p v-if="tagsLibres.length === 0">Aucun tag présent</p>
...@@ -14,11 +14,6 @@ ...@@ -14,11 +14,6 @@
<option v-for="tag in tagsAuteurDisponibles" :key="tag">{{ tag }}</option> <option v-for="tag in tagsAuteurDisponibles" :key="tag">{{ tag }}</option>
</select><br><br> </select><br><br>
</div> </div>
<div id="creationTag">
<label>Creer un tag libre :</label><br>
<input type="text" placeholder="tag a créer" v-model="nouveauTag">
<button id="creerTag" v-on:click="creerTag"></button>
</div>
<p>----------------------------------------------------------------------------</p> <p>----------------------------------------------------------------------------</p>
<TagsFixes v-bind:isModif="isModif" v-bind:tagsBanque="tagsBanque" v-bind:id_contenu="id_contenu"></TagsFixes> <TagsFixes v-bind:isModif="isModif" v-bind:tagsBanque="tagsBanque" v-bind:id_contenu="id_contenu"></TagsFixes>
</div> </div>
...@@ -37,15 +32,12 @@ export default { ...@@ -37,15 +32,12 @@ export default {
// récupération de l'auteur // récupération de l'auteur
auteur: {}, auteur: {},
// provenance du contenu // provenance du contenu
contenuCliqueProvenance: {} contenuCliqueProvenance: {},
// Signal d'activation ou non du theme sombre
darktheme: {}
}, },
methods:{ methods:{
ajouterLeTag: function () { ajouterLeTag: function () {
/* let data = {auteur: this.auteur, id_contenu: JSON.stringify(this.contenu._id), tag: this.ajouterTagExistant}
Service.ajouterTagLibre(data)*/
// Associer le tag au contenu pour l'auteur connecté
// Et l'ajouter à l'array des tags libres de Vue
let data = {auteur: this.auteur, id_contenu: JSON.stringify(this.contenu._id), tag: this.ajouterTagExistant} let data = {auteur: this.auteur, id_contenu: JSON.stringify(this.contenu._id), tag: this.ajouterTagExistant}
Service.associerTagLibre(data) Service.associerTagLibre(data)
...@@ -109,6 +101,11 @@ ul { ...@@ -109,6 +101,11 @@ ul {
} }
/*#pageTagLibre {
margin-left: 20%;
margin-right: 20%;
}*/
.supprimerTag { .supprimerTag {
background: aqua url(assets/img/croix2.png); background: aqua url(assets/img/croix2.png);
background-size: cover; background-size: cover;
...@@ -122,4 +119,12 @@ ul { ...@@ -122,4 +119,12 @@ ul {
border: none; border: none;
margin-left: 3px; margin-left: 3px;
} }
#tagsPresents {
padding-top: 0.75 %;
}
#ajouterTag {
padding-bottom: 0.75%;
}
</style> </style>
\ No newline at end of file
src/components/AjouterTags.vue deleted 100644 → 0
View file @ 2076cd5f
<template>
<div>
Bienvenue sur la page ou vous pourrez ajouter les tags nécessaires à accoler à la question que vous venez de créer
</div>
</template>
<script>
export default {
name: "AjouterTags"
}
</script>
<style scoped>
</style>
\ No newline at end of file
src/components/Consulter_Contenu.vue
View file @ f8214df8
...@@ -154,9 +154,6 @@ export default { ...@@ -154,9 +154,6 @@ export default {
noteContenu: 0, noteContenu: 0,
tagsContenus: [] tagsContenus: []
} }
},
computed: {
}, },
watch: { watch: {
/** /**
......
src/components/Detail_Contenu.vue
View file @ f8214df8
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<p v-show="filtre_choisi.length === 0">{{ texte }}</p> <p v-show="filtre_choisi.length === 0">{{ texte }}</p>
<Filtre_Tag v-show="filtre_choisi === 'tags officiels'" @creer_filtre="creer_filtre"/> <Filtre_Tag v-show="filtre_choisi === 'tags officiels'" @creer_filtre="creer_filtre"/>
<Filtre_Tag_Libre v-show="filtre_choisi === 'tags libres' " v-bind:filtreChoisi="filtre_choisi" v-bind:auteur="auteur" @creer_filtre="creer_filtre"/> <Filtre_Tag_Libre v-bind:darktheme="darktheme" v-show="filtre_choisi === 'tags libres' " v-bind:filtreChoisi="filtre_choisi" v-bind:auteur="auteur" @creer_filtre="creer_filtre"/>
<Filtre_Auteur v-bind:panierChoisi="panierChoisi" v-show="filtre_choisi === 'auteur'" v-bind:auteur="auteur" @creer_filtre="creer_filtre"/> <Filtre_Auteur v-bind:panierChoisi="panierChoisi" v-show="filtre_choisi === 'auteur'" v-bind:auteur="auteur" @creer_filtre="creer_filtre"/>
<Filtre_Date v-show="filtre_choisi === 'date' " @creer_filtre="creer_filtre"/> <Filtre_Date v-show="filtre_choisi === 'date' " @creer_filtre="creer_filtre"/>
<Filtre_Note_Popularite v-show="filtre_choisi === 'note' " @creer_filtre="creer_filtre" v-bind:deconnexion="deconnexion"/> <Filtre_Note_Popularite v-show="filtre_choisi === 'note' " @creer_filtre="creer_filtre" v-bind:deconnexion="deconnexion"/>
...@@ -43,7 +43,9 @@ export default { ...@@ -43,7 +43,9 @@ export default {
// mode panier enclenché ou non // mode panier enclenché ou non
panierChoisi: {}, panierChoisi: {},
// Signal de deconnexion // Signal de deconnexion
deconnexion: {} deconnexion: {},
// Signal d'activation ou non du theme sombre
darktheme: {},
}, },
methods: { methods: {
/** /**
...@@ -58,6 +60,10 @@ export default { ...@@ -58,6 +60,10 @@ export default {
} }
}, },
computed: { computed: {
/**
* @vuese
* Changement du texte de base du volet
*/
texte: function () { texte: function () {
if (this.modeFiltre) if (this.modeFiltre)
return "Ajoutez des filtres pour restreindre la recherche, ou effectuez une recherche libre (bouton en haut à droite)" return "Ajoutez des filtres pour restreindre la recherche, ou effectuez une recherche libre (bouton en haut à droite)"
......
src/components/Detail_Filtre.vue
View file @ f8214df8
<template> <template>
<div id="detail_filtre"> <div id="detail_filtre">
<button id="effacerFiltres" v-on:click="effacer_Filtres"></button> <!-- <button id="effacerFiltres" v-on:click="effacer_Filtres"></button>-->
<span v-bind:class="darktheme ? 'effacerFiltresDark' : 'effacerFiltres'" v-on:click="effacer_Filtres"></span>
<div id="filtresChoisis" v-for="(index) in filtres_Choisis" :key="index.filtre"> <div id="filtresChoisis" v-for="(index) in filtres_Choisis" :key="index.filtre">
<span class="filtreChoisi"> {{index.filtre}} <button class="supprimerFiltre" v-on:click="supprimer($event, index)"></button></span> <span :id="JSON.stringify(index.filtre)" class="filtreChoisi"> {{affichageTag(index)}} <button class="supprimerFiltre" v-on:click="supprimer($event, index)"></button></span>
<b-popover v-if="index.type === 'tags libres'" :target="JSON.stringify(index.filtre)" triggers="hover" placement="rightbottom">
<p>{{ index.filtre }}</p>
</b-popover>
</div> </div>
</div> </div>
</template> </template>
...@@ -15,8 +18,10 @@ export default { ...@@ -15,8 +18,10 @@ export default {
// Variable de stockage des nouveaux filtres // Variable de stockage des nouveaux filtres
nouveau_filtre: {}, nouveau_filtre: {},
// Signal de deconnexion // Signal de deconnexion
deconnexion: {} deconnexion: {},
}, // Signal d'activation ou non du theme sombre
darktheme: {},
},
methods: { methods: {
/** /**
* @vuese * @vuese
...@@ -75,6 +80,17 @@ export default { ...@@ -75,6 +80,17 @@ export default {
default: default:
break break
} }
},
/**
* @vuese
* Permet le raffinage de l'affichage si on a un tag libre
*/
affichageTag: function (index) {
if(index.type ==='tags libres'){
if(index.filtre.lastIndexOf("/") !== -1)
return index.filtre.substring(index.filtre.lastIndexOf("/") + 1)
}
return index.filtre
} }
}, },
watch: { watch: {
...@@ -149,13 +165,20 @@ export default { ...@@ -149,13 +165,20 @@ export default {
align-items: center; align-items: center;
} }
#effacerFiltres { .effacerFiltres::before {
height: 15px; height: 15px;
width: 15px; width: 15px;
margin: 5px 2px 2px; margin: 5px 2px 2px;
background: white url(../assets/img/balai.png); content: "\01F9F9";
background-size: cover; }
border: none;
.effacerFiltresDark::before {
height: 15px;
width: 15px;
margin: 5px 2px 2px;
content: "\01F9F9";
color: transparent;
text-shadow: 0 0 0 white;
} }
</style> </style>
\ No newline at end of file
src/components/Modifier_Contenu.vue
View file @ f8214df8
<template> <template>
<div> <div>
<div id="titreContenu"> <div id="titreContenu" v-bind:style="darktheme ? 'color:white' : ''">
<!-- <select v-show="(contenuCliqueProvenance === 'banque' <!-- <select v-show="(contenuCliqueProvenance === 'banque'
|| contenuCliqueProvenance === 'perso') || contenuCliqueProvenance === 'perso')
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
Note de la version : {{noteContenu}}<br> Note de la version : {{noteContenu}}<br>
Popularité : {{contenuClique.popularite}}<br> Popularité : {{contenuClique.popularite}}<br>
</div> </div>
<button id="tagsLibres" v-on:click="modifierTags">{{ titreModifierTags }}</button> <span id="tagsLibres" v-on:click="modifierTags">{{ titreModifierTags }}</span>
<div id="modifTitre"> <div id="modifTitre">
...@@ -37,11 +37,19 @@ ...@@ -37,11 +37,19 @@
</div> </div>
<div id="actionsContenu"> <div id="actionsContenu">
<button v-on:click="actionContenu('supprimer')">Supprimer</button> <!-- <button class="boutonAction" v-on:click="actionContenu('supprimer')">Supprimer</button>-->
<button v-show="contenuCliqueProvenance !== 'maj' && contenuCliqueProvenance === 'en-cours' && <span class="boutonAction" v-if="contenuCliqueProvenance !== 'perso'" v-on:click="actionContenu('supprimer')" id="supprimerContenu"></span>
contenuClique.origine === 'tiers' && contenuClique.anonyme !== 'oui'" v-on:click="actionContenu('publier')">Publier le contenu</button> <span class="boutonAction" v-else v-on:click="actionContenu('supprimer')" id="supprimerContenuSolo"></span>
<button v-show="contenuCliqueProvenance !== 'maj' && contenuCliqueProvenance === 'en-cours' && <!-- <button class="boutonAction" v-show="contenuCliqueProvenance !== 'maj' && contenuCliqueProvenance === 'en-cours' &&
(contenuClique.origine === 'perso' || contenuClique.anonyme === 'oui')" v-on:click="actionContenu('validerModification')">Valider la modification</button> contenuClique.origine === 'tiers' && contenuClique.anonyme !== 'oui'" v-on:click="actionContenu('publier')">Publier le contenu</button>-->
<span class="boutonAction" v-show="contenuCliqueProvenance !== 'maj' && contenuCliqueProvenance === 'en-cours' &&
contenuClique.origine === 'tiers' && contenuClique.anonyme !== 'oui'" v-on:click="actionContenu('publier')" id="publierContenu">publier contenu</span>
<!-- <button class="boutonAction" v-show="contenuCliqueProvenance !== 'maj' && contenuCliqueProvenance === 'en-cours' &&
(contenuClique.origine === 'perso' || contenuClique.anonyme === 'oui')"
v-on:click="actionContenu('validerModification')">Valider la modification</button>-->
<span class="boutonAction" v-show="contenuCliqueProvenance !== 'maj' && contenuCliqueProvenance === 'en-cours' &&
(contenuClique.origine === 'perso' || contenuClique.anonyme === 'oui')"
v-on:click="actionContenu('validerModification')" id="validerContenu">valider contenu</span>
</div> </div>
</div> </div>
<br> <br>
...@@ -50,7 +58,7 @@ ...@@ -50,7 +58,7 @@
<mavon-editor :language="'fr'" style="position: static; height: 79vh; margin-top: -0.5%" v-model="texteDuContenu"/> <mavon-editor :language="'fr'" style="position: static; height: 79vh; margin-top: -0.5%" v-model="texteDuContenu"/>
</div> </div>
<TagsLibres v-show="isModeTag" v-bind:contenu="this.contenuClique" v-bind:auteur="auteur" @actionTagLibre="actionTagLibre" <TagsLibres v-show="isModeTag" v-bind:contenu="this.contenuClique" v-bind:auteur="auteur" @actionTagLibre="actionTagLibre"
style="position: static; height: 79vh; margin-top: -0.5%"></TagsLibres> style="position: static; height: 79vh; margin-top: -0.5%" v-bind:darktheme="darktheme"></TagsLibres>
<div class="markdown"> <div class="markdown">
<br> <br>
<button id="validerModif" v-on:click="action('valider')">modifier </button> <button id="validerModif" v-on:click="action('valider')">modifier </button>
...@@ -84,7 +92,9 @@ export default { ...@@ -84,7 +92,9 @@ export default {
// la version du contenu cliqué // la version du contenu cliqué
contenuCliqueVersion: {}, contenuCliqueVersion: {},
// le contenu clique // le contenu clique
contenuClique: {} contenuClique: {},
// Signal d'activation ou non du theme sombre
darktheme: {},
}, },
data: function () { data: function () {
return { return {
...@@ -331,4 +341,74 @@ button { ...@@ -331,4 +341,74 @@ button {
align-items: inherit; align-items: inherit;
position: relative position: relative
} }
.boutonAction {
margin-right: 2px;
}
#supprimerContenuSolo::before {
content: "\01F5D1";
/* border-right: 1px solid black;
margin-right: 10px;
padding-right: 10px;*/
}
#supprimerContenuSoloDark::before {
content: "\01F5D1";
color: transparent;
text-shadow: 0 0 0 white;
}
#supprimerContenu::before {
content: "\01F5D1";
border-right: 1px solid black;
margin-right: 10px;
padding-right: 10px;
}
#supprimerContenuDark::before {
content: "\01F5D1";
color: transparent;
text-shadow: 0 0 0 white;
border-right: 1px solid black;
margin-right: 10px;
padding-right: 10px;
}
#validerContenu::before {
content: "\2712";
margin-right: 5px;
}
#publierContenuDark::before {
content: "\01F4F0";
margin-right: 5px;
color: transparent;
text-shadow: 0 0 0 white;
}
#validerContenuDark::before {
content: "\2712";
margin-right: 5px;
color: transparent;
text-shadow: 0 0 0 white;
}
#publierContenu::before {
content: "\01F4F0";
margin-right: 5px;
}
#tagsLibres::before {
content: "\270F ";
transform: rotate(180deg);
padding-right: 5px;
margin-right: 5px;
/* left: 350px;
position: absolute;*/
}
</style> </style>
\ No newline at end of file
src/components/Volet_Base.vue
View file @ f8214df8
...@@ -57,8 +57,9 @@ ...@@ -57,8 +57,9 @@
<th v-on:click="trierColonne" v-show="!isActif && panierChoisi">Tags Libres</th> <th v-on:click="trierColonne" v-show="!isActif && panierChoisi">Tags Libres</th>
<th v-on:click="trierColonne" >Type</th> <th v-on:click="trierColonne" >Type</th>
<th v-on:click="trierColonne">Source</th> <th v-on:click="trierColonne">Source</th>
<th v-on:click="supprimerContenus" class="supprimerContenus"> <!-- <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> <img v-bind:style="{'background-color': 'orange'}" v-bind:src="panierChoisi ? imgPoubelle : imgEtoile" alt='' height=20 width=20/></th>-->
<th v-on:click="supprimerContenus" class="supprimerContenus"> <span v-bind:class="panierChoisi ? 'imgPoubelle' : 'imgEtoile'"></span></th>
</tr> </tr>
<tbody> <tbody>
...@@ -136,7 +137,7 @@ ...@@ -136,7 +137,7 @@
<Consulter_Contenu v-bind:auteur="auteur" @actionContenu="actionContenu" @retour_arriere="retourArriere" v-bind:contenuClique = "contenuClique" <Consulter_Contenu v-bind:auteur="auteur" @actionContenu="actionContenu" @retour_arriere="retourArriere" v-bind:contenuClique = "contenuClique"
v-bind:contenuCliqueProvenance = "contenuCliqueProvenance" v-show="modeConsultation"/> v-bind:contenuCliqueProvenance = "contenuCliqueProvenance" v-show="modeConsultation"/>
<Modifier_Contenu v-bind:auteur="auteur" v-bind:texteDuContenu = "texteDuContenu" v-bind:contenuCliqueProvenance = "contenuCliqueProvenance" <Modifier_Contenu v-bind:auteur="auteur" v-bind:texteDuContenu = "texteDuContenu" v-bind:contenuCliqueProvenance = "contenuCliqueProvenance"
v-show="modeModification" @actionContenu="actionContenu" v-bind:contenuClique = "contenuClique" v-show="modeModification" @actionContenu="actionContenu" v-bind:contenuClique = "contenuClique" v-bind:darktheme="darktheme"
@choixModif="choixModif" v-bind:titreContenu="titreContenu" @majMoyenne="majMoyenne" @actionTagLibre="actionTagLibre"/> @choixModif="choixModif" v-bind:titreContenu="titreContenu" @majMoyenne="majMoyenne" @actionTagLibre="actionTagLibre"/>
</div> </div>
...@@ -176,7 +177,9 @@ export default { ...@@ -176,7 +177,9 @@ export default {
// Signal d'activation ou non du theme sombre // Signal d'activation ou non du theme sombre
darktheme: {}, darktheme: {},
// Signal de déconnexion // Signal de déconnexion
deconnexion: {} deconnexion: {},
// etat. Sera utile pour certaines réinitialisations de l'affichage
etat: {}
}, },
data: function () { data: function () {
return { return {
...@@ -278,6 +281,13 @@ export default { ...@@ -278,6 +281,13 @@ export default {
majContenus: function () { majContenus: function () {
this.contenusDuPanier() this.contenusDuPanier()
this.contenusDeLaBanque() this.contenusDeLaBanque()
},
/**
* @vuese
* Si l'etat change (on sort du 'mode contenu'), on réinitialise le volet latéral
*/
etat: function(){
this.filtre_choisi = ""
} }
}, },
...@@ -743,7 +753,7 @@ export default { ...@@ -743,7 +753,7 @@ export default {
let filtre_tags_libres = (event.filtres.filter(contenu => contenu.type === 'tags libres').map(contenu => contenu.filtre)) let filtre_tags_libres = (event.filtres.filter(contenu => contenu.type === 'tags libres').map(contenu => contenu.filtre))
contenusFiltres.forEach(contenu => console.log(contenu.tags_libres.length)) // contenusFiltres.forEach(contenu => console.log(contenu.tags_libres.length))
for (let i = 0; i < filtre_tags_libres.length; i++) { for (let i = 0; i < filtre_tags_libres.length; i++) {
if(filtre_tags_libres[i] === 'Contenu Sans Tag'){ if(filtre_tags_libres[i] === 'Contenu Sans Tag'){
...@@ -1113,17 +1123,17 @@ th image ...@@ -1113,17 +1123,17 @@ th image
#ensemble { #ensemble {
background-color: whitesmoke; background-color: whitesmoke;
height: 966px; height: 94.75vh;
} }
#tableau { #tableau {
background-color: lightgrey; background-color: lightgrey;
padding-top: 0.25%; padding-top: 0.25%;
} }
#divPrincipale {
/*#divPrincipale { overflow-y: hidden;
background-color: lightgray; overflow-x: hidden;
}*/ }
/*<img src="@/assets/img/etoile.png" alt="" height=20 width=20/>*/ /*<img src="@/assets/img/etoile.png" alt="" height=20 width=20/>*/
...@@ -1147,6 +1157,15 @@ th image ...@@ -1147,6 +1157,15 @@ th image
.tableaudark th { .tableaudark th {
border-color: white; border-color: white;
}
.imgPoubelle::before {
content: "\01F5D1";
}
.imgEtoile::before {
content: "\2B50";
} }
......
src/components/Volet_Contenu.vue
View file @ f8214df8
...@@ -2,11 +2,11 @@ ...@@ -2,11 +2,11 @@
<div id="contenu"> <div id="contenu">
<div id = "detailFiltre"> <div id = "detailFiltre">
<Detail_Filtre v-bind:nouveau_filtre="nouveau_filtre" @filtresChoisis="filtresChoisis" v-bind:deconnexion="deconnexion"/> <Detail_Filtre v-bind:darktheme="darktheme" v-bind:nouveau_filtre="nouveau_filtre" @filtresChoisis="filtresChoisis" v-bind:deconnexion="deconnexion"/>
</div> </div>
<div id = "detailContenu"> <div id = "detailContenu">
<Detail_Contenu v-bind:modeFiltre="modeFiltre" v-bind:panierChoisi="panierChoisi" v-bind:filtre_choisi="filtre_choisi" <Detail_Contenu v-bind:modeFiltre="modeFiltre" v-bind:panierChoisi="panierChoisi" v-bind:filtre_choisi="filtre_choisi"
v-bind:auteur="auteur" @creer_filtre="creer_filtre" v-bind:deconnexion="deconnexion"/> v-bind:auteur="auteur" v-bind:darktheme="darktheme" @creer_filtre="creer_filtre" v-bind:deconnexion="deconnexion"/>
</div> </div>
<Choix_Mode v-show="!variante" v-bind:darktheme="darktheme" @mode_choisi="ajusterMode" v-bind:razModeVariante="razModeVariante" /> <Choix_Mode v-show="!variante" v-bind:darktheme="darktheme" @mode_choisi="ajusterMode" v-bind:razModeVariante="razModeVariante" />
</div> </div>
...@@ -107,7 +107,7 @@ export default { ...@@ -107,7 +107,7 @@ export default {
vertical-align: middle; vertical-align: middle;
margin-top: 25%; margin-top: 25%;
margin-bottom: 25%; margin-bottom: 25%;
overflow: auto;
} }
......
src/components/Volet_Menu.vue
View file @ f8214df8
...@@ -4,7 +4,9 @@ ...@@ -4,7 +4,9 @@
<Barre_Filtre v-bind:darktheme="darktheme" v-bind:panierChoisi="panierChoisi" v-show="modeFiltre" @filtre_choisi="passerFiltre"/> <Barre_Filtre v-bind:darktheme="darktheme" v-bind:panierChoisi="panierChoisi" v-show="modeFiltre" @filtre_choisi="passerFiltre"/>
<Barre_Recherche v-bind:darktheme="darktheme" v-show="!modeFiltre"/> <Barre_Recherche v-bind:darktheme="darktheme" v-show="!modeFiltre"/>
</div> </div>
<button id="recherche" v-bind:class="{'modeFiltre': modeFiltre, 'modeRecherche': !modeFiltre}" v-on:click="changerModeMenu"></button> <!-- <button id="recherche" v-bind:class="{'modeFiltre': modeFiltre, 'modeRecherche': !modeFiltre}" v-on:click="changerModeMenu"></button>-->
<span v-if="modeFiltre" class="modeFiltre" v-on:click="changerModeMenu"></span>
<button v-else v-bind:class="!darktheme ? 'modeRecherche' : 'modeRechercheDark'" v-on:click="changerModeMenu"></button>
</div> </div>
</template> </template>
...@@ -65,17 +67,30 @@ export default { ...@@ -65,17 +67,30 @@ export default {
height: 23px; height: 23px;
} }
.modeFiltre{ .modeFiltre::before{
background-color: white; /* background-color: white;
background-image: url(../assets/img/loupe.png); background-image: url(../assets/img/loupe.png);
background-size: cover; background-size: cover;
border: none; border: none;*/
content: "\1F50D";
width: 23px;
height: 23px;
} }
.modeRecherche{ .modeRecherche{
background-color: white; background-color: whitesmoke;
background-image: url(../assets/img/filtre.png); background-image: url(../assets/img/filtre.png);
background-size: cover; background-size: cover;
border: none; border: none;
width: 23px;
height: 23px;
}
.modeRechercheDark{
background-color: #353839;
background-image: url(../assets/img/filtre-inverse.png);
background-size: cover;
border: none;
width: 23px;
height: 23px;
} }
</style> </style>
\ No newline at end of file
src/components/filtres/Filtre_Auteur.vue
View file @ f8214df8
...@@ -17,6 +17,7 @@ import Service from "../../service/Service"; ...@@ -17,6 +17,7 @@ import Service from "../../service/Service";
export default { export default {
name: "Filtre_Auteur", name: "Filtre_Auteur",
methods: { methods: {
// recuperation de l'auteur choisi
choixAuteur: function () { choixAuteur: function () {
if (this.auteur !== undefined) if (this.auteur !== undefined)
this.$emit("creer_filtre", {filtre: this.auteur, type: 'auteur'}) this.$emit("creer_filtre", {filtre: this.auteur, type: 'auteur'})
......
src/components/filtres/Filtre_Date.vue
View file @ f8214df8
...@@ -21,9 +21,9 @@ ...@@ -21,9 +21,9 @@
export default { export default {
name: "Filtre_Date", name: "Filtre_Date",
methods: { methods: {
// recuperation de la date choisie
choixDate: function () { choixDate: function () {
this.$emit("creer_filtre", {filtre: this.date, type: 'date'}) this.$emit("creer_filtre", {filtre: this.date, type: 'date'})
// this.date = 'Toutes les périodes'
} }
}, },
data: function () { data: function () {
......
src/components/filtres/Filtre_Note.vue
View file @ f8214df8
...@@ -50,6 +50,7 @@ export default { ...@@ -50,6 +50,7 @@ export default {
} }
}, },
methods:{ methods:{
// récupération du choix du filtre "note min"
choixNoteMin: function () { choixNoteMin: function () {
let vraieNoteMin = parseFloat(this.noteMin.substring(1)) let vraieNoteMin = parseFloat(this.noteMin.substring(1))
let vraieNoteMax = 5 let vraieNoteMax = 5
...@@ -63,6 +64,7 @@ export default { ...@@ -63,6 +64,7 @@ export default {
} }
this.noteMin = "" this.noteMin = ""
}, },
// récupération du choix du filtre "note max"
choixNoteMax: function () { choixNoteMax: function () {
let vraieNoteMin = 0 let vraieNoteMin = 0
if (this.noteMin !== 0) if (this.noteMin !== 0)
...@@ -77,6 +79,7 @@ export default { ...@@ -77,6 +79,7 @@ export default {
this.noteMax = "" this.noteMax = ""
}, },
// récupération du choix du filtre "plage de note"
validerPlage: function () { validerPlage: function () {
this.$emit("creer_filtre", {filtre: this.borneInf + " - " + this.borneSup, type: "noteBorne"}) this.$emit("creer_filtre", {filtre: this.borneInf + " - " + this.borneSup, type: "noteBorne"})
this.borneInf = 0 this.borneInf = 0
......
src/components/filtres/Filtre_Tag.vue
View file @ f8214df8
...@@ -94,10 +94,13 @@ export default { ...@@ -94,10 +94,13 @@ export default {
name: "Filtre_Tag", name: "Filtre_Tag",
methods: { methods: {
/**
* @vuese
* activation / desactivation de l'arborescence
*/
naviguer: function (e) { naviguer: function (e) {
if (e.offsetX > e.target.offsetLeft) { if (e.offsetX > e.target.offsetLeft) {
//alert(e.target.text())
//alert("Je veux mettre" + e.target.innerText + "en filtre")
this.$emit("creer_filtre", {filtre: e.target.innerText, type: this.filtreChoisi}) this.$emit("creer_filtre", {filtre: e.target.innerText, type: this.filtreChoisi})
} }
...@@ -106,6 +109,11 @@ export default { ...@@ -106,6 +109,11 @@ export default {
e.target.parentNode.nextElementSibling.classList.toggle('affiche') e.target.parentNode.nextElementSibling.classList.toggle('affiche')
} }
}, },
/**
* @vuese
* récupération d'un click sur un des échelon
*/
nouveauFiltre: function (e) { nouveauFiltre: function (e) {
this.$emit("creer_filtre", {filtre: e.target.innerText, type: this.filtreChoisi}) this.$emit("creer_filtre", {filtre: e.target.innerText, type: this.filtreChoisi})
......
src/components/filtres/Filtre_Tag_Libre.vue
View file @ f8214df8
<template> <template>
<div> <div id="body" v-bind:class="editMode ? 'modeConsultation' : 'modeModification'">
<ul id="arborescenceLibre" class="menuNonFinal"> <!-- arborescence globale -->
<li><span class="nouveauTagLibre" @click="ajouterTagLibre">nouveau tag libre</span></li> <ul id="arborescenceLibre" class="menuNonFinal" >
<!-- creation de nouveau filtre de 'niveau' 1 -->
<li v-if="editMode">
<span v-bind:class="darktheme ? 'nouveauTagLibreDark' : 'nouveauTagLibre'"
@click="ajouterTagLibre">nouveau tag libre</span></li>
<!-- zone de création de filtre de niveau 1 -->
<li v-show="nouveauTagLibre"><span class="niveauInamovible"></span> <li v-show="nouveauTagLibre"><span class="niveauInamovible"></span>
<input type="text" style="width: 150px; height: 20px"></li> <input type="text" style="width: 150px; height: 20px" v-model="nouveauTexteLibre" v-on:keyup="keymonitor">
<li v-on:click="nouveauFiltre" ><span class="niveauInamovible"></span>Contenu Sans Tag</li> <span v-bind:class="darktheme ? 'validerCocheDark' : 'validerCoche'" v-on:click="creerTagLibre"></span>
<ul v-for="filtre in filtresLibres" :key="filtre" class="tagsLibres"> <span v-bind:class="darktheme ? 'annulerCocheDark' : 'annulerCoche'" @click="masquerTagLibre"></span></li>
<li v-on:click="nouveauFiltre"><span class="niveauInamovible"></span>{{ filtre }} <!-- selection de contenus sans filtre libre établi -->
<span class="poubel" @click="supprimerTagLibre"></span><span class="nouvelEchelon" @click="ajouterTagLibre"></span></li> <li v-on:click="nouveauFiltre($event)" ><span class="niveauInamovible"></span>Contenu Sans Tag</li>
</ul> <!-- affichage des filtres personnels de l'utilisateur -->
<ul v-for="filtre in filtresNiveauUn" :key="filtre" class="tagsLibres">
<!-- <li v-on:click="nouveauFiltre(filtre)"><span class="niveauInamovible"></span>{{ filtre }}-->
<li @click="!editMode ? nouveauFiltre($event, filtre) : ''">
<span :class="isSousEmbranchement(filtre) > 0 ? 'niveau' : 'niveauInamovible'" @click="naviguer"></span>{{ filtre }}
<span v-if="editMode" v-bind:class="darktheme ? 'poubelDark' : 'poubel'" @click="supprimerTagLibre"></span>
<span v-if="editMode" v-bind:class="darktheme ? 'nouvelEchelonDark' : 'nouvelEchelon'" @click="ajouterTagLibre"></span></li>
<li hidden="hidden" class="blocLibre"><span class="niveauInamovible"></span>
<input type="text" style="width: 150px; height: 20px" v-model="nouveauTexteLibre">
<span v-bind:class="darktheme ? 'validerCocheDark' : 'validerCoche'" v-on:click="creerTagLibreEchelon($event, filtre)"></span>
<span v-bind:class="darktheme ? 'annulerCocheDark' : 'annulerCoche'" @click="masquerTagLibre"></span></li>
<ul v-for="filtre in filtresNiveauDeux(filtre)" :key="filtre" class="tagsLibres cache">
<li @click="!editMode ? nouveauFiltre($event, filtre) : ''" class="blocLibre">
<span :class="isSousEmbranchement(filtre) > 0 ? 'niveau' : 'niveauInamovible'" @click="naviguer"></span>{{affichageFiltreDeux(filtre)}}
<span v-if="editMode" v-bind:class="darktheme ? 'poubelDark' : 'poubel'" @click="supprimerTagLibre"></span>
<span v-if="editMode" v-bind:class="darktheme ? 'nouvelEchelonDark' : 'nouvelEchelon'" @click="ajouterTagLibre"></span></li>
<li hidden="hidden" class="blocLibreDeux"><span class="niveauInamovible"></span>
<input type="text" style="width: 150px; height: 20px" v-model="nouveauTexteLibre">
<span v-bind:class="darktheme ? 'validerCocheDark' : 'validerCoche'" v-on:click="creerTagLibreEchelon($event, filtre)"></span>
<span v-bind:class="darktheme ? 'annulerCocheDark' : 'annulerCoche'" @click="masquerTagLibre"></span></li>
<ul v-for="filtre in filtresNiveauTrois(filtre)" :key="filtre" class="tagsLibres cache">
<li @click="!editMode ? nouveauFiltre($event, filtre) : ''" class="blocLibreDeux">
<span :class="isSousEmbranchement(filtre) > 0 ? 'niveau' : 'niveauInamovible'" @click="naviguer"></span>{{affichageFiltreTrois(filtre) }}
<span v-if="editMode" v-bind:class="darktheme ? 'poubelDark' : 'poubel'" @click="supprimerTagLibre"></span>
<span v-if="editMode" v-bind:class="darktheme ? 'nouvelEchelonDark' : 'nouvelEchelon'" @click="ajouterTagLibre"></span></li>
<li hidden="hidden" class="blocLibreTrois"><span class="niveauInamovible"></span>
<input type="text" style="width: 150px; height: 20px" v-model="nouveauTexteLibre">
<span v-bind:class="darktheme ? 'validerCocheDark' : 'validerCoche'" v-on:click="creerTagLibreEchelon($event, filtre)"></span>
<span v-bind:class="darktheme ? 'annulerCocheDark' : 'annulerCoche'" @click="masquerTagLibre"></span></li>
<ul v-for="filtre in filtresNiveauQuatre(filtre)" :key="filtre" class="tagsLibres cache">
<li @click="!editMode ? nouveauFiltre($event, filtre) : ''" class="blocLibreTrois">
<span :class="isSousEmbranchement(filtre) > 0 ? 'niveau' : 'niveauInamovible'" @click="naviguer"></span>{{ affichageFiltreQuatre(filtre) }}
<span v-if="editMode" v-bind:class="darktheme ? 'poubelDark' : 'poubel'" @click="supprimerTagLibre"></span>
<span v-if="editMode" v-bind:class="darktheme ? 'nouvelEchelonDark' : 'nouvelEchelon'" @click="ajouterTagLibre"></span></li>
<li hidden="hidden" class="blocLibreQuatre"><span class="niveauInamovible"></span>
<input type="text" style="width: 150px; height: 20px" v-model="nouveauTexteLibre">
<span v-bind:class="darktheme ? 'validerCocheDark' : 'validerCoche'" v-on:click="creerTagLibreEchelon($event, filtre)"></span>
<span v-bind:class="darktheme ? 'annulerCocheDark' : 'annulerCoche'" @click="masquerTagLibre"></span></li>
</ul>
</ul>
</ul>
</ul>
</ul> </ul>
</div> </div>
</template> </template>
...@@ -25,56 +73,219 @@ export default { ...@@ -25,56 +73,219 @@ export default {
// permet de déterminer si on est en mode tag_libre ou tag_fixe // permet de déterminer si on est en mode tag_libre ou tag_fixe
filtreChoisi: {}, filtreChoisi: {},
// l'auteur en cours // l'auteur en cours
auteur: {} auteur: {},
// Signal d'activation ou non du theme sombre
darktheme: {},
// Est-on en mode gestion ou en mode filtre
modeGestion: {}
}, },
data: function () { data: function () {
return { return {
filtresLibres: [], filtresLibres: [],
nouveauTagLibre: false nouveauTagLibre: false,
nouveauTagEchelonLibre: false,
nouveauTexteLibre: '',
editMode: false
} }
}, },
methods: { methods: {
/**
* @vuese
* permet l'activation / desactivation des échelons de tag
* si le span n'est pas navigable, ne rien faire
*/
naviguer: function (e) { naviguer: function (e) {
if (e.offsetX > e.target.offsetLeft) { if (e.offsetX > e.target.offsetLeft) {
//alert(e.target.text())
//alert("Je veux mettre" + e.target.innerText + "en filtre")
this.$emit("creer_filtre", {filtre: e.target.innerText, type: this.filtreChoisi}) this.$emit("creer_filtre", {filtre: e.target.innerText, type: this.filtreChoisi})
} }
else{ else{
e.target.classList.toggle("niveau-down") e.target.classList.toggle("niveau-down")
e.target.parentNode.nextElementSibling.classList.toggle('affiche') e.target.parentNode.nextElementSibling.nextElementSibling.classList.toggle('affiche')
} }
}, },
nouveauFiltre: function (e) { /**
this.$emit("creer_filtre", {filtre: e.target.innerText, type: this.filtreChoisi}) *
* quand on clique sur un filtre on l'envoie dans le "circuit"
*/
nouveauFiltre: function (event, filtre) {
// bricolage pour empecher qu'un filtre ne soit créé quand on clique sur une flèche pour activer / desactiver l'arborescence
if(event.target.tagName !== 'SPAN')
this.$emit("creer_filtre", {filtre: filtre, type: this.filtreChoisi})
}, },
/**
* @vuese
* suppression (définitive) d'un tag libre
*/
supprimerTagLibre: function (e) { supprimerTagLibre: function (e) {
Service.supprimerTagLibre(this.auteur, Service.supprimerTagLibre(this.auteur, e.target.parentNode.innerText.trim()))
this.filtresLibres = this.filtresLibres.filter(filtre => filtre !== e.target.parentNode.innerText.trim()) this.filtresLibres = this.filtresLibres.filter(filtre => filtre !== e.target.parentNode.innerText.trim())
}, },
/**
* @vuese
* affichage de la saisie du nouveau tag
*/
ajouterTagLibre: function (e) { ajouterTagLibre: function (e) {
let tagRacine = e.target.parentNode.innerText let tagRacine = e.target.parentNode.innerText
if (tagRacine === "nouveau tag libre"){ if (tagRacine === "nouveau tag libre"){
this.nouveauTagLibre = !this.nouveauTagLibre this.nouveauTagLibre = !this.nouveauTagLibre
} else { } else {
let ul = document.createElement('ul') e.target.parentNode.nextElementSibling.hidden = !e.target.parentNode.nextElementSibling.hidden
ul.className = "tags libres" }
let li = document.createElement('li') },
li.append(document.createTextNode("prute")) /**
ul.appendChild(li) * @vuese
* ajout (permanent) d'un tag libre (echelon 1)
*/
creerTagLibre: function () {
// this.filtresLibres.push(this.nouveauTexteLibre)
let that = this
this.nouveauTagLibre = false
let data = {auteur: this.auteur, tag: this.nouveauTexteLibre, id_contenu: ""}
Service.ajouterTagLibre(data).then(function () {
Service.recupererTagLibre(that.auteur).then(function (response) {
that.filtresLibres = response.data
})
})
this.nouveauTexteLibre = ""
},
/**
* @vuese
* ajout (permanent) d'un tag libre (echelon 2 et supérieurs)
*/
creerTagLibreEchelon: function(event, tag){
//this.filtresLibres.push(tag + "/" + this.nouveauTexteLibre)
let that = this
let data = {auteur: this.auteur, tag: tag + "/" + this.nouveauTexteLibre, id_contenu: ""}
Service.ajouterTagLibre(data).then(function () {
Service.recupererTagLibre(that.auteur).then(function (response) {
that.filtresLibres = response.data
})
})
this.nouveauTexteLibre = ""
event.target.parentNode.hidden = true
},
/**
* @vuese
* masquage de la zone de saisie d'un nouveau tag
*/
masquerTagLibre: function () {
this.nouveauTagLibre = false
},
/**
* @vuese
* masquage de la zone de saisie d'un nouveau tag après input clavier
*/
keymonitor: function(event) {
if (event.key === "Escape") {
this.nouveauTagLibre = false
}
},
/**
* @vuese
* raffinage de l'affichage des filtres de niveau 2
*/
affichageFiltreDeux: function(tag) {
return tag.substring(tag.indexOf("/") + 1)
},
/**
* @vuese
* raffinage de l'affichage des filtres de niveau 3
*/
affichageFiltreTrois: function(tag) {
let prout = tag.substring(tag.indexOf("/") + 1)
return prout.substring(prout.indexOf("/") + 1)
},
/**
* @vuese
* raffinage de l'affichage des filtres de niveau 4
*/
affichageFiltreQuatre: function(tag) {
let prout = tag.substring(tag.indexOf("/") + 1)
prout = prout.substring(prout.indexOf("/") + 1)
return prout.substring(prout.indexOf("/") + 1)
},
/**
* @vuese
* fonction permettant l'extraction des sous filtres de niveau 2 (en fct du filtre en cours)
*/
filtresNiveauDeux: function (filtre) {
let prout = this.filtresLibres.filter(tag => tag.startsWith(filtre))
return prout.filter(tag => (tag.split("/")).length === 2)
},
/**
* @vuese
* fonction permettant l'extraction des sous filtres de niveau 3 (en fct du filtre en cours)
*/
filtresNiveauTrois: function (filtre) {
let prout = this.filtresLibres.filter(tag => tag.startsWith(filtre))
e.target.parentNode.parentNode.appendChild(ul) return prout.filter(tag => (tag.split("/")).length === 3)
},
/**
* @vuese
* fonction permettant l'extraction des sous filtres de niveau 4 (en fct du filtre en cours)
*/
filtresNiveauQuatre: function (filtre) {
let prout = this.filtresLibres.filter(tag => tag.startsWith(filtre))
return prout.filter(tag => (tag.split("/")).length === 4)
},
/**
* @vuese
* Permet de déterminer si un filtre libre possède des "sous embranchements" ou non
*/
isSousEmbranchement: function(filtre){
// Determiner a quel "niveau" de filtre on est
let niveauFiltre = filtre.split("/").length - 1
// Et calculer le nombre de "sous embranchements"
let sousEmbranchements = -1
switch (niveauFiltre){
case 0:
sousEmbranchements = this.filtresNiveauDeux(filtre)
break
case 1:
sousEmbranchements = this.filtresNiveauTrois(filtre)
break
case 2:
sousEmbranchements = this.filtresNiveauQuatre(filtre)
break
} }
return sousEmbranchements.length
} }
}, },
watch: { watch: {
/**
* @vuese
* Des que le filtre tag libre est choisi, on récupère les tags libres de l'auteur
*/
filtreChoisi: function () { filtreChoisi: function () {
let that = this let that = this
this.editMode = false
Service.recupererTagLibre(this.auteur).then(function (response) { Service.recupererTagLibre(this.auteur).then(function (response) {
that.filtresLibres = response.data that.filtresLibres = response.data
}) })
},
modeGestion: function () {
let that = this
this.editMode = true
Service.recupererTagLibre(this.auteur).then(function (response) {
that.filtresLibres = response.data
}) }
},
computed:{
/**
* @vuese
* permet de selectionner les tags d'échelon 1 ("racine")
*/
filtresNiveauUn: function () {
return this.filtresLibres.filter(tag => (tag.split("/")).length === 1)
} }
} }
} }
</script> </script>
...@@ -91,6 +302,19 @@ export default { ...@@ -91,6 +302,19 @@ export default {
padding-inline-start: 0px; padding-inline-start: 0px;
} }
.blocLibre {
padding-inline-start: 20px;
}
.blocLibreDeux {
padding-inline-start: 40px;
}
.blocLibreTrois {
padding-inline-start: 60px;
}
.blocLibreQuatre {
padding-inline-start: 80px;
}
#arborescence { #arborescence {
padding: 4px; padding: 4px;
text-align: left; text-align: left;
...@@ -114,6 +338,10 @@ body { ...@@ -114,6 +338,10 @@ body {
} }
.niveau-down::before {
transform: rotate(90deg);
}
.niveauInamovible::before { .niveauInamovible::before {
content: "\23F9"; content: "\23F9";
color: black; color: black;
...@@ -126,6 +354,32 @@ body { ...@@ -126,6 +354,32 @@ body {
.poubel::before { .poubel::before {
content: "\01F5D1"; content: "\01F5D1";
color: orange;
display: inline-block;
margin-left: 2px;
margin-right: 4px;
}
.poubelDark::before {
content: "\01F5D1";
color: white;
display: inline-block;
margin-left: 2px;
margin-right: 4px;
}
.validerCoche::before {
content: "\2713";
color: black;
display: inline-block;
margin-left: 2px;
margin-right: 4px;
}
.annulerCoche::before {
content: "\2717";
color: black; color: black;
display: inline-block; display: inline-block;
margin-left: 2px; margin-left: 2px;
...@@ -133,6 +387,25 @@ body { ...@@ -133,6 +387,25 @@ body {
} }
.validerCocheDark::before {
content: "\2713";
color: white;
display: inline-block;
margin-left: 2px;
margin-right: 4px;
}
.annulerCocheDark::before {
content: "\2717";
color: white;
display: inline-block;
margin-left: 2px;
margin-right: 4px;
}
.nouveauTagLibre::before { .nouveauTagLibre::before {
content: "\002295 "; content: "\002295 ";
color: black; color: black;
...@@ -142,6 +415,15 @@ body { ...@@ -142,6 +415,15 @@ body {
margin-top: -50px; margin-top: -50px;
} }
.nouveauTagLibreDark::before {
content: "\002295 ";
color: white;
display: inline-block;
margin-left: 2px;
margin-right: 4px;
margin-top: -50px;
}
.nouvelEchelon::before { .nouvelEchelon::before {
content: "\002B"; content: "\002B";
color: black; color: black;
...@@ -152,6 +434,16 @@ body { ...@@ -152,6 +434,16 @@ body {
} }
.nouvelEchelonDark::before {
content: "\002B";
color: white;
display: inline-block;
margin-left: 2px;
margin-right: 4px;
padding-bottom: -50px;
}
.niveau-down::before { .niveau-down::before {
transform: rotate(90deg); transform: rotate(90deg);
} }
...@@ -170,5 +462,12 @@ body { ...@@ -170,5 +462,12 @@ body {
li { li {
width: fit-content; width: fit-content;
white-space: nowrap;
} }
/*.modeCreation{
pointer-events: visible;
}*/
</style> </style>
\ No newline at end of file
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