From 07e7e249374a93fc56b26f95abe6edece10b0958 Mon Sep 17 00:00:00 2001 From: Brayan Date: Thu, 7 Oct 2021 04:19:09 -0500 Subject: [PATCH 1/6] feat(BOOT): agregando datos a una tabla desde un formulario xddd --- README.md | 16 ------- index.html | 122 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 122 insertions(+), 16 deletions(-) delete mode 100644 README.md create mode 100644 index.html diff --git a/README.md b/README.md deleted file mode 100644 index c1d0417..0000000 --- a/README.md +++ /dev/null @@ -1,16 +0,0 @@ -# bootcamp2021-02 -JavaScript y CSS - -Material: https://sumptuous-snapper-7c8.notion.site/Sintaxis-y-Manipulaci-n-del-DOM-1d39edcc81a2496683df53098bd1b5c7 - -Caso práctico: - -Desarrollar una tabla donde pueda **agregar registros, editar los valores de los registros y eliminarlos**. Estos deberán tener un mínimo de 5 columnas de datos y una de acciones (botón ver, editar / eliminar). Una de ellas debe ser del tipo URL y al dar el botón "Ver" se debe mostrar sobre la tabla los datos del registro seleccionado. - -**Bonus points:** - -- Se hace un highlight (resalta) el registro seleccionado -- Se logra guardar en el navegador los datos ingresados (no BD, no API) -- La edición de registros es directamente en la fila del registro - -Ir a issue: https://github.com/apprunn/bootcamp2021-02/issues/1 diff --git a/index.html b/index.html new file mode 100644 index 0000000..a6f3b8c --- /dev/null +++ b/index.html @@ -0,0 +1,122 @@ + + + + + + Mi Economia + + + + +

Mi Economia

+
+
+ Tipo de Transaccion + + + + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+
+ + + + + + + + + + + + + + + + + + + +
+ Tipo + + Descripcion + + Monto + + Categoria +
TiendaSueldo1000Trabajo
EgresoBig Mac7Comida
+
+ + + + + + \ No newline at end of file From 2796b7e0cd2c44bce760e3645f520bb73d9f8ae6 Mon Sep 17 00:00:00 2001 From: Brayan Date: Thu, 7 Oct 2021 04:41:57 -0500 Subject: [PATCH 2/6] feat(BOOT): agregando datos a una tabla desde un formulario xddd --- index.html | 72 ++++++++++++++++++++++++++++++++++++------------------ 1 file changed, 48 insertions(+), 24 deletions(-) diff --git a/index.html b/index.html index a6f3b8c..3357fb1 100644 --- a/index.html +++ b/index.html @@ -12,22 +12,31 @@

Mi Economia

Tipo de Transaccion - - - - + + + + +
+
+ + +
+
+ +
- - + +
+
- - + +
@@ -37,29 +46,39 @@

Mi Economia

+ + - - - - + + + + + + - - - - + + + + + +
- Tipo + Area + + Nombre + + Apellido Descripcion - Monto + Salario - Categoria + Linkedin
TiendaSueldo1000TrabajoBackBrayanSanchezpracticandoSueldoMinimoxdwwlinkssss
EgresoBig Mac7ComidaFRONTBrayan2practicando2Sanchez2SueldoMinimoxd2wwlinkssss2
@@ -78,17 +97,22 @@

Mi Economia

