Implemented Searching in receipts barcode link

modal

application/receipts/receipts_api.py

@@ -43,8 +43,9 @@ def getItems():
         limit = int(request.args.get('limit', 10))
         site_name = session['selected_site']
         offset = (page - 1) * limit
-        sort_order = "ID ASC"
+        search_string = f"%{str(request.args.get('search_string', ""))}%"
-        payload = ("%%", limit, offset, sort_order)
+        sort_order = "item_name ASC"
+        payload = (search_string, limit, offset, sort_order)
         recordset, count = receipts_database.getItemsWithQOH(site_name, payload)
         return jsonify({"items":recordset, "end":math.ceil(count['count']/limit), "error":False, "message":"items fetched succesfully!"})
     return jsonify({"items":recordset, "end":math.ceil(count['count']/limit), "error":True, "message":"There was an error with this GET statement"})

application/receipts/static/js/receiptHandler.js

@@ -36,32 +36,6 @@ async function replenishFields(receipt) {
     }
 }
 
-async function checkAPI(line_id, barcode) {
-    console.log(barcode)
-    const response = await fetch(`/receipts/api/checkAPI`, {
-        method: 'POST',
-        headers: {
-                'Content-Type': 'application/json',
-            },
-        body: JSON.stringify({
-            line_id: line_id,
-            barcode: barcode
-        }),
-    });
-    data = await response.json()
-    message_type = "primary"
-    if(data.error){
-        message_type = "danger"
-    }
-    UIkit.notification({
-        message: data.message,
-        status: message_type,
-        pos: 'top-right',
-        timeout: 5000
-    });
-    await refreshReceipt()
-}
-
 async function replenishLinesTable(receipt_items) {
     let linesTableBody = document.getElementById("linesTableBody")
     linesTableBody.innerHTML = ""
@@ -102,16 +76,6 @@ async function replenishLinesTable(receipt_items) {
         
         let operationsCell = document.createElement('td')
 
-        let apiOp = document.createElement('a')
-
-        if(receipt_items[i].type === "new sku"){
-            apiOp.style = "margin-right: 5px;"
-            apiOp.setAttribute('class', 'uk-button uk-button-small uk-button-default')
-            apiOp.setAttribute('uk-icon', 'icon: pull')
-            apiOp.onclick = async function () {
-                await checkAPI(receipt_items[i].id, receipt_items[i].barcode)
-            }
-        }
 
         let linkOp = document.createElement('a')
         linkOp.style = "margin-right: 5px;"
@@ -154,11 +118,6 @@ async function replenishLinesTable(receipt_items) {
 
 
         if (receipt_items[i].type === "new sku"){
-            operationsCell.append(apiOp)
-            operationsCell.append(linkOp)
-        }
-
-        if (receipt_items[i].type === "api"){
             operationsCell.append(linkOp)
         }
 
@@ -183,29 +142,6 @@ async function replenishLinesTable(receipt_items) {
     }
 }
 
-async function replenishItemsTable(items) {
-    let itemsTableBody = document.getElementById("itemsTableBody")
-    itemsTableBody.innerHTML = ""
-
-    for(let i = 0; i < items.length; i++){
-        let tableRow = document.createElement('tr')
-
-        let idCell = document.createElement('td')
-        idCell.innerHTML = items[i].id
-        let barcodeCell = document.createElement('td')
-        barcodeCell.innerHTML = items[i].barcode
-        let nameCell = document.createElement('td')
-        nameCell.innerHTML = items[i].item_name
-        
-        tableRow.onclick = async function() {
-            await addSKULine(items[i].id)
-        }
-
-        tableRow.append(idCell, barcodeCell, nameCell)
-        itemsTableBody.append(tableRow)
-    }
-}
-
 async function replenishFilesCards(files) {
     let fileCards = document.getElementById('fileCards')
     fileCards.innerHTML = ""
@@ -264,15 +200,6 @@ async function openCustomModal() {
     
 }
 
-async function openSKUModal() {
-    pagination_current = 1
-    let items = await getItems()
-    await replenishItemsTable(items)
-    await updateItemsPaginationElement()
-    UIkit.dropdown(document.getElementById("addLineDropDown")).hide(false);
-    UIkit.modal(document.getElementById("itemsModal")).show();
-}
-
 async function openLineEditModal(line_data) {
     console.log(line_data)
     document.getElementById('lineName').value = line_data.name
@@ -437,6 +364,7 @@ async function getReceipt(id) {
     return receipt;
 }
 
+// SKU Modal functions
 let items_limit = 50;
 async function getItems() {
     console.log("getting items")
@@ -533,7 +461,39 @@ async function updateItemsPaginationElement() {
     paginationElement.append(nextElement)
 }
 
-// Select Vedor functions
+async function openSKUModal() {
+    pagination_current = 1
+    let items = await getItems()
+    await replenishItemsTable(items)
+    await updateItemsPaginationElement()
+    UIkit.dropdown(document.getElementById("addLineDropDown")).hide(false);
+    UIkit.modal(document.getElementById("itemsModal")).show();
+}
+
+async function replenishItemsTable(items) {
+    let itemsTableBody = document.getElementById("itemsTableBody")
+    itemsTableBody.innerHTML = ""
+
+    for(let i = 0; i < items.length; i++){
+        let tableRow = document.createElement('tr')
+
+        let idCell = document.createElement('td')
+        idCell.innerHTML = items[i].id
+        let barcodeCell = document.createElement('td')
+        barcodeCell.innerHTML = items[i].barcode
+        let nameCell = document.createElement('td')
+        nameCell.innerHTML = items[i].item_name
+        
+        tableRow.onclick = async function() {
+            await addSKULine(items[i].id)
+        }
+
+        tableRow.append(idCell, barcodeCell, nameCell)
+        itemsTableBody.append(tableRow)
+    }
+}
+
+// Select Vendor functions
 let vendor_limit = 25
 let vendor_current_page = 1
 let vendor_end_page = 10
@@ -693,193 +653,19 @@ async function updateVendorsPaginationElement() {
     paginationElement.append(nextElement)
 }
 
-// Select Vedor functions
-let links_limit = 25
-let links_current_page = 1
-let links_end_page = 10
-async function getLinkedLists() {
-    const url = new URL('/receipts/api/getLinkedLists', window.location.origin);
-    url.searchParams.append('page', vendor_current_page);
-    url.searchParams.append('limit', vendor_limit);
-    const response = await fetch(url);
-    data =  await response.json();
-    links_end_page = data.end
-    return data.items;
-}
-
-async function postLinkedItem(receipt_item_id, link_list_id, conv_factor) {
-    const response = await fetch(`/receipts/api/postLinkedItem`, {
-        method: 'POST',
-        headers: {
-                'Content-Type': 'application/json',
-            },
-        body: JSON.stringify({
-            receipt_item_id: receipt_item_id,
-            link_list_id: link_list_id,
-            conv_factor: conv_factor
-        }),
-    });
-    data = await response.json()
-    message_type = "primary"
-    if(data.error){
-        message_type = "danger"
-    }
-    UIkit.notification({
-        message: data.message,
-        status: message_type,
-        pos: 'top-right',
-        timeout: 5000
-    });
-    await refreshReceipt()
-    UIkit.modal(document.getElementById("linksModal")).hide();
-}
-
-async function openLinksSelectModal(receipt_item_id) {
-    let links = await getLinkedLists();
-    await replenishLinksTableBody(links, receipt_item_id);
-    await updateLinksPaginationElement()
-    UIkit.modal(document.getElementById("linksModal")).show();
-}
-
-async function replenishLinksTableBody(links, receipt_item_id) {
-    let linksTableBody = document.getElementById('linksTableBody')
-    linksTableBody.innerHTML = ""
-
-    for(let i=0; i < links.length; i++){
-        let tableRow = document.createElement('tr')
-
-        let idCell = document.createElement('td')
-        idCell.innerHTML = links[i].id
-
-        let barcodeCell = document.createElement('td')
-        barcodeCell.innerHTML = links[i].barcode
-
-        let nameCell = document.createElement('td')
-        nameCell.innerHTML = links[i].item_name
-        
-        let convFactorCell = document.createElement('td')
-
-        let conv_factor_input = document.createElement('input')
-        conv_factor_input.setAttribute('class', 'uk-input')
-        conv_factor_input.setAttribute('id', `${links[i].id}_conv_factor`)
-
-        convFactorCell.append(conv_factor_input)
-
-        let addCell = document.createElement('td')
-
-        let addbutton = document.createElement('button')
-        addbutton.setAttribute('class', 'uk-button')
-        addbutton.innerHTML = "Select"
-        addbutton.onclick = async function() {
-            let conv = document.getElementById(`${links[i].id}_conv_factor`)
-            if (!conv.value == ""){
-                conv.classList.remove('uk-form-danger')
-                let conv_factor = parseFloat(conv.value)
-                await postLinkedItem(receipt_item_id, links[i].id, conv_factor)
-            } else {
-                conv.classList.add('uk-form-danger')
-            }
-        }
-
-        addCell.append(addbutton)
-
-        tableRow.append(idCell, barcodeCell, nameCell, convFactorCell, addCell)
-        linksTableBody.append(tableRow)
-    }
-
-}
-
-async function setLinksPage(pageNumber) {
-    links_current_page = pageNumber;
-    let links = await getLinkedLists()
-    await updateLinksPaginationElement()
-    await replenishLinksTableBody(links)
-}
-
-async function updateLinksPaginationElement() {
-    let paginationElement = document.getElementById("linksPage");
-    paginationElement.innerHTML = "";
-    // previous
-    let previousElement = document.createElement('li')
-    if(links_current_page<=1){
-        previousElement.innerHTML = `<a><span uk-pagination-previous></span></a>`;
-        previousElement.classList.add('uk-disabled');
-    }else {
-        previousElement.innerHTML = `<a onclick="setLinksPage(${links_current_page-1})"><span uk-pagination-previous></span></a>`;
-    }
-    paginationElement.append(previousElement)
-    
-    //first
-    let firstElement = document.createElement('li')
-    if(links_current_page<=1){
-        firstElement.innerHTML = `<a><strong>1</strong></a>`;
-        firstElement.classList.add('uk-disabled');
-    }else {
-        firstElement.innerHTML = `<a onclick="setLinksPage(1)">1</a>`;
-    }
-    paginationElement.append(firstElement)
-    
-    // ...
-    if(links_current_page-2>1){
-        let firstDotElement = document.createElement('li')
-        firstDotElement.classList.add('uk-disabled')
-        firstDotElement.innerHTML = `<span>…</span>`;
-        paginationElement.append(firstDotElement)
-    }
-    // last
-    if(links_current_page-2>0){
-        let lastElement = document.createElement('li')
-        lastElement.innerHTML = `<a onclick="setLinksPage(${links_current_page-1})">${links_current_page-1}</a>`
-        paginationElement.append(lastElement)
-    }
-    // current
-    if(links_current_page!=1 && links_current_page != links_end_page){
-    let currentElement = document.createElement('li')
-    currentElement.innerHTML = `<li class="uk-active"><span aria-current="page"><strong>${links_current_page}</strong></span></li>`
-    paginationElement.append(currentElement)
-    }
-    // next
-    if(links_current_page+2<links_end_page+1){
-        let nextElement = document.createElement('li')
-        nextElement.innerHTML = `<a onclick="setLinksPage(${links_current_page+1})">${links_current_page+1}</a>`
-        paginationElement.append(nextElement)
-    }
-    // ...
-    if(links_current_page+2<=links_end_page){
-        let secondDotElement = document.createElement('li')
-        secondDotElement.classList.add('uk-disabled')
-        secondDotElement.innerHTML = `<span>…</span>`;
-        paginationElement.append(secondDotElement)
-    }
-    //end
-    let endElement = document.createElement('li')
-    if(links_current_page>=links_end_page){
-        endElement.innerHTML = `<a><strong>${links_end_page}</strong></a>`;
-        endElement.classList.add('uk-disabled');
-    }else {
-        endElement.innerHTML = `<a onclick="setLinksPage(${links_end_page})">${links_end_page}</a>`;
-    }
-    paginationElement.append(endElement)
-    //next button
-    let nextElement = document.createElement('li')
-    if(links_current_page>=links_end_page){
-        nextElement.innerHTML = `<a><span uk-pagination-next></span></a>`;
-        nextElement.classList.add('uk-disabled');
-    }else {
-        nextElement.innerHTML = `<a onclick="setLinksPage(${links_current_page+1})"><span uk-pagination-next></span></a>`;
-        console.log(nextElement.innerHTML)
-    }
-    paginationElement.append(nextElement)
-}
-
 // Select Barcode Link Functions
 var ItemBarcodeSelectModal_limit = 50
 var ItemBarcodeSelectModal_page = 1
 var ItemBarcodeSelectModal_page_end = 1
 var selectedReceiptItemID = 0
+var ItemBarcodeSelectModal_search_text = ""
 
 async function openItemBarcodeSelectModal(receipt_item_id) {
     selectedReceiptItemID = receipt_item_id
+    ItemBarcodeSelectModal_search_text = ""
+    document.getElementById('ItemBarcodeSelectSearchInput').value = ""
+    ItemBarcodeSelectModal_page = 1
+    ItemBarcodeSelectModal_page_end = 1
     await setupItemsBarcodeSelect()
     UIkit.modal(document.getElementById("ItemBarcodeSelectModal")).show();
 }
@@ -933,11 +719,11 @@ async function generateItemsBarcodeSelectTable(items) {
     }
 }
 
-
 async function getItemsForModal() {
     const url = new URL('/receipts/api/getItems', window.location.origin);
     url.searchParams.append('page', ItemBarcodeSelectModal_page);
     url.searchParams.append('limit', ItemBarcodeSelectModal_limit);
+    url.searchParams.append('search_string', ItemBarcodeSelectModal_search_text);
     const response = await fetch(url);
     data =  await response.json();
     ItemBarcodeSelectModal_page_end = data.end
@@ -1026,6 +812,13 @@ async function ItemBarcodeSelectModalPage(pageNumber){
     await setupItemsBarcodeSelect()
 }
 
+async function ItemBarcodeSelectModalSearch(event) {
+    if (event.key === "Enter"){
+        ItemBarcodeSelectModal_search_text = document.getElementById('ItemBarcodeSelectSearchInput').value
+        await setupItemsBarcodeSelect()
+    }
+}
+
 async function updateReceiptItemBarcode(payload) {
 
     UIkit.modal(document.getElementById("ItemBarcodeSelectModal")).hide();

application/receipts/templates/receipt.html

@@ -300,7 +300,11 @@
         <div id="ItemBarcodeSelectModal" class="uk-modal-container" uk-modal>
             <div id="ItemBarcodeSelectModalInner" class="uk-modal-dialog uk-modal-body " uk-overflow-auto>
                 <h2 class="uk-modal-title">Select Item</h2>
-                <p>Select an Item from the system...</p>
+                <p>Select an Item from the system that you would like to associate this unknown barcode to...</p>
+                <div id="searchItemsForm" onkeydown="ItemBarcodeSelectModalSearch(event)" class="uk-search uk-search-default uk-align-center">
+                    <input id="ItemBarcodeSelectSearchInput" class="uk-search-input" type="search" placeholder="" aria-label="">
+                    <span class="" uk-search-icon></span>
+                </div>
                 <nav aria-label="Pagination">
                     <ul id="ItemBarcodeSelectModalPage" class="uk-pagination uk-flex-center" uk-margin>
                         <li><a href="#"><span uk-pagination-previous></span></a></li>
@@ -328,38 +332,6 @@
                 </table>
             </div>
         </div>
-        <!-- SKU LinkedList Modal -->
-        <div id="linksModal" class="uk-modal-container" uk-modal>
-            <div id="linksModalInner" class="uk-modal-dialog uk-modal-body " uk-overflow-auto>
-                <h2 class="uk-modal-title">Select Linked List</h2>
-                <p>Select an Linked List from the system...</p>
-                <nav aria-label="Pagination">
-                    <ul id="linksPage" class="uk-pagination uk-flex-center" uk-margin>
-                        <li><a href="#"><span uk-pagination-previous></span></a></li>
-                        <li><a href="#">1</a></li>
-                        <li class="uk-disabled"><span>…</span></li>
-                        <li><a href="#">5</a></li>
-                        <li><a href="#">6</a></li>
-                        <li class="uk-active"><span aria-current="page">7</span></li>
-                        <li><a href="#">8</a></li>
-                        <li><a href="#"><span uk-pagination-next></span></a></li>
-                    </ul>
-                </nav>
-                <table class="uk-table uk-table-striped uk-table-hover">
-                    <thead>
-                        <tr>
-                            <th>ID</th>
-                            <th>Barcode</th>
-                            <th>Name</th>
-                            <th>Conversion Factor</th>
-                            <th>Operations</th>
-                        </tr>
-                    </thead>
-                    <tbody id="linksTableBody">
-                    </tbody>
-                </table>
-            </div>
-        </div>
         <!-- Line Edit Modal-->
         <div id="lineEditModal" class="uk-modal-container" uk-modal>
             <div class="uk-modal-dialog uk-modal-body">