jmplace/DocScoDoc
1
0
Fork 0
forked from ScoDoc/DocScoDoc
Code Issues Pull Requests Projects Releases Wiki 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;
flex-wrap: wrap;
gap: 32px;
row-gap: 4px;
margin-right: 16px;
}
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 {
background: #ddd;
padding: 8px;
@ -226,6 +236,9 @@ body:not(.editionActivated) .filtres>div>div>div>div:active {
background: rgba(0, 153, 204, 0.5);
}
/*****************************/
/* Zone Etudiants */
/*****************************/
#zoneChoix .etudiants>div {
background: #FFF;
border: 1px solid #aaa;

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

@ -1,33 +1,37 @@
{# -*- mode: jinja-html -*- #}
<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>
<div class="wait"></div>
<section id="zoneChoix">
<h2>Choix</h2>
<div class="filtres">
<div class="partitions">
<h3>Afficher les partitions</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>
<section id="zonePartitions">
<h2>Partitions et groupes</h2>
<div>
<label class="edition">
<input type="checkbox" autocomplete="off">
Modifier les partitions et groupes - tout s'enregistre automatiquement dès qu'il y a modification
</label>
<div class="filtres">
<div class="partitions">
<h3>Afficher les partitions</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>
</section>
<section id="zoneChoix">
<h2>Etudiants</h2>
<div class="etudiants"></div>
</section>
<section id="zoneGroupes">
<h2>Groupes</h2>
<div class="groupes"></div>
@ -78,7 +82,12 @@
arrayPartitions.forEach((partition) => {
// 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>`;
// Groupes
@ -96,9 +105,13 @@
let output = "";
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;
})()}
@ -144,7 +157,7 @@
if (!affected) {
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>`;
})
@ -171,9 +184,6 @@
/******************************/
function input() {
document.querySelector("body").classList.toggle("editionActivated");
/*if (event.currentTarget.checked == false) {
go();
}*/
}
function processEvents() {
/*--------------------*/
@ -193,7 +203,7 @@
/*--------------------*/
/* 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) })
}
@ -223,6 +233,7 @@
}
if (!this.dataset.idgroupe) {
// Partitions
let groupesSelected = [];
this.parentElement.querySelectorAll(":not(.unselect)").forEach(e => {
groupesSelected.push(e.dataset.idpartition);
@ -238,6 +249,7 @@
}
})
} else {
// Groupes
let groupesSelected = {};
this.parentElement.parentElement.querySelectorAll("[data-idgroupe]:not(.unselect)").forEach(e => {
@ -350,6 +362,8 @@
div.querySelector(".move").addEventListener("mousedown", moveStart);
this.parentElement.insertBefore(div, this);
div.querySelector(".modif").click();
// Save
fetch(url,
{
@ -380,12 +394,12 @@
div.querySelector("div").addEventListener("click", filtre);
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
let outputGroupes = "";
document.querySelectorAll(`#zoneChoix .grpPartitions`).forEach(e => {
document.querySelectorAll(`#zonePartitions .grpPartitions`).forEach(e => {
let etudid = e.previousElementSibling.dataset.etudid;
// Préparation pour la section suivante
@ -447,10 +461,17 @@
/* Edition du texte */
/********************/
function editText() {
this.previousElementSibling.classList.add("editingText");
this.previousElementSibling.setAttribute("contenteditable", "true");
this.previousElementSibling.focus();
this.previousElementSibling.addEventListener("keydown", writing);
let e = this.previousElementSibling;
e.classList.add("editingText");
e.setAttribute("contenteditable", "true");
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) {
@ -613,12 +634,12 @@
let formsemestre_id = params.get('formsemestre_id');
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 => {
parent.append(parent.querySelector(`[data-idpartition="${position}"]`))
})
})
document.querySelectorAll(`#zoneChoix .grpPartitions`).forEach(parent => {
document.querySelectorAll(`#zonePartitions .grpPartitions`).forEach(parent => {
positions.forEach(position => {
parent.append(parent.querySelector(`[data-idpartition="${position}"]`))
})