some code and stuff

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;
+}

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 };

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 };

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);
+//}