let newTransactionRowRef = transactionTableRef.insertRow(-1); let newTypeCellRef = newTransactionRowRef.insertCell(0) - newTypeCellRef.textContent = transactionFormData.get("transactionType"); - + newTypeCellRef = newTransactionRowRef.insertCell(1) - newTypeCellRef.textContent = transactionFormData.get("transactionDescription"); + newTypeCellRef.textContent = transactionFormData.get("transactionName"); newTypeCellRef = newTransactionRowRef.insertCell(2) - newTypeCellRef.textContent = transactionFormData.get("transactionAmount"); + newTypeCellRef.textContent = transactionFormData.get("transactionLastName"); newTypeCellRef = newTransactionRowRef.insertCell(3) - newTypeCellRef.textContent = transactionFormData.get("transactionCategory"); + newTypeCellRef.textContent = transactionFormData.get("transactionDescription"); + + newTypeCellRef = newTransactionRowRef.insertCell(4) + newTypeCellRef.textContent = transactionFormData.get("transactionAmount"); + + newTypeCellRef = newTransactionRowRef.insertCell(5) + newTypeCellRef.textContent = transactionFormData.get("transactionLink"); } From 11029b04fa6727358184a5d1802492267f66b2a2 Mon Sep 17 00:00:00 2001 From: Brayan Date: Thu, 7 Oct 2021 16:23:14 -0500 Subject: [PATCH 3/6] feat(SAL): agregando datos a una tabla desde un formulario --- index.html | 127 +++++++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 114 insertions(+), 13 deletions(-) diff --git a/index.html b/index.html index 3357fb1..919852a 100644 --- a/index.html +++ b/index.html @@ -3,15 +3,15 @@ - Mi Economia + Empleado -

Mi Economia

+

Empleado

- Tipo de Transaccion + Tabla Empleado @@ -44,7 +44,7 @@

Mi Economia

- + @@ -63,6 +63,12 @@

Mi Economia

+ + @@ -88,32 +94,127 @@

Mi Economia

