<!DOCTYPE html>
<div id="individual" style="display:none"> codigo
<input id="txtCodigo" type="text" disabled><br> nombre
<input id="txtNombre" type="text"><br> precio
<input id="txtPrecio" type="text"><br>
<h1 id="title">Product Managemen
</h1>
window.onload=function(){
var products = [];
var id=0
//var accion="lista"
changeState("list")
drawTable("tblProduct",products)
document.getElementById("btnAgregar").onclick= clickAdd
document.getElementById("btnAceptar").onclick= clickAceptar
document.getElementById("btnCancelar").onclick= clickCancelar
function toProduct(){
return {
"id":parseInt(blankZero(document.getElementById("txtCodigo").value)),
"name": document.getElementById("txtNombre").value ,
"price":parseInt(blankZero(document.getElementById("txtPrecio").value)),
}
}
function changeState(current){
accion=current
if(accion=="list"){
document.getElementById("individual").style.display='none'
document.getElementById("list").style.display='block'
document.getElementById("title").innerHTML="Product Management"
}else if(accion=="update"){
document.getElementById("individual").style.display='block'
document.getElementById("list").style.display='none'
document.getElementById("btnAceptar").innerHTML="Actualizar"
document.getElementById("title").innerHTML=""
}else if(accion=="add"){
document.getElementById("individual").style.display='block'
document.getElementById("list").style.display='none'
document.getElementById("btnAceptar").innerHTML="Agregar"
document.getElementById("title").innerHTML=""
}
}
function blankZero(value){
return value==""?0:value
}
function clickAdd(){
changeState("add")
}
function clickAceptar(){
if(accion=="add"){
add(toProduct())
}
if(accion=="update"){
update( parseInt(e.target.getAttribute('x-id') ))
}
clean()
changeState("list")
}
function clickCancelar(){
clean()
accion="lista"
changeState("list")
}
function clean(){
document.getElementById("txtNombre").focus()
document.getElementById("txtCodigo").value=""
document.getElementById("txtNombre").value=""
document.getElementById("txtPrecio").value=""
}
function clickRemove(e){
remove( parseInt(e.target.getAttribute('x-id') ))
clean()
}
function clickUpadte(e){
changeState("update")
update(parseInt(e.target.getAttribute('x-id') ) )
}
function add(toAdd){
id++
toAdd.id=id
products.push(toAdd);
drawTable("tblProduct",products)
}
function remove(id){
products = products.filter(p=>p.id!==id)
drawTable("tblProduct",products)
}
function update(id){
var index = products.findIndex(p=>p.id==id)
document.getElementById("txtCodigo").value=products[index].id
document.getElementById("txtNombre").value=products[index].name
document.getElementById("txtPrecio").value=products[index].price
}
function drawTable(idTable,products){
for(var c=0;c<products.length;c++){
var current=products[c]
table+="<tr>"
table+=current.id
table+=current.name
table+=current.price
table+="
<button class='update' x-id='" table+=current.id
table+="'"
table+="
<button class='remove' x-id='" table+=current.id
table+="'"
}
document.getElementById(idTable).innerHTML=table
document.querySelectorAll("#tblProduct .remove").forEach(p=>p.onclick=clickRemove)
document.querySelectorAll("#tblProduct .update").forEach(p=>p.onclick=clickUpadte)
}
}