Implémenter la gestion des permissions utilisateur avec JavaScript

Introduction

Dans ce projet, vous allez apprendre à implémenter un système de gestion des permissions utilisateur à l'aide de JavaScript et de jQuery. Le projet consiste à récupérer les données des utilisateurs de manière asynchrone, à les afficher dans un tableau de permissions utilisateur et à fournir des fonctionnalités pour déplacer les utilisateurs entre les listes d'utilisateurs et d'administrateurs, ainsi que pour mettre à jour les permissions des utilisateurs en conséquence.

👀 Aperçu

Démo de gestion des permissions utilisateur

🎯 Tâches

Dans ce projet, vous allez apprendre :

Comment récupérer asynchronement les données des utilisateurs à partir d'un fichier JSON et les afficher dans un tableau de permissions utilisateur
Comment implémenter la fonctionnalité pour déplacer les utilisateurs entre les listes d'utilisateurs et d'administrateurs, individuellement et tout à la fois
Comment mettre à jour les permissions des utilisateurs dans le tableau de permissions utilisateur en fonction des utilisateurs des listes de gauche et de droite

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

Utiliser AJAX pour récupérer des données de manière asynchrone
Manipuler le DOM à l'aide de jQuery pour mettre à jour l'interface utilisateur
Implémenter la fonctionnalité de gestion des permissions dans une application web

Configurer la structure du projet

Dans cette étape, vous allez configurer les fichiers et la structure du projet. Suivez les étapes ci-dessous pour terminer cette étape :

Ouvrez le dossier du projet. La structure de répertoire est la suivante :

├── css
├── js
│    ├── index.js
│    ├── jquery-3.6.0.min.js
│    └── userList.json
└── index.html

Dans cette structure :

css est le dossier de style.
js/index.js est le fichier JS dans lequel vous devrez compléter le code.
js/jquery-3.6.0.min.js est le fichier jQuery.
js/userList.json est le fichier de données à demander.
index.html est la page principale.

Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.

Ensuite, ouvrez "Web 8080" en haut de la machine virtuelle et rafraîchissez manuellement la page pour la voir.

Effet initial

Récupération et affichage de données asynchrones

Dans cette étape, vous allez apprendre à récupérer de manière asynchrone les données des utilisateurs et à les afficher dans le tableau de permissions utilisateur.

Ouvrez le fichier js/index.js.

Implémentez la fonction getData() pour récupérer les données des utilisateurs à partir du fichier js/userList.json à l'aide d'AJAX.

function getData() {
  // TODO
  $.ajax("./js/userList.json").then((res) => {
    res.forEach((item) => {
      $("#userList tbody").html(
        $("#userList tbody").html() +
          ` <tr name=${item.name}>
               <td>${item.name}</td>
               <td>${item.right ? "Administrateur" : "Utilisateur"}</td> 
           </tr>`
      );
    });
  });
}

Appelez la fonction getData() au début du bloc $(function () {... }) pour initialiser le tableau de permissions utilisateur.
```
$(function () {
  getData();
  // Ajout d'événements aux boutons
  //...
});
```

Après avoir terminé cette étape, le tableau de permissions utilisateur sera rempli avec les données du fichier js/userList.json lorsque la page est chargée. L'effet est le suivant :

Effet après obtention des données via AJAX

Déplacer des utilisateurs entre les listes

Dans cette étape, vous allez implémenter la fonctionnalité de déplacement d'utilisateurs entre les listes de gauche et de droite, ainsi que le déplacement de tous les utilisateurs de l'une à l'autre.

Ouvrez le fichier js/index.js et ajoutez du code à l'intérieur du bloc $(function () {... }).

Implémentez le gestionnaire d'événements de clic $("#add") pour déplacer les utilisateurs sélectionnés de la liste de gauche vers la liste de droite.

$("#add").click(function () {
  // TODO
  let option = $("#leftSelect option:selected");
  option.each((index, item) => {
    $(`#leftSelect option[value=${item.value}]`).remove();
    $("#rightSelect")[0].add(new Option(item.value, item.value));
  });
});

Implémentez le gestionnaire d'événements de clic $("#addAll") pour déplacer tous les utilisateurs de la liste de gauche vers la liste de droite.

$("#addAll").click(function () {
  // TODO
  let option = $("#leftSelect option");
  option.each((index, item) => {
    $(`#leftSelect option[value=${item.value}]`).remove();
    $("#rightSelect")[0].add(new Option(item.value, item.value));
  });
});

Implémentez le gestionnaire d'événements de clic $("#remove") pour déplacer les utilisateurs sélectionnés de la liste de droite vers la liste de gauche.

$("#remove").click(function () {
  // TODO
  let option = $("#rightSelect option:selected");
  option.each((index, item) => {
    $(`#rightSelect option[value=${item.value}]`).remove();
    $("#leftSelect")[0].add(new Option(item.value, item.value));
  });
});

Implémentez le gestionnaire d'événements de clic $("#removeAll") pour déplacer tous les utilisateurs de la liste de droite vers la liste de gauche.

$("#removeAll").click(function () {
  // TODO
  let option = $("#rightSelect option");
  option.each((index, item) => {
    $(`#rightSelect option[value=${item.value}]`).remove();
    $("#leftSelect")[0].add(new Option(item.value, item.value));
  });
});

Après avoir terminé cette étape, vous serez capable de déplacer des utilisateurs entre les listes de gauche et de droite, ainsi que de déplacer tous les utilisateurs de l'une à l'autre.

Mise à jour des permissions utilisateur

Dans cette étape, vous allez implémenter la fonctionnalité de mise à jour des permissions des utilisateurs dans le tableau de permissions utilisateur en fonction des utilisateurs des listes de gauche et de droite.

Localisez la fonction changeAccess dans js/index.js.

Implémentez la fonction changeAccess() pour mettre à jour les permissions dans le tableau de permissions utilisateur.

function changeAccess(right, changeList) {
  changeList.each((index, item) => {
    $(`#userList tr[name=${item.value}] td:last`).html(right);
  });
}

La fonction changeAccess() est appelée à la fin du gestionnaire d'événements du clic d'un bouton qui déplace l'utilisateur entre les listes.

$("#add").click(function () {
  // TODO
  //...
  changeAccess("Administrateur", option);
});

$("#addAll").click(function () {
  // TODO
  //...
  changeAccess("Administrateur", option);
});

$("#remove").click(function () {
  // TODO
  //...
  changeAccess("Utilisateur", option);
});

$("#removeAll").click(function () {
  // TODO
  //...
  changeAccess("Utilisateur", option);
});

Après avoir terminé cette étape, les permissions des utilisateurs dans le tableau de permissions utilisateur seront mises à jour automatiquement lorsque les utilisateurs sont déplacés entre les listes de gauche et de droite. L'effet est le suivant :

Démo de mise à jour des permissions des utilisateurs

Résumé

Félicitations ! Vous avez terminé ce projet. Vous pouvez pratiquer plus de laboratoires sur LabEx pour améliorer vos compétences.

Système de gestion des permissions utilisateur avec JavaScript