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
Show whitespace changes
Inline Side-by-side
Showing with 853 additions and 136 deletions
src/Contenu.vue
View file @ f8214df8
......@@ -3,7 +3,7 @@
<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:deconnexion="deconnexion" @ChangerTitre="ChangerTitre" />
v-bind:deconnexion="deconnexion" v-bind:etat="etat" @ChangerTitre="ChangerTitre" />
</div>
</template>
......@@ -61,7 +61,9 @@ export default {
// Signal d'activation ou non du theme sombre
darktheme: {},
// Signal de déconnexion
deconnexion: {}
deconnexion: {},
// etat. Sera utile pour certaines réinitialisations de l'affichage
etat: {}
}
}
</script>
......
src/GererTagsLibres.vue
View file @ f8214df8
<template>
<div>
<div style="text-align: center"><br>Bonjour, je suis le menu de gestion des tags libres<br><br>
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>
<Filtre_Tag_Libre v-bind:modeGestion = "modeGestion" v-bind:auteur="auteur"></Filtre_Tag_Libre>
</div>
</template>
<script>
import Service from "./service/Service";
import Filtre_Tag_Libre from "@/components/filtres/Filtre_Tag_Libre";
export default {
name: "GererTagsLibres",
components: {Filtre_Tag_Libre},
data: function () {
return {
tagsLibresAuteur: [],
......@@ -31,7 +20,9 @@ export default {
},
props: {
//l'auteur connecte
auteur: {}
auteur: {},
// signal permettant de déterminer si on accede a filtre_tags_libres via cette page ou pas
modeGestion: {}
},
methods: {
creerTag: function () {
......@@ -46,6 +37,7 @@ export default {
//alert("Supprimer le tag " + tag)
//let data = {auteur: this.auteur, id_contenu: "", tag: tagAVirer}
//this.$emit("actionTagLibre", {suppression: tagAVirer, id_contenu: this.contenu._id})
alert("hi hi")
Service.supprimerTagLibre(this.auteur, tagAVirer)
this.tagsLibresAuteur = this.tagsLibresAuteur.filter(tag => tag !== tagAVirer)
}
......
src/Index.vue
View file @ f8214df8
......@@ -8,7 +8,7 @@
</Menu>
<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"
@rechercherNouvellesPublications="rechercherPublications = !rechercherPublications" v-bind:etat="etat"
v-bind:majContenus="majContenus" v-bind:darktheme="darktheme" v-bind:deconnexion="deconnexion"
@ChangerTitre="ChangerTitre"></Contenu>
<Maj v-show="etat === 'Mises à jour'" v-bind:auteur="auteur" v-bind:isRecu="isRecu" v-bind:isPropose="isPropose"
......@@ -16,11 +16,14 @@
@majNvoContenu="majNvoContenu" @majContenus="majContenus = !majContenus"
v-bind:rechercherPublications="rechercherPublications"></Maj>
<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>
<p style="text-align: center" v-show="errorLogin">{{errorMessage}}</p>
<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>
<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>
</template>
......@@ -34,6 +37,7 @@ import NewContenu from "./NewContenu";
import ImporterFichier from "./ImporterFichier";
import GererTagsLibres from "@/GererTagsLibres";
import TagsFixes from "@/TagsFixes";
import Manuel from "@/Manuel";
// import Service from "./service/Service";
// import showdown from "showdown"
......@@ -57,7 +61,11 @@ export default {
errorMessage: 'Login ou mot de passe erroné',
darktheme: '',
deconnexion: false,
nouveauTitre: ''
nouveauTitre: '',
couleurFond: 'aqua',
modeGestion: false,
hoverManuel: false,
etatTmp: ''
}
},
methods: {
......@@ -90,8 +98,9 @@ export default {
if (event.choix === "Contenu"){
this.deconnexion = !this.deconnexion
}
if (event.choix === "Tags"){
this.modeGestion = !this.modeGestion
}
if (event.choix === "Mises à jour"){
this.isRecu = event.isRecu
this.isPropose = event.isPropose
......@@ -152,6 +161,13 @@ export default {
*/
darkTheme: function (event) {
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
......@@ -159,10 +175,27 @@ export default {
*/
ChangerTitre: function (event) {
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:{
Manuel,
TagsFixes,
GererTagsLibres,
ImporterFichier,
......@@ -177,4 +210,31 @@ export default {
</script>
<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>
\ No newline at end of file
src/Login.vue
View file @ f8214df8
......@@ -31,9 +31,7 @@ import Service from './service/Service'
export default {
name: "Login",
mounted() {
document.body.style.backgroundColor = "aqua";
},
methods: {
logIn: function () {
let that = this
......
src/Maj.vue
View file @ f8214df8
......@@ -32,8 +32,11 @@
<td>{{ item.auteurDemande }}</td>
<td>{{ item.version_en_cours }}</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="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')"><img v-bind:src="imageCoche" 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>
</tbody>
......@@ -73,11 +76,11 @@
<td>1</td>
<td>01/06/2021</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-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-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>
</tr>
</tbody>
......@@ -377,4 +380,31 @@ tfoot {
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>
\ 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>
<div id="menuHaut" v-bind:class="darkMode ? 'dark' : ''">
<DarkModeSwitch v-bind:style="{'margin-top': '10px', 'margin-left': '10px'}" @switched="onSwitched"/>
<div v-bind:class="[darkMode ? 'dark' : '', etat === 'manuel' ? 'menuManuel' : 'menuHaut']">
<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>
<span id="prout">{{ titrePage }}</span>
<span :class="etat !== 'manuel' ? 'prout' : 'proutManuel'">{{ 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 class="circle" id="menuAuteur" v-if="etat !=='manuel'" v-on:click="isAffiche = !isAffiche" v-bind:style="styleCircle">
</div>
<div :class="darkMode ? 'circleVideDark' : 'circleVide'" v-else> </div>
<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-else class="sous_menu" v-bind:class="darkMode ? 'sous_menuDark' : ''" v-on:click="choixMenuAnnexe">Contenu</div>
......@@ -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"
}
},
computed: {
menuHaut: function () {
return "menuProut"
}
},
props: {
// Permet de déterminer si on est dans le mode mise à jour ou pas
etat: {},
......@@ -63,9 +69,10 @@ export default {
*/
choixMenuAnnexe: function (e) {
const menuClique = e.target.innerText
if (menuClique !== 'Contenu'){
if (menuClique !== "Contenu"){
this.titrePage = menuClique
} else {
}
else {
this.titrePage = "OpenQuizz - Bienvenue " + this.auteur
}
this.$emit("menu_choisi", {choix: menuClique})
......@@ -213,18 +220,25 @@ export default {
} else {
this.titrePage = this.nouveauTitre
}
}
},
}
}
</script>
<style scoped>
#menuHaut{
.menuHaut{
display: flex;
background-color: white;
justify-content: center;
}
.menuManuel{
display: flex;
background-color: white;
justify-content: space-between;
}
.circle {
border: 1px solid yellow;
margin-top: 0.25%;
......@@ -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{
margin-top: 1%;
z-index: 1;
......@@ -285,7 +326,7 @@ export default {
}
#prout {
.prout {
display: flex;
position: absolute;
......@@ -293,6 +334,12 @@ export default {
margin-bottom: 0.1%;
}
.proutManuel {
margin-top: 0.5%;
margin-bottom: 0.1%;
}
.dark, .menuDark, .sous_menuDark {
background-color: #111 !important;
color: #eee;
......
src/TagsFixes.vue
View file @ f8214df8
......@@ -127,7 +127,7 @@ export default {
this.tagsModifies = ""
this.validationTags = 1
this.niveauDeux = 1
alert(this.tagsBanque.length)
//alert(this.tagsBanque.length)
this.tagUn = this.tagsBanque[0]
if (this.tagsBanque.length > 1){
//ert("Hihi")
......
src/TagsLibres.vue
View file @ f8214df8
<template>
<div>
<div id="pageTagLibre" v-bind:style="darktheme ? 'background-color: black; color: white' : 'background-color: white'">
<div id="tagsPresents"><br>
<label>Voici les tags libres présents sur ce contenu :</label><br>
<p v-if="tagsLibres.length === 0">Aucun tag présent</p>
......@@ -14,11 +14,6 @@
<option v-for="tag in tagsAuteurDisponibles" :key="tag">{{ tag }}</option>
</select><br><br>
</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>
<TagsFixes v-bind:isModif="isModif" v-bind:tagsBanque="tagsBanque" v-bind:id_contenu="id_contenu"></TagsFixes>
</div>
......@@ -37,15 +32,12 @@ export default {
// récupération de l'auteur
auteur: {},
// provenance du contenu
contenuCliqueProvenance: {}
contenuCliqueProvenance: {},
// Signal d'activation ou non du theme sombre
darktheme: {}
},
methods:{
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}
Service.associerTagLibre(data)
......@@ -109,6 +101,11 @@ ul {
}
/*#pageTagLibre {
margin-left: 20%;
margin-right: 20%;
}*/
.supprimerTag {
background: aqua url(assets/img/croix2.png);
background-size: cover;
......@@ -122,4 +119,12 @@ ul {
border: none;
margin-left: 3px;
}
#tagsPresents {
padding-top: 0.75 %;
}
#ajouterTag {
padding-bottom: 0.75%;
}
</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 {
noteContenu: 0,
tagsContenus: []
}
},
computed: {
},
watch: {
/**
......
src/components/Detail_Contenu.vue
View file @ f8214df8
......@@ -3,7 +3,7 @@
<p v-show="filtre_choisi.length === 0">{{ texte }}</p>
<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_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"/>
......@@ -43,7 +43,9 @@ export default {
// mode panier enclenché ou non
panierChoisi: {},
// Signal de deconnexion
deconnexion: {}
deconnexion: {},
// Signal d'activation ou non du theme sombre
darktheme: {},
},
methods: {
/**
......@@ -58,6 +60,10 @@ export default {
}
},
computed: {
/**
* @vuese
* Changement du texte de base du volet
*/
texte: function () {
if (this.modeFiltre)
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>
<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">
<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>
</template>
......@@ -15,8 +18,10 @@ export default {
// Variable de stockage des nouveaux filtres
nouveau_filtre: {},
// Signal de deconnexion
deconnexion: {}
},
deconnexion: {},
// Signal d'activation ou non du theme sombre
darktheme: {},
},
methods: {
/**
* @vuese
......@@ -75,6 +80,17 @@ export default {
default:
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: {
......@@ -149,13 +165,20 @@ export default {
align-items: center;
}
#effacerFiltres {
.effacerFiltres::before {
height: 15px;
width: 15px;
margin: 5px 2px 2px;
background: white url(../assets/img/balai.png);
background-size: cover;
border: none;
content: "\01F9F9";
}
.effacerFiltresDark::before {
height: 15px;
width: 15px;
margin: 5px 2px 2px;
content: "\01F9F9";
color: transparent;
text-shadow: 0 0 0 white;
}
</style>
\ No newline at end of file
src/components/Modifier_Contenu.vue
View file @ f8214df8
<template>
<div>
<div id="titreContenu">
<div id="titreContenu" v-bind:style="darktheme ? 'color:white' : ''">
<!-- <select v-show="(contenuCliqueProvenance === 'banque'
|| contenuCliqueProvenance === 'perso')
......@@ -14,7 +14,7 @@
Note de la version : {{noteContenu}}<br>
Popularité : {{contenuClique.popularite}}<br>
</div>
<button id="tagsLibres" v-on:click="modifierTags">{{ titreModifierTags }}</button>
<span id="tagsLibres" v-on:click="modifierTags">{{ titreModifierTags }}</span>
<div id="modifTitre">
......@@ -37,11 +37,19 @@
</div>
<div id="actionsContenu">
<button v-on:click="actionContenu('supprimer')">Supprimer</button>
<button v-show="contenuCliqueProvenance !== 'maj' && contenuCliqueProvenance === 'en-cours' &&
contenuClique.origine === 'tiers' && contenuClique.anonyme !== 'oui'" v-on:click="actionContenu('publier')">Publier le contenu</button>
<button v-show="contenuCliqueProvenance !== 'maj' && contenuCliqueProvenance === 'en-cours' &&
(contenuClique.origine === 'perso' || contenuClique.anonyme === 'oui')" v-on:click="actionContenu('validerModification')">Valider la modification</button>
<!-- <button class="boutonAction" v-on:click="actionContenu('supprimer')">Supprimer</button>-->
<span class="boutonAction" v-if="contenuCliqueProvenance !== 'perso'" v-on:click="actionContenu('supprimer')" id="supprimerContenu"></span>
<span class="boutonAction" v-else v-on:click="actionContenu('supprimer')" id="supprimerContenuSolo"></span>
<!-- <button class="boutonAction" v-show="contenuCliqueProvenance !== 'maj' && contenuCliqueProvenance === 'en-cours' &&
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>
<br>
......@@ -50,7 +58,7 @@
<mavon-editor :language="'fr'" style="position: static; height: 79vh; margin-top: -0.5%" v-model="texteDuContenu"/>
</div>
<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">
<br>
<button id="validerModif" v-on:click="action('valider')">modifier </button>
......@@ -84,7 +92,9 @@ export default {
// la version du contenu cliqué
contenuCliqueVersion: {},
// le contenu clique
contenuClique: {}
contenuClique: {},
// Signal d'activation ou non du theme sombre
darktheme: {},
},
data: function () {
return {
......@@ -331,4 +341,74 @@ button {
align-items: inherit;
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>
\ No newline at end of file
src/components/Volet_Base.vue
View file @ f8214df8
......@@ -57,8 +57,9 @@
<th v-on:click="trierColonne" v-show="!isActif && panierChoisi">Tags Libres</th>
<th v-on:click="trierColonne" >Type</th>
<th v-on:click="trierColonne">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>
<!-- <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>-->
<th v-on:click="supprimerContenus" class="supprimerContenus"> <span v-bind:class="panierChoisi ? 'imgPoubelle' : 'imgEtoile'"></span></th>
</tr>
<tbody>
......@@ -136,7 +137,7 @@
<Consulter_Contenu v-bind:auteur="auteur" @actionContenu="actionContenu" @retour_arriere="retourArriere" v-bind:contenuClique = "contenuClique"
v-bind:contenuCliqueProvenance = "contenuCliqueProvenance" v-show="modeConsultation"/>
<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"/>
</div>
......@@ -176,7 +177,9 @@ export default {
// Signal d'activation ou non du theme sombre
darktheme: {},
// Signal de déconnexion
deconnexion: {}
deconnexion: {},
// etat. Sera utile pour certaines réinitialisations de l'affichage
etat: {}
},
data: function () {
return {
......@@ -278,6 +281,13 @@ export default {
majContenus: function () {
this.contenusDuPanier()
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 {
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++) {
if(filtre_tags_libres[i] === 'Contenu Sans Tag'){
......@@ -1113,17 +1123,17 @@ th image
#ensemble {
background-color: whitesmoke;
height: 966px;
height: 94.75vh;
}
#tableau {
background-color: lightgrey;
padding-top: 0.25%;
}
/*#divPrincipale {
background-color: lightgray;
}*/
#divPrincipale {
overflow-y: hidden;
overflow-x: hidden;
}
/*<img src="@/assets/img/etoile.png" alt="" height=20 width=20/>*/
......@@ -1147,6 +1157,15 @@ th image
.tableaudark th {
border-color: white;
}
.imgPoubelle::before {
content: "\01F5D1";
}
.imgEtoile::before {
content: "\2B50";
}
......
src/components/Volet_Contenu.vue
View file @ f8214df8
......@@ -2,11 +2,11 @@
<div id="contenu">
<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 id = "detailContenu">
<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>
<Choix_Mode v-show="!variante" v-bind:darktheme="darktheme" @mode_choisi="ajusterMode" v-bind:razModeVariante="razModeVariante" />
</div>
......@@ -107,7 +107,7 @@ export default {
vertical-align: middle;
margin-top: 25%;
margin-bottom: 25%;
overflow: auto;
}
......
src/components/Volet_Menu.vue
View file @ f8214df8
......@@ -4,7 +4,9 @@
<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"/>
</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>
</template>
......@@ -65,17 +67,30 @@ export default {
height: 23px;
}
.modeFiltre{
background-color: white;
.modeFiltre::before{
/* background-color: white;
background-image: url(../assets/img/loupe.png);
background-size: cover;
border: none;
border: none;*/
content: "\1F50D";
width: 23px;
height: 23px;
}
.modeRecherche{
background-color: white;
background-color: whitesmoke;
background-image: url(../assets/img/filtre.png);
background-size: cover;
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>
\ No newline at end of file
src/components/filtres/Filtre_Auteur.vue
View file @ f8214df8
......@@ -17,6 +17,7 @@ import Service from "../../service/Service";
export default {
name: "Filtre_Auteur",
methods: {
// recuperation de l'auteur choisi
choixAuteur: function () {
if (this.auteur !== undefined)
this.$emit("creer_filtre", {filtre: this.auteur, type: 'auteur'})
......
src/components/filtres/Filtre_Date.vue
View file @ f8214df8
......@@ -21,9 +21,9 @@
export default {
name: "Filtre_Date",
methods: {
// recuperation de la date choisie
choixDate: function () {
this.$emit("creer_filtre", {filtre: this.date, type: 'date'})
// this.date = 'Toutes les périodes'
}
},
data: function () {
......
src/components/filtres/Filtre_Note.vue
View file @ f8214df8
......@@ -50,6 +50,7 @@ export default {
}
},
methods:{
// récupération du choix du filtre "note min"
choixNoteMin: function () {
let vraieNoteMin = parseFloat(this.noteMin.substring(1))
let vraieNoteMax = 5
......@@ -63,6 +64,7 @@ export default {
}
this.noteMin = ""
},
// récupération du choix du filtre "note max"
choixNoteMax: function () {
let vraieNoteMin = 0
if (this.noteMin !== 0)
......@@ -77,6 +79,7 @@ export default {
this.noteMax = ""
},
// récupération du choix du filtre "plage de note"
validerPlage: function () {
this.$emit("creer_filtre", {filtre: this.borneInf + " - " + this.borneSup, type: "noteBorne"})
this.borneInf = 0
......
src/components/filtres/Filtre_Tag.vue
View file @ f8214df8
......@@ -94,10 +94,13 @@ export default {
name: "Filtre_Tag",
methods: {
/**
* @vuese
* activation / desactivation de l'arborescence
*/
naviguer: function (e) {
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})
}
......@@ -106,6 +109,11 @@ export default {
e.target.parentNode.nextElementSibling.classList.toggle('affiche')
}
},
/**
* @vuese
* récupération d'un click sur un des échelon
*/
nouveauFiltre: function (e) {
this.$emit("creer_filtre", {filtre: e.target.innerText, type: this.filtreChoisi})
......
src/components/filtres/Filtre_Tag_Libre.vue
View file @ f8214df8
<template>
<div>
<ul id="arborescenceLibre" class="menuNonFinal">
<li><span class="nouveauTagLibre" @click="ajouterTagLibre">nouveau tag libre</span></li>
<div id="body" v-bind:class="editMode ? 'modeConsultation' : 'modeModification'">
<!-- arborescence globale -->
<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>
<input type="text" style="width: 150px; height: 20px"></li>
<li v-on:click="nouveauFiltre" ><span class="niveauInamovible"></span>Contenu Sans Tag</li>
<ul v-for="filtre in filtresLibres" :key="filtre" class="tagsLibres">
<li v-on:click="nouveauFiltre"><span class="niveauInamovible"></span>{{ filtre }}
<span class="poubel" @click="supprimerTagLibre"></span><span class="nouvelEchelon" @click="ajouterTagLibre"></span></li>
</ul>
<input type="text" style="width: 150px; height: 20px" v-model="nouveauTexteLibre" v-on:keyup="keymonitor">
<span v-bind:class="darktheme ? 'validerCocheDark' : 'validerCoche'" v-on:click="creerTagLibre"></span>
<span v-bind:class="darktheme ? 'annulerCocheDark' : 'annulerCoche'" @click="masquerTagLibre"></span></li>
<!-- selection de contenus sans filtre libre établi -->
<li v-on:click="nouveauFiltre($event)" ><span class="niveauInamovible"></span>Contenu Sans Tag</li>
<!-- 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>
</div>
</template>
......@@ -25,56 +73,219 @@ export default {
// permet de déterminer si on est en mode tag_libre ou tag_fixe
filtreChoisi: {},
// 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 () {
return {
filtresLibres: [],
nouveauTagLibre: false
nouveauTagLibre: false,
nouveauTagEchelonLibre: false,
nouveauTexteLibre: '',
editMode: false
}
},
methods: {
/**
* @vuese
* permet l'activation / desactivation des échelons de tag
* si le span n'est pas navigable, ne rien faire
*/
naviguer: function (e) {
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})
}
else{
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) {
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())
},
/**
* @vuese
* affichage de la saisie du nouveau tag
*/
ajouterTagLibre: function (e) {
let tagRacine = e.target.parentNode.innerText
if (tagRacine === "nouveau tag libre"){
this.nouveauTagLibre = !this.nouveauTagLibre
} else {
let ul = document.createElement('ul')
ul.className = "tags libres"
let li = document.createElement('li')
li.append(document.createTextNode("prute"))
ul.appendChild(li)
e.target.parentNode.nextElementSibling.hidden = !e.target.parentNode.nextElementSibling.hidden
}
},
/**
* @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) {
e.target.parentNode.parentNode.appendChild(ul)
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))
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: {
/**
* @vuese
* Des que le filtre tag libre est choisi, on récupère les tags libres de l'auteur
*/
filtreChoisi: function () {
let that = this
this.editMode = false
Service.recupererTagLibre(this.auteur).then(function (response) {
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>
......@@ -91,6 +302,19 @@ export default {
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 {
padding: 4px;
text-align: left;
......@@ -114,6 +338,10 @@ body {
}
.niveau-down::before {
transform: rotate(90deg);
}
.niveauInamovible::before {
content: "\23F9";
color: black;
......@@ -126,6 +354,23 @@ body {
.poubel::before {
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;
......@@ -133,6 +378,34 @@ body {
}
.annulerCoche::before {
content: "\2717";
color: black;
display: inline-block;
margin-left: 2px;
margin-right: 4px;
}
.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 {
content: "\002295 ";
color: black;
......@@ -142,6 +415,15 @@ body {
margin-top: -50px;
}
.nouveauTagLibreDark::before {
content: "\002295 ";
color: white;
display: inline-block;
margin-left: 2px;
margin-right: 4px;
margin-top: -50px;
}
.nouvelEchelon::before {
content: "\002B";
color: black;
......@@ -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 {
transform: rotate(90deg);
}
......@@ -170,5 +462,12 @@ body {
li {
width: fit-content;
white-space: nowrap;
}
/*.modeCreation{
pointer-events: visible;
}*/
</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