Skip to content

Commit

Permalink
chore: CRUD funcionando y conectado al backend
Browse files Browse the repository at this point in the history
  • Loading branch information
@coxmau77
coxmau77 committed Jul 1, 2024
1 parent 583cd4d commit ac83700
Show file tree
Hide file tree
Showing 5 changed files with 216 additions and 91 deletions.
51 changes: 45 additions & 6 deletions controller/product.controller.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,19 @@
const dataBase = require('../db/bd');

// createProduct
// getAllProducts
// editProduct
// deleteProduct
const createProduct = (request, response) => {
const { sku, titulo, descripcion, precio } = request.body;
const SQL = 'INSERT INTO products (sku,titulo,descripcion,precio) VALUES (?,?,?,?)';

dataBase.query(SQL, [sku, titulo, descripcion, precio], (error, result) => {

if (error) throw error;

response.json({
message: "Producto creado con éxito",
idProduct: result.insertId
});
});
};

const getAll = (request, response) => {

Expand All @@ -25,6 +35,35 @@ const getAll = (request, response) => {

response.json(result)
});
}
};

const deleteProduct = (request, response) => {
const { id } = request.params;
const SQL = 'DELETE FROM products WHERE id = ?';

dataBase.query(SQL, [id], (error, result) => {
if (error) {
return response.status(500).json({ mensaje: 'Error NO EXISTE el producto', error });
}

response.json({
message: "EL productos se eliminó correctamente."
});
});
};

const uploadProduct = (request, response) => {
const { id } = request.params;
const { sku, titulo, descripcion, precio } = request.body;

const SQL = 'UPDATE products SET sku = ?, titulo = ?, descripcion = ?, precio = ? WHERE id = ?';
dataBase.query(SQL, [sku, titulo, descripcion, precio, id], (error, result) => {
if (error) throw error;

response.json({
message: "Producto editado exitosamente!"
});
});
};

