Merge pull request 'Partition editor : amélioration ordonnanceur' (#832) from lehmann/ScoDoc-Front:modifEditPartition into master

Reviewed-on: https://scodoc.org/git/ScoDoc/ScoDoc/pulls/832
This commit is contained in:
Emmanuel Viennet 2023-12-28 23:31:46 +01:00
commit a49437fa47
2 changed files with 111 additions and 17 deletions

View File

@ -91,9 +91,6 @@ body:not(.editionActivated) .editing {
.nonEditable .editing { .nonEditable .editing {
display: none; display: none;
} }
.nonEditable .editing.rename {
display: inline;
}
.editionActivated #zoneChoix, .editionActivated #zoneChoix,
@ -212,16 +209,21 @@ body.editionActivated .filtres>div>div>div>div {
pointer-events: none; pointer-events: none;
} }
.grabbing>div[data-idpartition]:not([data-idgroupe]):hover:before { .grabbing>.hidenDropZone {
pointer-events: auto !important;
}
.grabbing>div[data-idpartition]:not([data-idgroupe]):hover:before,
.grabbing>.hidenDropZone:hover:before {
content: ""; content: "";
position: absolute; position: absolute;
left: -4px; left: -4px !important;
right: -4px; right: -4px !important;
bottom: calc(100% + 1px); bottom: calc(100% + 1px) !important;
height: 2px; height: 2px !important;
width: auto; width: auto !important;
background: #c44; background: #c44;
animation: insertPartion 0.2s infinite alternate ease-in-out; animation: insertPartion 0.2s infinite alternate ease-in-out !important;
} }
@keyframes insertPartion { @keyframes insertPartion {
@ -283,6 +285,7 @@ body.editionActivated .filtres>div>div>div>div {
#zonePartitions .filtres { #zonePartitions .filtres {
width: fit-content; width: fit-content;
position: relative;
} }
#zonePartitions .filtres>div { #zonePartitions .filtres>div {
@ -332,6 +335,24 @@ body.editionActivated .filtres>div>div>div>div {
margin: 4px 0 0 0; margin: 4px 0 0 0;
} }
#zonePartitions .filtres .groupes>button {
transition: none;
position: relative;
overflow: visible;
outline: none;
border: none;
text-shadow: none !important;
}
#zonePartitions .filtres .hidenDropZone {
height: 100px;
position: absolute;
left: 0;
right: 0;
pointer-events: none;
background: transparent;
}
#zonePartitions .filtres .groupes>div { #zonePartitions .filtres .groupes>div {
position: relative; position: relative;
background: #09c; background: #09c;
@ -342,6 +363,11 @@ body.editionActivated .filtres>div>div>div>div {
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25); box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
} }
#zonePartitions .filtres .actif {
background: #0c9;
border-radius: 6px;
}
body:not(.editionActivated) .filtres .groupes>div { body:not(.editionActivated) .filtres .groupes>div {
cursor: pointer; cursor: pointer;
} }
@ -356,7 +382,7 @@ body:not(.editionActivated) .filtres .groupes>div:active {
} }
body.editionActivated .filtres [data-idgroupe=aucun] { body.editionActivated .filtres [data-idgroupe=aucun] {
display: none; display: none !important;
} }
body.editionActivated .filtres .nonEditable .move { body.editionActivated .filtres .nonEditable .move {

View File

@ -114,7 +114,7 @@
arrayPartitions.forEach((partition) => { arrayPartitions.forEach((partition) => {
let divPartition = templateFiltres_partition(partition); let divPartition = templateFiltres_partition(partition);
divFiltres.appendChild(divPartition); divFiltres.append(divPartition);
let arrayGroups = Object.values(partition.groups).sort((a, b) => { let arrayGroups = Object.values(partition.groups).sort((a, b) => {
return a.numero - b.numero; return a.numero - b.numero;
@ -146,6 +146,9 @@
</div>`; </div>`;
}) })
let hiden = document.createElement("div");
hiden.className = "hidenDropZone";
divFiltres.append(hiden);
document.querySelector("#zoneGroupes>.groupes").innerHTML = outputGroupes; document.querySelector("#zoneGroupes>.groupes").innerHTML = outputGroupes;
/* Etudiants */ /* Etudiants */
@ -247,15 +250,23 @@
let div = document.createElement("button"); let div = document.createElement("button");
div.classList.add("dt-button"); div.classList.add("dt-button");
div.dataset.idgroupe = groupe.id; div.dataset.idgroupe = groupe.id;
let edt_id_str = groupe.edt_id ? `<tt class="edt_id" title="id edt">[${groupe.edt_id}]</tt>` : ""; div.dataset.idedt = groupe.edt_id || "";
let title_EDT = groupe.edt_id || "";
div.innerHTML = ` div.innerHTML = `
<span class="editing move">||</span> <span class="editing move">||</span>
<span>${groupe.group_name} ${edt_id_str}</span> <span>${groupe.group_name}</span>
<span class="editing rename"><a href="/ScoDoc/{{formsemestre.departement.acronym}}/Scolarite/group_rename?group_id=${groupe.id}">✏️</a></span> <span class="editing rename">✏️</span>
<span class="editing calendarEdit" title="${title_EDT}">📅</span>
<span class="editing suppr">❌</span>`; <span class="editing suppr">❌</span>`;
if (title_EDT) {
div.querySelector(".calendarEdit").classList.add("actif");
}
div.addEventListener("click", filtre); div.addEventListener("click", filtre);
div.querySelector(".move").addEventListener("mousedown", moveStart); div.querySelector(".move").addEventListener("mousedown", moveStart);
div.querySelector(".rename").addEventListener("click", editText);
div.querySelector(".calendarEdit").addEventListener("click", editCalendar);
div.querySelector(".suppr").addEventListener("click", suppr); div.querySelector(".suppr").addEventListener("click", suppr);
return div; return div;
@ -275,7 +286,7 @@
function listeGroupesAutoaffectation() { function listeGroupesAutoaffectation() {
let output = '<option value disabled selected hidden>Choisir</option>'; let output = '<option value disabled selected hidden>Choisir</option>';
document.querySelectorAll('#zonePartitions .filtres>div').forEach(partition => { document.querySelectorAll('#zonePartitions .filtres>[data-idpartition]').forEach(partition => {
output += ` output += `
<optgroup label="${partition.children[0].children[1].innerText}"> <optgroup label="${partition.children[0].children[1].innerText}">
@ -755,6 +766,63 @@
}) })
} }
/***********************/
/* Edition de l'id_EDT */
/***********************/
function editCalendar() {
let data = `data-idgroupe="${this.parentElement.dataset.idgroupe}"`;
let nom = this.previousElementSibling.previousElementSibling.innerText;
let id_EDT = this.parentElement.dataset.idedt;
let div = document.createElement("div");
div.className = "confirm";
div.innerHTML = `
<div>
<h1>Modifier l'id EDT du groupe <span>${nom}</span></h1>
<input value="${id_EDT}">
<p>Optionnel : identifiant du groupe dans le logiciel d'emploi du temps, pour le cas où les noms de groupes ne seraient pas les mêmes dans ScoDoc et dans l'emploi du temps (si plusieurs ids de groupes EDT doivent correspondre au même groupe ScoDoc, les séparer par des virgules).</p>
<div>
<div class="ok" ${data}>Valider</div>
<div class="nok">Annuler</div>
</div>
</div>
`;
document.body.append(div);
document.querySelector(".ok").addEventListener("click", editCalConfirm);
document.querySelector(".nok").addEventListener("click", closeConfirm);
}
function editCalConfirm() {
let idGroupe = this.dataset.idgroupe;
let id_EDT = this.parentElement.parentElement.querySelector("input").value;
let btnGroupe = document.querySelector(`#zonePartitions .groupes [data-idgroupe="${idGroupe}"]`);
btnGroupe.dataset.idedt = id_EDT;
btnGroupe.querySelector(".calendarEdit").title = id_EDT || "";
if (id_EDT) {
btnGroupe.querySelector(".calendarEdit").classList.add("actif");
} else {
btnGroupe.querySelector(".calendarEdit").classList.remove("actif");
}
//Save
let url = `/ScoDoc/{{formsemestre.departement.acronym}}/api/group/${idGroupe}/set_edt_id/${id_EDT}`;
fetch(url, { method: "POST" })
.then(r => { return r.json() })
.then(r => {
if (r.OK != true) {
document.querySelector("main").innerHTML = "<h2>Une erreur s'est produite lors de la sauvegarde des données (5).</h2>";
}
});
closeConfirm();
}
/*********************************/ /*********************************/
/* Suppression parcours / groupe */ /* Suppression parcours / groupe */
/*********************************/ /*********************************/
@ -868,7 +936,7 @@
}) })
// Save positions // Save positions
if (this.dataset.idpartition) { if (this.dataset.idpartition || this.classList.contains("hidenDropZone")) {
let params = (new URL(document.location)).searchParams; let params = (new URL(document.location)).searchParams;
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`;