818 lines
32 KiB
HTML
818 lines
32 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;
|
|
--facet-width-opened: 350px;
|
|
--facet-width-closed: 22px;
|
|
--facet-width: var(--facet-width-opened);
|
|
--table-width: calc(100vw - var(--facet-width) - 30px);
|
|
}
|
|
|
|
.content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.row:not(:first-of-type) {
|
|
padding-top: var(--box-space);
|
|
}
|
|
|
|
.row.no-shrink {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
#actionBar {
|
|
@apply(--layout-horizontal);
|
|
width: calc(100vw - 30px);
|
|
padding: 0 12px;
|
|
background-color: white;
|
|
}
|
|
|
|
#actionBar > paper-dropdown-menu {
|
|
margin-right: auto;
|
|
}
|
|
|
|
#actionBar > paper-dropdown-menu,
|
|
#dateContainer {
|
|
@apply(--layout-horizontal);
|
|
@apply(--layout-end);
|
|
}
|
|
|
|
#actionBar > 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 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-basis: var(--facet-width);
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
margin-left: 10px;
|
|
margin-right: calc(var(--box-space) * 0.5);
|
|
height: calc(100vh - 140px);
|
|
overflow: auto;
|
|
}
|
|
|
|
strolch-wc-reports-facet {
|
|
width: calc(var(--facet-width) - 20px);
|
|
}
|
|
|
|
#facetContainer > strolch-wc-reports-facet:not(:last-child) {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
#tableContainer {
|
|
margin-left: calc(var(--box-space) * 0.5);
|
|
}
|
|
|
|
strolch-wc-reports-table {
|
|
height: calc(100vh - 195px);
|
|
width: var(--table-width);
|
|
}
|
|
|
|
.footer {
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
padding-top: 5px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.footer p, .duration {
|
|
color: #b5b5b5;
|
|
}
|
|
|
|
.light-border {
|
|
border-style: solid;
|
|
border-width: 0.5px;
|
|
border-color: var(--google-grey-300);
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
.limitBtn {
|
|
min-width: inherit;
|
|
}
|
|
|
|
.bold {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.facetInfo {
|
|
margin: 0 auto 16px;
|
|
}
|
|
|
|
paper-input {
|
|
display: inline-block;
|
|
width: calc(100% - 45px);
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<!-- Requests -->
|
|
<iron-ajax id="ajaxGetReports" url="[[baseRestPath]]/strolch/reports" content-type="application/json" handle-as="json" method="GET"
|
|
on-response="onGetReportResponse" on-error="onAjaxError" loading="{{loadingGetReports}}"></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" loading="{{loadingGetFacets}}"></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" loading="{{loadingPostCsv}}"></iron-ajax>
|
|
<iron-ajax id="ajaxPostReport" url="[[baseRestPath]]/strolch/reports/[[reportId]]" content-type="application/json" handle-as="json" method="POST"
|
|
on-response="onPostReportResponse" on-error="onAjaxError" loading="{{loadingPostReport}}"></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="actionBar">
|
|
|
|
<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">
|
|
|
|
<template is="dom-if" if="[[!showFacets]]" restamp>
|
|
<div>
|
|
<paper-icon-button class="showFacetsBtn noprint"
|
|
icon="chevron-right"
|
|
on-tap="onToggleShowFacets"></paper-icon-button>
|
|
</div>
|
|
</template>
|
|
|
|
<div id="facetContainer" class="light-border noprint" on-iron-select="onSelectionChanged" on-iron-deselect="onSelectionChanged"
|
|
hidden$="[[!showFacets]]" restamp>
|
|
<paper-icon-button icon="chevron-left" on-tap="onToggleShowFacets"></paper-icon-button>
|
|
|
|
<template is="dom-if" if="[[arrayEmpty(facets)]]">
|
|
<p class="facetInfo"><i>[[localize('noFacetsAvailable')]]</i></p>
|
|
</template>
|
|
<template is="dom-if" if="[[arrayFilled(facets)]]">
|
|
<template is="dom-if" if="[[areRowFacetsLimited]]">
|
|
<p class="facetInfo"><i>[[localize('facetsAreBeingTrimmed')]]</i></p>
|
|
</template>
|
|
<template is="dom-if" if="[[!areRowFacetsLimited]]">
|
|
<p class="facetInfo"><i>[[localize('showingMaxNrOfFacets', 'facets', maxFacetValues)]]</i></p>
|
|
</template>
|
|
</template>
|
|
|
|
<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]]"
|
|
facet-limit="[[maxFacetValues]]"
|
|
on-facet-loading="onFacetLoading"></strolch-wc-reports-facet>
|
|
</template>
|
|
|
|
<p class="facetInfo duration"><i>[[localize('duration')]] [[facetLoadDuration]]</i></p>
|
|
</div>
|
|
|
|
<div id="tableContainer">
|
|
<strolch-wc-reports-table base-path="[[basePath]]"
|
|
locales-path="[[localesPath]]"
|
|
data="[[data]]"></strolch-wc-reports-table>
|
|
|
|
<template is="dom-if" if="[[data]]">
|
|
<div class="footer noprint">
|
|
<div>
|
|
<paper-button class$="[[getLimitBtnClass(25, data.limit)]]" on-tap="setLimit">25</paper-button>
|
|
<paper-button class$="[[getLimitBtnClass(50, data.limit)]]" on-tap="setLimit">50</paper-button>
|
|
<paper-button class$="[[getLimitBtnClass(100, data.limit)]]" on-tap="setLimit">100</paper-button>
|
|
</div>
|
|
<div>
|
|
<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]] [[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>
|
|
</div>
|
|
<div>
|
|
<p>[[localize('duration')]] [[data.duration]] / [[_getParallel(data.parallel)]]</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
</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,
|
|
observer: 'showFacetsChanged'
|
|
},
|
|
facetLimit: {
|
|
type: Number
|
|
},
|
|
maxFacetValues: {
|
|
type: Number
|
|
},
|
|
maxRowsForFacetGeneration: {
|
|
type: Number,
|
|
value: false
|
|
},
|
|
areRowFacetsLimited: {
|
|
type: Boolean,
|
|
computed: "computeAreRowFacetsLimited(maxRowsForFacetGeneration)"
|
|
},
|
|
facets: {
|
|
type: Array,
|
|
value: []
|
|
},
|
|
reports: {
|
|
type: Array,
|
|
value: []
|
|
},
|
|
filtersReady: {
|
|
type: Boolean,
|
|
value: false
|
|
},
|
|
allFilters: {
|
|
type: Array,
|
|
value: [],
|
|
observer: 'filtersChanged'
|
|
},
|
|
reportId: {
|
|
type: String,
|
|
value: null
|
|
},
|
|
data: {
|
|
type: Object,
|
|
value: null
|
|
},
|
|
offset: {
|
|
type: Number,
|
|
value: 0
|
|
},
|
|
limit: {
|
|
type: Number,
|
|
value: 25
|
|
},
|
|
fromDate: {
|
|
type: Date,
|
|
value: null,
|
|
observer: 'dateFilterChanged'
|
|
},
|
|
toDate: {
|
|
type: Date,
|
|
value: null,
|
|
observer: 'dateFilterChanged'
|
|
},
|
|
propagateShowDialog: {
|
|
type: Boolean,
|
|
value: false
|
|
},
|
|
loadingGetReports: {
|
|
type: Boolean,
|
|
value: false
|
|
},
|
|
loadingGetFacets: {
|
|
type: Boolean,
|
|
value: false
|
|
},
|
|
loadingPostCsv: {
|
|
type: Boolean,
|
|
value: false
|
|
},
|
|
loadingPostReport: {
|
|
type: Boolean,
|
|
value: false
|
|
},
|
|
nrOfFacetsLoading: {
|
|
type: Number,
|
|
value: 0
|
|
}
|
|
},
|
|
|
|
/* Computations */
|
|
computeAreRowFacetsLimited: function (maxRowsForFacetGeneration) {
|
|
return maxRowsForFacetGeneration > 0;
|
|
},
|
|
getLimitBtnClass: function (expected, actual) {
|
|
return expected !== actual ? "limitBtn" : "limitBtn bold";
|
|
},
|
|
_getParallel: function (parallel) {
|
|
return parallel === true ? "p" : "s"
|
|
},
|
|
arrayEmpty: function (arr) {
|
|
return arr == null || arr.length === 0;
|
|
},
|
|
arrayFilled: function (arr) {
|
|
return !this.arrayEmpty(arr);
|
|
},
|
|
greater: function (v1, v2) {
|
|
return v1 > v2;
|
|
},
|
|
|
|
/* Observers */
|
|
observers: [
|
|
'observeAjaxRunning(loadingGetReports, loadingGetFacets, loadingPostCsv, loadingPostReport, nrOfFacetsLoading)'
|
|
],
|
|
observeAjaxRunning: function (loadingGetReports, loadingGetFacets, loadingPostCsv, loadingPostReport, nrOfFacetsLoading) {
|
|
var running = loadingGetReports || loadingGetFacets || loadingPostCsv || loadingPostReport || nrOfFacetsLoading > 0;
|
|
if (running) {
|
|
this.showLoadingOverlay();
|
|
} else {
|
|
this.hideLoadingOverlay();
|
|
}
|
|
},
|
|
dateFilterChanged: function (newValue) {
|
|
if (newValue != null)
|
|
this.queryReports();
|
|
},
|
|
|
|
/* 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();
|
|
},
|
|
|
|
onFacetLoading: function (e) {
|
|
if (e.detail.loading)
|
|
this.nrOfFacetsLoading = this.nrOfFacetsLoading + 1;
|
|
else
|
|
this.nrOfFacetsLoading = this.nrOfFacetsLoading - 1;
|
|
},
|
|
showLoadingOverlay: function () {
|
|
this.debounce("showLoadingOverlay", function () {
|
|
console.log("Showing loading overlay...");
|
|
this.hideOverlay = false;
|
|
this.$.content.classList.add("blur");
|
|
}.bind(this), 150);
|
|
},
|
|
hideLoadingOverlay: function () {
|
|
this.cancelDebouncer("showLoadingOverlay");
|
|
this.hideOverlay = true;
|
|
this.$.content.classList.remove("blur");
|
|
},
|
|
|
|
showFacetsChanged: function (newValue) {
|
|
this.updateStyles({'--facet-width': newValue ? 'var(--facet-width-opened)' : 'var(--facet-width-closed)'});
|
|
},
|
|
onToggleShowFacets: function (event) {
|
|
this.showFacets = !this.showFacets;
|
|
Strolch.setQueryParamValue("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.reports = data;
|
|
|
|
// see if we should reload a report
|
|
if (this.reportToLoad != null) {
|
|
for (var i = 0; i < this.reports.length; i++) {
|
|
if (this.reports[i].id === this.reportToLoad) {
|
|
if (this.selectedReportIndex === i)
|
|
this.onReportSelected();
|
|
else {
|
|
this.selectedReportIndex = i;
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
|
|
this.reportToLoad = null;
|
|
}
|
|
|
|
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.allFilters = [];
|
|
|
|
this.facetLoadDuration = response.data.duration;
|
|
|
|
// directly set this as the available facets
|
|
this.facets = response.data.facets;
|
|
if (this.facets.length === 0) {
|
|
this.showFacets = false;
|
|
}
|
|
|
|
// show the view
|
|
this.async(function () {
|
|
this.offset = 0;
|
|
restampTemplate.if = true;
|
|
this.filtersReady = true;
|
|
this.queryReports();
|
|
}.bind(this));
|
|
},
|
|
|
|
_hasNext: function (data) {
|
|
return data != null && data.nextOffset > data.offset;
|
|
},
|
|
_hasPrevious: function (data) {
|
|
return data != null && data.previousOffset < data.offset;
|
|
},
|
|
|
|
_getEnd: function (data) {
|
|
return data == null || data.rows == null ? 0 : data.offset + data.rows.length;
|
|
},
|
|
|
|
_getSize: function (data) {
|
|
return data == null || data.size >= 2147483625 ? this.localize('unknown') : data.size;
|
|
},
|
|
|
|
_toFirstPage: function () {
|
|
this.offset = 0;
|
|
this.queryReports();
|
|
},
|
|
_toPreviousPage: function () {
|
|
this.offset = this.data.previousOffset;
|
|
this.queryReports();
|
|
},
|
|
_toNextPage: function () {
|
|
if (this.data.rows.length < this.data.limit)
|
|
return;
|
|
this.offset = this.data.offset + this.data.limit;
|
|
this.queryReports();
|
|
},
|
|
_toLastPage: function () {
|
|
if (this.data.lastOffset >= 2147483625)
|
|
return;
|
|
this.offset = this.data.lastOffset;
|
|
this.queryReports();
|
|
},
|
|
|
|
setLimit: function (evt) {
|
|
this.limit = Number.parseInt(evt.target.textContent.trim());
|
|
this.offset = 0;
|
|
this.queryReports();
|
|
},
|
|
|
|
filtersChanged: function (newValue) {
|
|
if (newValue != null) {
|
|
this.offset = 0;
|
|
this.queryReports();
|
|
}
|
|
},
|
|
|
|
queryReports: function () {
|
|
if (!this.filtersReady)
|
|
return;
|
|
|
|
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.$.ajaxPostReport.body = {
|
|
filter: this.allFilters,
|
|
offset: this.offset,
|
|
limit: this.limit,
|
|
dateRange: {
|
|
from: from,
|
|
to: to
|
|
}
|
|
};
|
|
this.$.ajaxPostReport.generateRequest();
|
|
},
|
|
onPostReportResponse: function (event) {
|
|
if (this.selectedRow != null) {
|
|
this.selectedRow.classList.remove('selected');
|
|
this.selectedRow = null;
|
|
}
|
|
|
|
// get the response
|
|
var response = event.detail.response;
|
|
|
|
// sort the columns by index
|
|
response.data.columns.sort(function (columnA, columnB) {
|
|
return columnA.index - columnB.index;
|
|
});
|
|
|
|
// directly set this as the columns and rows
|
|
this.data = response.data;
|
|
},
|
|
|
|
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');
|
|
},
|
|
|
|
onReportSelected: function (event) {
|
|
// clear the previous view
|
|
var restampTemplate = this.$.restampTemplate;
|
|
restampTemplate.if = false;
|
|
this.filtersReady = false;
|
|
|
|
this.data = null;
|
|
this.offset = 0;
|
|
this.allFilters = [];
|
|
this.facets = [];
|
|
|
|
// set the new report id
|
|
var report = this.reports[this.selectedReportIndex];
|
|
this.reportId = report.id;
|
|
|
|
this.maxRowsForFacetGeneration = report.maxRowsForFacetGeneration ? report.maxRowsForFacetGeneration : -1;
|
|
this.maxFacetValues = report.maxFacetValues ? report.maxFacetValues : this.facetLimit;
|
|
|
|
this.$.ajaxGetFacets.params.limit = this.maxFacetValues;
|
|
Strolch.setQueryParamValue("reportId", this.reportId);
|
|
this.async(function () {
|
|
this.$.ajaxGetFacets.generateRequest();
|
|
}, 10);
|
|
},
|
|
|
|
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();
|
|
},
|
|
|
|
onRefreshTapped: function (event) {
|
|
var reportId = Strolch.getQueryParamValue("reportId");
|
|
if (reportId != null && reportId !== "") {
|
|
this.reportToLoad = reportId;
|
|
}
|
|
this.$.ajaxGetReports.generateRequest();
|
|
},
|
|
|
|
onPrintTapped: function (elem) {
|
|
window.print();
|
|
return true;
|
|
},
|
|
|
|
reload: function () {
|
|
this.onRefreshTapped();
|
|
},
|
|
|
|
/* Private */
|
|
|
|
/* Public */
|
|
attached: function () {
|
|
var reportId = Strolch.getQueryParamValue("reportId");
|
|
if (reportId != null && reportId !== "") {
|
|
console.log("Selected ReportId is " + reportId);
|
|
this.reportToLoad = reportId;
|
|
}
|
|
|
|
this.showFacets = Strolch.getQueryParamValue("showFacets") === "true";
|
|
},
|
|
|
|
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.allFilters = allFilters;
|
|
}
|
|
});
|
|
</script>
|
|
</dom-module>
|