form.addEventListener("submit", function(event){ event.preventDefault(); let transactionFormData = new FormData(form); - insertRowInTransactionTable(transactionFormData); + let transactionObj = convertFormDataToTransactionObj(transactionFormData) + console.log(transactionObj); + insertRowInTransactionTable(transactionObj); + saveTransactionObj(transactionObj); + form.reset(); }) - function insertRowInTransactionTable(transactionFormData) { + document.addEventListener("DOMContentLoaded", function(event){ + let transactionObjArr = JSON.parse(localStorage.getItem("transactionData")); + transactionObjArr.forEach(function(arrayElement){ + insertRowInTransactionTable(arrayElement) + console.log("se inserta el elemento"); + }); + }) + + function getNewTransactionId(){ + let lastTransactionId = localStorage.getItem("lastTransactionId") || "-1"; + let newTransactionId = JSON.parse(lastTransactionId) + 1; + localStorage.setItem("lastTransactionId", JSON.stringify(newTransactionId)); + return newTransactionId; + } + + function convertFormDataToTransactionObj(transactionFormData) { + let transactionType = transactionFormData.get("transactionType") + let transactionName = transactionFormData.get("transactionName") + let transactionLastName = transactionFormData.get("transactionLastName") + let transactionDescription = transactionFormData.get("transactionDescription") + let transactionAmount = transactionFormData.get("transactionAmount") + let transactionLink = transactionFormData.get("transactionLink") + let transactionId = getNewTransactionId(); + return { + "transactionType": transactionType, + "transactionName": transactionName, + "transactionLastName": transactionLastName, + "transactionDescription": transactionDescription, + "transactionAmount": transactionAmount, + "transactionLink": transactionLink, + "transactionId": transactionId + } + } + + function insertRowInTransactionTable(transactionObj) { let transactionTableRef = document.getElementById("transactionTable"); let newTransactionRowRef = transactionTableRef.insertRow(-1); - + newTransactionRowRef.setAttribute("transactionId", transactionObj["transactionId"]) let newTypeCellRef = newTransactionRowRef.insertCell(0) - newTypeCellRef.textContent = transactionFormData.get("transactionType"); + newTypeCellRef.textContent = transactionObj["transactionType"]; newTypeCellRef = newTransactionRowRef.insertCell(1) - newTypeCellRef.textContent = transactionFormData.get("transactionName"); + newTypeCellRef.textContent = transactionObj["transactionName"]; newTypeCellRef = newTransactionRowRef.insertCell(2) - newTypeCellRef.textContent = transactionFormData.get("transactionLastName"); + newTypeCellRef.textContent = transactionObj["transactionLastName"]; newTypeCellRef = newTransactionRowRef.insertCell(3) - newTypeCellRef.textContent = transactionFormData.get("transactionDescription"); + newTypeCellRef.textContent = transactionObj["transactionDescription"]; newTypeCellRef = newTransactionRowRef.insertCell(4) - newTypeCellRef.textContent = transactionFormData.get("transactionAmount"); + newTypeCellRef.textContent = transactionObj["transactionAmount"]; newTypeCellRef = newTransactionRowRef.insertCell(5) - newTypeCellRef.textContent = transactionFormData.get("transactionLink"); + newTypeCellRef.textContent = transactionObj["transactionLink"]; +// + let newDeleteCell = newTransactionRowRef.insertCell(6); + let deleteButton = document.createElement("button"); + deleteButton.textContent = "Eliminar"; + newDeleteCell.appendChild(deleteButton); + + deleteButton.addEventListener("click", (event) => { + let transactionRow = event.target.parentNode.parentNode; + let transactionId = transactionRow.getAttribute("data-transaction-id"); + transactionRow.remove(); + deleteTransactionObj(transactionId); + }) +// +// + let newSelectCell = newTransactionRowRef.insertCell(7); + let selectButton = document.createElement("button"); + selectButton.textContent = "Ver"; + newSelectCell.appendChild(selectButton); + + selectButton.addEventListener("click", (event) => { + let transactionRow = event.target.parentNode.parentNode; + let transactionId = transactionRow.getAttribute("data-transaction-id"); + getDetailObj(transactionId); + }) + // } + function getDetailObj(transactionId) { + let transactionDetailObj = JSON.parse(localStorage.getItem("transactionData")); + console.log(transactionId); + const transactDetail = transactionDetailObj.find(element => element.transactionId === transactionId); + // transactionObjArr.splice(transactionIndexInArray, 1); + // //convierto de objeto a json + // let transactionObjJson = JSON.stringify(transactionObjArr); + console.log(JSON.stringify(transactDetail)); + // alert(transactionObjJson); + } + // le paso como parametro el transactionId de la transaccion que quiero eliminar + function deleteTransactionObj(transactionId){ + console.log(transactionId); + //obtengo las transaccion de mi base de datos o en este caso el localstorage + let transactionObjArr = JSON.parse(localStorage.getItem("transactionData")); + //busco el indice o la posicion de la transaccion que quiero eliminar + let transactionIndexInArray = transactionObjArr.findIndex(element => element.transactionId === transactionId); + //elimino el elemento de esa posicion + transactionObjArr.splice(transactionIndexInArray, 1); + //convierto de objeto a json + let transactionObjJson = JSON.stringify(transactionObjArr); + // y finalmente guardo el array de la transaccion con formato JSon al localstorage + localStorage.setItem("transactionData", transactionObjJson); + } + + function saveTransactionObj(transactionObj) { + let myTransactionArray = JSON.parse(localStorage.getItem("transactionData")) || []; + myTransactionArray.push(transactionObj); + let transactionObjJson = JSON.stringify(myTransactionArray); + localStorage.setItem("transactionData", transactionObjJson); + +} - \ No newline at end of file + From 4757475924a81d9048c3fc2d369807b45ab54ee9 Mon Sep 17 00:00:00 2001 From: Brayan Date: Sun, 10 Oct 2021 23:11:15 -0500 Subject: [PATCH 6/6] feat(BC): agregando datos a una tabla desde un formulario --- index.html | 74 +++++++++++++++++++++++++----------------------------- 1 file changed, 34 insertions(+), 40 deletions(-) diff --git a/index.html b/index.html index a5127b8..73f24c2 100644 --- a/index.html +++ b/index.html @@ -10,6 +10,10 @@

Empleado

+
+ + +
@@ -38,7 +42,7 @@

Empleado

- +
@@ -69,22 +73,6 @@

Empleado

Ver
- - - - - - - - - - - - - - - -
Area Linkedin + Eliminar + + Ver +
Back
BackBrayanSanchezpracticandoSueldoMinimoxdwwlinkssss
FRONTBrayan2practicando2Sanchez2SueldoMinimoxd2wwlinkssss2
@@ -94,14 +82,13 @@

Empleado

event.preventDefault(); let transactionFormData = new FormData(form); let transactionObj = convertFormDataToTransactionObj(transactionFormData) - console.log(transactionObj); insertRowInTransactionTable(transactionObj); saveTransactionObj(transactionObj); form.reset(); }) document.addEventListener("DOMContentLoaded", function(event){ - let transactionObjArr = JSON.parse(localStorage.getItem("transactionData")); + let transactionObjArr = JSON.parse(localStorage.getItem("transactionData")) || []; transactionObjArr.forEach(function(arrayElement){ insertRowInTransactionTable(arrayElement) console.log("se inserta el elemento"); @@ -122,7 +109,9 @@

Empleado

let transactionDescription = transactionFormData.get("transactionDescription") let transactionAmount = transactionFormData.get("transactionAmount") let transactionLink = transactionFormData.get("transactionLink") + let transactionCode = transactionFormData.get("transactionCode") || null let transactionId = getNewTransactionId(); + return { "transactionType": transactionType, "transactionName": transactionName, @@ -130,7 +119,7 @@

Empleado

"transactionDescription": transactionDescription, "transactionAmount": transactionAmount, "transactionLink": transactionLink, - "transactionId": transactionId + "transactionId": JSON.parse(transactionCode) || transactionId, } } @@ -156,7 +145,7 @@

Empleado

newTypeCellRef = newTransactionRowRef.insertCell(5) newTypeCellRef.textContent = transactionObj["transactionLink"]; -// + let newDeleteCell = newTransactionRowRef.insertCell(6); let deleteButton = document.createElement("button"); deleteButton.textContent = "Eliminar"; @@ -168,8 +157,7 @@

Empleado

transactionRow.remove(); deleteTransactionObj(transactionId); }) -// -// + let newSelectCell = newTransactionRowRef.insertCell(7); let selectButton = document.createElement("button"); selectButton.textContent = "Ver"; @@ -181,26 +169,21 @@

Empleado

console.log(transactionId); getDetailObj(transactionId); }) - // } + function getDetailObj(transactionId) { let transactionDetailObj = JSON.parse(localStorage.getItem("transactionData")); - // console.log(transactionDetailObj); - console.log(JSON.parse(transactionId)); const transactDetail = transactionDetailObj.find(p => p.transactionId === JSON.parse(transactionId)); - // transactionObjArr.splice(transactionIndexInArray, 1); - // //convierto de objeto a json - // let transactionObjJson = JSON.stringify(transactDetail); - // console.log(transactDetail); - alert(JSON.stringify(` - Codigo: ${transactDetail.transactionId}, - Area: ${transactDetail.transactionType}, - Nombre: ${transactDetail.transactionName}, - Descripcion: ${transactDetail.transactionDescription}, - Saloario: ${transactDetail.transactionAmount}, - Lnkend: ${transactDetail.transactionLink}` - )); + + document.querySelector("#transactionCode").value = transactDetail.transactionId; + document.querySelector("#transactionName").value = transactDetail.transactionName; + document.querySelector("#transactionLastName").value = transactDetail.transactionLastName; + document.querySelector("#transactionDescription").value = transactDetail.transactionDescription; + document.querySelector("#transactionAmount").value = transactDetail.transactionAmount; + document.querySelector("#transactionLink").value = transactDetail.transactionLink; } + + // le paso como parametro el transactionId de la transaccion que quiero eliminar function deleteTransactionObj(transactionId){ //obtengo las transaccion de mi base de datos o en este caso el localstorage @@ -217,10 +200,21 @@

Empleado

function saveTransactionObj(transactionObj) { let myTransactionArray = JSON.parse(localStorage.getItem("transactionData")) || []; - myTransactionArray.push(transactionObj); + const data = myTransactionArray.find(i => i.transactionId === transactionObj.transactionId); +if (data) { + myTransactionArray.map(item => { + let newItem = item; + if (newItem.transactionId === transactionObj.transactionId) { + newItem = Object.assign(newItem, transactionObj); + } + return newItem; + }) +} else { + myTransactionArray.push(transactionObj); +} let transactionObjJson = JSON.stringify(myTransactionArray); localStorage.setItem("transactionData", transactionObjJson); - + form.reset(); }