Implemente o Gerenciamento de Permissões de Usuário com JavaScript

Introdução

Neste projeto, você aprenderá como implementar um sistema de gerenciamento de permissões de usuário usando JavaScript e jQuery. O projeto envolve a obtenção assíncrona de dados do usuário, a renderização desses dados em uma tabela de permissões de usuário e a disponibilização de funcionalidades para mover usuários entre as listas de usuários e administradores, bem como atualizar as permissões dos usuários de acordo.

👀 Pré-visualização

Demonstração do gerenciamento de permissões de usuário

🎯 Tarefas

Neste projeto, você aprenderá:

Como obter dados do usuário de forma assíncrona de um arquivo JSON e renderizá-los em uma tabela de permissões de usuário
Como implementar a funcionalidade para mover usuários entre as listas de usuários e administradores, tanto individualmente quanto todos de uma vez
Como atualizar as permissões dos usuários na tabela de permissões de usuário com base nos usuários nas listas da esquerda e da direita

🏆 Conquistas

Após concluir este projeto, você será capaz de:

Usar AJAX para obter dados de forma assíncrona
Manipular o DOM usando jQuery para atualizar a interface do usuário
Implementar a funcionalidade de gerenciamento de permissões em uma aplicação web

Configurar a Estrutura do Projeto

Nesta etapa, você configurará os arquivos e a estrutura do projeto. Siga os passos abaixo para completar esta etapa:

Abra a pasta do projeto. A estrutura de diretórios é a seguinte:

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

Dentre eles:

css é a pasta de estilos.
js/index.js é o arquivo JS onde o código precisa ser completado.
js/jquery-3.6.0.min.js é o arquivo jQuery.
js/userList.json é o arquivo de dados a ser solicitado.
index.html é a página principal.

Clique no botão Go Live no canto inferior direito da WebIDE para executar o projeto.

Em seguida, abra "Web 8080" no topo da VM e atualize-o manualmente para ver a página.

Efeito Inicial

Busca e Renderização Assíncrona de Dados

Nesta etapa, você aprenderá como obter dados do usuário de forma assíncrona e renderizá-los na tabela de permissões do usuário.

Abra o arquivo js/index.js.

Implemente a função getData() para obter os dados do usuário do arquivo js/userList.json usando 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 ? "Administrator" : "User"}</td> 
           </tr>`
      );
    });
  });
}

Chame a função getData() no início do bloco $(function () { ... }) para inicializar a tabela de permissões do usuário.
```
$(function () {
  getData();
  // Adding events to buttons
  // ...
});
```

Após concluir esta etapa, a tabela de permissões do usuário será preenchida com os dados do arquivo js/userList.json quando a página for carregada. O efeito é o seguinte:

Efeito após obter dados via AJAX

Movendo Usuários Entre Listas

Nesta etapa, você implementará a funcionalidade de mover usuários entre as listas esquerda e direita, bem como mover todos os usuários para o outro lado.

Abra o arquivo js/index.js e adicione o código dentro do bloco $(function () { ... }).

Implemente o manipulador de eventos de clique $("#add") para mover os usuários selecionados da lista esquerda para a lista direita.

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

Implemente o manipulador de eventos de clique $("#addAll") para mover todos os usuários da lista esquerda para a lista direita.

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

Implemente o manipulador de eventos de clique $("#remove") para mover os usuários selecionados da lista direita para a lista esquerda.

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

Implemente o manipulador de eventos de clique $("#removeAll") para mover todos os usuários da lista direita para a lista esquerda.

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

Após concluir esta etapa, você poderá mover usuários entre as listas esquerda e direita, bem como mover todos os usuários para o outro lado.

Atualizando Permissões de Usuário

Nesta etapa, você implementará a funcionalidade de atualizar as permissões do usuário na tabela de permissões do usuário com base nos usuários nas listas esquerda e direita.

Localize a função changeAccess em js/index.js.

Implemente a função changeAccess() para atualizar as permissões na tabela de permissões do usuário.

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

A função changeAccess() é chamada no final do manipulador de eventos para o clique de um botão que move o usuário entre as listas.

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

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

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

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

Após concluir esta etapa, as permissões do usuário na tabela de permissões do usuário serão atualizadas automaticamente quando os usuários forem movidos entre as listas esquerda e direita. O efeito é o seguinte:

Demonstração da atualização das permissões do usuário

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.

Sistema de Gerenciamento de Permissões de Usuário com JavaScript