From abd144721b5836ccb007beda93f8d04d04bbaec8 Mon Sep 17 00:00:00 2001
From: Robert von Burg <eitch@eitchnet.ch>
Date: Wed, 6 Mar 2019 15:10:51 +0100
Subject: [PATCH] [Major] Refresh fixes and loading overlay

---
 bower.json                    |   2 +-
 strolch-wc-reports-facet.html |  17 +++--
 strolch-wc-reports-table.html |  23 +++++-
 strolch-wc-reports.html       | 136 ++++++++++++++++++++++++++++++----
 4 files changed, 154 insertions(+), 24 deletions(-)

diff --git a/bower.json b/bower.json
index a03bd61..bee8942 100644
--- a/bower.json
+++ b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "strolch-wc-reports",
   "description": "Strolch WebComponent Reports",
-  "version": "0.1.6",
+  "version": "0.2.0",
   "authors": [
     "Robert von Burg"
   ],
diff --git a/strolch-wc-reports-facet.html b/strolch-wc-reports-facet.html
index a796f53..d7d5b74 100644
--- a/strolch-wc-reports-facet.html
+++ b/strolch-wc-reports-facet.html
@@ -145,7 +145,7 @@
                    handle-as="json"
                    method="GET"
                    on-response="onPostFieldResponse"
-                   on-error="onAjaxError"></iron-ajax>
+                   on-error="onAjaxErrorCustom"></iron-ajax>
 
         <!-- Content -->
         <paper-card>
@@ -164,8 +164,8 @@
                 <div class="card-actions">
 
                     <strolch-wc-debounced-input id="debouncedInput"
-                                          debounced-input="{{searchTerm}}"
-                                          disabled="[[arrayFilled(filters)]]"></strolch-wc-debounced-input>
+                                                debounced-input="{{searchTerm}}"
+                                                disabled="[[arrayFilled(filters)]]"></strolch-wc-debounced-input>
 
                     <paper-listbox id="fieldList" attr-for-selected="field-id" multi>
                         <template is="dom-repeat" items="[[fields]]" as="field">
@@ -253,17 +253,25 @@
                         limit: Susi.Constants.limit
                     };
                     this.$.ajaxGetFields.generateRequest();
+                    this.fire('ajax-running', {running: true});
                 }
             },
 
             /* Listeners */
             listeners: {},
+
+            onAjaxErrorCustom: function (e) {
+                this.onAjaxError(e);
+                this.fire('ajax-running', {running: false});
+            },
+
             onPostFieldResponse: function (event) {
                 // get the response
                 var response = event.detail.response;
 
                 // directly set this as the available types
                 this.set("fields", response.data);
+                this.fire('ajax-running', {running: false});
             },
             onItemsTapped: function (event) {
                 // get the tapped filter
@@ -282,8 +290,7 @@
                 });
                 if (filterIndex >= 0) {
                     filters.splice(filterIndex, 1);
-                }
-                else {
+                } else {
                     filters.push(tappedFilter);
                 }
 
diff --git a/strolch-wc-reports-table.html b/strolch-wc-reports-table.html
index 6ef2889..845860c 100644
--- a/strolch-wc-reports-table.html
+++ b/strolch-wc-reports-table.html
@@ -94,7 +94,7 @@
                    handle-as="json"
                    method="POST"
                    on-response="onPostReportResponse"
-                   on-error="onAjaxError"></iron-ajax>
+                   on-error="onAjaxErrorCustom"></iron-ajax>
 
         <!-- Content -->
         <paper-material id="content">
@@ -125,7 +125,7 @@
                     <div class="g-center">
                         <paper-icon-button icon="first-page" on-tap="_toFirstPage"></paper-icon-button>
                         <paper-icon-button icon="chevron-left" on-tap="_toPreviousPage"></paper-icon-button>
-                        <span>[[data.offset]] to [[_getEnd(data)]] of [[data.size]]</span>
+                        <span>[[data.offset]] [[localize('to')]] [[_getEnd(data)]] [[localize('of')]] [[_getSize(data)]]</span>
                         <paper-icon-button icon="chevron-right" on-tap="_toNextPage"></paper-icon-button>
                         <paper-icon-button icon="last-page" on-tap="_toLastPage"></paper-icon-button>
                     </div>
@@ -186,6 +186,10 @@
                 return data == null ? 0 : data.size;
             },
 
+            _getSize: function (data) {
+                return data == null || data.size >= 2147483647 ? this.localize('unknown') : data.size;
+            },
+
             _toFirstPage: function () {
                 this.offset = 0;
             },
@@ -193,7 +197,11 @@
                 this.offset = this.data.previousOffset;
             },
             _toNextPage: function () {
-                this.offset = this.data.nextOffset;
+                if (this.data.size >= 2147483647) {
+                    this.offset = this.data.offset + this.data.limit;
+                } else {
+                    this.offset = this.data.nextOffset;
+                }
             },
             _toLastPage: function () {
                 this.offset = this.data.lastOffset;
@@ -203,6 +211,11 @@
                 this.limit = Number.parseInt(evt.target.textContent.trim());
             },
 
