Create transaction filter sidebar.

Stylize transaction filter sidebar.

views/dashboardPage/bundle.js

@@ -1596,6 +1596,7 @@ const orderDetails = require("./orderDetails.js");
 const orderFilter = require("./orderFilter.js");
 const recipeDetails = require("./recipeDetails.js");
 const transactionDetails = require("./transactionDetails.js");
+const transactionFilter = require("./transactionFilter.js");
 
 const Merchant = require("./Merchant.js");
 const Ingredient = require("./Ingredient.js");
@@ -1714,6 +1715,9 @@ controller = {
             case "transactionDetails":
                 transactionDetails.display(data);
                 break;
+            case "transactionFilter":
+                transactionFilter.display();
+                break;
             case "newTransaction":
                 newTransaction.display(Transaction);
                 break;
@@ -1850,7 +1854,7 @@ if(window.screen.availWidth > 1000 && window.screen.availWidth <= 1400){
 }
 
 controller.openStrand("home");
-},{"./Ingredient.js":1,"./Merchant.js":2,"./Order.js":3,"./Recipe.js":4,"./Transaction.js":5,"./analytics.js":6,"./editIngredient.js":8,"./editRecipe.js":9,"./home.js":10,"./ingredientDetails.js":11,"./ingredients.js":12,"./newIngredient.js":13,"./newOrder.js":14,"./newRecipe.js":15,"./newTransaction.js":16,"./orderDetails.js":17,"./orderFilter.js":18,"./orders.js":19,"./recipeBook.js":20,"./recipeDetails.js":21,"./transactionDetails.js":22,"./transactions.js":23}],8:[function(require,module,exports){
+},{"./Ingredient.js":1,"./Merchant.js":2,"./Order.js":3,"./Recipe.js":4,"./Transaction.js":5,"./analytics.js":6,"./editIngredient.js":8,"./editRecipe.js":9,"./home.js":10,"./ingredientDetails.js":11,"./ingredients.js":12,"./newIngredient.js":13,"./newOrder.js":14,"./newRecipe.js":15,"./newTransaction.js":16,"./orderDetails.js":17,"./orderFilter.js":18,"./orders.js":19,"./recipeBook.js":20,"./recipeDetails.js":21,"./transactionDetails.js":22,"./transactionFilter.js":23,"./transactions.js":24}],8:[function(require,module,exports){
 const Ingredient = require("./Ingredient");
 
 let editIngredient = {
@@ -3629,6 +3633,14 @@ let transactionDetails = {
 
 module.exports = transactionDetails;
 },{}],23:[function(require,module,exports){
+let transactionFilter = {
+    display: function(){
+        
+    }
+}
+
+module.exports = transactionFilter;
+},{}],24:[function(require,module,exports){
 let transactions = {
     isPopulated: false,
 
@@ -3637,7 +3649,7 @@ let transactions = {
             let transactionsList = document.getElementById("transactionsList");
             let template = document.getElementById("transaction").content.children[0];
 
-            document.getElementById("filterTransactionsButton").onclick = ()=>{controller.openSidebar("filterTransactions")};
+            document.getElementById("filterTransactionsButton").onclick = ()=>{controller.openSidebar("transactionFilter")};
             document.getElementById("newTransactionButton").onclick = ()=>{controller.openSidebar("newTransaction")};
 
             while(transactionsList.children.length > 0){

views/dashboardPage/dashboard.css

@@ -134,6 +134,23 @@ Multi-strand use classes
         padding: 1px 0 1px 4px;
     }
 
+.dateRange{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+    .dateRangeInput{
+        display: flex;
+        justify-content: space-between;
+    }
+
+        .dateRangeInput p{
+            margin: 0 5px;
+            font-size: 20px;
+            font-weight: bold;
+        }
+
 /* 
 Home Strand 
 */

views/dashboardPage/dashboard.ejs

@@ -398,6 +398,7 @@
             <% include ./sidebars/newTransaction %>
             <% include ./sidebars/editRecipe %>
             <% include ./sidebars/orderFilter %>
+            <% include ./sidebars/transactionFilter %>
         </div>
 
         <% include ../shared/loader %>

views/dashboardPage/js/dashboard.js

@@ -16,6 +16,7 @@ const orderDetails = require("./orderDetails.js");
 const orderFilter = require("./orderFilter.js");
 const recipeDetails = require("./recipeDetails.js");
 const transactionDetails = require("./transactionDetails.js");
+const transactionFilter = require("./transactionFilter.js");
 
 const Merchant = require("./Merchant.js");
 const Ingredient = require("./Ingredient.js");
@@ -134,6 +135,9 @@ controller = {
             case "transactionDetails":
                 transactionDetails.display(data);
                 break;
+            case "transactionFilter":
+                transactionFilter.display();
+                break;
             case "newTransaction":
                 newTransaction.display(Transaction);
                 break;

views/dashboardPage/js/transactionFilter.js

@@ -0,0 +1,7 @@
+let transactionFilter = {
+    display: function(){
+        
+    }
+}
+
+module.exports = transactionFilter;

views/dashboardPage/js/transactions.js

@@ -6,7 +6,7 @@ let transactions = {
             let transactionsList = document.getElementById("transactionsList");
             let template = document.getElementById("transaction").content.children[0];
 
-            document.getElementById("filterTransactionsButton").onclick = ()=>{controller.openSidebar("filterTransactions")};
+            document.getElementById("filterTransactionsButton").onclick = ()=>{controller.openSidebar("transactionFilter")};
             document.getElementById("newTransactionButton").onclick = ()=>{controller.openSidebar("newTransaction")};
 
             while(transactionsList.children.length > 0){

views/dashboardPage/sidebars/sidebars.css

@@ -600,7 +600,17 @@ TRANSACTION DETAILS
     }
 
 /*
-New Transaction
+TRANSACTION FILTER
+*/
+.transactionFilter{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+}
+
+/*
+NEW TRANSACTION
 */
 .newTransaction{
     display: flex;

views/dashboardPage/sidebars/transactionFilter.ejs

@@ -0,0 +1,31 @@
+<div id="transactionFilter" class="transactionFilter">
+    <div class="sidebarIconButtons">
+        <button class="iconButton" onclick="controller.closeSidebar()">
+            <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <line x1="5" y1="12" x2="19" y2="12"></line>
+                <polyline points="12 5 19 12 12 19"></polyline>
+            </svg>
+        </button>
+    </div>
+
+    <h1>FILTER TRANSACTIONS</h1>
+
+    <div class="dateRange">
+        <h3>Date Range:</h3>
+        <div class="dateRangeInput">
+            <input id="transFilterDateStart" type="date">
+            <p> - </p>
+            <input id="transFilterDateEnd" type="date">
+        </div>
+    </div>
+
+    <div class="lineBorder"></div>
+
+    <h3>Recipes</h3>
+
+    <div id="transFilterRecipeList"></div>
+
+    <div class="lineBorder"></div>
+
+    <button id="transFilterSubmit" class="button">SUBMIT</button>
+</div>