From e15ac07ee666748aa99916d6e9c93f8b0bb442e5 Mon Sep 17 00:00:00 2001 From: Jerez Solis Date: Tue, 23 Mar 2021 17:11:17 -0700 Subject: [PATCH 1/4] added update route, which includes update/cancel button. Also, added right margin on the details/delete button on the index page --- express-inmemory-crud/server.js | 98 ++++++++++++++++--------- express-inmemory-crud/views/details.pug | 3 +- express-inmemory-crud/views/index.pug | 3 +- express-inmemory-crud/views/update.pug | 25 +++++++ 4 files changed, 93 insertions(+), 36 deletions(-) create mode 100644 express-inmemory-crud/views/update.pug diff --git a/express-inmemory-crud/server.js b/express-inmemory-crud/server.js index 515e5ad..d4264ae 100644 --- a/express-inmemory-crud/server.js +++ b/express-inmemory-crud/server.js @@ -1,51 +1,81 @@ -const express = require('express') +const express = require("express"); const app = express(); -const bodyParser = require('body-parser') +const bodyParser = require("body-parser"); const port = 3000; -app.set('view engine', 'pug') -app.use(express.static('public')) +app.set("view engine", "pug"); +app.use(express.static("public")); -var urlencodedParser = bodyParser.urlencoded({ extended: false }) +var urlencodedParser = bodyParser.urlencoded({ extended: false }); -const products = [{ +const products = [ + { id: 1, name: "Cool Book", - image: "https://donrheem.com/wp-content/uploads/2016/11/Book-Placeholder.png", - description: "This is a cool book you won't regreat reading it" -}, -{ + image: + "https://donrheem.com/wp-content/uploads/2016/11/Book-Placeholder.png", + description: "This is a cool book you won't regreat reading it", + }, + { id: 2, name: "Awesome Book", - image: "https://upload.wikimedia.org/wikipedia/commons/7/72/Placeholder_book.svg", - description: "Yeat again this is a cool book you won't regreat reading it" -}, -{ + image: + "https://upload.wikimedia.org/wikipedia/commons/7/72/Placeholder_book.svg", + description: "Yeat again this is a cool book you won't regreat reading it", + }, + { id: 3, name: "Yet Book", - image: "https://donrheem.com/wp-content/uploads/2016/11/Book-Placeholder.png", - description: "Again yet again this is a cool book you won't regreat reading it" -}] + image: + "https://donrheem.com/wp-content/uploads/2016/11/Book-Placeholder.png", + description: + "Again yet again this is a cool book you won't regreat reading it", + }, +]; -app.get('/', (req, res) => { - res.render('index', { products: products }) -}) +app.get("/", (req, res) => { + res.render("index", { products: products }); +}); -app.get('/create', (req, res) => { - res.render('create') -}) +app.get("/create", (req, res) => { + res.render("create"); +}); -app.post('/create', urlencodedParser, (req, res) => { - const body = req.body; - products.push(body); - res.send(`Product count ${products.length}`) -}) +app.post("/create", urlencodedParser, (req, res) => { + const body = req.body; + products.push(body); + res.redirect("/"); +}); -app.get('/:id', (req, res) => { - const product = products.find(p => p.id == req.params.id) - res.render('details', { product: product }) -}) +// Handles post update +app.get("/update/:id", (req, res) => { + const productIndex = products.findIndex((p) => p.id == req.params.id); + const product = products[productIndex]; + res.render("update", { product: product }); +}); + +app.post("/update/:id", urlencodedParser, (req, res) => { + const productIndex = products.findIndex((p) => p.id == req.params.id); + let tempProduct = products[productIndex] + const body = req.body; + tempProduct = {...tempProduct, ...body} + + products.splice(productIndex, 1, tempProduct) + res.redirect(`/${req.params.id}`); +}); +// End of update section + +app.get("/:id", (req, res) => { + const product = products.find((p) => p.id == req.params.id); + res.render("details", { product: product }); +}); + +app.get("/delete/:id", (req, res) => { + const productIndex = products.findIndex((p) => req.params.id); + products.splice(productIndex, 1); + res.redirect("/"); +}); app.listen(port, () => { - console.log(`Server is listening on port ${port}`) -}) \ No newline at end of file + console.log(`Server is listening on port ${port}`); +}); diff --git a/express-inmemory-crud/views/details.pug b/express-inmemory-crud/views/details.pug index 466ee57..c370d4a 100644 --- a/express-inmemory-crud/views/details.pug +++ b/express-inmemory-crud/views/details.pug @@ -8,4 +8,5 @@ block content img.card-img-top(src=product.image alt=product.name) .card-body h5.card-title= product.name - p.card-text= product.description \ No newline at end of file + p.card-text= product.description + a.btn.btn-info(href='/update/' + product.id) Update diff --git a/express-inmemory-crud/views/index.pug b/express-inmemory-crud/views/index.pug index dfa81b4..7e89f86 100644 --- a/express-inmemory-crud/views/index.pug +++ b/express-inmemory-crud/views/index.pug @@ -17,4 +17,5 @@ html(lang='en') .card-body h5.card-title= product.name p.card-text= product.description - a.btn.btn-info(href='/' + product.id) Details \ No newline at end of file + a.btn.btn-info(href='/' + product.id, style="margin-right: 10px") Details + a.btn.btn-danger(href='/delete/' + product.id) Delete diff --git a/express-inmemory-crud/views/update.pug b/express-inmemory-crud/views/update.pug new file mode 100644 index 0000000..55dc925 --- /dev/null +++ b/express-inmemory-crud/views/update.pug @@ -0,0 +1,25 @@ +extend ./template.pug + +block content + a.btn.btn-primary(href='/') Home + hr + h1 Update product + hr + form(method="post" action=`/update/${product.id}`) + .form-group.row + label.col-sm-2.col-form-label(for='name') Name + .col-sm-10 + input#name.form-control(type='text' name="name" value=product.name) + .form-group.row + label.col-sm-2.col-form-label(for='image') Image + .col-sm-10 + input#image.form-control(type='text' name="image" value=product.image) + .form-group.row + label.col-sm-2.col-form-label(for='description') Description + .col-sm-10 + input#description.form-control(type='text' name="description" value=product.description) + + .form-group.row + .col-sm-10 + a.btn.btn-danger(href='/' style="margin-right: 20px") Cancel + button.btn.btn-primary(type='submit') Save From c8918b35f643d00c72cbb21c5e4d4e5e4706100c Mon Sep 17 00:00:00 2001 From: Jerez Solis Date: Tue, 23 Mar 2021 17:18:53 -0700 Subject: [PATCH 2/4] update --- express-inmemory-crud/server.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/express-inmemory-crud/server.js b/express-inmemory-crud/server.js index 9bfe331..046f4d9 100644 --- a/express-inmemory-crud/server.js +++ b/express-inmemory-crud/server.js @@ -52,6 +52,24 @@ app.post('/create', urlencodedParser, (req, res) => { res.redirect('/'); }) +// Handles post update +app.get("/update/:id", (req, res) => { + const productIndex = products.findIndex((p) => p.id == req.params.id); + const product = products[productIndex]; + res.render("update", { product: product }); +}); + +app.post("/update/:id", urlencodedParser, (req, res) => { + const productIndex = products.findIndex((p) => p.id == req.params.id); + let tempProduct = products[productIndex] + const body = req.body; + tempProduct = {...tempProduct, ...body} + + products.splice(productIndex, 1, tempProduct) + res.redirect(`/${req.params.id}`); +}); +// End of update section + app.get("/:id", (req, res) => { const product = products.find((p) => p.id == req.params.id); res.render("details", { product: product }); From b98955a21bfee8939c65bf659f44a037614fc755 Mon Sep 17 00:00:00 2001 From: Jerez Solis Date: Tue, 23 Mar 2021 17:20:23 -0700 Subject: [PATCH 3/4] update --- express-inmemory-crud/views/update.pug | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/express-inmemory-crud/views/update.pug b/express-inmemory-crud/views/update.pug index 55dc925..f415827 100644 --- a/express-inmemory-crud/views/update.pug +++ b/express-inmemory-crud/views/update.pug @@ -21,5 +21,5 @@ block content .form-group.row .col-sm-10 - a.btn.btn-danger(href='/' style="margin-right: 20px") Cancel + a.btn.btn-danger(href=`/${product.id}` style="margin-right: 20px") Cancel button.btn.btn-primary(type='submit') Save From cdd71df9b71612d44021fac2fa2414367dd45ed1 Mon Sep 17 00:00:00 2001 From: Jerez Solis Date: Tue, 23 Mar 2021 17:26:06 -0700 Subject: [PATCH 4/4] update --- express-inmemory-crud/views/details.pug | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/express-inmemory-crud/views/details.pug b/express-inmemory-crud/views/details.pug index c370d4a..8a805d8 100644 --- a/express-inmemory-crud/views/details.pug +++ b/express-inmemory-crud/views/details.pug @@ -9,4 +9,4 @@ block content .card-body h5.card-title= product.name p.card-text= product.description - a.btn.btn-info(href='/update/' + product.id) Update + a.btn.btn-info(href=`/update/${product.id}`) Update