Skip to content
Snippets Groups Projects

Resolve "Handle candidates"

Merged Alexis POYEN requested to merge 34-handle-candidates into master
3 files
+ 331
21
Compare changes
  • Side-by-side
  • Inline
Files
3
@@ -5,13 +5,11 @@ import * as Messages from "/services/messages/messages.js";
import * as AreaModel from "/services/model/area-model.js";
import * as PartyModel from "/services/model/party-model.js";
import * as CandidateListModel from "/services/model/candidateList-model.js";
import * as CandidateModel from "/services/model/candidate-model.js";
import { Delete } from "/services/common/delete.js";
// DOM elements
// local variables
let current_user;
export async function mount(where, parent) {
const candidateListComponent = new CandidateList(parent);
await candidateListComponent.mount(where);
@@ -25,12 +23,14 @@ class CandidateList {
this.AreaModel = AreaModel.getAreaModel();
this.PartyModel = PartyModel.getPartyModel();
this.CandidateListModel = CandidateListModel.getCandidateListModel();
this.CandidateModel = CandidateModel.getCandidateModel();
}
async mount(where) {
this.AreaModel.current_user = await Auth.GetUser();
this.PartyModel.current_user = await Auth.GetUser();
this.CandidateListModel.current_user = await Auth.GetUser();
this.CandidateModel.current_user = await Auth.GetUser();
const mountpoint = where;
document.getElementById(mountpoint).innerHTML = /* HTML */ `
<header class="card-header">
@@ -50,15 +50,11 @@ class CandidateList {
<div class="column">
<div id="candidate-lists-list"></div>
</div>
<div class="column">
<div id="active-capturer" class="card"></div>
</div>
<div class="column">
<div id="available-capturer" class="card"></div>
<div class="column is-two-thirds">
<div id="candidate-list" class="card"></div>
</div>
</div>
`;
current_user = await Auth.GetUser();
this.mountModal("candidateList-modal");
this.handleDom();
}
@@ -167,6 +163,161 @@ class CandidateList {
`;
}
async displayCandidates() {
document.getElementById("candidate-list").innerHTML = /* HTML */ `<div
class="table-container"
>
<table class="table is-bordered is-narrow is-hoverable is-fullwidth">
<thead>
<tr class="is-selected">
<th hidden>Id</th>
<th>Nom complet</th>
<th>Rang</th>
<th>Conseiller communautaire</th>
<th>Date de naissance</th>
<th>Incompatibilité potentielle</th>
<th>Refusé</th>
<th>Supprimé</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="candidates"></tbody>
</table>
</div> `;
let candidates = await this.updateCandidates();
const markup = candidates
.map((candidate) => this.candidateTemplate(candidate))
.join("");
document.getElementById("candidates").innerHTML = markup;
let candidate = {
ID: 0,
FullName: "",
Rank: 0,
CommunityCounseller: false,
Birthdate: "2000-01-01",
PotentialIncompatibility: false,
Refused: false,
Removed: false,
};
document.getElementById("candidates").innerHTML += this.candidateTemplate(
candidate
);
document
.getElementById(`candidates-candidate-edit-0`)
.addEventListener("click", function () {
candidateListHandler.method = "POST";
candidateListHandler.saveCandidate(candidate.ID);
});
document.getElementById(`candidates-candidate-delete-0`).remove();
let candidateListHandler = this;
candidates.map((candidate) => {
document
.getElementById(`candidates-candidate-edit-${candidate.ID}`)
.addEventListener("click", function () {
candidateListHandler.method = "PUT";
candidateListHandler.saveCandidate(candidate.ID);
});
document
.getElementById(`candidates-candidate-delete-${candidate.ID}`)
.addEventListener("click", function () {
new Delete(() => {
candidateListHandler.deleteCandidate(candidate);
});
});
});
}
candidateTemplate(candidate) {
return /* HTML */ `
<tr id="candidates-candidate-${candidate.ID}">
<td hidden>
<input
class="input"
type="number"
id="${candidate.ID}-candidate-id"
value="${candidate.ID}"
disabled
/>
</td>
<td>
<input
class="input"
type="text"
id="${candidate.ID}-candidate-fullname"
value="${candidate.FullName}"
/>
</td>
<td>
<input
class="input"
type="number"
id="${candidate.ID}-candidate-rank"
value="${candidate.Rank}"
/>
</td>
<td>
<input
type="checkbox"
id="${candidate.ID}-candidate-community-counseller"
${candidate.CommunityCounseller ? "checked" : ""}
/>
</td>
<td>
<input
class="input"
type="date"
id="${candidate.ID}-candidate-birthdate"
value="${candidate.Birthdate}"
/>
</td>
<td>
<input
type="checkbox"
id="${candidate.ID}-candidate-potential-incompatibility"
${candidate.PotentialIncompatibility ? "checked" : ""}
/>
</td>
<td>
<input
type="checkbox"
id="${candidate.ID}-candidate-refused"
${candidate.Refused ? "checked" : ""}
/>
</td>
<td>
<input
type="checkbox"
id="${candidate.ID}-candidate-removed"
${candidate.Removed ? "checked" : ""}
/>
</td>
<td>
<a
id="candidates-candidate-edit-${candidate.ID}"
class="button is-success is-small"
>
<span>Valider</span>
<span class="icon is-small">
<i class="fas fa-check"></i>
</span>
</a>
<a
id="candidates-candidate-delete-${candidate.ID}"
class="button is-danger is-small"
>
<span>Supprimer</span>
<span class="icon is-small">
<i class="fas fa-times"></i>
</span>
</a>
</td>
</tr>
`;
}
handleDom() {
let candidateListHandler = this;
document
@@ -236,7 +387,18 @@ class CandidateList {
document.getElementById("candidate-list-new").removeAttribute("disabled");
}
async activateCandidateList() {}
async activateCandidateList(candidateListToActivate) {
this.candidateList = candidateListToActivate;
let candidateLists = await this.updateCandidateLists();
candidateLists.forEach((candidateList) => {
document
.getElementById(`candidateLists-candidateList-${candidateList.ID}`)
.classList.remove("active-card");
});
document
.getElementById(`candidateLists-candidateList-${candidateListToActivate.ID}`)
.classList.add("active-card");
}
async displayCandidateLists() {
let candidateListHandler = this;
@@ -265,13 +427,12 @@ class CandidateList {
candidateListHandler.deleteCandidateList(candidateList);
});
});
// document
// .getElementById(`areas-area-${candidateList.ID}`)
// .addEventListener("click", async function () {
// await candidateListHandler.activateArea(candidateList);
// candidateListHandler.area = candidateList;
// await candidateListHandler.displayCandidateLists();
// });
document
.getElementById(`candidateLists-candidateList-${candidateList.ID}`)
.addEventListener("click", async function () {
await candidateListHandler.activateCandidateList(candidateList);
await candidateListHandler.displayCandidates();
});
});
}
@@ -283,6 +444,14 @@ class CandidateList {
});
}
async updateCandidates() {
let candidateListHandler = this;
let candidates = await this.CandidateModel.getCandidates();
return candidates.filter(function (candidate) {
return candidate.CandidateListID == candidateListHandler.candidateList.ID;
});
}
async newCandidateList() {
this.method = "POST";
await this.refreshParties();
@@ -337,15 +506,37 @@ class CandidateList {
await this.displayCandidateLists();
Common.toggleModal("candidateList-modal", "candidateList-modal-card");
this.activateCandidateList(candidateList);
// TODO open desks
// TODO open candidateLists
return candidateList;
}
async deleteCandidateList(candidateList) {
await this.CandidateListModel.deleteCandidateList(candidateList.ID);
await this.displayCandidateLists();
// TODO empty desks
// TODO empty candidateLists
// TODO empty Candidates
}
async saveCandidate(candidateID) {
let candidate = await this.CandidateModel.saveCandidate(
this.method,
candidateID,
this.candidateList.ID,
document.getElementById(candidateID + "-candidate-fullname").value,
parseInt(document.getElementById(candidateID + "-candidate-rank").value),
document.getElementById(candidateID + "-candidate-community-counseller")
.checked,
document.getElementById(candidateID + "-candidate-birthdate").value,
document.getElementById(
candidateID + "-candidate-potential-incompatibility"
).checked,
document.getElementById(candidateID + "-candidate-refused").checked,
document.getElementById(candidateID + "-candidate-removed").checked
);
await this.displayCandidates();
return candidate;
}
async deleteCandidate(candidate) {
await this.CandidateModel.deleteCandidate(candidate.ID);
await this.displayCandidates();
}
}
Loading