+            onAjaxErrorCustom: function (e) {
+                this.onAjaxError(e);
+                this.fire('ajax-running', {running: false});
+            },
+
             queryReports: function (reportId, filter, offset, limit, fromDate, toDate, filtersReady) {
                 if (!filtersReady)
                     return;
@@ -220,6 +233,7 @@
                     }
                 };
                 this.$.ajaxPostReport.generateRequest();
+                this.fire('ajax-running', {running: true});
             },
 
             /* Listeners */
@@ -246,6 +260,8 @@
                 this.set("data", response.data);
                 this.set("columns", response.data.columns);
                 this.set("rows", response.data.rows);
+
+                this.fire('ajax-running', {running: false});
             },
 
             /* Private */
@@ -264,6 +280,7 @@
             },
             refreshReports: function () {
                 this.$.ajaxPostReport.generateRequest();
+                this.fire('ajax-running', {running: true});
             }
         });
     </script>
diff --git a/strolch-wc-reports.html b/strolch-wc-reports.html
index 0eebef4..d9cc80f 100644
--- a/strolch-wc-reports.html
+++ b/strolch-wc-reports.html
@@ -171,6 +171,34 @@
                         color: var(--google-grey-700);
                     };
                 }
+
+                .blur {
+                    -webkit-filter: blur(3px);
+                    -moz-filter: blur(3px);
+                    -o-filter: blur(3px);
+                    -ms-filter: blur(3px);
+                    filter: blur(3px);
+                }
+
+                .overlay-loading {
+                    position: absolute;
+                    width: 100%;
+                    height: 100%;
+                    z-index: 1;
+                }
+
+                .overlay-loading h2 {
+                    margin-top: 35%;
+                    text-align: center;
+                    color: #4d4d4d;
+                }
+
+                paper-spinner {
+                    display: inherit;
+                    margin-left: auto;
+                    margin-right: auto;
+                }
+
             }
         </style>
 
@@ -181,24 +209,28 @@
                    handle-as="json"
                    method="GET"
                    on-response="onGetReportResponse"
-                   on-error="onAjaxError"></iron-ajax>
+                   on-error="onAjaxErrorCustom"></iron-ajax>
         <iron-ajax id="ajaxGetFacets"
                    url="[[baseRestPath]]/strolch/reports/[[reportId]]/facets"
                    content-type="application/json"
                    handle-as="json"
                    method="GET"
                    on-response="onGetFacetResponse"
-                   on-error="onAjaxError"></iron-ajax>
+                   on-error="onAjaxErrorCustom"></iron-ajax>
         <iron-ajax id="ajaxPostCsv"
                    url="[[baseRestPath]]/strolch/reports/[[reportId]]/csv"
                    content-type="application/json"
                    handle-as="text"
                    method="POST"
                    on-response="onPostCsvResponse"
-                   on-error="onAjaxError"></iron-ajax>
+                   on-error="onAjaxErrorCustom"></iron-ajax>
 
         <!-- Content -->
-        <div class="content">
+        <div class="overlay-loading" hidden$="[[hideOverlay]]">
+            <h2 class="overlay-loading-title">[[localize('loading')]]</h2>
+            <paper-spinner active></paper-spinner>
+        </div>
+        <div id="content" class="content">
             <div class="row no-shrink noprint">
                 <paper-material id="targetContainer">
 
@@ -215,12 +247,12 @@
                     <template is="dom-if" if="[[reportId]]">
                         <div id="dateContainer">
 
-                            <vaadin-date-picker label="[[localize('from')]]"
+                            <vaadin-date-picker label="[[localize('From')]]"
                                                 value="{{fromDate}}"
                                                 i18n="{{vaadinI18n}}"></vaadin-date-picker>
 
 
-                            <vaadin-date-picker label="[[localize('to')]]"
+                            <vaadin-date-picker label="[[localize('To')]]"
                                                 value="{{toDate}}"
                                                 i18n="{{vaadinI18n}}"></vaadin-date-picker>
                         </div>
@@ -270,7 +302,8 @@
                                                       report-id="[[reportId]]"
                                                       facet-id="[[facet.type]]"
                                                       fields="[[facet.values]]"
-                                                      filter="[[allFilters]]"></strolch-wc-reports-facet>
+                                                      filter="[[allFilters]]"
+                                                      on-ajax-running="onAjaxRunning"></strolch-wc-reports-facet>
                         </template>
                     </div>
 
@@ -285,7 +318,8 @@
                                                   limit="[[limit]]"
                                                   offset="[[offset]]"
                                                   from-date="[[fromDate]]"
