candidate-lists.js

// Imports
import * as Auth from "/services/auth/auth.js";
import * as Common from "/services/common/common.js";
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 { 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);
  return candidateListComponent;
}

class CandidateList {
  constructor(parent) {
    this.method = null;
    this.parent = parent;
    this.AreaModel = AreaModel.getAreaModel();
    this.PartyModel = PartyModel.getPartyModel();
    this.CandidateListModel = CandidateListModel.getCandidateListModel();
  }

  async mount(where) {
    this.AreaModel.current_user = await Auth.GetUser();
    this.PartyModel.current_user = await Auth.GetUser();
    this.CandidateListModel.current_user = await Auth.GetUser();
    const mountpoint = where;
    document.getElementById(mountpoint).innerHTML = /* HTML */ `
      <header class="card-header">
        <p class="card-header-title">
          Liste des candidats par circonscription
        </p>
        <button id="candidate-list-new" class="button is-success" disabled>
          <span class="icon is-small">
            <i class="fas fa-plus"></i>
          </span>
        </button>
      </header>
      <div class="columns card-content">
        <div class="column">
          <div id="areas-round"></div>
        </div>
        <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>
      </div>
    `;
    current_user = await Auth.GetUser();
    this.mountModal("candidateList-modal");
    this.handleDom();
  }

  areaTemplate(area) {
    return /* HTML */ `<div class="card card-list">
      <div id="areas-area-${area.ID}" class="card-content">
        <div class="content">
          <nav class="level">
            <div class="level-left">
              ${area.Name} (Nombre de siège : ${area.SeatNumber})
            </div>
          </nav>
        </div>
      </div>
    </div>`;
  }

  candidateListTemplate(candidateList) {
    return /* HTML */ `<div class="card card-list">
      <div
        id="candidateLists-candidateList-${candidateList.ID}"
        class="card-content"
      >
        <div class="content">
          <nav class="level">
            <div
              id="candidateLists-candidateList-desc-${candidateList.ID}"
              class="level-left"
            >
              ${candidateList.Name}
            </div>
            <div class="level-right">
              <a
                id="candidateLists-candidateList-edit-${candidateList.ID}"
                class="button is-link is-small"
                title="Modifier"
              >
                <span class="icon is-small">
                  <i class="fas fa-pen"></i>
                </span>
              </a>
              <a
                id="candidateLists-candidateList-delete-${candidateList.ID}"
                class="button is-danger is-small"
                title="Supprimer"
              >
                <span class="icon is-small">
                  <i class="fas fa-times"></i>
                </span>
              </a>
            </div>
          </nav>
        </div>
      </div>
    </div>`;
  }

  mountModal(where) {
    const mountpoint = where;
    document.getElementById(mountpoint).innerHTML = /* HTML */ `
      <div class="modal-background"></div>
      <div class="modal-card" id="candidateList-modal-card">
        <header class="modal-card-head">
          <p class="modal-card-title">Ajout/modification d'un tour</p>
          <button
            class="delete"
            aria-label="close"
            id="candidateList-modal-close"
          ></button>
        </header>
        <section class="modal-card-body">
          <div class="field">
            <label>Id</label>
            <div class="control">
              <input
                class="input"
                type="number"
                id="candidateList-modal-id"
                disabled
              />
            </div>
          </div>
          <div class="field">
            <label>Name</label>
            <div class="control">
              <input class="input" type="text" id="candidateList-modal-name" />
            </div>
          </div>
          <div class="field">
            <label>Parti</label><br />
            <div class="control select">
              <select name="party" id="candidateList-modal-party"></select>
            </div>
          </div>
        </section>
        <footer class="modal-card-foot">
          <button id="candidateList-modal-save" class="button is-success">
            Sauvegarder
          </button>
          <button id="candidateList-modal-cancel" class="button">
            Annuler
          </button>
        </footer>
      </div>
    `;
  }

  handleDom() {
    let candidateListHandler = this;
    document
      .getElementById(`candidate-list-new`)
      .addEventListener("click", function () {
        candidateListHandler.newCandidateList();
      });

    document
      .getElementById(`candidateList-modal-close`)
      .addEventListener("click", function () {
        Common.toggleModal("candidateList-modal", "candidateList-modal-card");
      });
    document
      .getElementById(`candidateList-modal-cancel`)
      .addEventListener("click", function () {
        Common.toggleModal("candidateList-modal", "candidateList-modal-card");
      });
    document
      .getElementById(`candidateList-modal-save`)
      .addEventListener("click", async function () {
        if (
          document.getElementById("candidateList-modal-party").value === "0"
        ) {
          Messages.Show("is-danger", "Veuillez sélectionner un parti.");
          return;
        }
        await candidateListHandler.saveCandidateList();
      });
  }

