Add date/time filter options to transaction search tool

pages.php

@@ -16,6 +16,7 @@ define("PAGES", [
         "navbar" => true,
         "icon" => "fas fa-store-alt",
         "styles" => [
+            "static/css/tempusdominus-bootstrap-4.min.css",
             "static/css/pos.css",
         ],
         "scripts" => [
@@ -23,6 +24,8 @@ define("PAGES", [
             "static/js/bsalert.js",
             "static/js/bsnumpad.js",
             "static/js/bsmoneypad.js",
+            "static/js/moment.min.js",
+            "static/js/tempusdominus-bootstrap-4.min.js",
             "static/js/pos_items.js",
             "static/js/pos_customer.js",
             "static/js/pos_gridview.js",

pages/pos.php

@@ -105,9 +105,30 @@ if (isset($_GET['switch']) || !isset($_SESSION['register']) || !$registeropen) {
                                     <span class="btn btn-link open-number-pad-btn">
                                         <i class="fas fa-keyboard"></i>
                                     </span>
+                                    <span class="btn btn-link" id="txsearch-datetime-btn">
+                                        <span class="fa-layers fa-fw">
+                                            <i class="fas fa-calendar" data-fa-transform="shrink-3 up-4 left-4"></i>
+                                            <i class="fas fa-clock" data-fa-transform="shrink-3 down-4 right-4"></i>
+                                        </span>
+                                    </span>
                                     <button class="btn btn-link" type="button" id="transactionsearchbtn"><i class="fas fa-search"></i></button>
                                 </div>
                             </div>
+
+                            <div class="row d-none" id="txsearch-datetimefilters">
+                                <div class="input-group col-md-6">
+                                    <div class="input-group-prepend">
+                                        <span class="input-group-text"><i class="fas fa-play"></i></span>
+                                    </div>
+                                    <input type="text" class="form-control" id="tx-startdate" data-toggle="datetimepicker" data-target="#tx-startdate" />
+                                </div>
+                                <div class="input-group col-md-6">
+                                    <div class="input-group-prepend">
+                                        <span class="input-group-text"><i class="fas fa-stop"></i></span>
+                                    </div>
+                                    <input type="text" class="form-control" id="tx-enddate" data-toggle="datetimepicker" data-target="#tx-enddate" />
+                                </div>
+                            </div>
                             <div class="list-group mt-2" id="transactionselection">
                             </div>
                         </div>

static/js/pos_management.js

@@ -38,13 +38,15 @@ $("#xprintbtn").click(function () {
     }
 });
 
-function showTransactionList(search) {
+function showTransactionList(search, start, end) {
-    if (search == "") {
+    if (search == "" && start == "" && end == "") {
         return;
     }
     $.get('action.php', {
         action: 'transactionsearch',
-        q: search
+        q: search,
+        start: start,
+        end: end
     }, function (data) {
         var html = "";
         if (data['transactions'].length > 0) {
@@ -83,14 +85,16 @@ function showTransactionList(search) {
 
 $("#transactionsearch").on('keypress', function (e) {
     if (e.which === 13) {
-        showTransactionList($("#transactionsearch").val());
+        showTransactionList($("#transactionsearch").val(), $("#tx-startdate").val(), $("#tx-enddate").val());
         $("#transactionsearch").val("");
+        $("#txsearch-datetimefilters").addClass("d-none");
     }
 });
 
 $("#transactionsearchbtn").on("click", function () {
-    showTransactionList($("#transactionsearch").val());
+    showTransactionList($("#transactionsearch").val(), $("#tx-startdate").val(), $("#tx-enddate").val());
     $("#transactionsearch").val("");
+    $("#txsearch-datetimefilters").addClass("d-none");
 });
 
 $("#managermodal").on("click", ".printreceiptbtn", function () {
@@ -122,4 +126,35 @@ $("#managermodal .open-number-pad-btn").click(function () {
     bsnumpad("Keyboard", value, '<i class="fas fa-search"></i> Search', "Cancel", function (answer) {
         showTransactionList(answer);
     });
+});
+
+$("#txsearch-datetime-btn").click(function () {
+    if ($("#txsearch-datetimefilters").hasClass("d-none")) {
+        $("#txsearch-datetimefilters").removeClass("d-none");
+    } else {
+        $("#txsearch-datetimefilters").addClass("d-none");
+    }
+});
+
+$("#managermodal").on("hidden.bs.modal", function () {
+    $("#txsearch-datetimefilters").addClass("d-none");
+})
+
+$('#tx-startdate').datetimepicker({
+    useCurrent: false,
+    icons: {
+        time: "fas fa-clock fa-fw fa-2x",
+        date: "fas fa-calendar fa-fw fa-2x",
+        up: "fas fa-arrow-up fa-fw fa-2x",
+        down: "fas fa-arrow-down fa-fw fa-2x"
+    }
+});
+$('#tx-enddate').datetimepicker({
+    useCurrent: true,
+    icons: {
+        time: "fas fa-clock fa-fw fa-2x",
+        date: "fas fa-calendar fa-fw fa-2x",
+        up: "fas fa-arrow-up fa-fw fa-2x",
+        down: "fas fa-arrow-down fa-fw fa-2x"
+    }
 });