Stocks/stocks: Stock page now adding options allow user to select cur…

…rent/history/all data, provide flexibility of data viewing
DynastyKids · Feb 29, 2024 · eb8d27b · eb8d27b
1 parent 5fd5fe0
commit eb8d27b
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 18 deletions.
diff --git a/public/index.html b/public/index.html
@@ -23,10 +23,9 @@ <h1>Welcome to Warehouse Electron</h1>
             <ul class="list-group">
 <!--                <li class="httpLink"><a href="stocks/labelgenerator.html"><i class="ti ti-tag"></i>Generate Labels</a></li>-->
                 <li class="list-group-item httpsLink"><a href="#" data-bs-toggle="modal" data-bs-target="#httpsModal"><i class="ti ti-tag"></i>Label Generator</a></li>
-                <li class="list-group-item"><a href="stocks/stocks.html"><i class="ti ti-packages"></i>Check Current Stocks</a></li>
-                <li class="list-group-item"><a href="#" id="checkShelf" data-bs-toggle="modal" data-bs-target="#checkShelfModal"><i class="ti ti-zoom-check"></i>Check By shelf</a></li>
+                <li class="list-group-item"><a href="stocks/stocks.html"><i class="ti ti-packages"></i>Check All Stocks</a></li>
+                <li class="list-group-item"><a href="#" id="checkShelf" data-bs-toggle="modal" data-bs-target="#checkShelfModal"><i class="ti ti-zoom-check"></i>Check stocks by shelf</a></li>
                 <li class="list-group-item"><a href="stocks/nextDispatch.html"><i class="ti ti-clipboard-list"></i>Next Dispatch</a></li>
-
             </ul>
         </div>
     </div>

diff --git a/public/loadNavbar.js b/public/loadNavbar.js
@@ -23,7 +23,7 @@ let NavbarHTML =
                             <li><a class="dropdown-item" href="/stocks/nextDispatch.html">Next Dispatch (FIFO)</a></li>
 <!--                            <li style="display: none"><a class="dropdown-item" href="/stocks/add.html">Add Stock (Unavailable)</a></li>-->
                             <li><hr class="dropdown-divider"></li>
-                            <li><a class="dropdown-item" href="/stocks/qrscan.html">Scan QR Code</a></li>
+                            <li><a class="dropdown-item" href="/stocks/qrscan.html">Scan QR Code [*Beta]</a></li>
 <!--                            <li><a class="dropdown-item" href="/stocks/qrstation.html">Station Scanner(Unavailable)</a></li>-->
                         </ul>
                     </li>

diff --git a/public/stocks/stocks.html b/public/stocks/stocks.html
@@ -11,7 +11,7 @@
 <body>
 <div class="container-fluid">
     <div class="container-fluid">
-        <h1>Current Stocks</h1>
+        <h1>Stocks List</h1>
         <br>
         <div class="container-fluid" id="maincontent">
             <nav aria-label="breadcrumb">
@@ -25,6 +25,26 @@ <h1>Current Stocks</h1>
                 <div class="loader"></div>
                 <p>Fetching Stock Data, Please Wait</p>
             </div>
+            <div>
+                <h4>Actions</h4>
+                <div class="row mb-2 ms-2">
+                    <a href="#" id="act_reloadData">Reload Data</a>
+                </div>
+                <div class="row mb-2 ms-2">
+                    <div class="form-check col-4">
+                        <input class="form-check-input" type="radio" name="stockStatusRadio" id="radio_current" checked>
+                        <label class="form-check-label">Showing Current Stock Only</label>
+                    </div>
+                    <div class="form-check col-4">
+                        <input class="form-check-input" type="radio" name="stockStatusRadio" id="radio_history">
+                        <label class="form-check-label">Show History Stocks Only</label>
+                    </div>
+                    <div class="form-check col-4">
+                        <input class="form-check-input" type="radio" name="stockStatusRadio" id="radio_all">
+                        <label class="form-check-label">Show All Stocks</label>
+                    </div>
+                </div>
+            </div>
             <table id="table" class="table " style="width: 100%">
                 <thead class="thead-light">
                 <tr>

diff --git a/public/stocks/stocks.js b/public/stocks/stocks.js
@@ -14,6 +14,8 @@ let table = new DataTable('#table', {
     scrollX: true
 });
 
+let dataList={current:[],removed:[],all:[]}
+
 document.addEventListener("DOMContentLoaded", function () {
     fetchStocksList()
 });
