forked from ScoDoc/ScoDoc
Merge pull request 'Partition editor - améliorations' (#475) from lehmann/ScoDoc-Front:master into master
Reviewed-on: https://scodoc.org/git/ScoDoc/ScoDoc/pulls/475
This commit is contained in:
commit
d630aaabb3
@ -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;
|
||||
|
||||
@ -1,18 +1,16 @@
|
||||
{# -*- 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>
|
||||
<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>
|
||||
@ -26,8 +24,14 @@
|
||||
<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
|
||||
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}"]`))
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user