-                                                  to-date="[[toDate]]"></strolch-wc-reports-table>
+                                                  to-date="[[toDate]]"
+                                                  on-ajax-running="onAjaxRunning"></strolch-wc-reports-table>
                     </div>
                 </div>
             </template>
@@ -328,10 +362,12 @@
                     value: true
                 },
                 facets: {
-                    type: Array
+                    type: Array,
+                    value: []
                 },
                 reports: {
-                    type: Array
+                    type: Array,
+                    value: []
                 },
                 filtersReady: {
                     type: Boolean,
@@ -363,9 +399,11 @@
                 },
                 propagateShowDialog: {
                     type: Boolean,
-                    value: function () {
-                        return false
-                    }
+                    value: false
+                },
+                nrOfAjaxCallsRunning: {
+                    type: Number,
+                    value: 0
                 }
             },
 
@@ -391,6 +429,41 @@
                 this.$.dlg.open();
             },
 
+            onAjaxErrorCustom: function (e) {
+                this.hideLoadingOverlay();
+                this.onAjaxError(e);
+            },
+
+            onAjaxRunning: function (e) {
+                if (e.detail.running) {
+                    this.showLoadingOverlay();
+                } else {
+                    this.hideLoadingOverlay();
+                }
+            },
+
+            showLoadingOverlay: function () {
+                this.nrOfAjaxCallsRunning++;
+                console.log("Showing loading overlay in 150ms...");
+                var that = this;
+                clearTimeout(this.showOverlayTimeout);
+                this.showOverlayTimeout = setTimeout(function () {
+                    console.log("Showing loading overlay...");
+                    that.hideOverlay = false;
+                    that.$.content.classList.add("blur");
+                }, 150);
+            },
+            hideLoadingOverlay: function () {
+                this.nrOfAjaxCallsRunning--;
+
+                if (this.nrOfAjaxCallsRunning == 0) {
+                    console.log("Hiding loading overlay...");
+                    clearTimeout(this.showOverlayTimeout);
+                    this.hideOverlay = true;
+                    this.$.content.classList.remove("blur");
+                }
+            },
+
             onToggleShowFacets: function (event) {
                 this.showFacets = !this.showFacets;
             },
@@ -410,6 +483,8 @@
 
                 // directly set this as the available types
                 this.set("reports", data);
+
+                this.hideLoadingOverlay();
             },
             onGetFacetResponse: function (event) {
                 // get the response
@@ -424,6 +499,9 @@
 
                 // directly set this as the available facets
                 this.set("facets", response.data);
+                if (response.data.length == 0) {
+                    this.showFacets = false;
+                }
 
                 // show the view
                 var that = this;
@@ -432,18 +510,30 @@
                     restampTemplate.if = true;
                     that.filtersReady = true;
                 });
+
+                this.hideLoadingOverlay();
             },
             onPostCsvResponse: function (event) {
                 var response = event.detail.response;
                 console.log('Received CSV Result: 8');
                 var fileName = this.reportId + this.toDateTime(new Date()) + '.csv';
                 Strolch.handleAjaxFileDownload(response, fileName, 'text/csv');
+
+                this.hideLoadingOverlay();
             },
             onReportSelected: function (event) {
+
+                // clear the previous view
+                var restampTemplate = this.$.restampTemplate;
+                restampTemplate.if = false;
+                this.set("allFilters", []);
+                this.set("facets", []);
+
                 // set the new report id
                 this.filtersReady = false;
                 this.set("reportId", this.reports[this.selectedReportIndex].id);
                 this.$.ajaxGetFacets.generateRequest();
+                this.showLoadingOverlay();
             },
             onSelectionChanged: function (event) {
                 this.updateAllFilters();
@@ -453,13 +543,28 @@
                     'Content-Type': 'application/json',
                     'Accept': 'text/csv'
                 };
+
+                var from = this.fromDate == null || Strolch.isEmptyString(this.fromDate) ? null : new Date(this.fromDate).toISOString();
+                var to = this.toDate == null || Strolch.isEmptyString(this.toDate) ? null : new Date(this.toDate).toISOString();
+
                 this.$.ajaxPostCsv.body = {
-                    filter: this.allFilters
+                    filter: this.allFilters,
+                    dateRange: {
+                        from: from,
+                        to: to
+                    }
                 };
                 this.$.ajaxPostCsv.generateRequest();
+                this.showLoadingOverlay();
             },
             onRefreshTapped: function (event) {
-                this.$$("#table").refreshReports();
+                var table = this.$$("#table");
+                if (table == null) {
+                    this.$.ajaxGetFacets.generateRequest();
+                    this.showLoadingOverlay();
+                } else {
+                    table.refreshReports();
+                }
             },
 
             onPrintTapped: function (elem) {
@@ -469,6 +574,7 @@
 
             reload: function () {
                 this.$.ajaxGetReports.generateRequest();
+                this.showLoadingOverlay();
             },
 
             /* Private */