feat: basic crud complete

inventory/public/css/style.css

@@ -68,6 +68,21 @@ h6 {
   isolation: isolate;
 }
 
+/*
+* remove dumb stuff
+*/
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type="number"] {
+  -moz-appearance: textfield;
+}
+
 li {
   list-style-type: none;
 }
@@ -106,6 +121,10 @@ nav {
   font-size: 1.5rem;
 }
 
+a {
+  text-decoration: none;
+}
+
 .container {
   width: 100%;
   max-width: 800px;
@@ -118,7 +137,7 @@ nav {
 
 .btn {
   padding: 0.5em 1em;
-  margin: 1em;
+  width: 100%;
 }
 
 .container.flex {
@@ -137,10 +156,12 @@ nav {
 .items-table {
   width: 80%;
   border-collapse: collapse;
+  table-layout: fixed;
 }
 
 .form-item {
   display: flex;
+  flex-direction: column;
 }
 
 .form-item.btn-row {

inventory/public/js/components/addForm.js

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

inventory/public/js/components/modal.js

@@ -5,6 +5,9 @@ function formInput(props) {
   formItemDiv.classList.add("form-item");
   const input = document.createElement("input");
   input.name = props.name;
+  input.required = true;
+  input.type = props.type;
+  if (props.type === "number") input.step = "0.01";
   const label = document.createElement("label");
   label.textContent = props.labelText;
   formItemDiv.append(label, input);
@@ -17,23 +20,30 @@ async function modal() {
   div.classList.add("modal");
   div.style = `
     display: none;
-    positino: fixed;
+    position: fixed;
     z-index: 1;
     left: 0;
     top: 0;
     width: 100%;
-    height: 50vh;
+    height: 100vh;
     overflow: auto;
     background-color: rgb(0,0,0);
     background-color: rgba(0,0,0,0.4);
+    justify-content: center;
+    align-items: center;
+    backdrop-filter: blur(15px);
   `;
 
   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 name = formInput({ labelText: "name", name: "name", type: "text" });
+  const price = formInput({
+    labelText: "price",
+    name: "price",
+    type: "number",
+  });
+  const qty = formInput({ labelText: "qty", name: "qty", type: "number" });
 
   const categories = await categoryPicker();
   const stores = await storePicker();
@@ -44,12 +54,19 @@ async function modal() {
   submitButton.textContent = "Add Item";
 
   const closeButton = document.createElement("button");
+  closeButton.classList.add("btn");
   closeButton.textContent = "Close";
+  closeButton.type = "button";
   closeButton.addEventListener("click", () => {
     div.style.display = "none";
   });
 
-  form.append(name, price, qty, categories, stores, submitButton, closeButton);
+  const btns = document.createElement("div");
+  btns.classList.add("form-item");
+  btns.style.flexDirection = "row";
+  btns.append(submitButton, closeButton);
+
+  form.append(name, price, qty, categories, stores, btns);
   div.append(form);
 
   return div;

inventory/public/js/components/selectComponent.js

@@ -22,7 +22,7 @@ async function categoryPicker() {
   formItemDiv.classList.add("form-item");
 
   const formLabel = document.createElement("label");
-  formLabel.textContent = "Categories";
+  formLabel.textContent = "categories";
 
   const select = document.createElement("select");
   select.classList.add("categories-list-modal");

inventory/public/js/script.js

@@ -4,6 +4,7 @@ import { addForm } from "./components/addForm.js";
 const newItemLink = document.querySelector("a[href='/add']");
 const modalElement = await modal();
 let modalToggle = false;
+
 async function handleDelete(e) {
   console.log(e.target);
 }
@@ -55,7 +56,13 @@ newItemLink.addEventListener("click", (e) => {
   e.preventDefault();
   modalToggle
     ? (modalElement.style.display = "none")
-    : (modalElement.style.display = "block");
+    : (modalElement.style.display = "flex");
+  modalToggle = !modalToggle;
+});
+
+modalElement.addEventListener("click", (e) => {
+  e.stopPropagation();
+  if (e.target === e.currentTarget) modalElement.style.display = "none";
   modalToggle = !modalToggle;
 });