Implementar la gestión de permisos de usuario con JavaScript

Introducción

En este proyecto, aprenderás a implementar un sistema de gestión de permisos de usuario utilizando JavaScript y jQuery. El proyecto implica obtener datos de usuario de manera asíncrona, renderizarlos en una tabla de permisos de usuario y proporcionar la funcionalidad para mover usuarios entre las listas de usuarios y administradores, así como actualizar los permisos de usuario en consecuencia.

👀 Vista previa

Demostración de gestión de permisos de usuario

🎯 Tareas

En este proyecto, aprenderás:

Cómo obtener datos de usuario de manera asíncrona desde un archivo JSON y renderizarlos en una tabla de permisos de usuario
Cómo implementar la funcionalidad para mover usuarios entre las listas de usuarios y administradores, tanto individualmente como todos a la vez
Cómo actualizar los permisos de usuario en la tabla de permisos de usuario en función de los usuarios en las listas izquierda y derecha

🏆 Logros

Después de completar este proyecto, podrás:

Utilizar AJAX para obtener datos de manera asíncrona
Manipular el DOM utilizando jQuery para actualizar la interfaz de usuario
Implementar la funcionalidad de gestión de permisos en una aplicación web

Configurar la estructura del proyecto

En este paso, configurarás los archivos y la estructura del proyecto. Sigue los pasos siguientes para completar este paso:

Abre la carpeta del proyecto. La estructura de directorios es la siguiente:

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

Entre ellos:

css es la carpeta de estilos.
js/index.js es el archivo JS donde se debe completar el código.
js/jquery-3.6.0.min.js es el archivo de jQuery.
js/userList.json es el archivo de datos que se solicitará.
index.html es la página principal.

Haz clic en el botón Go Live en la esquina inferior derecha de WebIDE, para ejecutar el proyecto.

Luego, abre "Web 8080" en la parte superior de la VM y actualízala manualmente para ver la página.

Efecto inicial

Obtención y representación de datos de forma asíncrona

En este paso, aprenderás a obtener datos de usuario de manera asíncrona y a renderizarlos en la tabla de permisos de usuario.

Abre el archivo js/index.js.

Implementa la función getData() para obtener los datos de usuario del archivo js/userList.json utilizando 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 ? "Administrador" : "Usuario"}</td> 
           </tr>`
      );
    });
  });
}

Llama a la función getData() al principio del bloque $(function () {... }) para inicializar la tabla de permisos de usuario.
```
$(function () {
  getData();
  // Agregar eventos a los botones
  //...
});
```

Después de completar este paso, la tabla de permisos de usuario se llenará con los datos del archivo js/userList.json cuando se cargue la página. El efecto es el siguiente:

Efecto después de obtener datos a través de AJAX

Mover usuarios entre listas

En este paso, implementarás la funcionalidad de mover usuarios entre las listas izquierda y derecha, así como mover todos los usuarios al otro lado.

Abre el archivo js/index.js y agrega código dentro del bloque $(function () {... }).

Implementa el manejador de eventos de clic $("#add") para mover los usuarios seleccionados de la lista izquierda a la lista derecha.

$("#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));
  });
});

Implementa el manejador de eventos de clic $("#addAll") para mover todos los usuarios de la lista izquierda a la lista derecha.

$("#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));
  });
});

Implementa el manejador de eventos de clic $("#remove") para mover los usuarios seleccionados de la lista derecha a la lista izquierda.

$("#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));
  });
});

Implementa el manejador de eventos de clic $("#removeAll") para mover todos los usuarios de la lista derecha a la lista izquierda.

$("#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));
  });
});

Después de completar este paso, podrás mover usuarios entre las listas izquierda y derecha, así como mover todos los usuarios al otro lado.

Actualizar permisos de usuario

En este paso, implementarás la funcionalidad de actualizar los permisos de usuario en la tabla de permisos de usuario en función de los usuarios en las listas izquierda y derecha.

Localiza la función changeAccess en js/index.js.

Implementa la función changeAccess() para actualizar los permisos en la tabla de permisos de usuario.

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

La función changeAccess() se llama al final del manejador de eventos del clic de un botón que mueve el usuario entre las listas.

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

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

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

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

Después de completar este paso, los permisos de usuario en la tabla de permisos de usuario se actualizarán automáticamente cuando los usuarios se mueven entre las listas izquierda y derecha. El efecto es el siguiente:

Demostración de actualización de permisos de usuario

Resumen

¡Felicitaciones! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.

Sistema de gestión de permisos de usuario con JavaScript