lehmann/ScoDoc-Front
1
0
Fork 0
forked from ScoDoc/ScoDoc
Code Pull Requests Activity

Merge pull request 'Partition editor - améliorations' (#475) from lehmann/ScoDoc-Front:master into master

Browse Source 
Reviewed-on: https://scodoc.org/git/ScoDoc/ScoDoc/pulls/475
This commit is contained in:
Emmanuel Viennet 2022-08-17 18:44:21 +02:00
commit d630aaabb3
2 changed files with 71 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
app/static/css/partition_editor.css
View File

@ -50,6 +50,8 @@ main {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 32px; gap: 32px;
row-gap: 4px;
margin-right: 16px;
} }
main h2 { main h2 {
@ -184,8 +186,16 @@ body.editionActivated .filtres>div>div>div>div {
} }
/*****************************/ /*****************************/
/* Zone Choix */ /* Zone Partitions */
/*****************************/ /*****************************/
#zonePartitions {
width: 100%;
}
.filtres {
display: table;
}
.filtres>div { .filtres>div {
background: #ddd; background: #ddd;
padding: 8px; padding: 8px;
@ -226,6 +236,9 @@ body:not(.editionActivated) .filtres>div>div>div>div:active {
background: rgba(0, 153, 204, 0.5); background: rgba(0, 153, 204, 0.5);
} }
/*****************************/
/* Zone Etudiants */
/*****************************/
#zoneChoix .etudiants>div { #zoneChoix .etudiants>div {
background: #FFF; background: #FFF;
border: 1px solid #aaa; border: 1px solid #aaa;

93
app/templates/scolar/partition_editor.html
View File

@ -1,33 +1,37 @@
{# -*- mode: jinja-html -*- #} {# -*- mode: jinja-html -*- #}
<h1>{% if not read_only %}Édition des p{% else %}P{%endif%}artitions</h1> <h1>{% if not read_only %}Édition des p{% else %}P{%endif%}artitions</h1>
<div>
<label class="edition">
<input type="checkbox" autocomplete="off">
Edition des partitions - tout s'enregistre automatiquement dès qu'il y a modification
</label>
</div>
<main> <main>
<div class="wait"></div> <div class="wait"></div>
<section id="zoneChoix"> <section id="zonePartitions">
<h2>Choix</h2> <h2>Partitions et groupes</h2>
<div class="filtres"> <div>
<div class="partitions"> <label class="edition">
<h3>Afficher les partitions</h3> <input type="checkbox" autocomplete="off">
<div></div> Modifier les partitions et groupes - tout s'enregistre automatiquement dès qu'il y a modification
</div> </label>
<div class="masques"> <div class="filtres">
<h3> <div class="partitions">
Afficher les étudiants affectés aux groupes<br> <h3>Afficher les partitions</h3>
<small>Ne s'actualise pas automatiquement lors d'une modification</small> <div></div>
</h3> </div>
<div></div> <div class="masques">
<h3>
Afficher les étudiants affectés aux groupes<br>
<small>Ne s'actualise pas automatiquement lors d'une modification</small>
</h3>
<div></div>
</div>
</div> </div>
</div> </div>
</section>
<section id="zoneChoix">
<h2>Etudiants</h2>
<div class="etudiants"></div> <div class="etudiants"></div>
</section> </section>
<section id="zoneGroupes"> <section id="zoneGroupes">
<h2>Groupes</h2> <h2>Groupes</h2>
<div class="groupes"></div> <div class="groupes"></div>
@ -78,7 +82,12 @@
arrayPartitions.forEach((partition) => { arrayPartitions.forEach((partition) => {
// Filtres // Filtres
outputPartitions += `<div data-idpartition="${partition.id}"><span class="editing move">||</span><span>${partition.partition_name}</span><span class="editing modif">✏️</span><span class="editing suppr">❌</span></div>`; if (partition.groups_editable) {
outputPartitions += `<div data-idpartition="${partition.id}"><span class="editing move">||</span><span>${partition.partition_name}</span><span class="editing modif">✏️</span><span class="editing suppr">❌</span></div>`;
} else {
outputPartitions += `<div data-idpartition="${partition.id}"><span>${partition.partition_name}</span></div>`;
}
outputMasques += `<div data-idpartition="${partition.id}"><div data-idpartition="${partition.id}" data-idgroupe=aucun>Non affectés - ${partition.partition_name}</div>`; outputMasques += `<div data-idpartition="${partition.id}"><div data-idpartition="${partition.id}" data-idgroupe=aucun>Non affectés - ${partition.partition_name}</div>`;
// Groupes // Groupes
@ -96,9 +105,13 @@
let output = ""; let output = "";
arrayGroups.forEach((groupe) => { arrayGroups.forEach((groupe) => {
/***************/ /***************/
outputMasques += `<div data-idgroupe="${groupe.id}"><span class="editing move">||</span><span>${groupe.group_name}</span><span class="editing modif">✏️</span><span class="editing suppr">❌</span></div>`; // patch JMP (renommage du champ name dans l API) if (partition.groups_editable) {
outputMasques += `<div data-idgroupe="${groupe.id}"><span class="editing move">||</span><span>${groupe.group_name}</span><span class="editing modif">✏️</span><span class="editing suppr">❌</span></div>`;
} else {
outputMasques += `<div data-idgroupe="${groupe.id}"><span>${groupe.group_name}</span></div>`;
}
/***************/ /***************/
output += templateGroupe_zoneGroupes(groupe.id, groupe.group_name); // patch JMP (renommage du champ name dans l API) output += templateGroupe_zoneGroupes(groupe.id, groupe.group_name);
}) })
return output; return output;
})()} })()}
@ -144,7 +157,7 @@
if (!affected) { if (!affected) {
document.querySelector(`#zoneGroupes [data-idpartition="${partition.id}"]>[data-idgroupe="aucun"]>.etudiants`).innerHTML += templateEtudiant_zoneGroupes(etudiant); document.querySelector(`#zoneGroupes [data-idpartition="${partition.id}"]>[data-idgroupe="aucun"]>.etudiants`).innerHTML += templateEtudiant_zoneGroupes(etudiant);
} }
return `<label title="Aucun groupe"><input type=radio name="${partition.id}-${etudiant.etudid}" value="aucun" ${(!affected) ? "checked" : ""}><span class=aucun>❌</span></label>` + output; return `<label title="Aucun groupe"><input type=radio name="${partition.id}-${etudiant.etudid}" value="aucun" ${(!affected) ? "checked" : ""}><span class=aucun> - </span></label>` + output;
})()} })()}
</div>`; </div>`;
}) })
@ -171,9 +184,6 @@
/******************************/ /******************************/
function input() { function input() {
document.querySelector("body").classList.toggle("editionActivated"); document.querySelector("body").classList.toggle("editionActivated");
/*if (event.currentTarget.checked == false) {
go();
}*/
} }
function processEvents() { function processEvents() {
/*--------------------*/ /*--------------------*/
@ -193,7 +203,7 @@
/*--------------------*/ /*--------------------*/
/* Changement groupe */ /* Changement groupe */
/*--------------------*/ /*--------------------*/
document.querySelectorAll("#zoneChoix label").forEach(btn => { btn.addEventListener("mousedown", (event) => { event.preventDefault() }) }); document.querySelectorAll("label").forEach(btn => { btn.addEventListener("mousedown", (event) => { event.preventDefault() }) });
document.querySelectorAll(".etudiants input").forEach(input => { input.addEventListener("input", assignment) }) document.querySelectorAll(".etudiants input").forEach(input => { input.addEventListener("input", assignment) })
} }
@ -223,6 +233,7 @@
} }
if (!this.dataset.idgroupe) { if (!this.dataset.idgroupe) {
// Partitions
let groupesSelected = []; let groupesSelected = [];
this.parentElement.querySelectorAll(":not(.unselect)").forEach(e => { this.parentElement.querySelectorAll(":not(.unselect)").forEach(e => {
groupesSelected.push(e.dataset.idpartition); groupesSelected.push(e.dataset.idpartition);
@ -238,6 +249,7 @@
} }
}) })
} else { } else {
// Groupes
let groupesSelected = {}; let groupesSelected = {};
this.parentElement.parentElement.querySelectorAll("[data-idgroupe]:not(.unselect)").forEach(e => { this.parentElement.parentElement.querySelectorAll("[data-idgroupe]:not(.unselect)").forEach(e => {
@ -350,6 +362,8 @@
div.querySelector(".move").addEventListener("mousedown", moveStart); div.querySelector(".move").addEventListener("mousedown", moveStart);
this.parentElement.insertBefore(div, this); this.parentElement.insertBefore(div, this);
div.querySelector(".modif").click();
// Save // Save
fetch(url, fetch(url,
{ {
@ -380,12 +394,12 @@
div.querySelector("div").addEventListener("click", filtre); div.querySelector("div").addEventListener("click", filtre);
div.querySelector(".ajoutGroupe").addEventListener("click", addPartition); div.querySelector(".ajoutGroupe").addEventListener("click", addPartition);
document.querySelector("#zoneChoix .masques>div").appendChild(div); document.querySelector("#zonePartitions .masques>div").appendChild(div);
// Ajout de la zone pour chaque étudiant // Ajout de la zone pour chaque étudiant
let outputGroupes = ""; let outputGroupes = "";
document.querySelectorAll(`#zoneChoix .grpPartitions`).forEach(e => { document.querySelectorAll(`#zonePartitions .grpPartitions`).forEach(e => {
let etudid = e.previousElementSibling.dataset.etudid; let etudid = e.previousElementSibling.dataset.etudid;
// Préparation pour la section suivante // Préparation pour la section suivante
@ -447,10 +461,17 @@
/* Edition du texte */ /* Edition du texte */
/********************/ /********************/
function editText() { function editText() {
this.previousElementSibling.classList.add("editingText"); let e = this.previousElementSibling;
this.previousElementSibling.setAttribute("contenteditable", "true"); e.classList.add("editingText");
this.previousElementSibling.focus(); e.setAttribute("contenteditable", "true");
this.previousElementSibling.addEventListener("keydown", writing); e.addEventListener("keydown", writing);
// On sélectionne la zone
const range = document.createRange();
const selection = window.getSelection();
selection.removeAllRanges();
range.selectNodeContents(e);
selection.addRange(range);
} }
function writing(event) { function writing(event) {
@ -613,12 +634,12 @@
let formsemestre_id = params.get('formsemestre_id'); let formsemestre_id = params.get('formsemestre_id');
var url = `/ScoDoc/{{formsemestre.departement.acronym}}/api/formsemestre/${formsemestre_id}/partitions/order`; var url = `/ScoDoc/{{formsemestre.departement.acronym}}/api/formsemestre/${formsemestre_id}/partitions/order`;
document.querySelectorAll(`#zoneChoix .masques>div`).forEach(parent => { document.querySelectorAll(`#zonePartitions .masques>div`).forEach(parent => {
positions.forEach(position => { positions.forEach(position => {
parent.append(parent.querySelector(`[data-idpartition="${position}"]`)) parent.append(parent.querySelector(`[data-idpartition="${position}"]`))
}) })
}) })
document.querySelectorAll(`#zoneChoix .grpPartitions`).forEach(parent => { document.querySelectorAll(`#zonePartitions .grpPartitions`).forEach(parent => {
positions.forEach(position => { positions.forEach(position => {
parent.append(parent.querySelector(`[data-idpartition="${position}"]`)) parent.append(parent.querySelector(`[data-idpartition="${position}"]`))
}) })