more code

inventory/public/css/style.css

@@ -79,6 +79,79 @@ ul {
   margin: 0 auto;
 }
 
+td {
+  text-align: center;
+}
+
+th,
+td {
+  border-bottom: 1px solid #ddd;
+}
+
+tr:nth-child(even) {
+  background-color: #f2f2f2;
+}
+
+thead {
+  text-transform: uppercase;
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+nav {
+  font-size: 1.5rem;
+}
+
+.container {
+  width: 100%;
+  max-width: 800px;
+  margin: 0.25em 1em;
+}
+
 .flex {
   display: flex;
 }
+
+.btn {
+  padding: 0.5em 1em;
+  margin: 1em;
+}
+
+.container.flex {
+  width: 100%;
+}
+
+.container.flex p {
+  align-self: center;
+}
+
+.container.flex p,
+.container.flex button {
+  flex: 1;
+}
+
+.items-table {
+  width: 80%;
+  border-collapse: collapse;
+}
+
+.form-item {
+  display: flex;
+}
+
+.form-item.btn-row {
+  justify-content: center;
+  width: 100%;
+}
+
+.btn-row button {
+  flex: 1;
+}
+
+.add-form {
+  display: none;
+}

inventory/public/js/components/addForm.js

@@ -0,0 +1,14 @@
+function addForm() {
+  let buttonClicked = true;
+  const addForm = document.querySelector(".add-form");
+  const button = document.querySelector(".add-btn");
+
+  button.addEventListener("click", () => {
+    buttonClicked
+      ? (addForm.style.display = " block")
+      : (addForm.style.display = "none");
+    buttonClicked = !buttonClicked;
+  });
+}
+
+export { addForm };

inventory/public/js/script.js

@@ -1,8 +1,7 @@
 import { modal } from "./components/modal.js";
+import { addForm } from "./components/addForm.js";
 
 const newItemLink = document.querySelector("a[href='/add']");
-//
-//if (newItemLink && window.location !== "/item/") {
 const modalElement = await modal();
 let modalToggle = false;
 async function handleDelete(e) {
@@ -25,7 +24,7 @@ document.querySelectorAll(".delete-button").forEach((button) =>
 
 document.querySelectorAll(".edit-button").forEach((button) => {
   button.addEventListener("click", async (e) => {
-    const itemId = e.target.parentNode.dataset.itemId;
+    const itemId = e.target.parentNode.parentNode.dataset.itemId;
 
     window.location.href = `/item/${itemId}`;
   });
@@ -37,7 +36,8 @@ document.querySelectorAll(".delete-btn").forEach((button) => {
     const data = new URLSearchParams(new FormData());
     data.append("id", itemId);
 
-    const res = await fetch("/category", {
+    const path = window.location.pathname;
+    const res = await fetch(`${path}`, {
       method: "DELETE",
       body: data,
     });
@@ -46,7 +46,7 @@ document.querySelectorAll(".delete-btn").forEach((button) => {
     if (message.includes("error")) {
       alert("unable to delete as item is using category");
     } else {
-      window.location.href = "/category";
+      window.location.href = `${path}`;
     }
   });
 });
@@ -60,4 +60,4 @@ newItemLink.addEventListener("click", (e) => {
 });
 
 document.body.append(modalElement);
-//}
+addForm();

inventory/src/controllers/indexController.js

@@ -1,3 +1,4 @@
+const utils = require("../utils");
 const db = require("../db/queries");
 const { links } = require("../config");
 
@@ -32,6 +33,13 @@ async function storePost(req, res) {
   const r = await handlePostRequets({ reqBody: req.body, dbName: "store" });
   res.redirect("/store");
 }
+async function storeDelete(req, res) {
+  const query = await db.deleteStore(req.body.id);
+  if (query) {
+    res.send(`${query}`);
+  }
+  res.send("store deleted");
+}
 
 async function categoryGet(req, res) {
   const categories = await db.getCategories();
@@ -75,9 +83,10 @@ async function itemPost(req, res) {
   const storeId = await db.getStoreId({ name: req.body.store });
 
   let formData = req.body;
+
   const data = {
     name: formData.name,
-    price: formData.price,
+    price: utils.convertToInteger(formData.price),
     qty: formData.qty,
     store_id: storeId.store_id,
     category_id: categoryId.category_id,
@@ -142,6 +151,7 @@ module.exports = {
   itemDelete,
   storeGet,
   storePost,
+  storeDelete,
   storesGetAll,
   categoryGet,
   categoryPost,

inventory/src/db/queries.js

@@ -103,6 +103,14 @@ async function insertStore(data) {
   }
 }
 
+async function deleteStore(itemId) {
+  try {
+    await pool.query("DELETE FROM store where store_id = $1", [itemId]);
+  } catch (e) {
+    return e;
+  }
+}
+
 module.exports = {
   insertItem,
   getItemById,
@@ -113,6 +121,7 @@ module.exports = {
   getCategoryId,
   getStores,
   getStoreId,
+  deleteStore,
   insertStore,
   insertCategory,
   deleteCategory,

inventory/src/routes/indexRouter.js

@@ -8,6 +8,7 @@ indexRouter.get("/", indexController.indexGet);
 indexRouter.get("/store", indexController.storeGet);
 indexRouter.get("/stores", indexController.storesGetAll);
 indexRouter.post("/store", indexController.storePost);
+indexRouter.delete("/store", indexController.storeDelete);
 indexRouter.get("/category", indexController.categoryGet);
 indexRouter.get("/categories", indexController.categoryGetAll);
 indexRouter.post("/category", indexController.categoryPost);

inventory/src/utils.js

@@ -0,0 +1,3 @@
+exports.convertToInteger = (num) => {
+  return num * 100;
+};

inventory/src/views/addForm.ejs

@@ -1,5 +1,8 @@
-<h1><%= type %></h1>
+<h1 class="heading"><%= type %></h1>
-<form method="POST" action="/<%= type %>">
+
+<%- include("card", {items: data}) %>
+<button class="btn add-btn">New <%= type %></button>
+<form method="POST" action="/<%= type %>" class="add-form">
 	<div class="container">
 		<div class="form-item">
 			<label for="name">Name</label>
@@ -13,4 +16,3 @@
 	
 </form>
 
-<%- include("card", {items: data}) %>

inventory/src/views/base.ejs

@@ -1,5 +1,6 @@
 <%- include('header', {links: links}); %>
 
+<main>
 <% if (page === "add") { %>
 	<%- include('addForm', {type: type}); %>
 <% } else if (page === "edit") { %>
@@ -7,4 +8,5 @@
 <% } else { %>
 	<%- include('itemTable', {items: items}); %>
 <% }; %>
+</main>
 <%- include('footer'); %>

inventory/src/views/itemTable.ejs

@@ -1,4 +1,4 @@
-<table class="items">
+<table class="items-table">
 	<thead>
 		<tr>
 			<th scope="col">Name</th>
@@ -6,6 +6,8 @@
 			<th scope="col">QTY</th>
 			<th scope="col">Store</th>
 			<th scope="col">Category</th>
+			<th></th>
+			<th></th>
 		</tr>
 	</thead>	
 	<tbody>
@@ -13,12 +15,12 @@
 	<% items.forEach(item => { %>
 	<tr data-item-id="<%=item.id %>">
 		<td><%= item.name %></td>
-		<td><%= item.price %></td>
+		<td>$<%= (item.price/100).toFixed(2) %></td>
 		<td><%= item.qty %></td>
 		<td><%= item.store_name %></td>
 		<td><%= item.category_name %></td>
-		<td class="edit-button">Edit</td>
+		<td><button class="edit-button btn">Edit</button></td>
-		<td class="delete-button" data-id="<%= item.name %>">Delete</td>
+		<td><button data-id="<%= item.name %>" class="delete-button btn">Delete</button></td>
 	</tr>
 	<% }); %>
 	</tbody>