From 17d664eaeb97b998670ca542fd725625acac7e23 Mon Sep 17 00:00:00 2001
From: Mike Smith <89040888+smiggiddy@users.noreply.github.com>
Date: Thu, 16 Jan 2025 16:28:53 -0500
Subject: [PATCH] some code and stuff
---
inventory/public/css/style.css | 84 ++++++++++
inventory/public/js/components/modal.js | 58 +++++++
.../public/js/components/selectComponent.js | 59 +++++++
inventory/public/js/script.js | 63 ++++++++
inventory/src/app.js | 3 +-
inventory/src/config.js | 6 +
inventory/src/controllers/indexController.js | 150 ++++++++++++++++++
inventory/src/db/pool.js | 11 ++
inventory/src/db/queries.js | 120 ++++++++++++++
inventory/src/db/setupDb.js | 64 ++++++++
inventory/src/routes/indexRouter.js | 17 +-
inventory/src/views/addForm.ejs | 16 ++
inventory/src/views/base.ejs | 10 ++
inventory/src/views/card.ejs | 14 ++
inventory/src/views/editForm.ejs | 34 ++++
inventory/src/views/footer.ejs | 3 +
inventory/src/views/header.ejs | 18 +++
inventory/src/views/index.html | 10 ++
inventory/src/views/itemTable.ejs | 26 +++
19 files changed, 762 insertions(+), 4 deletions(-)
create mode 100644 inventory/public/css/style.css
create mode 100644 inventory/public/js/components/modal.js
create mode 100644 inventory/public/js/components/selectComponent.js
create mode 100644 inventory/public/js/script.js
create mode 100644 inventory/src/config.js
create mode 100644 inventory/src/controllers/indexController.js
create mode 100644 inventory/src/db/pool.js
create mode 100644 inventory/src/db/queries.js
create mode 100644 inventory/src/db/setupDb.js
create mode 100644 inventory/src/views/addForm.ejs
create mode 100644 inventory/src/views/base.ejs
create mode 100644 inventory/src/views/card.ejs
create mode 100644 inventory/src/views/editForm.ejs
create mode 100644 inventory/src/views/footer.ejs
create mode 100644 inventory/src/views/header.ejs
create mode 100644 inventory/src/views/index.html
create mode 100644 inventory/src/views/itemTable.ejs
diff --git a/inventory/public/css/style.css b/inventory/public/css/style.css
new file mode 100644
index 0000000..d860dbe
--- /dev/null
+++ b/inventory/public/css/style.css
@@ -0,0 +1,84 @@
+/* 1. Use a more-intuitive box-sizing model */
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+/* 2. Remove default margin */
+* {
+ margin: 0;
+}
+
+body {
+ /* 3. Add accessible line-height */
+ line-height: 1.5;
+ /* 4. Improve text rendering */
+ -webkit-font-smoothing: antialiased;
+ font-size: 18px;
+}
+
+/* 5. Improve media defaults */
+img,
+picture,
+video,
+canvas,
+svg {
+ display: block;
+ max-width: 100%;
+}
+
+/* 6. Inherit fonts for form controls */
+input,
+button,
+textarea,
+select {
+ font: inherit;
+}
+
+/* 7. Avoid text overflows */
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ overflow-wrap: break-word;
+}
+
+/* 8. Improve line wrapping */
+p {
+ text-wrap: pretty;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ text-wrap: balance;
+}
+
+/*
+ 9. Create a root stacking context
+*/
+#root,
+#__next {
+ isolation: isolate;
+}
+
+li {
+ list-style-type: none;
+}
+
+ul {
+ display: flex;
+ justify-content: space-around;
+ max-width: 50vw;
+ margin: 0 auto;
+}
+
+.flex {
+ display: flex;
+}
diff --git a/inventory/public/js/components/modal.js b/inventory/public/js/components/modal.js
new file mode 100644
index 0000000..1e68bd8
--- /dev/null
+++ b/inventory/public/js/components/modal.js
@@ -0,0 +1,58 @@
+import { categoryPicker, storePicker } from "./selectComponent.js";
+
+function formInput(props) {
+ const formItemDiv = document.createElement("div");
+ formItemDiv.classList.add("form-item");
+ const input = document.createElement("input");
+ input.name = props.name;
+ const label = document.createElement("label");
+ label.textContent = props.labelText;
+ formItemDiv.append(label, input);
+
+ return formItemDiv;
+}
+
+async function modal() {
+ const div = document.createElement("div");
+ div.classList.add("modal");
+ div.style = `
+ display: none;
+ positino: fixed;
+ z-index: 1;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 50vh;
+ overflow: auto;
+ background-color: rgb(0,0,0);
+ background-color: rgba(0,0,0,0.4);
+ `;
+
+ const form = document.createElement("form");
+ form.method = "POST";
+ form.action = "/item";
+ const name = formInput({ labelText: "Name", name: "name" });
+ const price = formInput({ labelText: "Price", name: "price" });
+ const qty = formInput({ labelText: "QTY", name: "qty" });
+
+ const categories = await categoryPicker();
+ const stores = await storePicker();
+
+ const submitButton = document.createElement("button");
+ submitButton.type = "submit";
+ submitButton.classList.add("btn");
+ submitButton.textContent = "Add Item";
+
+ const closeButton = document.createElement("button");
+ closeButton.textContent = "Close";
+ closeButton.addEventListener("click", () => {
+ div.style.display = "none";
+ });
+
+ form.append(name, price, qty, categories, stores, submitButton, closeButton);
+ div.append(form);
+
+ return div;
+}
+
+export { modal };
diff --git a/inventory/public/js/components/selectComponent.js b/inventory/public/js/components/selectComponent.js
new file mode 100644
index 0000000..b71aa68
--- /dev/null
+++ b/inventory/public/js/components/selectComponent.js
@@ -0,0 +1,59 @@
+async function getData(path) {
+ const categories = await fetch(`/${path}`);
+ return await categories.json();
+}
+
+function selectComponent(data, select) {
+ data.forEach((opt) => {
+ const option = document.createElement("option");
+ option.value = opt.name;
+ option.textContent = opt.name;
+ select.append(option);
+ });
+}
+
+async function categoryPicker() {
+ const selectQuery = document.querySelector(".categories-list-modal");
+ if (selectQuery) document.body.remove(selectQuery);
+
+ const categories = await getData("categories");
+
+ const formItemDiv = document.createElement("div");
+ formItemDiv.classList.add("form-item");
+
+ const formLabel = document.createElement("label");
+ formLabel.textContent = "Categories";
+
+ const select = document.createElement("select");
+ select.classList.add("categories-list-modal");
+ select.name = "category";
+
+ selectComponent(categories, select);
+
+ formItemDiv.append(formLabel, select);
+ return formItemDiv;
+}
+
+async function storePicker() {
+ const selectQuery = document.querySelector(".store-list-modal");
+ if (selectQuery) document.body.remove(selectQuery);
+
+ const stores = await getData("stores");
+
+ const formItemDiv = document.createElement("div");
+ formItemDiv.classList.add("form-item");
+
+ const formLabel = document.createElement("label");
+ formLabel.textContent = "stores";
+
+ const select = document.createElement("select");
+ select.classList.add("stores-list-modal");
+ select.name = "store";
+
+ selectComponent(stores, select);
+
+ formItemDiv.append(formLabel, select);
+ return formItemDiv;
+}
+
+export { categoryPicker, storePicker };
diff --git a/inventory/public/js/script.js b/inventory/public/js/script.js
new file mode 100644
index 0000000..2a43cb9
--- /dev/null
+++ b/inventory/public/js/script.js
@@ -0,0 +1,63 @@
+import { modal } from "./components/modal.js";
+
+const newItemLink = document.querySelector("a[href='/add']");
+//
+//if (newItemLink && window.location !== "/item/") {
+const modalElement = await modal();
+let modalToggle = false;
+async function handleDelete(e) {
+ console.log(e.target);
+}
+
+document.querySelectorAll(".delete-button").forEach((button) =>
+ button.addEventListener("click", async (e) => {
+ const itemName = e.target.dataset.id;
+ const data = new URLSearchParams(new FormData());
+ data.append("name", itemName);
+
+ const res = await fetch("/item", {
+ method: "DELETE",
+ body: data,
+ });
+ window.location.href = "/";
+ }),
+);
+
+document.querySelectorAll(".edit-button").forEach((button) => {
+ button.addEventListener("click", async (e) => {
+ const itemId = e.target.parentNode.dataset.itemId;
+
+ window.location.href = `/item/${itemId}`;
+ });
+});
+
+document.querySelectorAll(".delete-btn").forEach((button) => {
+ button.addEventListener("click", async (e) => {
+ const itemId = e.target.dataset.id;
+ const data = new URLSearchParams(new FormData());
+ data.append("id", itemId);
+
+ const res = await fetch("/category", {
+ method: "DELETE",
+ body: data,
+ });
+ const message = await res.text();
+
+ if (message.includes("error")) {
+ alert("unable to delete as item is using category");
+ } else {
+ window.location.href = "/category";
+ }
+ });
+});
+
+newItemLink.addEventListener("click", (e) => {
+ e.preventDefault();
+ modalToggle
+ ? (modalElement.style.display = "none")
+ : (modalElement.style.display = "block");
+ modalToggle = !modalToggle;
+});
+
+document.body.append(modalElement);
+//}
diff --git a/inventory/src/app.js b/inventory/src/app.js
index a8d9bad..13b68b2 100644
--- a/inventory/src/app.js
+++ b/inventory/src/app.js
@@ -7,8 +7,9 @@ const port = 8080;
const { indexRouter } = require("./routes/indexRouter");
const assetsPath = path.join(path.dirname(__dirname), "public");
+app.set("view engine", "ejs");
app.set("views", path.join(__dirname, "views"));
-app.set(express.static(assetsPath));
+app.use(express.static(assetsPath));
app.use(express.urlencoded({ extended: true }));
diff --git a/inventory/src/config.js b/inventory/src/config.js
new file mode 100644
index 0000000..993bf31
--- /dev/null
+++ b/inventory/src/config.js
@@ -0,0 +1,6 @@
+exports.links = [
+ { name: "home", href: "/" },
+ { name: "store", href: "/store" },
+ { name: "categories", href: "/category" },
+ { name: "new item", href: "/add" },
+];
diff --git a/inventory/src/controllers/indexController.js b/inventory/src/controllers/indexController.js
new file mode 100644
index 0000000..7a652e0
--- /dev/null
+++ b/inventory/src/controllers/indexController.js
@@ -0,0 +1,150 @@
+const db = require("../db/queries");
+const { links } = require("../config");
+
+async function indexGet(req, res) {
+ const items = await db.getAllItemsWithRelationships();
+
+ res.render("base", {
+ links: links,
+ pageTitle: "Iventory Home",
+ items: items,
+ page: "",
+ });
+}
+
+async function storeGet(req, res) {
+ const stores = await db.getStores();
+
+ res.render("base", {
+ page: "add",
+ links: links,
+ pageTitle: "Inventory | Stores",
+ type: "store",
+ data: stores,
+ });
+}
+async function storesGetAll(req, res) {
+ const stores = await db.getStores();
+ res.json(stores);
+}
+
+async function storePost(req, res) {
+ const r = await handlePostRequets({ reqBody: req.body, dbName: "store" });
+ res.redirect("/store");
+}
+
+async function categoryGet(req, res) {
+ const categories = await db.getCategories();
+ res.render("base", {
+ page: "add",
+ links: links,
+ pageTitle: "Inventory | Categories",
+ type: "category",
+ data: categories,
+ });
+}
+async function categoryGetAll(req, res) {
+ const categories = await db.getCategories();
+ res.json(categories);
+}
+
+async function categoryPost(req, res) {
+ const r = await handlePostRequets({ reqBody: req.body, dbName: "category" });
+ if (r) {
+ console.log("something went wrong");
+ }
+ res.redirect("/category");
+}
+
+async function handlePostRequets(data) {
+ const { dbName } = data;
+ const { name } = data.reqBody;
+ let res;
+
+ if (dbName === "store") {
+ res = db.insertStore(name);
+ } else if (dbName === "category") {
+ res = db.insertCategory(name);
+ }
+
+ return res;
+}
+
+async function itemPost(req, res) {
+ const categoryId = await db.getCategoryId({ name: req.body.category });
+ const storeId = await db.getStoreId({ name: req.body.store });
+
+ let formData = req.body;
+ const data = {
+ name: formData.name,
+ price: formData.price,
+ qty: formData.qty,
+ store_id: storeId.store_id,
+ category_id: categoryId.category_id,
+ };
+
+ try {
+ const r = await db.insertItem(data);
+ if (r) throw new Error(r);
+ res.redirect("/");
+ } catch (e) {
+ console.log(e);
+ res.send({ error: e });
+ }
+}
+
+async function itemEditGet(req, res, next) {
+ const itemId = req.params.id;
+
+ const items = await db.getAllItemsWithRelationships();
+ const item = await db.getItemById(Number(itemId));
+ const categories = await db.getCategories();
+ const stores = await db.getStores();
+
+ if (item)
+ res.render("base", {
+ item: item,
+ categories: categories,
+ stores: stores,
+ pageTitle: `Inventory | Editing Item: ${item.name}`,
+ page: "edit",
+ links: links,
+ });
+}
+
+async function itemEditPost(req, res, next) {
+ const itemId = req.params.id;
+ console.log(itemId);
+ res.redirect("/");
+}
+
+async function itemDelete(req, res) {
+ console.log(req.body.name);
+ const itemId = await db.getItemByName(req.body.name);
+ if (itemId) db.deleteItem(itemId);
+ console.log(`Delted item: ${itemId}`);
+ res.redirect("deleted item: ${item}");
+}
+
+async function categoryDelete(req, res) {
+ const query = await db.deleteCategory(req.body.id);
+ if (query) {
+ res.send(`${query}`);
+ }
+ res.send("category deleted");
+}
+
+module.exports = {
+ indexGet,
+ itemPost,
+ itemEditGet,
+ itemEditPost,
+ itemDelete,
+ storeGet,
+ storePost,
+ storesGetAll,
+ categoryGet,
+ categoryPost,
+ categoryGetAll,
+ categoryDelete,
+};
diff --git a/inventory/src/db/pool.js b/inventory/src/db/pool.js
new file mode 100644
index 0000000..129f9df
--- /dev/null
+++ b/inventory/src/db/pool.js
@@ -0,0 +1,11 @@
+const { Pool } = require("pg");
+
+// Todo make this env variables
+module.exports = new Pool({
+ host: "smig-ca04.lab.smig.tech",
+ user: "odin",
+ database: "odin",
+ password: "odinproject",
+ port: 32343,
+});
+// 32343;
diff --git a/inventory/src/db/queries.js b/inventory/src/db/queries.js
new file mode 100644
index 0000000..d38ccd2
--- /dev/null
+++ b/inventory/src/db/queries.js
@@ -0,0 +1,120 @@
+const pool = require("./pool");
+
+async function getAllItems() {
+ const { rows } = await pool.query("SELECT * FROM items");
+ return rows;
+}
+
+async function getItemByName(name) {
+ const { rows } = await pool.query("SELECT * FROM items WHERE name = $1", [
+ name,
+ ]);
+ return rows[0];
+}
+
+async function getItemById(id) {
+ const { rows } = await pool.query(
+ "SELECT id, items.name, price, qty, category.name AS category, store.name AS store FROM items LEFT JOIN category on items.category_id = category.category_id LEFT JOIN store ON items.store_id = store.store_id WHERE items.id = $1 ",
+ [id],
+ );
+ return rows[0];
+}
+
+async function insertItem(data) {
+ const { name, price, qty, category_id, store_id } = data;
+ try {
+ await pool.query(
+ `INSERT INTO items (name, price, qty, category_id, store_id) VALUES ($1, $2, $3, $4, $5)`,
+ [name, price, qty, category_id, store_id],
+ );
+ return null;
+ } catch (e) {
+ return e;
+ }
+}
+
+async function deleteItem(item) {
+ try {
+ const res = await pool.query("DELETE FROM items WHERE id = $1", [item.id]);
+ return null;
+ } catch (e) {
+ return e;
+ }
+}
+
+async function getAllItemsWithRelationships() {
+ const { rows } = await pool.query(
+ `SELECT items.id, items.name, items.price, items.qty, category.name AS category_name, store.name AS store_name FROM items
+ LEFT JOIN category ON items.category_id = category.category_id
+ LEFT JOIN store ON items.store_id = store.store_id;`,
+ );
+
+ return rows;
+}
+
+async function getCategories() {
+ const { rows } = await pool.query("SELECT * FROM category");
+ return rows;
+}
+
+async function getCategoryId(item) {
+ const { rows } = await pool.query("SELECT * FROM category WHERE name = $1", [
+ item.name,
+ ]);
+ return rows[0];
+}
+
+async function insertCategory(data) {
+ try {
+ await pool.query("INSERT INTO category (name) VALUES ($1)", [data]);
+ return null;
+ } catch (e) {
+ return e;
+ }
+}
+
+async function deleteCategory(itemId) {
+ try {
+ await pool.query("DELETE FROM category WHERE category_id = $1", [itemId]);
+ return null;
+ } catch (e) {
+ return e;
+ }
+}
+
+async function getStores() {
+ const { rows } = await pool.query("SELECT * FROM store");
+ return rows;
+}
+
+async function getStoreId(item) {
+ const { rows } = await pool.query("SELECT * FROM store WHERE name = $1", [
+ item.name,
+ ]);
+ return rows[0];
+}
+
+async function insertStore(data) {
+ try {
+ await pool.query("INSERT INTO store (name) VALUES ($1)", [data]);
+ return null;
+ } catch (e) {
+ return e;
+ }
+}
+
+module.exports = {
+ insertItem,
+ getItemById,
+ getAllItems,
+ getItemByName,
+ deleteItem,
+ getCategories,
+ getCategoryId,
+ getStores,
+ getStoreId,
+ insertStore,
+ insertCategory,
+ deleteCategory,
+ getAllItemsWithRelationships,
+};
diff --git a/inventory/src/db/setupDb.js b/inventory/src/db/setupDb.js
new file mode 100644
index 0000000..b745916
--- /dev/null
+++ b/inventory/src/db/setupDb.js
@@ -0,0 +1,64 @@
+#!/usr/bin/env node
+
+const { Client } = require("pg");
+
+const CREATE_DB = `
+CREATE DATABASE inventory_app;
+`;
+
+const SQL = `
+
+CREATE TABLE IF NOT EXISTS store (
+ store_id INTEGER PRIMARY KEY GENERATED BY DEFAULT AS IDENTITY,
+ name varchar(80) NOT NULL UNIQUE
+);
+
+CREATE TABLE IF NOT EXISTS category (
+ category_id INTEGER PRIMARY KEY GENERATED BY DEFAULT AS IDENTITY,
+ name varchar(40) NOT NULL UNIQUE
+);
+
+CREATE TABLE IF NOT EXISTS items (
+ id INTEGER PRIMARY KEY GENERATED BY DEFAULT AS IDENTITY,
+ name VARCHAR(80) NOT NULL,
+ price INTEGER,
+ qty INTEGER,
+ store_id INTEGER REFERENCES store (store_id),
+ category_id INTEGER REFERENCES category (category_id)
+);
+`;
+
+const POPULATE = `
+INSERT INTO category (name)
+VALUES ('grocery'), ('clothing'), ('household'), ('cleaning'), ('misc');
+
+INSERT INTO store (name)
+VALUES ('target'), ('wegmans'), ('giant');
+
+INSERT INTO items (name, price, qty, store_id, category_id)
+VALUES ('paper towels', '399', '3', '2','3' );
+`;
+
+async function main() {
+ console.log("DB Creation script");
+
+ const client = new Client({
+ host: "smig-ca05.lab.smig.tech",
+ user: "odin",
+ database: "odin",
+ password: "odinproject",
+ port: 32343,
+ });
+
+ try {
+ await client.connect();
+ await client.query(POPULATE);
+ await client.end();
+ } catch (e) {
+ console.log(`ERROR: ${e}`);
+ process.exit(1);
+ }
+ console.log("Done");
+}
+
+main();
diff --git a/inventory/src/routes/indexRouter.js b/inventory/src/routes/indexRouter.js
index 7302a08..f6cbc4e 100644
--- a/inventory/src/routes/indexRouter.js
+++ b/inventory/src/routes/indexRouter.js
@@ -1,9 +1,20 @@
const { Router } = require("express");
+const indexController = require("../controllers/indexController");
const indexRouter = Router();
-indexRouter.get("/", (req, res) => {
- res.send("index");
-});
+indexRouter.get("/", indexController.indexGet);
+//indexRouter.post("/add")
+indexRouter.get("/store", indexController.storeGet);
+indexRouter.get("/stores", indexController.storesGetAll);
+indexRouter.post("/store", indexController.storePost);
+indexRouter.get("/category", indexController.categoryGet);
+indexRouter.get("/categories", indexController.categoryGetAll);
+indexRouter.post("/category", indexController.categoryPost);
+indexRouter.delete("/category", indexController.categoryDelete);
+indexRouter.post("/item", indexController.itemPost);
+indexRouter.get("/item/:id", indexController.itemEditGet);
+indexRouter.post("/item/:id", indexController.itemEditPost);
+indexRouter.delete("/item", indexController.itemDelete);
module.exports = { indexRouter };
diff --git a/inventory/src/views/addForm.ejs b/inventory/src/views/addForm.ejs
new file mode 100644
index 0000000..2019356
--- /dev/null
+++ b/inventory/src/views/addForm.ejs
@@ -0,0 +1,16 @@
+<%= type %>
+
+
+<%- include("card", {items: data}) %>
diff --git a/inventory/src/views/base.ejs b/inventory/src/views/base.ejs
new file mode 100644
index 0000000..f41daaf
--- /dev/null
+++ b/inventory/src/views/base.ejs
@@ -0,0 +1,10 @@
+<%- include('header', {links: links}); %>
+
+<% if (page === "add") { %>
+ <%- include('addForm', {type: type}); %>
+<% } else if (page === "edit") { %>
+ <%- include('editForm', {item: item, categories: categories, stores: stores}); %>
+<% } else { %>
+ <%- include('itemTable', {items: items}); %>
+<% }; %>
+<%- include('footer'); %>
diff --git a/inventory/src/views/card.ejs b/inventory/src/views/card.ejs
new file mode 100644
index 0000000..285e240
--- /dev/null
+++ b/inventory/src/views/card.ejs
@@ -0,0 +1,14 @@
+
+ <% items.forEach(item => { %>
+
+
+ <%= item.name %>
+
+
+ <% let itemId; %>
+ <% if (item.category_id) {itemId = item.category_id} else { itemId = item.store_id } %>
+
+
+
+ <% }); %>
+
+