599 lines
22 KiB
HTML
599 lines
22 KiB
HTML
<link rel="import" href="../polymer/polymer.html">
|
|
|
|
<link rel="import" href="../iron-ajax/iron-ajax.html">
|
|
<link rel="import" href="../iron-icon/iron-icon.html">
|
|
<link rel="import" href="../paper-button/paper-button.html">
|
|
<link rel="import" href="../paper-dialog/paper-dialog.html">
|
|
<link rel="import" href="../paper-spinner/paper-spinner.html">
|
|
<link rel="import" href="../paper-dropdown-menu/paper-dropdown-menu.html">
|
|
<link rel="import" href="../paper-item/paper-item.html">
|
|
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
|
|
<link rel="import" href="../paper-listbox/paper-listbox.html">
|
|
<link rel="import" href="../paper-material/paper-material.html">
|
|
<link rel="import" href="../paper-tooltip/paper-tooltip.html">
|
|
<link rel="import" href="../vaadin-date-picker/vaadin-date-picker.html">
|
|
|
|
<link rel="import" href="../strolch-wc-styles/strolch-wc-styles.html">
|
|
<link rel="import" href="../strolch-wc-localize-behavior/strolch-wc-localize-behavior.html">
|
|
|
|
<link rel="import" href="strolch-wc-reports-behavior.html">
|
|
<link rel="import" href="strolch-wc-reports-facet.html">
|
|
<link rel="import" href="strolch-wc-reports-table.html">
|
|
|
|
<dom-module id="strolch-wc-reports">
|
|
<template>
|
|
|
|
<!-- Style -->
|
|
<style is="custom-style" include="strolch-wc-styles">
|
|
@media print {
|
|
.noprint {
|
|
display: none
|
|
}
|
|
}
|
|
|
|
@media screen {
|
|
:host {
|
|
--box-space: 12px;
|
|
}
|
|
|
|
.content {
|
|
@apply(--layout-vertical);
|
|
height: calc(100vh - var(--app-header-height) - (2 * var(--app-pages-content-padding)));
|
|
padding: var(--app-pages-content-padding);
|
|
}
|
|
|
|
.row {
|
|
@apply(--layout-horizontal);
|
|
}
|
|
|
|
.row:not(:first-of-type) {
|
|
padding-top: var(--box-space);
|
|
}
|
|
|
|
.row.fill-parent {
|
|
height: 100%;
|
|
}
|
|
|
|
.row.no-shrink {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
#targetContainer {
|
|
@apply(--layout-horizontal);
|
|
width: 100%;
|
|
min-height: 58px;
|
|
padding: 0 12px;
|
|
background-color: white;
|
|
}
|
|
|
|
#targetContainer > paper-dropdown-menu {
|
|
margin-right: auto;
|
|
}
|
|
|
|
#targetContainer > paper-dropdown-menu,
|
|
#dateContainer {
|
|
@apply(--layout-horizontal);
|
|
@apply(--layout-end);
|
|
}
|
|
|
|
#targetContainer > paper-dropdown-menu,
|
|
#dateContainer > vaadin-date-picker {
|
|
height: 100%;
|
|
|
|
--paper-input-container-color: var(--google-grey-500);
|
|
--paper-input-container-focus-color: var(--google-grey-700);
|
|
--paper-input-container-input-color: var(--google-grey-700);
|
|
--paper-input-container: {
|
|
position: relative;
|
|
padding: 0;
|
|
margin-top: 4px;
|
|
margin-bottom: 8px;
|
|
};
|
|
--paper-input-container-underline-disabled: {
|
|
border-bottom-style: solid;
|
|
};
|
|
}
|
|
|
|
#buttonContainer {
|
|
@apply(--layout-horizontal);
|
|
@apply(--layout-center-justified);
|
|
margin: auto 0 auto auto;
|
|
}
|
|
|
|
#buttonContainer > * {
|
|
height: 40px;
|
|
align-self: center;
|
|
}
|
|
|
|
#dateContainer {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
#facetContainer {
|
|
@apply(--layout-flex);
|
|
margin-right: calc(var(--box-space) * 0.5);
|
|
overflow-x: visible;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
#facetContainer > strolch-wc-reports-facet:not(:last-of-type) {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
#tableContainer {
|
|
@apply(--layout-flex-3);
|
|
margin-left: calc(var(--box-space) * 0.5);
|
|
overflow-x: visible;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
.light-border {
|
|
border-style: solid;
|
|
border-width: 0.5px;
|
|
border-color: var(--google-grey-300);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
paper-dropdown-menu paper-item {
|
|
height: 1px;
|
|
}
|
|
|
|
#dateContainer > vaadin-date-picker:first-of-type {
|
|
margin-left: 6%;
|
|
margin-right: 2%;
|
|
}
|
|
|
|
#dateContainer > vaadin-date-picker:last-of-type {
|
|
margin-left: 2%;
|
|
margin-right: 6%;
|
|
}
|
|
|
|
vaadin-date-picker {
|
|
--vaadin-date-picker-yearscroller: {
|
|
color: var(--app-dark-highlight-fg-color);
|
|
background-color: var(--app-dark-highlight-bg-color);
|
|
overflow: initial;
|
|
};
|
|
--vaadin-date-picker-calendar-cell-selected: {
|
|
color: var(--app-regular-highlight-fg-color);
|
|
background-color: var(--app-regular-highlight-bg-color);
|
|
border-radius: 2px;
|
|
};
|
|
--vaadin-date-picker-calendar-cell-focused: {
|
|
color: var(--app-dark-highlight-fg-color);
|
|
background-color: var(--app-dark-highlight-bg-color);
|
|
};
|
|
--vaadin-date-picker-calendar-cell-today: {
|
|
color: unset;
|
|
background-color: unset;
|
|
font-weight: bold;
|
|
};
|
|
--vaadin-date-picker-footer: {
|
|
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>
|
|
|
|
<!-- Requests -->
|
|
<iron-ajax id="ajaxGetReports"
|
|
url="[[baseRestPath]]/strolch/reports"
|
|
content-type="application/json"
|
|
handle-as="json"
|
|
method="GET"
|
|
on-response="onGetReportResponse"
|
|
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="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="onAjaxErrorCustom"></iron-ajax>
|
|
|
|
<!-- 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">
|
|
|
|
<paper-dropdown-menu label="[[localize('reportType')]]">
|
|
<paper-listbox class="dropdown-content"
|
|
selected="{{selectedReportIndex}}"
|
|
on-iron-select="onReportSelected">
|
|
<template is="dom-repeat" items="[[reports]]" as="report">
|
|
<paper-item class="dropdown-item">[[localize(report.name)]]</paper-item>
|
|
</template>
|
|
</paper-listbox>
|
|
</paper-dropdown-menu>
|
|
|
|
<template is="dom-if" if="[[reportId]]">
|
|
<div id="dateContainer">
|
|
|
|
<vaadin-date-picker label="[[localize('From')]]"
|
|
value="{{fromDate}}"
|
|
i18n="{{vaadinI18n}}"></vaadin-date-picker>
|
|
|
|
|
|
<vaadin-date-picker label="[[localize('To')]]"
|
|
value="{{toDate}}"
|
|
i18n="{{vaadinI18n}}"></vaadin-date-picker>
|
|
</div>
|
|
</template>
|
|
|
|
<div id="buttonContainer">
|
|
<paper-button id="exportButton" on-tap="onExportTapped" disabled$="[[!reportId]]" raised>
|
|
<iron-icon icon="launch"></iron-icon>
|
|
{{localize('buttonExportLabel')}}
|
|
</paper-button>
|
|
<paper-button id="printButton" on-tap="onPrintTapped" disabled$="[[!reportId]]" raised>
|
|
<iron-icon icon="print"></iron-icon>
|
|
{{localize('buttonPrintLabel')}}
|
|
</paper-button>
|
|
<paper-icon-button id="refreshButton"
|
|
on-tap="onRefreshTapped"
|
|
icon="refresh"
|
|
disabled$="[[!reportId]]"></paper-icon-button>
|
|
</div>
|
|
<paper-tooltip for="exportButton" position="top" offset="4">
|
|
{{localize('buttonExportDesc')}}
|
|
</paper-tooltip>
|
|
<paper-tooltip for="refreshButton" position="top" offset="4">
|
|
{{localize('refreshView')}}
|
|
</paper-tooltip>
|
|
|
|
</paper-material>
|
|
</div>
|
|
|
|
<template id="restampTemplate" is="dom-if" restamp>
|
|
<div class="row fill-parent">
|
|
|
|
<template is="dom-if" if="[[!showFacets]]">
|
|
<paper-icon-button icon="chevron-right" on-tap="onToggleShowFacets"></paper-icon-button>
|
|
</template>
|
|
|
|
<div id="facetContainer"
|
|
class="light-border noprint"
|
|
on-iron-select="onSelectionChanged"
|
|
on-iron-deselect="onSelectionChanged"
|
|
hidden$="[[!showFacets]]">
|
|
<paper-icon-button icon="chevron-left" on-tap="onToggleShowFacets"></paper-icon-button>
|
|
<template is="dom-repeat" items="[[facets]]" as="facet">
|
|
<strolch-wc-reports-facet base-path="[[basePath]]"
|
|
base-rest-path="[[baseRestPath]]"
|
|
locales-path="[[localesPath]]"
|
|
report-id="[[reportId]]"
|
|
facet-id="[[facet.type]]"
|
|
fields="[[facet.values]]"
|
|
filter="[[allFilters]]"
|
|
on-ajax-running="onAjaxRunning"></strolch-wc-reports-facet>
|
|
</template>
|
|
</div>
|
|
|
|
<div id="tableContainer" class="light-border print-me">
|
|
<strolch-wc-reports-table id="table"
|
|
base-path="[[basePath]]"
|
|
locales-path="[[localesPath]]"
|
|
base-rest-path="[[baseRestPath]]"
|
|
filters-ready="[[filtersReady]]"
|
|
report-id="[[reportId]]"
|
|
filter="[[allFilters]]"
|
|
limit="[[limit]]"
|
|
offset="[[offset]]"
|
|
from-date="[[fromDate]]"
|
|
to-date="[[toDate]]"
|
|
on-ajax-running="onAjaxRunning"></strolch-wc-reports-table>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<paper-dialog id="dlg" modal>
|
|
<h2>[[dlgTitle]]</h2>
|
|
<p>[[dlgText]]</p>
|
|
<div class="buttons">
|
|
<paper-button dialog-confirm autofocus>Close</paper-button>
|
|
</div>
|
|
</paper-dialog>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
Polymer({
|
|
|
|
/* Component */
|
|
is: "strolch-wc-reports",
|
|
behaviors: [
|
|
StrolchLocalizeBehavior, StrolchReportsBehavior
|
|
],
|
|
|
|
/* Properties */
|
|
properties: {
|
|
toolbarConfig: {
|
|
type: Object,
|
|
value: {
|
|
pageTitle: "reports",
|
|
backButton: true,
|
|
searchInput: false,
|
|
lockLocation: false
|
|
},
|
|
notify: true,
|
|
readOnly: true
|
|
},
|
|
showFacets: {
|
|
type: Boolean,
|
|
value: true
|
|
},
|
|
facets: {
|
|
type: Array,
|
|
value: []
|
|
},
|
|
reports: {
|
|
type: Array,
|
|
value: []
|
|
},
|
|
filtersReady: {
|
|
type: Boolean,
|
|
value: false
|
|
},
|
|
allFilters: {
|
|
type: Array,
|
|
value: []
|
|
},
|
|
reportId: {
|
|
type: String,
|
|
value: null
|
|
},
|
|
offset: {
|
|
type: Number,
|
|
value: 0
|
|
},
|
|
limit: {
|
|
type: Number,
|
|
value: 25
|
|
},
|
|
fromDate: {
|
|
type: Date,
|
|
value: null
|
|
},
|
|
toDate: {
|
|
type: Date,
|
|
value: null
|
|
},
|
|
propagateShowDialog: {
|
|
type: Boolean,
|
|
value: false
|
|
},
|
|
nrOfAjaxCallsRunning: {
|
|
type: Number,
|
|
value: 0
|
|
}
|
|
},
|
|
|
|
/* Computations */
|
|
|
|
/* Observers */
|
|
observers: [],
|
|
|
|
/* Listeners */
|
|
listeners: {
|
|
"strolch-show-dialog": "onShowDialog"
|
|
},
|
|
|
|
onShowDialog: function (event) {
|
|
if (!this.propagateShowDialog) {
|
|
this.showError(event.detail.title, event.detail.text);
|
|
}
|
|
},
|
|
showError: function (title, text) {
|
|
this.dlgTitle = title;
|
|
this.dlgText = text;
|
|
console.log('ERROR: ' + this.dlgTitle + ': ' + this.dlgText);
|
|
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;
|
|
},
|
|
onGetReportResponse: function (event) {
|
|
// get the response
|
|
var data = event.detail.response.data;
|
|
var that = this;
|
|
data.sort(function (a, b) {
|
|
a = that.localize(a.name);
|
|
b = that.localize(b.name);
|
|
if (a < b)
|
|
return -1;
|
|
if (a > b)
|
|
return 1;
|
|
return 0;
|
|
});
|
|
|
|
// directly set this as the available types
|
|
this.set("reports", data);
|
|
|
|
this.hideLoadingOverlay();
|
|
},
|
|
onGetFacetResponse: function (event) {
|
|
// get the response
|
|
var response = event.detail.response;
|
|
|
|
// hide the view
|
|
var restampTemplate = this.$.restampTemplate;
|
|
restampTemplate.if = false;
|
|
|
|
// remove all filters
|
|
this.set("allFilters", []);
|
|
|
|
// 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;
|
|
setTimeout(function () {
|
|
that.offset = 0;
|
|
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();
|
|
},
|
|
onExportTapped: function (event) {
|
|
this.$.ajaxPostCsv.headers = {
|
|
'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,
|
|
dateRange: {
|
|
from: from,
|
|
to: to
|
|
}
|
|
};
|
|
this.$.ajaxPostCsv.generateRequest();
|
|
this.showLoadingOverlay();
|
|
},
|
|
onRefreshTapped: function (event) {
|
|
var table = this.$$("#table");
|
|
if (table == null) {
|
|
this.$.ajaxGetFacets.generateRequest();
|
|
this.showLoadingOverlay();
|
|
} else {
|
|
table.refreshReports();
|
|
}
|
|
},
|
|
|
|
onPrintTapped: function (elem) {
|
|
window.print();
|
|
return true;
|
|
},
|
|
|
|
reload: function () {
|
|
this.$.ajaxGetReports.generateRequest();
|
|
this.showLoadingOverlay();
|
|
},
|
|
|
|
/* Private */
|
|
|
|
/* Public */
|
|
updateAllFilters: function () {
|
|
var allFilters = [];
|
|
var facets = Polymer.dom(this.root).querySelectorAll("strolch-wc-reports-facet");
|
|
for (var i in facets) {
|
|
allFilters.push({
|
|
facetType: facets[i].facetId,
|
|
facetFilters: facets[i].filters
|
|
});
|
|
}
|
|
this.set("allFilters", allFilters);
|
|
}
|
|
|
|
});
|
|
</script>
|
|
</dom-module>
|