Custom date range filtering modal

BTCPayServer/Views/Invoice/ListInvoices.cshtml

@@ -7,6 +7,7 @@
     <script src="~/modal/btcpay.js"></script>
 }
 
+@Html.HiddenFor(a=>a.Count)
 <section>
     <div class="container">
 
@@ -84,6 +85,7 @@
                                     <a class="dropdown-item last24" href="/invoices?Count=@Model.Count&timezoneoffset=0&SearchTerm=startDate%3Alast24">Last 24 hours</a>
                                     <a class="dropdown-item last72" href="/invoices?Count=@Model.Count&timezoneoffset=0&SearchTerm=startDate%3Alast72">Last 3 days</a>
                                     <a class="dropdown-item last168" href="/invoices?Count=@Model.Count&timezoneoffset=0&SearchTerm=startDate%3Alast168">Last 7 days</a>
+                                    <button type="button" class="dropdown-item" data-toggle="modal" data-target="#customRangeModal" data-backdrop="static">Custom Range</button>
                                     <div role="separator" class="dropdown-divider"></div>
                                     <a class="dropdown-item" href="/invoices">Unfiltered</a>
                                 </div>
@@ -95,6 +97,84 @@
             </div>
         </div>
 
+        @* Custom Range Modal *@
+        <div class="modal fade" id="customRangeModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
+            <div class="modal-dialog modal-dialog-centered" role="document" style="max-width: 550px;">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="exampleModalLongTitle">Filter invoices by Custom Range</h5>
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                            <span aria-hidden="true">&times;</span>
+                        </button>
+                    </div>
+                    <div class="modal-body">
+                        <div class="form-group row">
+                            <label for="staticEmail" class="col-sm-3 col-form-label">Start Date</label>
+                            <div class="col-sm-9">
+                                <div class="input-group">
+                                    <input id="dtpStartDate" class="form-control flatdtpicker" type="datetime-local"
+                                           data-fdtp='{ "enableTime": true, "enableSeconds": true, "dateFormat": "Y-m-d H:i:S", "time_24hr": true, "defaultHour": 0 }'
+                                           placeholder="Start Date" />
+                                    <div class="input-group-append">
+                                        <button type="button" class="btn btn-primary input-group-clear" title="Clear">
+                                            <span class=" fa fa-times"></span>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="form-group row">
+                            <label class="col-sm-3 col-form-label">End Date</label>
+                            <div class="col-sm-9">
+                                <div class="input-group">
+                                    <input id="dtpEndDate" class="form-control flatdtpicker" type="datetime-local"
+                                           data-fdtp='{ "enableTime": true, "enableSeconds": true, "dateFormat": "Y-m-d H:i:S", "time_24hr": true, "defaultHour": 0 }'
+                                           placeholder="End Date" />
+                                    <div class="input-group-append">
+                                        <button type="button" class="btn btn-primary input-group-clear" title="Clear">
+                                            <span class=" fa fa-times"></span>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="modal-footer">
+                        <button id="btnCustomRangeDate" type="button" class="btn btn-primary">Filter</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <script type="text/javascript">
+            $('#btnCustomRangeDate').on('click', function (sender) {
+                var filterString = "";
+
+                var dtpStartDate = $("#dtpStartDate").val();
+                if (dtpStartDate !== null && dtpStartDate !== "") {
+                    filterString = "startDate%3A" + dtpStartDate;
+                }
+
+                var dtpEndDate = $("#dtpEndDate").val();
+                if (dtpEndDate !== null && dtpEndDate !== "") {
+                    if (filterString !== "") {
+                        filterString += ",";
+                    }
+                    filterString += "endDate%3A" + dtpEndDate;
+                }
+
+                if (filterString !== "") {
+                    var redirectUri = "/invoices?Count=" + $("#Count").val() +
+                        "&timezoneoffset=" + $("#TimezoneOffset").val() +
+                        "&SearchTerm=" + filterString;
+
+                    window.location.href = redirectUri;
+                } else {
+                    $("#dtpStartDate").next().trigger("focus");
+                }
+            })
+        </script>
+        @* Custom Range Modal *@
+
         <div class="row">
             <table class="table table-sm table-responsive-md">
                 <thead>

BTCPayServer/Views/Shared/SyncModal.cshtml

@@ -1,6 +1,8 @@
 @inject BTCPayServer.HostedServices.NBXplorerDashboard dashboard
 <!-- Modal -->
-<div id="modalDialog" class="modal-dialog animated bounceInRight">
+<div id="modalDialog" class="modal-dialog animated bounceInRight"
+     style="z-index:1000">
+    @* Z-Index less then other bootstrap modals (1050) *@
 
     <!-- Modal content-->
     <div class="modal-content">
@@ -48,8 +50,8 @@
                         {
                             <li>The node is synchronized (Height: @line.Status.BitcoinStatus.Headers)</li>
                             @if (line.Status.BitcoinStatus.IsSynched &&
-                              line.Status.SyncHeight.HasValue &&
+                             line.Status.SyncHeight.HasValue &&
-                              line.Status.SyncHeight.Value < line.Status.BitcoinStatus.Headers)
+                             line.Status.SyncHeight.Value < line.Status.BitcoinStatus.Headers)
                             {
                                 <li>NBXplorer is synchronizing... (Height: @line.Status.SyncHeight.Value)</li>
                             }

BTCPayServer/wwwroot/main/site.js

@@ -10,24 +10,33 @@
     // intializing date time pickers throughts website
     $(".flatdtpicker").each(function () {
         var element = $(this);
-        var min = element.attr("min");
+        var fdtp = element.attr("data-fdtp");
-        var max = element.attr("max");
+
-        var defaultDate = element.attr("value");
+        // support for initializing with special options per instance
-        element.flatpickr({
+        if (fdtp) {
-            enableTime: true,
+            var parsed = JSON.parse(fdtp);
-            enableSeconds: true,
+            element.flatpickr(parsed);
-            dateFormat: 'Z',
+        } else {
-            altInput: true,
+            var min = element.attr("min");
-            altFormat: 'Y-m-d H:i:S',
+            var max = element.attr("max");
-            minDate: min,
+            var defaultDate = element.attr("value");
-            maxDate: max,
+            element.flatpickr({
-            defaultDate: defaultDate,
+                enableTime: true,
-            time_24hr: true,
+                enableSeconds: true,
-            defaultHour: 0,
+                dateFormat: 'Z',
-            parseDate: function (date) {
+                altInput: true,
-                return moment(date).toDate();
+                altFormat: 'Y-m-d H:i:S',
-            }
+                minDate: min,
-        });
+                maxDate: max,
+                defaultDate: defaultDate,
+                time_24hr: true,
+                defaultHour: 0,
+                parseDate: function (date) {
+                    // check with Kukks if this is still needed with new date format
+                    return moment(date).toDate();
+                }
+            });
+        }
     });