[Major] Refresh fixes and loading overlay
This commit is contained in:
parent
c0fb08c88e
commit
abd144721b
|
@ -1,7 +1,7 @@
|
||||||
{
|
{
|
||||||
"name": "strolch-wc-reports",
|
"name": "strolch-wc-reports",
|
||||||
"description": "Strolch WebComponent Reports",
|
"description": "Strolch WebComponent Reports",
|
||||||
"version": "0.1.6",
|
"version": "0.2.0",
|
||||||
"authors": [
|
"authors": [
|
||||||
"Robert von Burg"
|
"Robert von Burg"
|
||||||
],
|
],
|
||||||
|
|
|
@ -145,7 +145,7 @@
|
||||||
handle-as="json"
|
handle-as="json"
|
||||||
method="GET"
|
method="GET"
|
||||||
on-response="onPostFieldResponse"
|
on-response="onPostFieldResponse"
|
||||||
on-error="onAjaxError"></iron-ajax>
|
on-error="onAjaxErrorCustom"></iron-ajax>
|
||||||
|
|
||||||
<!-- Content -->
|
<!-- Content -->
|
||||||
<paper-card>
|
<paper-card>
|
||||||
|
@ -164,8 +164,8 @@
|
||||||
<div class="card-actions">
|
<div class="card-actions">
|
||||||
|
|
||||||
<strolch-wc-debounced-input id="debouncedInput"
|
<strolch-wc-debounced-input id="debouncedInput"
|
||||||
debounced-input="{{searchTerm}}"
|
debounced-input="{{searchTerm}}"
|
||||||
disabled="[[arrayFilled(filters)]]"></strolch-wc-debounced-input>
|
disabled="[[arrayFilled(filters)]]"></strolch-wc-debounced-input>
|
||||||
|
|
||||||
<paper-listbox id="fieldList" attr-for-selected="field-id" multi>
|
<paper-listbox id="fieldList" attr-for-selected="field-id" multi>
|
||||||
<template is="dom-repeat" items="[[fields]]" as="field">
|
<template is="dom-repeat" items="[[fields]]" as="field">
|
||||||
|
@ -253,17 +253,25 @@
|
||||||
limit: Susi.Constants.limit
|
limit: Susi.Constants.limit
|
||||||
};
|
};
|
||||||
this.$.ajaxGetFields.generateRequest();
|
this.$.ajaxGetFields.generateRequest();
|
||||||
|
this.fire('ajax-running', {running: true});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
/* Listeners */
|
/* Listeners */
|
||||||
listeners: {},
|
listeners: {},
|
||||||
|
|
||||||
|
onAjaxErrorCustom: function (e) {
|
||||||
|
this.onAjaxError(e);
|
||||||
|
this.fire('ajax-running', {running: false});
|
||||||
|
},
|
||||||
|
|
||||||
onPostFieldResponse: function (event) {
|
onPostFieldResponse: function (event) {
|
||||||
// get the response
|
// get the response
|
||||||
var response = event.detail.response;
|
var response = event.detail.response;
|
||||||
|
|
||||||
// directly set this as the available types
|
// directly set this as the available types
|
||||||
this.set("fields", response.data);
|
this.set("fields", response.data);
|
||||||
|
this.fire('ajax-running', {running: false});
|
||||||
},
|
},
|
||||||
onItemsTapped: function (event) {
|
onItemsTapped: function (event) {
|
||||||
// get the tapped filter
|
// get the tapped filter
|
||||||
|
@ -282,8 +290,7 @@
|
||||||
});
|
});
|
||||||
if (filterIndex >= 0) {
|
if (filterIndex >= 0) {
|
||||||
filters.splice(filterIndex, 1);
|
filters.splice(filterIndex, 1);
|
||||||
}
|
} else {
|
||||||
else {
|
|
||||||
filters.push(tappedFilter);
|
filters.push(tappedFilter);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -94,7 +94,7 @@
|
||||||
handle-as="json"
|
handle-as="json"
|
||||||
method="POST"
|
method="POST"
|
||||||
on-response="onPostReportResponse"
|
on-response="onPostReportResponse"
|
||||||
on-error="onAjaxError"></iron-ajax>
|
on-error="onAjaxErrorCustom"></iron-ajax>
|
||||||
|
|
||||||
<!-- Content -->
|
<!-- Content -->
|
||||||
<paper-material id="content">
|
<paper-material id="content">
|
||||||
|
@ -125,7 +125,7 @@
|
||||||
<div class="g-center">
|
<div class="g-center">
|
||||||
<paper-icon-button icon="first-page" on-tap="_toFirstPage"></paper-icon-button>
|
<paper-icon-button icon="first-page" on-tap="_toFirstPage"></paper-icon-button>
|
||||||
<paper-icon-button icon="chevron-left" on-tap="_toPreviousPage"></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="chevron-right" on-tap="_toNextPage"></paper-icon-button>
|
||||||
<paper-icon-button icon="last-page" on-tap="_toLastPage"></paper-icon-button>
|
<paper-icon-button icon="last-page" on-tap="_toLastPage"></paper-icon-button>
|
||||||
</div>
|
</div>
|
||||||
|
@ -186,6 +186,10 @@
|
||||||
return data == null ? 0 : data.size;
|
return data == null ? 0 : data.size;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
_getSize: function (data) {
|
||||||
|
return data == null || data.size >= 2147483647 ? this.localize('unknown') : data.size;
|
||||||
|
},
|
||||||
|
|
||||||
_toFirstPage: function () {
|
_toFirstPage: function () {
|
||||||
this.offset = 0;
|
this.offset = 0;
|
||||||
},
|
},
|
||||||
|
@ -193,7 +197,11 @@
|
||||||
this.offset = this.data.previousOffset;
|
this.offset = this.data.previousOffset;
|
||||||
},
|
},
|
||||||
_toNextPage: function () {
|
_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 () {
|
_toLastPage: function () {
|
||||||
this.offset = this.data.lastOffset;
|
this.offset = this.data.lastOffset;
|
||||||
|
@ -203,6 +211,11 @@
|
||||||
this.limit = Number.parseInt(evt.target.textContent.trim());
|
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) {
|
queryReports: function (reportId, filter, offset, limit, fromDate, toDate, filtersReady) {
|
||||||
if (!filtersReady)
|
if (!filtersReady)
|
||||||
return;
|
return;
|
||||||
|
@ -220,6 +233,7 @@
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
this.$.ajaxPostReport.generateRequest();
|
this.$.ajaxPostReport.generateRequest();
|
||||||
|
this.fire('ajax-running', {running: true});
|
||||||
},
|
},
|
||||||
|
|
||||||
/* Listeners */
|
/* Listeners */
|
||||||
|
@ -246,6 +260,8 @@
|
||||||
this.set("data", response.data);
|
this.set("data", response.data);
|
||||||
this.set("columns", response.data.columns);
|
this.set("columns", response.data.columns);
|
||||||
this.set("rows", response.data.rows);
|
this.set("rows", response.data.rows);
|
||||||
|
|
||||||
|
this.fire('ajax-running', {running: false});
|
||||||
},
|
},
|
||||||
|
|
||||||
/* Private */
|
/* Private */
|
||||||
|
@ -264,6 +280,7 @@
|
||||||
},
|
},
|
||||||
refreshReports: function () {
|
refreshReports: function () {
|
||||||
this.$.ajaxPostReport.generateRequest();
|
this.$.ajaxPostReport.generateRequest();
|
||||||
|
this.fire('ajax-running', {running: true});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -171,6 +171,34 @@
|
||||||
color: var(--google-grey-700);
|
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>
|
</style>
|
||||||
|
|
||||||
|
@ -181,24 +209,28 @@
|
||||||
handle-as="json"
|
handle-as="json"
|
||||||
method="GET"
|
method="GET"
|
||||||
on-response="onGetReportResponse"
|
on-response="onGetReportResponse"
|
||||||
on-error="onAjaxError"></iron-ajax>
|
on-error="onAjaxErrorCustom"></iron-ajax>
|
||||||
<iron-ajax id="ajaxGetFacets"
|
<iron-ajax id="ajaxGetFacets"
|
||||||
url="[[baseRestPath]]/strolch/reports/[[reportId]]/facets"
|
url="[[baseRestPath]]/strolch/reports/[[reportId]]/facets"
|
||||||
content-type="application/json"
|
content-type="application/json"
|
||||||
handle-as="json"
|
handle-as="json"
|
||||||
method="GET"
|
method="GET"
|
||||||
on-response="onGetFacetResponse"
|
on-response="onGetFacetResponse"
|
||||||
on-error="onAjaxError"></iron-ajax>
|
on-error="onAjaxErrorCustom"></iron-ajax>
|
||||||
<iron-ajax id="ajaxPostCsv"
|
<iron-ajax id="ajaxPostCsv"
|
||||||
url="[[baseRestPath]]/strolch/reports/[[reportId]]/csv"
|
url="[[baseRestPath]]/strolch/reports/[[reportId]]/csv"
|
||||||
content-type="application/json"
|
content-type="application/json"
|
||||||
handle-as="text"
|
handle-as="text"
|
||||||
method="POST"
|
method="POST"
|
||||||
on-response="onPostCsvResponse"
|
on-response="onPostCsvResponse"
|
||||||
on-error="onAjaxError"></iron-ajax>
|
on-error="onAjaxErrorCustom"></iron-ajax>
|
||||||
|
|
||||||
<!-- Content -->
|
<!-- 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">
|
<div class="row no-shrink noprint">
|
||||||
<paper-material id="targetContainer">
|
<paper-material id="targetContainer">
|
||||||
|
|
||||||
|
@ -215,12 +247,12 @@
|
||||||
<template is="dom-if" if="[[reportId]]">
|
<template is="dom-if" if="[[reportId]]">
|
||||||
<div id="dateContainer">
|
<div id="dateContainer">
|
||||||
|
|
||||||
<vaadin-date-picker label="[[localize('from')]]"
|
<vaadin-date-picker label="[[localize('From')]]"
|
||||||
value="{{fromDate}}"
|
value="{{fromDate}}"
|
||||||
i18n="{{vaadinI18n}}"></vaadin-date-picker>
|
i18n="{{vaadinI18n}}"></vaadin-date-picker>
|
||||||
|
|
||||||
|
|
||||||
<vaadin-date-picker label="[[localize('to')]]"
|
<vaadin-date-picker label="[[localize('To')]]"
|
||||||
value="{{toDate}}"
|
value="{{toDate}}"
|
||||||
i18n="{{vaadinI18n}}"></vaadin-date-picker>
|
i18n="{{vaadinI18n}}"></vaadin-date-picker>
|
||||||
</div>
|
</div>
|
||||||
|
@ -270,7 +302,8 @@
|
||||||
report-id="[[reportId]]"
|
report-id="[[reportId]]"
|
||||||
facet-id="[[facet.type]]"
|
facet-id="[[facet.type]]"
|
||||||
fields="[[facet.values]]"
|
fields="[[facet.values]]"
|
||||||
filter="[[allFilters]]"></strolch-wc-reports-facet>
|
filter="[[allFilters]]"
|
||||||
|
on-ajax-running="onAjaxRunning"></strolch-wc-reports-facet>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -285,7 +318,8 @@
|
||||||
limit="[[limit]]"
|
limit="[[limit]]"
|
||||||
offset="[[offset]]"
|
offset="[[offset]]"
|
||||||
from-date="[[fromDate]]"
|
from-date="[[fromDate]]"
|
||||||
to-date="[[toDate]]"></strolch-wc-reports-table>
|
to-date="[[toDate]]"
|
||||||
|
on-ajax-running="onAjaxRunning"></strolch-wc-reports-table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -328,10 +362,12 @@
|
||||||
value: true
|
value: true
|
||||||
},
|
},
|
||||||
facets: {
|
facets: {
|
||||||
type: Array
|
type: Array,
|
||||||
|
value: []
|
||||||
},
|
},
|
||||||
reports: {
|
reports: {
|
||||||
type: Array
|
type: Array,
|
||||||
|
value: []
|
||||||
},
|
},
|
||||||
filtersReady: {
|
filtersReady: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
|
@ -363,9 +399,11 @@
|
||||||
},
|
},
|
||||||
propagateShowDialog: {
|
propagateShowDialog: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
value: function () {
|
value: false
|
||||||
return false
|
},
|
||||||
}
|
nrOfAjaxCallsRunning: {
|
||||||
|
type: Number,
|
||||||
|
value: 0
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -391,6 +429,41 @@
|
||||||
this.$.dlg.open();
|
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) {
|
onToggleShowFacets: function (event) {
|
||||||
this.showFacets = !this.showFacets;
|
this.showFacets = !this.showFacets;
|
||||||
},
|
},
|
||||||
|
@ -410,6 +483,8 @@
|
||||||
|
|
||||||
// directly set this as the available types
|
// directly set this as the available types
|
||||||
this.set("reports", data);
|
this.set("reports", data);
|
||||||
|
|
||||||
|
this.hideLoadingOverlay();
|
||||||
},
|
},
|
||||||
onGetFacetResponse: function (event) {
|
onGetFacetResponse: function (event) {
|
||||||
// get the response
|
// get the response
|
||||||
|
@ -424,6 +499,9 @@
|
||||||
|
|
||||||
// directly set this as the available facets
|
// directly set this as the available facets
|
||||||
this.set("facets", response.data);
|
this.set("facets", response.data);
|
||||||
|
if (response.data.length == 0) {
|
||||||
|
this.showFacets = false;
|
||||||
|
}
|
||||||
|
|
||||||
// show the view
|
// show the view
|
||||||
var that = this;
|
var that = this;
|
||||||
|
@ -432,18 +510,30 @@
|
||||||
restampTemplate.if = true;
|
restampTemplate.if = true;
|
||||||
that.filtersReady = true;
|
that.filtersReady = true;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
this.hideLoadingOverlay();
|
||||||
},
|
},
|
||||||
onPostCsvResponse: function (event) {
|
onPostCsvResponse: function (event) {
|
||||||
var response = event.detail.response;
|
var response = event.detail.response;
|
||||||
console.log('Received CSV Result: 8');
|
console.log('Received CSV Result: 8');
|
||||||
var fileName = this.reportId + this.toDateTime(new Date()) + '.csv';
|
var fileName = this.reportId + this.toDateTime(new Date()) + '.csv';
|
||||||
Strolch.handleAjaxFileDownload(response, fileName, 'text/csv');
|
Strolch.handleAjaxFileDownload(response, fileName, 'text/csv');
|
||||||
|
|
||||||
|
this.hideLoadingOverlay();
|
||||||
},
|
},
|
||||||
onReportSelected: function (event) {
|
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
|
// set the new report id
|
||||||
this.filtersReady = false;
|
this.filtersReady = false;
|
||||||
this.set("reportId", this.reports[this.selectedReportIndex].id);
|
this.set("reportId", this.reports[this.selectedReportIndex].id);
|
||||||
this.$.ajaxGetFacets.generateRequest();
|
this.$.ajaxGetFacets.generateRequest();
|
||||||
|
this.showLoadingOverlay();
|
||||||
},
|
},
|
||||||
onSelectionChanged: function (event) {
|
onSelectionChanged: function (event) {
|
||||||
this.updateAllFilters();
|
this.updateAllFilters();
|
||||||
|
@ -453,13 +543,28 @@
|
||||||
'Content-Type': 'application/json',
|
'Content-Type': 'application/json',
|
||||||
'Accept': 'text/csv'
|
'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 = {
|
this.$.ajaxPostCsv.body = {
|
||||||
filter: this.allFilters
|
filter: this.allFilters,
|
||||||
|
dateRange: {
|
||||||
|
from: from,
|
||||||
|
to: to
|
||||||
|
}
|
||||||
};
|
};
|
||||||
this.$.ajaxPostCsv.generateRequest();
|
this.$.ajaxPostCsv.generateRequest();
|
||||||
|
this.showLoadingOverlay();
|
||||||
},
|
},
|
||||||
onRefreshTapped: function (event) {
|
onRefreshTapped: function (event) {
|
||||||
this.$$("#table").refreshReports();
|
var table = this.$$("#table");
|
||||||
|
if (table == null) {
|
||||||
|
this.$.ajaxGetFacets.generateRequest();
|
||||||
|
this.showLoadingOverlay();
|
||||||
|
} else {
|
||||||
|
table.refreshReports();
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
onPrintTapped: function (elem) {
|
onPrintTapped: function (elem) {
|
||||||
|
@ -469,6 +574,7 @@
|
||||||
|
|
||||||
reload: function () {
|
reload: function () {
|
||||||
this.$.ajaxGetReports.generateRequest();
|
this.$.ajaxGetReports.generateRequest();
|
||||||
|
this.showLoadingOverlay();
|
||||||
},
|
},
|
||||||
|
|
||||||
/* Private */
|
/* Private */
|
||||||
|
|
Loading…
Reference in New Issue