  async displayAreas() {
    let candidateListHandler = this;
    let areas = await this.updateAreas();
    const markup = areas.map((area) => this.areaTemplate(area)).join("");
    document.getElementById("areas-round").innerHTML = markup;

    areas.map((area) => {
      document
        .getElementById(`areas-area-${area.ID}`)
        .addEventListener("click", async function () {
          await candidateListHandler.activateArea(area);
          await candidateListHandler.displayCandidateLists();
        });
    });
  }

  async updateAreas() {
    let candidateListHandler = this;
    let areas = await this.AreaModel.getAreas();
    return areas.filter(function (area) {
      return area.ElectionID == candidateListHandler.round.ElectionID;
    });
  }

  async activateArea(areaToActivate) {
    this.area = areaToActivate;
    let areas = await this.updateAreas();
    areas.forEach((area) => {
      document
        .getElementById(`areas-area-${area.ID}`)
        .classList.remove("active-card");
    });
    document
      .getElementById(`areas-area-${areaToActivate.ID}`)
      .classList.add("active-card");
    document.getElementById("candidate-list-new").removeAttribute("disabled");
  }

  async activateCandidateList() {}

  async displayCandidateLists() {
    let candidateListHandler = this;
    let candidateLists = await this.updateCandidateLists();
    const markup = candidateLists
      .map((candidateList) => this.candidateListTemplate(candidateList))
      .join("");
    document.getElementById("candidate-lists-list").innerHTML = markup;

    candidateLists.map(async (candidateList) => {
      let party = await this.PartyModel.getParty(candidateList.PartyID);
      document.getElementById(
        `candidateLists-candidateList-desc-${candidateList.ID}`
      ).innerHTML += "(" + party.Name + ")";
      document
        .getElementById(`candidateLists-candidateList-edit-${candidateList.ID}`)
        .addEventListener("click", function () {
          candidateListHandler.editCandidateList(candidateList);
        });
      document
        .getElementById(
          `candidateLists-candidateList-delete-${candidateList.ID}`
        )
        .addEventListener("click", function () {
          new Delete(() => {
            candidateListHandler.deleteCandidateList(candidateList);
          });
        });
      // document
      //   .getElementById(`areas-area-${candidateList.ID}`)
      //   .addEventListener("click", async function () {
      //     await candidateListHandler.activateArea(candidateList);
      //     candidateListHandler.area = candidateList;
      //     await candidateListHandler.displayCandidateLists();
      //   });
    });
  }

  async updateCandidateLists() {
    let candidateListHandler = this;
    let candidateLists = await this.CandidateListModel.getCandidateLists();
    return candidateLists.filter(function (candidateList) {
      return candidateList.AreaID == candidateListHandler.area.ID;
    });
  }

  async newCandidateList() {
    this.method = "POST";
    await this.refreshParties();
    document.getElementById("candidateList-modal-id").value = null;
    document.getElementById("candidateList-modal-party").value = null;
    document.getElementById("candidateList-modal-name").value = null;
    Common.toggleModal("candidateList-modal", "candidateList-modal-card");
  }

  async editCandidateList(candidateList) {
    this.method = "PUT";
    await this.refreshParties();
    document.getElementById("candidateList-modal-id").value = candidateList.ID;
    document.getElementById("candidateList-modal-party").value =
      candidateList.PartyID;
    document.getElementById("candidateList-modal-name").value =
      candidateList.Name;
    Common.toggleModal("candidateList-modal", "candidateList-modal-card");
  }

  async refreshParties() {
    let selectParties = document.getElementById("candidateList-modal-party");
    let parties = await this.PartyModel.getParties();
    for (let i = selectParties.options.length - 1; i >= 0; i--) {
      selectParties.remove(i);
    }

    let el = document.createElement("option");
    el.textContent = "Veuillez sélectionner un parti";
    el.value = 0;
    selectParties.appendChild(el);
    parties.forEach((party) => {
      el = document.createElement("option");
      el.textContent = party.Name;
      el.value = party.ID;
      selectParties.appendChild(el);
    });
  }

  async saveCandidateList() {
    if (this.method == "POST")
      document.getElementById("candidateList-modal-id").value = null;

    let candidateList = await this.CandidateListModel.saveCandidateList(
      this.method,
      parseInt(document.getElementById("candidateList-modal-id").value),
      document.getElementById("candidateList-modal-name").value,
      parseInt(document.getElementById("candidateList-modal-party").value),
      this.round.ID,
      this.area.ID
    );
    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
  }
}