users.js

// Imports
import { AnimateCSS } from "/services/common/common.js";
import * as Auth from "/services/auth/auth.js";
import { Delete } from "/services/common/delete.js";
import * as HandleUser from "/components/users/handleUser.js";
import * as HandleBanker from "/components/users/handleBanker.js";
import * as HandleClient from "/components/users/handleClient.js";

// DOM elements

// local variables
let current_user;

export async function mount(where) {
  const userPage = new Users();
  await userPage.mount(where);
}

class Users {
  constructor() {
  }

  async mount(where) {
    const mountpoint = where;
    document.getElementById(mountpoint).innerHTML = /* HTML */ `
      <div class="table-container">
        <table class="table is-bordered is-narrow is-hoverable is-fullwidth">
          <thead>
            <tr class="is-selected">
              <th>Id</th>
              <th>IdOAuth</th>
              <th>Identifiant</th>
              <th>Nom complet</th>
              <th>Nom</th>
              <th>Surnom</th>
              <th>Rôle</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody id="users"></tbody>
        </table>
      </div>
      <button id="users-new" class="button is-primary">
        <span class="icon is-small">
          <i class="fas fa-plus"></i>
        </span>
      </button>

      <div class="modal" id="users-modal"></div>

      <div class="modal" id="banker-modal"></div>

      <div class="modal" id="client-modal"></div>
    `;
    current_user = await Auth.GetUser();
    this.HandleUser = await HandleUser.mount("users-modal", this);
    this.HandleBanker = await HandleBanker.mount("banker-modal", this);
    this.HandleClient = await HandleClient.mount("client-modal", this);
    await this.displayUsers();
  }

  async displayUsers() {
    let users = await this.HandleUser.updateUsers();
    const markup = users.map((user) => this.userTemplate(user)).join("");
    document.getElementById("users").innerHTML = markup;
    let userHandler = this.HandleUser;
    users.map((user) => {
      document.getElementById(`users-user-edit-${user.id}`).addEventListener("click", function () {
        userHandler.editUser(user);
      });
      document.getElementById(`users-user-delete-${user.id}`).addEventListener("click", function () {
        new Delete(() => {
          userHandler.deleteUser(user);
        });
      });
    });
  }

  cleanUser(user) {
    let props = ["password", "name", "surname", "memberOf", "displayName"];
    for (const prop of props) {
      user[prop] = user[prop] === undefined ? "" : user[prop];
    }
  }

  userTemplate(user) {
    this.cleanUser(user);
    return /* HTML */ `
      <tr id="users-user-${user.id}">
        <td>${user.id}</td>
        <td>${user.idOAuth}</td>
        <td>${user.login}</td>
        <td>${user.displayName == undefined ? "" : user.displayName}</td>
        <td>${user.name}</td>
        <td>${user.surname}</td>
        <td>${user.role}</td>
        <td>
          <a id="users-user-edit-${user.id}" class="button is-link is-small">
            <span>Modifier</span>
            <span class="icon is-small">
              <i class="fas fa-pen"></i>
            </span>
          </a>
          <a id="users-user-delete-${user.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>
    `;
  }
}

export function toggleModal(modalID, cardID) {
  const modal = document.getElementById(modalID);
  const card = document.getElementById(cardID);
  if (modal.classList.contains("is-active")) {
    AnimateCSS(modal, "fadeOut");
    AnimateCSS(card, "zoomOut", function () {
      modal.classList.remove("is-active");
    });
  } else {
    modal.classList.add("is-active");
    AnimateCSS(modal, "fadeIn");
    AnimateCSS(card, "zoomIn");
  }
}