Link to: https://thiagodomingoss.github.io/CRUD-AdmSystem/
CREATE
Ao clicar no botão "Add New User", o BOOTSTRAP trata de abrir o modal onde serão digitadas as informações.
Após preencher os campos, clicando em "Save", é chamada a função 'saveUser'.
Que começa com uma checagem de campos
Após isso, a const user recebe um objeto que contém chaves que receberão os valores dos campos do modal.
Recebido os valores, uma const 'index' recebe o valor de um data attribute que está no html do primeiro campo do modal, fazendo uma filtragem: se o data attribute tem o valor 'new' será adicionado como novo usuário, caso contrário, será executada a função "updateUser" para editar o usuário.
Se o index é 'new', então vamos para a função "createUser" que recebe user (const que recebe o objeto antes mencionada) como parâmetro.
Esta função, requisita os objetos do localstorage e armazena numa const, depois faz um push do user, passado como parâmetro, para a const e manda para o localstorage com o setlocalstorage.
Depois de criado o usuário, é chamada a função "updateTable".
Que inicia chamando a função "clearTable". Onde as strings da tabela que estão na tela são armazenadas em uma const, fazendo uma iteração com forEach removendo todas as linhas com o método removeChild.
Após isso, armazena a função "readUser" numa const, que nada mais faz do que ler o localstorage, e faz uma iteração com forEach mandando cada item para a função createRow
READ
Essa função recebe Dois parâmetros, o user e o index, que nada mais são do que o item e sua posição no array recebido do localstorage.
Com isso, primeiro é usado um createElement para criar uma 'tr' que vai armazenar as 'td' com as informações que foram recebidas pela const "user" e enviadas para o localstorage, e vai formar a estrutura que você vê no código, passando isso para o HTML da const newRow e por fim usar o método appendChild para colocar o elemento 'tr' da newRow na table.
UPDATE
Se na condicional passada na "saveUser" o valor do dataAttribute não for 'new', vamos para o "updateUser". Recebendo o index e o user como parâmetros, a função faz uma leitura do localstorage e armazena numa const, acessa essa const passando o index para acessar o index do item desejado para ser alterado(o item clicado) e atribuindo o user que recebe o objeto com os valores do campo do modal. Por fim manda para o localstorage com o setLocalStorage.
DELETE
Aqui o delete nada mais faz do que lê o localstorage passando o index do item como parâmetro para acessar o item desejado(clicado) e usa-se o confirm que retorna um boleano. Se o bolean retorna true chama-se a função deletUser passando o index como parâmetro
Essa função lê o localstorage e armazena o valores numa const, aplica o método splice que recebe o indice no item no seu primeiro parâmetro e o valor 1 no seu segundo parâmetro, seu primeiro parâmetroindica a posição do item a ser acessado e seu segundo parâmetro indica a quantidade de itens a ser deletado após isso envia para o localstorage os novos valores sem aquele que foi acessado.
SEARCH
Pegamos o valor elemento input e adicionamos um eveto que sempre que o estado do input é alterado a função searchUser é chamada.
Essa função recebe um evento(input) como parâmetro, pega o seu valor e aplica o método toLowerCase que coloca todas as letras para minúsculas, para a busca não ser interferida pelo case sensitive, atribui o valor para uma const e chama a função "findUser" pasando a const como parâmetro.
A função começa capturando a tabela mostrada na tela e aceesando o seu elementos filhos com o children, aplica o método Array.from que transforma o HTMLCollection que é retornado pelo tabela.children em um array iterável e armazena numa const(usuário).
A partir daí é feita duas filtragens, a primeiro (nomeUns) recebe os itens que não contêm o valor do input, que foi passado como parâmetro dessa função. A segunda (nomeSea) recebe os itens que contêm o valor do input. Então duas iterações são feitas uma em cada variável, nomeUns, que recebe o itens que não possuem o valor do input ap´lica um método setAttribute que cria uma classe que recebe hidden, que nada mais faz do que aplicar um display: none no item. a segunda faz o oposto usando removeAttribute.