Salvei o último ID no storage como uma solução alternativa para sempre ter um ID único.
let _lastID = 0;
const _form = document.getElementById("formNewItem");
const _ulBagItens = document.getElementById('bagItens');
let _addedItemsInBag = [];
loadBag();
_form.addEventListener("submit", (evento) => {
evento.preventDefault();
const inputName = evento.target.elements.name;
const inputQty = evento.target.elements.quantity;
// para capturar os valores dos campos do formulário
const newItem = getItemFromBag(inputName.value, Number(inputQty.value));
saveNewItem(newItem);
if (newItem.isNew) {
addItemInBag(newItem);
} else {
updateItemBag(newItem);
}
clearForm(inputName, inputQty);
});
function getItemFromBag(name, qty) {
let foundItem = _addedItemsInBag.find((item) => { return item.name === name; });
if (foundItem) {
foundItem.qty += qty;
foundItem.isNew = false;
} else {
foundItem = getNewItem(name, qty);
}
return foundItem;
}
function getNewItem(name, qty){
return {
id: 0,
name: name,
qty: qty,
isNew: true,
};
}
function saveNewItem(newItem) {
if (!newItem.id) {
newItem.id = ++_lastID;
_addedItemsInBag.push(newItem);
}
// save itens in local storage
localStorage.setItem('items', JSON.stringify(_addedItemsInBag));
localStorage.setItem('ID', _lastID);
}
function loadFromStorage(){
const storagedItems = localStorage.getItem('items');
// o uso do operador || evita o if para verificar se o objeto está null, pois, caso estiver, um novo array vazio é atribuído
_addedItemsInBag = JSON.parse(storagedItems) || [];
_lastID = Number(localStorage.getItem('ID'));
//console.log(_lastID);
}
function loadBag(){
loadFromStorage();
_addedItemsInBag.forEach((item) => {
addItemInBag(item);
});
}
function clearForm(inputName, inputQty) {
inputName.value = '';
inputQty.value = '';
}
function addItemInBag(item){
// cria um novo elemento de lista
const liTag = document.createElement('li');
// adiciona a classe chamada item ao novo item para aplicar o css
liTag.classList.add("item");
// cria uma nova tag <strong>
const strongTag = document.createElement('strong');
// adiciona a quantidade ao conteúdo interno da tag strong
strongTag.innerHTML = item.qty;
// adiciona o elemento <strong> dentro do novo item da lista <li>
liTag.appendChild(strongTag);
// adiciona ao conteúdo interno do HTML o texto 'nome'
liTag.innerHTML += item.name;
liTag.dataset['id'] = item.id;
const btnDel = document.createElement('button');
btnDel.innerHTML = 'x';
btnDel.addEventListener('click', (evt) => {
// remover da lista _addedItemsInBag e atualizar o localStorage
deleteFromStorage(liTag);
// remove o elemento do HTML
btnDel.parentNode.remove();
});
liTag.appendChild(btnDel);
// adiciona o novo <li> a lista <ul>
_ulBagItens.appendChild(liTag);
}
function deleteFromStorage(liTag) {
const itemIdx = _addedItemsInBag.findIndex(p => p.id == liTag.dataset['id']);
_addedItemsInBag.splice(itemIdx, 1);
localStorage.setItem('items', JSON.stringify(_addedItemsInBag));
}
function updateItemBag(newItem){
const li = document.querySelector(`li[data-id="${newItem.id}"]`);
const strong = li.getElementsByTagName('strong')[0];
strong.innerHTML = newItem.qty;
}