[Major] Refresh fixes and loading overlay
This commit is contained in:
parent
c0fb08c88e
commit
abd144721b
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "strolch-wc-reports",
|
||||
"description": "Strolch WebComponent Reports",
|
||||
"version": "0.1.6",
|
||||
"version": "0.2.0",
|
||||
"authors": [
|
||||
"Robert von Burg"
|
||||
],
|
||||
|
|
|
@ -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>
|
||||
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
@ -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 () {
|
||||
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>
|
||||
|
|
|
@ -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 */
|
||||
|
|
Loading…
Reference in New Issue