Remove filter from transaction page.

Add button to open transaction filter sidebar.

views/dashboardPage/bundle.js

@@ -3635,45 +3635,16 @@ let transactions = {
     display: function(Transaction){
         if(!this.isPopulated){
             let transactionsList = document.getElementById("transactionsList");
-            let dateDropdown = document.getElementById("dateDropdown");
-            let recipeDropdown = document.getElementById("recipeDropDown");
             let template = document.getElementById("transaction").content.children[0];
 
-            let now = new Date();
-            let monthAgo = new Date(now.getFullYear(), now.getMonth() - 1, now.getDate());
-            document.getElementById("transFilDate1").valueAsDate = monthAgo;
-            document.getElementById("transFilDate2").valueAsDate = now;
-
-            dateDropdown.style.display = "none";
-            recipeDropdown.style.display = "none";
-
-            document.getElementById("dateFilterBtn").onclick = ()=>{this.toggleDropdown(dateDropdown)};
-            document.getElementById("recipeFilterBtn").onclick = ()=>{this.toggleDropdown(recipeDropdown)};
-
-            while(recipeDropdown.children.length > 0){
-                recipeDropdown.removeChild(recipeDropdown.firstChild);
-            }
-
-            for(let i = 0; i < merchant.recipes.length; i++){
-                let checkbox = document.createElement("input");
-                checkbox.type = "checkbox";
-                checkbox.recipe = merchant.recipes[i];
-                recipeDropdown.appendChild(checkbox);
-
-                let label = document.createElement("label");
-                label.innerText = merchant.recipes[i].name;
-                label.for = checkbox;
-                recipeDropdown.appendChild(label);
-
-                let brk = document.createElement("br");
-                recipeDropdown.appendChild(brk);
-            }
+            document.getElementById("filterTransactionsButton").onclick = ()=>{controller.openSidebar("filterTransactions")};
+            document.getElementById("newTransactionButton").onclick = ()=>{controller.openSidebar("newTransaction")};
 
             while(transactionsList.children.length > 0){
                 transactionsList.removeChild(transactionsList.firstChild);
             }
 
-            let i = 0
+            let i = 0;
             const transactions = merchant.getTransactions();
             while(i < transactions.length && i < 100){
                 let transactionDiv = template.cloneNode(true);
@@ -3700,104 +3671,8 @@ let transactions = {
                 i++;
             }
 
-            document.getElementById("transFormSubmit").onsubmit = ()=>{this.submitFilter(Transaction)};
-
             this.isPopulated = true;
         }
-    },
-
-    submitFilter: function(Transaction){
-        event.preventDefault();
-
-        let data = {
-            startDate: document.getElementById("transFilDate1").valueAsDate,
-            endDate: document.getElementById("transFilDate2").valueAsDate,
-            recipes: []
-        }
-
-        if(data.startDate >= data.endDate){
-            banner.createError("START DATE CANNOT BE AFTER END DATE");
-            return;
-        }
-
-        let recipeChoices = document.getElementById("recipeDropDown");
-        for(let i = 0; i < recipeChoices.children.length; i += 3){
-            if(recipeChoices.children[i].checked){
-                data.recipes.push(recipeChoices.children[i].recipe.id);
-            }
-        }
-
-        if(data.recipes.length === 0){
-            for(let i = 0; i < merchant.recipes.length; i++){
-                data.recipes.push(merchant.recipes[i].id);
-            }
-        }
-
-        let loader = document.getElementById("loaderContainer");
-        loader.style.display = "flex";
-
-        fetch("/transaction", {
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json;charset=utf-8"
-            },
-            body: JSON.stringify(data)
-        })
-            .then((response) => response.json())
-            .then((response)=>{
-                if(typeof(response) === "string"){
-                    banner.createError(response);
-                }else{
-                    let transactionList = document.getElementById("transactionsList");
-                    let template = document.getElementById("transaction").content.children[0];
-
-                    while(transactionList.children.length > 0){
-                        transactionList.removeChild(transactionList.firstChild);
-                    }
-
-                    for(let i = 0; i < response.length; i++){
-                        let transactionDiv = template.cloneNode(true);
-                        let recipeCount = 0;
-                        let cost = 0;
-                        let transaction = new Transaction(
-                            response[i]._id,
-                            response[i].date,
-                            response[i].recipes,
-                            merchant
-                        );
-
-                        for(let j = 0; j < transaction.recipes.length; j++){
-                            recipeCount += transaction.recipes[j].quantity;
-                            cost += transaction.recipes[j].quantity * transaction.recipes[j].recipe.price;
-                        }
-
-                        transactionDiv.children[0].innerText = `${transaction.date.toLocaleDateString()} ${transaction.date.toLocaleTimeString()}`;
-                        transactionDiv.children[1].innerText = `${recipeCount} recipes sold`;
-                        transactionDiv.children[2].innerText = `$${(cost / 100).toFixed(2)}`;
-                        transactionDiv.onclick = ()=>{controller.openSidebar("transactionDetails", transaction)};
-                        transactionList.appendChild(transactionDiv);
-                    }
-                }
-            })
-            .catch((err)=>{
-                banner.createError("UNABLE TO DISPLAY THE TRANSACTIONS");
-            })
-            .finally(()=>{
-                loader.style.display = "none";
-            });
-    },
-
-    toggleDropdown: function(dropdown){
-        event.preventDefault();
-        let polyline = dropdown.parentElement.children[0].children[1].children[0].children[0];
-
-        if(dropdown.style.display === "none"){
-            dropdown.style.display = "block";
-            polyline.setAttribute("points", "18 15 12 9 6 15");
-        }else{
-            dropdown.style.display = "none";
-            polyline.setAttribute("points", "6 9 12 15 18 9");
-        }
     }
 }
 

