Added ability to edit item records

This commit is contained in:
Gregory Ballantine 2022-11-03 22:08:45 -04:00
parent 6c64e6c9a1
commit cb5083d0d7
6 changed files with 132 additions and 13 deletions

View File

@ -89,7 +89,9 @@ input[type="submit"].button-primary{
#item-header{ #item-header{
margin-bottom: 25px; margin-bottom: 25px;
h1{ h1,
p{
display: inline-block;
margin-bottom: 7px; margin-bottom: 7px;
} }

View File

@ -29,6 +29,8 @@ app.get('/', homeRoutes.getIndex);
app.get('/item/add', itemRoutes.getAdd); app.get('/item/add', itemRoutes.getAdd);
app.post('/item/add', itemRoutes.postAdd); app.post('/item/add', itemRoutes.postAdd);
app.get('/item/:id', itemRoutes.getItem); app.get('/item/:id', itemRoutes.getItem);
app.get('/item/:id/edit', itemRoutes.getItemEdit);
app.post('/item/:id/edit', itemRoutes.postItemEdit);
// start app // start app
app.listen(port, () => { app.listen(port, () => {

View File

@ -1,17 +1,6 @@
const db = require('../models'); const db = require('../models');
const Item = db.items; const Item = db.items;
// GET - /item/{name}
exports.getItem = async function (req, res) {
const item = await Item.findAll({ where: {
id: req.params.id,
}});
res.render('item/view.twig', {
item: item[0],
});
};
// GET - /item/add // GET - /item/add
exports.getAdd = async function (req, res) { exports.getAdd = async function (req, res) {
res.render('item/add.twig'); res.render('item/add.twig');
@ -33,3 +22,51 @@ exports.postAdd = async function (req, res) {
res.redirect('/'); res.redirect('/');
}; };
// GET - /item/{id}
exports.getItem = async function (req, res) {
const item = await Item.findAll({ where: {
id: req.params.id,
}});
res.render('item/view.twig', {
item: item[0],
});
};
// GET - /item/{id}/edit
exports.getItemEdit = async function (req, res) {
const item = await Item.findAll({ where: {
id: req.params.id,
}});
res.render('item/edit.twig', {
item: item[0],
});
};
// POST - /item/{id}/edit
exports.postItemEdit = async function (req, res) {
// fetch item from DB
const itemSearch = await Item.findAll({ where: {
id: req.params.id,
}});
// retrieve the item record from the array for ease of use
let item = itemSearch[0];
// update item attributes
item.name = req.body.item_name;
item.serialNumber = req.body.item_serial;
item.skuNumber = req.body.item_sku;
item.purchasedFrom = req.body.item_purchase_from;
item.purchasedAt = req.body.item_purchase_date;
item.manufacturer = req.body.item_manufacturer;
item.type = req.body.item_type;
// save attribute changes
await item.save();
// redirect user to item page
res.redirect('/item/' + item.id);
};

View File

@ -40,6 +40,7 @@
<th>Name</th> <th>Name</th>
<th>Manufacturer</th> <th>Manufacturer</th>
<th>Type</th> <th>Type</th>
<th>Updated at</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -48,6 +49,7 @@
<td><a href="/item/{{ item.id }}">{{ item.name }}</a></td> <td><a href="/item/{{ item.id }}">{{ item.name }}</a></td>
<td>{{ item.manufacturer }}</td> <td>{{ item.manufacturer }}</td>
<td>{{ item.type }}</td> <td>{{ item.type }}</td>
<td>{{ item.updatedAt | date("m/d/Y h:i:s A") }}</td>
</tr> </tr>
{% endfor %} {% endfor %}
</tbody> </tbody>

73
views/item/edit.twig Normal file
View File

@ -0,0 +1,73 @@
{% extends 'layout.twig' %}
{% block title %}Edit Item{% endblock %}
{% block content %}
<!-- page header -->
<header class="row">
<div class="columns twelve">
<h1>Editing "{{ item.name }}"</h1>
</div>
</header>
<section class="row">
<div class="columns twelve">
<form action="/item/{{ item.id }}/edit" method="POST">
<div class="row">
<div class="columns twelve">
<label for="item_name">Item name:</label>
<input class="u-full-width" type="text" placeholder="My new item" id="item_name" name="item_name" value="{{ item.name }}" required>
</div>
</div>
<div class="row">
<div class="six columns">
<label for="item_serial">Serial number:</label>
<input class="u-full-width" type="text" placeholder="0123456789" id="item_serial" name="item_serial" value="{{ item.serialNumber }}">
</div>
<div class="six columns">
<label for="item_sku">SKU number:</label>
<input class="u-full-width" type="text" placeholder="ABC12345678" id="item_sku" name="item_sku" value="{{ item.skuNumber }}">
</div>
</div>
<div class="row">
<div class="six columns">
<label for="item_purchase_from">Purchased from:</label>
<input class="u-full-width" type="text" placeholder="Newegg" id="item_purchase_from" name="item_purchase_from" value="{{ item.purchasedFrom }}">
</div>
<div class="six columns">
<label for="item_purchase_date">Purchased at:</label>
<input class="u-full-width" type="datetime-local" id="item_purchase_date" name="item_purchase_date" value="{{ item.purchasedAt }}">
</div>
</div>
<div class="row">
<div class="six columns">
<label for="item_manufacturer">Manufacturer:</label>
<input class="u-full-width" type="text" placeholder="Manufacturer" id="item_manufacturer" name="item_manufacturer" value="{{ item.manufacturer }}">
</div>
<div class="six columns">
<label for="item_type">Item type</label>
<select class="u-full-width" id="item_type" name="item_type" value="{{ item.type }}">
<option value="cpu">Processor</option>
<option value="motherboard">Motherboard</option>
<option value="memory">Memory (RAM)</option>
<option value="psu">Power Supply</option>
<option value="case">Case</option>
<option value="storage">Storage Device</option>
<option value="gpu">Graphics Card</option>
</select>
</div>
</div>
<input class="button-primary u-full-width" type="submit" value="Submit">
</form>
</div>
</section>
{% endblock %}

View File

@ -7,7 +7,10 @@
<!-- page header --> <!-- page header -->
<header id="item-header" class="row"> <header id="item-header" class="row">
<div class="columns twelve"> <div class="columns twelve">
<span>
<h1>{{ item.name }}</h1> <h1>{{ item.name }}</h1>
<p><a href="/item/{{ item.id }}/edit"><i class="fa-solid fa-pen-to-square"></i> Edit</a></p>
</span>
<h4 class="item-added-date">Item added at: {{ item.createdAt }}</h4> <h4 class="item-added-date">Item added at: {{ item.createdAt }}</h4>
<h4 class="item-updated-date">Last updated at: {{ item.updatedAt }}</h4> <h4 class="item-updated-date">Last updated at: {{ item.updatedAt }}</h4>
</div> </div>