Strolch
/
strolch-wc-reports
mirror of https://github.com/strolch-li/strolch-wc-reports.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[Major] Refresh fixes and loading overlay

This commit is contained in:
Robert von Burg 2019-03-06 15:10:51 +01:00
parent c0fb08c88e
commit abd144721b
4 changed files with 154 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
bower.json
View File

@ -1,7 +1,7 @@
{
"name": "strolch-wc-reports",
"description": "Strolch WebComponent Reports",
"version": "0.1.6",
"version": "0.2.0",
"authors": [
"Robert von Burg"
],

17
strolch-wc-reports-facet.html
View File

@ -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);
}

23
strolch-wc-reports-table.html
View File

@ -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>

136
strolch-wc-reports.html
View File

@ -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 */