views/dashboardPage/dashboard.css

@@ -502,25 +502,6 @@ Orders Strand
         overflow-y: auto;
     }
 
-    .filterForm{
-        padding: 5px;
-        margin: 0;
-        align-items: center;
-        max-height: 150px;
-    }
-
-        .filterForm > div{
-            display: flex;
-            justify-content: space-around;
-            width: 100%;
-        }
-
-        .filterForm input[type=submit]{
-            max-height: 30px;
-            padding: 0;
-            font-size: 15px;
-        }
-
 /*
 Transactions Strand
 */
@@ -535,52 +516,6 @@ Transactions Strand
         margin-top: 50px;
     }
 
-    .dropdown{
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        position: relative;
-        margin: 0;
-    }
-
-        .dropdown button{
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            height: 25px;
-            width: 25px;
-            border-radius: 5px;
-            border: 1px solid black;
-            background: none;
-            cursor: pointer;
-        }
-
-            .dropdownHead{
-                display: flex;
-            }
-
-            .dropdown button:hover{
-                background: rgb(0, 27, 45);
-                color: white;
-            }
-
-        .dropdownContents{
-            text-align: left;
-            position: absolute;
-            top: 25px;
-            background: rgb(240, 252, 255);
-            z-index: 1;
-            padding: 2px;
-            border: 1px solid black;
-            border-radius: 5px;
-            padding: 5px;
-            white-space: nowrap;
-        }
-
-            .dropDownContents label{
-                margin: 0;
-            }
-
 @media screen and (max-width: 1000px){
     body{
         flex-direction: column;
@@ -608,10 +543,6 @@ Transactions Strand
             display: none;
         }
 
-    .filterForm{
-        display: none;
-    }
-
     /*
     Home
     */

views/dashboardPage/dashboard.ejs

@@ -367,48 +367,12 @@
                 <div class="strandHead">
                     <h1 class="strandTitle">TRANSACTIONS</h1>
 
-                    <button class="button mobileHide" onclick="controller.openSidebar('newTransaction')">NEW</button>
-                </div>
-
-                <form id="transFormSubmit" class="filterForm">
-                    <h2>Search</h2>
-                    <div>
-                        <div class="dropdown">
-                            <div class="dropdownHead">
-                                <p>DATES</p>
-                                <button id="dateFilterBtn">
-                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                        <polyline points="6 9 12 15 18 9"></polyline>
-                                    </svg>
-                                </button>
-                            </div>
-                            <div class="dropdownContents" id="dateDropdown">
-                                <label>From:
-                                    <input id="transFilDate1"type="date">
-                                </label>
-                                
-                                <label>To:
-                                    <input id="transFilDate2" type="date">
-                                </label>
-                            </div>
-                            
-                        </div>
-                        <div class="dropdown">
-                            <div class="dropdownHead">
-                                <p>RECIPES</p>
-                                <button id="recipeFilterBtn">
-                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                        <polyline points="6 9 12 15 18 9"></polyline>
-                                    </svg>
-                                </button>
-                            </div>
+                    <div class="buttonBox">
+                        <button id="filterTransactionsButton" class="button">FILTER</button>
 
-                            <div class="dropdownContents" id="recipeDropDown"></div>
-                        </div>
+                        <button id="newTransactionButton" class="button mobileHide">NEW</button>
                     </div>
-
-                    <input class="button" type="submit" value="SUBMIT">
-                </form>
+                </div>
 
                 <div id="transactionsList" class="transactionsList"></div>
 

views/dashboardPage/js/transactions.js

@@ -4,45 +4,16 @@ let transactions = {
     display: function(Transaction){
         if(!this.isPopulated){
             let transactionsList = document.getElementById("transactionsList");
-            let dateDropdown = document.getElementById("dateDropdown");
-            let recipeDropdown = document.getElementById("recipeDropDown");
             let template = document.getElementById("transaction").content.children[0];
 
-            let now = new Date();
-            let monthAgo = new Date(now.getFullYear(), now.getMonth() - 1, now.getDate());
-            document.getElementById("transFilDate1").valueAsDate = monthAgo;
-            document.getElementById("transFilDate2").valueAsDate = now;
-
-            dateDropdown.style.display = "none";
-            recipeDropdown.style.display = "none";
-
-            document.getElementById("dateFilterBtn").onclick = ()=>{this.toggleDropdown(dateDropdown)};
-            document.getElementById("recipeFilterBtn").onclick = ()=>{this.toggleDropdown(recipeDropdown)};
-
-            while(recipeDropdown.children.length > 0){
-                recipeDropdown.removeChild(recipeDropdown.firstChild);
-            }
-
-            for(let i = 0; i < merchant.recipes.length; i++){
-                let checkbox = document.createElement("input");
-                checkbox.type = "checkbox";
-                checkbox.recipe = merchant.recipes[i];
-                recipeDropdown.appendChild(checkbox);
-
-                let label = document.createElement("label");
-                label.innerText = merchant.recipes[i].name;
-                label.for = checkbox;
-                recipeDropdown.appendChild(label);
-
-                let brk = document.createElement("br");
-                recipeDropdown.appendChild(brk);
-            }
+            document.getElementById("filterTransactionsButton").onclick = ()=>{controller.openSidebar("filterTransactions")};
+            document.getElementById("newTransactionButton").onclick = ()=>{controller.openSidebar("newTransaction")};
 
             while(transactionsList.children.length > 0){
                 transactionsList.removeChild(transactionsList.firstChild);
             }
 
-            let i = 0
+            let i = 0;
             const transactions = merchant.getTransactions();
             while(i < transactions.length && i < 100){
                 let transactionDiv = template.cloneNode(true);
@@ -69,104 +40,8 @@ let transactions = {
                 i++;
             }
 
-            document.getElementById("transFormSubmit").onsubmit = ()=>{this.submitFilter(Transaction)};
-
             this.isPopulated = true;
         }
-    },
-
-    submitFilter: function(Transaction){
-        event.preventDefault();
-
-        let data = {
-            startDate: document.getElementById("transFilDate1").valueAsDate,
-            endDate: document.getElementById("transFilDate2").valueAsDate,
-            recipes: []
-        }
-
-        if(data.startDate >= data.endDate){
-            banner.createError("START DATE CANNOT BE AFTER END DATE");
-            return;
-        }
-
-        let recipeChoices = document.getElementById("recipeDropDown");
-        for(let i = 0; i < recipeChoices.children.length; i += 3){
-            if(recipeChoices.children[i].checked){
-                data.recipes.push(recipeChoices.children[i].recipe.id);
-            }
-        }
-
-        if(data.recipes.length === 0){
-            for(let i = 0; i < merchant.recipes.length; i++){
-                data.recipes.push(merchant.recipes[i].id);
-            }
-        }
-
-        let loader = document.getElementById("loaderContainer");
-        loader.style.display = "flex";
-
-        fetch("/transaction", {
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json;charset=utf-8"
-            },
-            body: JSON.stringify(data)
-        })
-            .then((response) => response.json())
-            .then((response)=>{
-                if(typeof(response) === "string"){
-                    banner.createError(response);
-                }else{
-                    let transactionList = document.getElementById("transactionsList");
-                    let template = document.getElementById("transaction").content.children[0];
-
-                    while(transactionList.children.length > 0){
-                        transactionList.removeChild(transactionList.firstChild);
-                    }
-
-                    for(let i = 0; i < response.length; i++){
-                        let transactionDiv = template.cloneNode(true);
-                        let recipeCount = 0;
-                        let cost = 0;
-                        let transaction = new Transaction(
-                            response[i]._id,
-                            response[i].date,
-                            response[i].recipes,
-                            merchant
-                        );
-
-                        for(let j = 0; j < transaction.recipes.length; j++){
-                            recipeCount += transaction.recipes[j].quantity;
-                            cost += transaction.recipes[j].quantity * transaction.recipes[j].recipe.price;
-                        }
-
-                        transactionDiv.children[0].innerText = `${transaction.date.toLocaleDateString()} ${transaction.date.toLocaleTimeString()}`;
-                        transactionDiv.children[1].innerText = `${recipeCount} recipes sold`;
-                        transactionDiv.children[2].innerText = `$${(cost / 100).toFixed(2)}`;
-                        transactionDiv.onclick = ()=>{controller.openSidebar("transactionDetails", transaction)};
-                        transactionList.appendChild(transactionDiv);
-                    }
-                }
-            })
-            .catch((err)=>{
-                banner.createError("UNABLE TO DISPLAY THE TRANSACTIONS");
-            })
-            .finally(()=>{
-                loader.style.display = "none";
-            });
-    },
-
-    toggleDropdown: function(dropdown){
-        event.preventDefault();
-        let polyline = dropdown.parentElement.children[0].children[1].children[0].children[0];
-
-        if(dropdown.style.display === "none"){
-            dropdown.style.display = "block";
-            polyline.setAttribute("points", "18 15 12 9 6 15");
-        }else{
-            dropdown.style.display = "none";
-            polyline.setAttribute("points", "6 9 12 15 18 9");
-        }
     }
 }