@@ -36,21 +38,15 @@ function fetchStocksList() {
     document.querySelector("#loadingAnimation").style = "display: flex"
     fetchStocksFromAPI().then(arrayData => {
         if (Array.isArray(arrayData.data)){
-            table.clear().draw()
+            dataList.all = arrayData.data
             arrayData.data.forEach(eachRow => {
-                table.row.add([
-                    `<a href="#" data-bs-ponumber="${(eachRow.productCode ? eachRow.productCode : "")}" class="table_action_search">${(eachRow.productCode ? eachRow.productCode : "")}</a>`
-                    + `${eachRow.productName ? '<br>' + eachRow.productName : ''}`,
-                    `${eachRow.quantity ? eachRow.quantity + (eachRow.quantityUnit ? ' ' + eachRow.quantityUnit : '') : ''}` + `${eachRow.shelfLocation ? '<br>' + eachRow.shelfLocation : ''}`,
-                    `${eachRow.bestbefore ? eachRow.bestbefore : '2999-12-31'}`, // Product without Exp Date, use max
-                    `${eachRow.bestbefore ? eachRow.bestbefore : '2999-12-31<br>(No Expire)'}`,
-                    `${eachRow.productLabel ? eachRow.productLabel : ''}` + `<br>` +
-                    `<a href="#" data-bs-ponumber="${(eachRow.POnumber ? eachRow.POnumber : "")}" class="table_action_search">${(eachRow.POnumber ? eachRow.POnumber : "")}</a>`,
-                    `<a href="#" class="table_actions editModal" data-bs-toggle="modal" data-bs-target="#editModal" data-bs-labelId="${eachRow.productLabel}">View/Edit</a>` + `<br>` +
-                    `<a href="#" class="table_actions removeModal" data-bs-toggle="modal" data-bs-target="#removeModal" data-bs-labelId="${eachRow.productLabel}">Remove</a>`,
-                ]).draw(false)
+                if (eachRow.removed === 1){
+                     dataList.removed.push(eachRow)
+                } else {
+                     dataList.current.push(eachRow)
+                }
             })
-            document.querySelector("#loadingAnimation").style = "display: none"
+            inflateTable()
         }
     }).then(function () {
         document.querySelectorAll(".table_action_search").forEach(eachElement => {
@@ -64,6 +60,50 @@ function fetchStocksList() {
     })
 }
 
+document.getElementsByName("stockStatusRadio").forEach(eachOption =>{
+    eachOption.addEventListener("change",   function (ev) {
+        document.querySelector("#loadingAnimation").style = "display: flex"
+        table.clear().draw()
+        setTimeout(function(){
+            inflateTable()
+        },200)
+    })
+})
+
+function inflateTable(){
+    let dataSet = dataList.current
+    document.getElementsByName("stockStatusRadio").forEach(eachOption =>{
+        if (eachOption.checked && eachOption.id === "radio_history") {
+            dataSet = dataList.removed
+        } else if (eachOption.checked && eachOption.id === "radio_all") {
+            dataSet = dataList.all
+        }
+    })
+    table.clear().draw()
+    dataSet.forEach(eachRow => {
+        table.row.add([
+            `<a href="#" data-bs-ponumber="${(eachRow.productCode ? eachRow.productCode : "")}" class="table_action_search">${(eachRow.productCode ? eachRow.productCode : "")}</a>`
+            + `${eachRow.productName ? '<br>' + eachRow.productName : ''}`,
+            `${eachRow.quantity ? eachRow.quantity + (eachRow.quantityUnit ? ' ' + eachRow.quantityUnit : '') : ''}` + `${eachRow.shelfLocation ? '<br>' + eachRow.shelfLocation : ''}`,
+            `${eachRow.shelfLocation ? eachRow.shelfLocation : ''}`, // Product without Exp Date, use max
+            `${eachRow.bestbefore ? eachRow.bestbefore : ''}`,
+            `${eachRow.productLabel ? eachRow.productLabel : ''}` + `<br>` +
+            `<a href="#" data-bs-ponumber="${(eachRow.POnumber ? eachRow.POnumber : "")}" class="table_action_search">${(eachRow.POnumber ? eachRow.POnumber : "")}</a>`,
+            (eachRow.removed === 0 ? `<a href="#" class="table_actions editModal" data-bs-toggle="modal" data-bs-target="#editModal" data-bs-labelId="${eachRow.productLabel}">View/Edit</a>` + `<br>` +
+                `<a href="#" class="table_actions removeModal" data-bs-toggle="modal" data-bs-target="#removeModal" data-bs-labelId="${eachRow.productLabel}">Remove</a>`:
+                `<small>Removed: ${new Date(eachRow.removeTime).toLocaleDateString()}</small>`)
+            ,
+        ]).draw(false)
+    })
+    document.querySelector("#loadingAnimation").style = "display: none"
+}
+
+document.querySelector("#act_reloadData").addEventListener("click", (ev)=>{
+    table.clear().draw()
+    fetchStocksList()
+})
+
+
 let currentEditModalItem = {}
 let editModal = document.querySelector("#editModal")
 editModal.addEventListener("show.bs.modal", async function (ev) {