Added ability to edit item records

assets/styles/gargoyle.scss

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

index.js

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

src/routes/item.js

@@ -1,17 +1,6 @@
 const db = require('../models');
 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
 exports.getAdd = async function (req, res) {
   res.render('item/add.twig');
@@ -33,3 +22,51 @@ exports.postAdd = async function (req, res) {
 
   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);
+};

views/index.twig

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

views/item/edit.twig

@@ -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 %}

views/item/view.twig

@@ -7,7 +7,10 @@
 <!-- page header -->
 <header id="item-header" class="row">
   <div class="columns twelve">
+    <span>
       <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-updated-date">Last updated at: {{ item.updatedAt }}</h4>
   </div>