module.exports = { getAll }
module.exports = { getAll, deleteProduct, uploadProduct, createProduct }
7 changes: 5 additions & 2 deletions public/js/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,8 +97,11 @@ document.addEventListener('DOMContentLoaded', () => {
<div class="action p-2">
<span>ID: ${usuario.id} | nombre: ${usuario.nombre} | apellido: ${usuario.apellido} | mail: ${usuario.mail}</span>
<div>
<button class="update btn btn-info" data-id="${usuario.id}" data-nombre="${usuario.nombre}" data-apellido="${usuario.apellido}" data-mail="${usuario.mail}">Actualizar</button>
<button class="delete btn btn-danger" data-id="${usuario.id}">Eliminar</button>
<button class="delete btn btn-danger" data-id="${usuario.id}">Eliminar</button>
<button class="update btn btn-info" data-id="${usuario.id}" data-nombre="${usuario.nombre}" data-apellido="${usuario.apellido}" data-mail="${usuario.mail}">Actualizar</button>
</div>
</div>
`;
Expand Down
125 changes: 88 additions & 37 deletions public/js/shop.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,40 @@
console.log("Aqui vemos y agregamos productos");

const listaDeProductos = document.getElementById('product_list');
const editarProductoForm = document.getElementById('editarProductoForm');
const crearProductoForm = document.getElementById('crearProductoForm');

// Crear producto
crearProductoForm.addEventListener('submit', async event => {
event.preventDefault();

const formData = new FormData(crearProductoForm);

// sku, titulo, descripcion, precio
const data = {
sku: formData.get('sku'),
titulo: formData.get('titulo'),
descripcion: formData.get('descripcion'),
precio: formData.get('precio')
};

// console.log(data)

// Enviar la data al backend
const response = await fetch('product/create', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
});

const result = await response.json();
crearProductoForm.reset();
listarProductos();
alert(result.message)

});

// Listar todos los productos
async function listarProductos() {
Expand All @@ -22,28 +56,28 @@ async function listarProductos() {
col.classList.add('col');

let structure = `
<div class="card shadow-sm" data-bs-toggle="modal" data-bs-target="#id_product_01">
<div class="card shadow-sm">
<!-- Imagen principal -->
<img src="./images/web-images/image_placeholader.png" alt="..." width="100%"
class="card-img-top mx-auto d-block">
class="card-img-top mx-auto d-block" data-bs-toggle="modal" data-bs-target="#${producto.sku}">
<div class="card-body">
<h3 class="my-2 modal-title" id="exampleModalLabel">${producto.titulo}</h3>
<h4 class="my-2 modal-title" id="exampleModalLabel">${producto.sku}</h4>
<p class="card-text">${producto.descripcion}</p>
<h3 class="my-2 modal-title" id="exampleModalLabel" data-bs-toggle="modal" data-bs-target="#${producto.sku}">${producto.titulo}</h3>
<h4 class="my-2 modal-title" id="exampleModalLabel" data-bs-toggle="modal" data-bs-target="#${producto.sku}">${producto.sku}</h4>
<p class="card-text" data-bs-toggle="modal" data-bs-target="#${producto.sku}">${producto.descripcion}</p>
<div class="d-flex justify-content-center align-items-center">
<h1 class="card-title pricing-card-title">
<h1 class="card-title pricing-card-title" data-bs-toggle="modal" data-bs-target="#${producto.sku}">
<small class="text-muted fw-light">AR$</small>
${producto.precio}
</h1>
</div>
<div class="d-flex justify-content-end align-items-center pt-2">
<!-- <small class="text-body-secondary">9 mins</small> -->
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-primary">View</button>
<button type="button" class="btn btn-sm btn-outline-primary">Edit</button>
<div class="rounded-pill">
<button type="button" class="delete btn btn-sm btn-outline-danger rounded-pill" data-id="${producto.id}">Eliminar</button>
<button type="button" class="update btn btn-sm btn-outline-primary rounded-pill" data-id="${producto.id}" data-sku="${producto.sku}" data-titulo="${producto.titulo}" data-descripcion="${producto.descripcion}" data-precio="${producto.precio}" data-bs-toggle="modal"
data-bs-target="#editProduct">Editar</button>
</div>
</div>
Expand All @@ -52,7 +86,7 @@ async function listarProductos() {
</div>
<!-- Modal -->
<div class="modal fade" id="id_product_01" data-bs-backdrop="static" tabindex="-1"
<div class="modal fade" id="${producto.sku}" data-bs-backdrop="static" tabindex="-1"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl">
Expand All @@ -70,19 +104,6 @@ async function listarProductos() {
</div>
<div class="col-12 col-md-7">
<div class="col p-4 d-flex flex-column position-static">
<!-- Editar / Eliminar -->
<div class="my-2 d-flex justify-content-end">
<a href="#"
class="badge rounded-pill bg-secondary py-2 px-3 text-light bg-opacity-25">
Editar
</a>
<a href="#"
class="badge rounded-pill bg-secondary py-2 px-3 text-light bg-opacity-25">
Eliminar
</a>
</div>
<h3 class="my-2 modal-title" id="exampleModalLabel">
${producto.titulo}
<span class="badge bg-primary bg-primary">SKU# ${producto.sku}</span>
Expand Down Expand Up @@ -110,35 +131,39 @@ async function listarProductos() {
</div>
`

col.innerHTML = structure
col.innerHTML = structure;

listaDeProductos.appendChild(col);
// listaDeProductos.insertAdjacentHTML('afterbegin', col.innerHTML);
// listaDeProductos.insertAdjacentHTML('beforeend', col.innerHTML);
});

// Actualizar usuario
// Actualizar Producto
document.querySelectorAll('.update').forEach(button => {
button.addEventListener('click', event => {

console.log("click update");

const id = event.target.getAttribute('data-id');
const nombre = event.target.getAttribute('data-nombre');
const apellido = event.target.getAttribute('data-apellido');
const mail = event.target.getAttribute('data-mail');
const sku = event.target.getAttribute('data-sku');
const titulo = event.target.getAttribute('data-titulo');
const descripcion = event.target.getAttribute('data-descripcion');
const precio = event.target.getAttribute('data-precio');

document.getElementById('editID').value = id;
document.getElementById('editNombre').value = nombre;
document.getElementById('editApellido').value = apellido;
document.getElementById('editMail').value = mail;

editarUsuarioForm.classList.remove('hidden');
document.getElementById('editSku').value = sku;
document.getElementById('editTitulo').value = titulo;
document.getElementById('editDescripcion').value = descripcion;
document.getElementById('editPrecio').value = precio;
});
});

// Eliminar usuario
document.querySelectorAll('.delete').forEach(button => {
button.addEventListener('click', async event => {

console.log("click en delete");

const id = event.target.getAttribute('data-id');

const response = await fetch(`/product/${id}`, {
Expand All @@ -147,12 +172,38 @@ async function listarProductos() {

const result = await response.json();

// alert(result.message);
confirm(result.message)
listarProductos();
// confirm(result.message);
alert(result.message);
});
});

}

// Actualizar producto
editarProductoForm.addEventListener('submit', async event => {
event.preventDefault();
const formData = new FormData(editarProductoForm);
const id = formData.get('editID');

const data = {
titulo: formData.get('editTitulo'),
sku: formData.get('editSku'),
descripcion: formData.get('editDescripcion'),
precio: formData.get('editPrecio')
};

const response = await fetch(`product/${id}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
});

const result = await response.json();
editarProductoForm.reset();
listarProductos();
alert(result.message);
});

listarProductos();
Loading

0 comments on commit ac83700

Please sign in to comment.