party.js

// Imports
import * as Auth from "/services/auth/auth.js";
import * as Common from "/services/common/common.js";
import * as PartyModel from "/services/model/party-model.js";
import { Delete } from "/services/common/delete.js";

// DOM elements
export async function mount(where) {
  const partyComponent = new Party();
  await partyComponent.mount(where);
}

class Party {
  constructor() {
    this.PartyModel = PartyModel.getPartyModel();
  }

  async mount(where) {
    this.PartyModel.current_user = await Auth.GetUser();
    const mountpoint = where;
    document.getElementById(mountpoint).innerHTML = /* HTML */ ` <div
        class="container"
      >
        <div id="parties-card" class="card">
          <header class="card-header">
            <p class="card-header-title">
              Partis
            </p>
            <button id="party-new" class="button is-success">
              <span class="icon is-small">
                <i class="fas fa-plus"></i>
              </span>
            </button>
          </header>
          <div class="card-content">
            <div id="party-list" class="content">Liste des partis</div>
          </div>
        </div>
      </div>
      <div class="modal" id="party-modal"></div>`;
    this.mountModal("party-modal");
    this.handleDom();
    this.displayParties();
  }

  handleDom() {
    let partyHandler = this;
    document.getElementById(`party-new`).addEventListener("click", function () {
      partyHandler.newParty();
    });

    document
      .getElementById(`party-modal-close`)
      .addEventListener("click", function () {
        Common.toggleModal("party-modal", "party-modal-card");
      });
    document
      .getElementById(`party-modal-cancel`)
      .addEventListener("click", function () {
        Common.toggleModal("party-modal", "party-modal-card");
      });
    document
      .getElementById(`party-modal-save`)
      .addEventListener("click", async function () {
        await partyHandler.saveParty();
      });
  }

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

  partyTemplate(party) {
    return /* HTML */ `<div class="card card-list">
      <div id="parties-party-${party.ID}" class="card-content">
        <div class="content">
          <nav class="level">
            <div class="level-left" style="color:${party.Color}">
              ${party.Name} &nbsp&nbsp<p style="background-color:${party.Color}">Couleur</p>
            </div>
            <div class="level-right">
              <a
                id="parties-party-edit-${party.ID}"
                class="button is-link is-small"
                title="Modifier"
              >
                <span class="icon is-small">
                  <i class="fas fa-pen"></i>
                </span>
              </a>
              <a
                id="parties-party-delete-${party.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>`;
  }

  async displayParties() {
    let parties = await this.PartyModel.getParties();
    const markup = parties.map((party) => this.partyTemplate(party)).join("");
    document.getElementById("party-list").innerHTML = markup;

    let partyHandler = this;
    parties.map((party) => {
      document
        .getElementById(`parties-party-edit-${party.ID}`)
        .addEventListener("click", function () {
          partyHandler.editParty(party);
        });
      document
        .getElementById(`parties-party-delete-${party.ID}`)
        .addEventListener("click", function () {
          new Delete(() => {
            partyHandler.deleteParty(party);
          });
        });
    });
  }

  newParty() {
    this.method = "POST";
    document.getElementById("party-modal-id").value = null;
    document.getElementById("party-modal-name").value = null;
    document.getElementById("party-modal-color").value = null;
    Common.toggleModal("party-modal", "party-modal-card");
  }

  editParty(party) {
    this.method = "PUT";
    document.getElementById("party-modal-id").value = party.ID;
    document.getElementById("party-modal-name").value = party.Name;
    document.getElementById("party-modal-color").value =
      party.Color;
    Common.toggleModal("party-modal", "party-modal-card");
  }

  async saveParty() {
    let party;
    if (this.method == "POST")
      document.getElementById("party-modal-id").value = null;

    party = await this.PartyModel.saveParty(
      this.method,
      parseInt(document.getElementById("party-modal-id").value),
      document.getElementById("party-modal-name").value,
      document.getElementById("party-modal-color").value
    );

    await this.displayParties();
    Common.toggleModal("party-modal", "party-modal-card");
    return party;
  }

  async deleteParty(party) {
    await this.PartyModel.deleteParty(party.ID);
    this.displayParties();
  }
}