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] UI is now responsive

This commit is contained in:
Robert von Burg 2021-09-06 14:24:30 +02:00
parent 411921e8cc
commit 402a028ca4
4 changed files with 336 additions and 298 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", "name": "strolch-wc-reports",
"description": "Strolch WebComponent Reports", "description": "Strolch WebComponent Reports",
"version": "0.2.12", "version": "0.3.0",
"authors": [ "authors": [
"Robert von Burg" "Robert von Burg"
], ],

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

@ -145,7 +145,8 @@
handle-as="json" handle-as="json"
method="GET" method="GET"
on-response="onPostFieldResponse" on-response="onPostFieldResponse"
on-error="onAjaxErrorCustom"></iron-ajax> on-error="onAjaxError"
loading="{{facetLoading}}"></iron-ajax>
<!-- Content --> <!-- Content -->
<paper-card> <paper-card>
@ -234,9 +235,10 @@
value: [], value: [],
notify: true notify: true
}, },
filter: { facetLoading: {
type: Array, type: Boolean,
value: [] value: false,
observer: 'facetLoadingChanged'
} }
}, },
@ -253,25 +255,23 @@
limit: this.facetLimit limit: this.facetLimit
}; };
this.$.ajaxGetFields.generateRequest(); this.$.ajaxGetFields.generateRequest();
this.fire('ajax-running', {running: true}); }
},
facetLoadingChanged: function (newValue, oldValue) {
if (newValue != null && oldValue != null && newValue !== oldValue) {
this.fire('facet-loading', {loading: newValue});
} }
}, },
/* 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

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

@ -13,127 +13,78 @@
<style is="custom-style" include="strolch-wc-styles"> <style is="custom-style" include="strolch-wc-styles">
:host { :host {
--column-count: 0; --column-count: 0;
--column-min-width: 100px;
--column-side-padding: 24px; --column-side-padding: 24px;
display: block; display: block;
min-width: 100%;
} }
paper-material { .content {
min-width: 100%; display: block;
overflow: auto;
background-color: white; background-color: white;
overflow: scroll; height: calc(100vh - 190px);
} }
.table { .content-row {
min-width: 100%;
}
.table-caption {
display: table-caption;
text-align: center;
font-weight: bold;
font-size: larger;
}
.table-row {
box-sizing: border-box;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
margin-top: -1px; margin-top: -1px;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 1000px;
} }
.table-row:not(:first-child) { .content-row:not(:first-child) {
border-top: 1px solid #e3e3e3; border-top: 1px solid #e3e3e3;
cursor: pointer; cursor: pointer;
} }
.table-heading { .content-heading {
font-weight: bold; font-weight: bold;
} }
.table-heading, .content-heading,
.table-cell { .content-cell {
display: flex; display: flex;
padding: 0 var(--column-side-padding); padding: 0 var(--column-side-padding);
overflow: hidden; overflow: hidden;
align-items: center; align-items: center;
flex-basis: var(--column-min-width); flex-basis: 100px;
flex-grow: 1; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
justify-content: flex-start; justify-content: flex-start;
min-height: 48px; min-height: 48px;
} }
.data:nth-child(even) {
background: #f1eeee;
}
.selected { .selected {
background: #e7e7e7; background: rgba(0, 0, 0, 0.26) !important;
}
.footer {
padding: 10px;
}
.footer p {
color: #b5b5b5;
}
.limitBtn {
min-width: inherit;
} }
</style> </style>
<!-- Requests -->
<iron-ajax id="ajaxPostReport"
url="[[baseRestPath]]/strolch/reports/[[reportId]]"
content-type="application/json"
handle-as="json"
method="POST"
on-response="onPostReportResponse"
on-error="onAjaxErrorCustom"></iron-ajax>
<!-- Content --> <!-- Content -->
<paper-material id="content"> <paper-material class="content">
<div class="table"> <div class="content-row" style$="width: [[tableWidth]]px">
<div class="table-row"> <template is="dom-repeat" items="[[columns]]" as="column">
<template is="dom-repeat" items="[[columns]]" as="column"> <div class="content-heading" style$="flex-basis: [[column.width]]px">[[localize(column.name)]]
<div class="table-heading">[[localize(column.name)]]</div>
</template>
</div>
<template is="dom-repeat" items="[[rows]]" as="row">
<div class="table-row" on-tap="onRowTapped">
<template is="dom-repeat" items="[[columns]]" as="column">
<div class="table-cell">[[getCellProperty(row, column)]]</div>
</template>
</div> </div>
</template> </template>
</div> </div>
<template is="dom-repeat" items="[[rows]]" as="row">
<div class="content-row data" style$="width: [[tableWidth]]px" on-tap="onRowTapped">
<template is="dom-repeat" items="[[columns]]" as="column">
<div class="content-cell" style$="flex-basis: [[column.width]]px">
[[getCellProperty(row, column)]]
</div>
</template>
</div>
</template>
</paper-material> </paper-material>
<template is="dom-if" if="[[arrayFilled(rows)]]">
<div class="g-row footer">
<div class="g-3">
<paper-button class="limitBtn" on-tap="setLimit">25</paper-button>
<paper-button class="limitBtn" on-tap="setLimit">50</paper-button>
<paper-button class="limitBtn" on-tap="setLimit">100</paper-button>
</div>
<div class="g-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]] [[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 class="g-2">
<p>[[localize('duration')]] [[data.duration]]</p>
</div>
</div>
</template>
</template> </template>
<script> <script>
@ -148,137 +99,79 @@
/* Properties */ /* Properties */
properties: { properties: {
filtersReady: {
type: Boolean
},
data: { data: {
type: Object, type: Object,
value: null observer: "dataChanged"
}, },
columns: { columns: {
type: Array, type: Array
value: []
}, },
rows: { rows: {
type: Array, type: Array
value: [] },
tableWidth: {
type: Number,
value: 0
} }
}, },
/* Computations */ /* Computations */
/* Observers */ /* Observers */
observers: [ observers: [],
"queryReports(reportId, filter, offset, limit, fromDate, toDate, filtersReady)"
],
_hasNext: function (data) {
return data != null && data.nextOffset > data.offset;
},
_hasPrevious: function (data) {
return data != null && data.previousOffset < data.offset;
},
_getEnd: function (data) {
if (this._hasNext(data)) return data.nextOffset;
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;
},
_toPreviousPage: function () {
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;
},
setLimit: function (evt) {
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;
var from = fromDate == null || Strolch.isEmptyString(fromDate) ? null : new Date(fromDate).toISOString();
var to = toDate == null || Strolch.isEmptyString(toDate) ? null : new Date(toDate).toISOString();
this.$.ajaxPostReport.body = {
filter: filter,
offset: offset,
limit: limit,
dateRange: {
from: from,
to: to
}
};
this.$.ajaxPostReport.generateRequest();
this.fire('ajax-running', {running: true});
},
/* Listeners */ /* Listeners */
listeners: {}, listeners: {},
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;
});
// set the table width according to the column count // TODO should be solved via CSS
var columnCount = response.data.columns.length;
this.$.content.style.width = "calc(148px * " + columnCount + ")";
// directly set this as the columns and rows
this.set("data", response.data);
this.set("columns", response.data.columns);
this.set("rows", response.data.rows);
this.fire('ajax-running', {running: false});
},
/* Private */ /* Private */
onRowTapped: function (evt) { onRowTapped: function (evt) {
if (this.selectedRow != null) { if (this.selectedRow != null)
this.selectedRow.classList.remove('selected'); this.selectedRow.classList.remove('selected');
} this.selectedRow = evt.target.closest('.content-row');
this.selectedRow = evt.target.closest('.table-row');
this.selectedRow.classList.add('selected'); this.selectedRow.classList.add('selected');
}, },
dataChanged: function (newValue) {
if (this.selectedRow != null)
this.selectedRow.classList.remove('selected');
if (newValue == null) {
this.rows = null;
this.columns = null;
return;
}
var localize = this.localize;
newValue.rows.forEach(function (row) {
if (row == null)
return;
newValue.columns.forEach(function (col) {
if (col.name == null || col.name.length === 0 || col.id == null || row[col.id] == null)
return;
if (col.width == null)
col.width = localize == null ? 100 : localize(col.name).length * 8;
var width = row[col.id].length * 8;
col.width = Math.min(250, Math.max(col.width, width));
}.bind(this));
});
var tableWidth = 0;
newValue.columns.forEach(function (col) {
tableWidth += col.width + 48;
});
console.log("dataChanged");
this.tableWidth = tableWidth;
this.columns = newValue.columns;
this.rows = newValue.rows;
},
/* Public */ /* Public */
getCellProperty: function (row, column) { getCellProperty: function (row, column) {
// TODO check the property type if (row == null || column == null)
return "";
return row[column.id] ? row[column.id] : ""; return row[column.id] ? row[column.id] : "";
},
refreshReports: function () {
this.$.ajaxPostReport.generateRequest();
this.fire('ajax-running', {running: true});
} }
}); });
</script> </script>

343
strolch-wc-reports.html
View File

@ -34,48 +34,48 @@
@media screen { @media screen {
:host { :host {
--box-space: 12px; --box-space: 12px;
--facet-width-opened: 300px;
--facet-width-closed: 22px;
--facet-width: var(--facet-width-opened);
--table-width: calc(100vw - var(--facet-width) - 30px);
} }
.content { .content {
@apply(--layout-vertical); display: flex;
height: calc(100vh - var(--app-header-height) - (2 * var(--app-pages-content-padding))); flex-direction: column;
} }
.row { .row {
@apply(--layout-horizontal); display: flex;
flex-direction: row;
} }
.row:not(:first-of-type) { .row:not(:first-of-type) {
padding-top: var(--box-space); padding-top: var(--box-space);
} }
.row.fill-parent {
height: 100%;
}
.row.no-shrink { .row.no-shrink {
flex-shrink: 0; flex-shrink: 0;
} }
#targetContainer { #actionBar {
@apply(--layout-horizontal); @apply(--layout-horizontal);
width: 100%; width: 100%;
min-height: 58px;
padding: 0 12px; padding: 0 12px;
background-color: white; background-color: white;
} }
#targetContainer > paper-dropdown-menu { #actionBar > paper-dropdown-menu {
margin-right: auto; margin-right: auto;
} }
#targetContainer > paper-dropdown-menu, #actionBar > paper-dropdown-menu,
#dateContainer { #dateContainer {
@apply(--layout-horizontal); @apply(--layout-horizontal);
@apply(--layout-end); @apply(--layout-end);
} }
#targetContainer > paper-dropdown-menu, #actionBar > paper-dropdown-menu,
#dateContainer > vaadin-date-picker { #dateContainer > vaadin-date-picker {
height: 100%; height: 100%;
@ -109,10 +109,17 @@
} }
#facetContainer { #facetContainer {
@apply(--layout-flex); 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); margin-right: calc(var(--box-space) * 0.5);
overflow-x: visible; }
overflow-y: scroll;
strolch-wc-reports-facet {
width: 300px;
} }
#facetContainer > strolch-wc-reports-facet:not(:last-of-type) { #facetContainer > strolch-wc-reports-facet:not(:last-of-type) {
@ -120,17 +127,31 @@
} }
#tableContainer { #tableContainer {
@apply(--layout-flex-3);
margin-left: calc(var(--box-space) * 0.5); margin-left: calc(var(--box-space) * 0.5);
overflow-x: visible; }
overflow-y: scroll;
strolch-wc-reports-table {
height: calc(100vh - 190px);
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 {
color: #b5b5b5;
} }
.light-border { .light-border {
border-style: solid; border-style: solid;
border-width: 0.5px; border-width: 0.5px;
border-color: var(--google-grey-300); border-color: var(--google-grey-300);
box-sizing: border-box;
} }
paper-dropdown-menu paper-item { paper-dropdown-menu paper-item {
@ -198,6 +219,10 @@
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
.limitBtn {
min-width: inherit;
}
} }
</style> </style>
@ -208,21 +233,32 @@
handle-as="json" handle-as="json"
method="GET" method="GET"
on-response="onGetReportResponse" on-response="onGetReportResponse"
on-error="onAjaxErrorCustom"></iron-ajax> on-error="onAjaxError"
loading="{{loadingGetReports}}"></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="onAjaxErrorCustom"></iron-ajax> on-error="onAjaxError"
loading="{{loadingGetFacets}}"></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="onAjaxErrorCustom"></iron-ajax> 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 --> <!-- Content -->
<div class="overlay-loading" hidden$="[[hideOverlay]]"> <div class="overlay-loading" hidden$="[[hideOverlay]]">
@ -231,7 +267,7 @@
</div> </div>
<div id="content" class="content"> <div id="content" class="content">
<div class="row no-shrink noprint"> <div class="row no-shrink noprint">
<paper-material id="targetContainer"> <paper-material id="actionBar">
<paper-dropdown-menu label="[[localize('reportType')]]"> <paper-dropdown-menu label="[[localize('reportType')]]">
<paper-listbox class="dropdown-content" <paper-listbox class="dropdown-content"
@ -282,17 +318,22 @@
</div> </div>
<template id="restampTemplate" is="dom-if" restamp> <template id="restampTemplate" is="dom-if" restamp>
<div class="row fill-parent"> <div class="row">
<template is="dom-if" if="[[!showFacets]]"> <template is="dom-if" if="[[!showFacets]]" restamp>
<paper-icon-button icon="chevron-right" on-tap="onToggleShowFacets"></paper-icon-button> <div>
<paper-icon-button class="showFacetsBtn noprint"
icon="chevron-right"
on-tap="onToggleShowFacets"></paper-icon-button>
</div>
</template> </template>
<div id="facetContainer" <div id="facetContainer"
class="light-border noprint" class="light-border noprint"
on-iron-select="onSelectionChanged" on-iron-select="onSelectionChanged"
on-iron-deselect="onSelectionChanged" on-iron-deselect="onSelectionChanged"
hidden$="[[!showFacets]]"> hidden$="[[!showFacets]]"
restamp>
<paper-icon-button icon="chevron-left" on-tap="onToggleShowFacets"></paper-icon-button> <paper-icon-button icon="chevron-left" on-tap="onToggleShowFacets"></paper-icon-button>
<template is="dom-repeat" items="[[facets]]" as="facet"> <template is="dom-repeat" items="[[facets]]" as="facet">
<strolch-wc-reports-facet base-path="[[basePath]]" <strolch-wc-reports-facet base-path="[[basePath]]"
@ -303,23 +344,40 @@
fields="[[facet.values]]" fields="[[facet.values]]"
filter="[[allFilters]]" filter="[[allFilters]]"
facet-limit="[[facetLimit]]" facet-limit="[[facetLimit]]"
on-ajax-running="onAjaxRunning"></strolch-wc-reports-facet> on-facet-loading="onFacetLoading"></strolch-wc-reports-facet>
</template> </template>
</div> </div>
<div id="tableContainer" class="light-border print-me"> <div id="tableContainer">
<strolch-wc-reports-table id="table" <strolch-wc-reports-table base-path="[[basePath]]"
base-path="[[basePath]]"
locales-path="[[localesPath]]" locales-path="[[localesPath]]"
base-rest-path="[[baseRestPath]]" data="[[data]]"></strolch-wc-reports-table>
filters-ready="[[filtersReady]]"
report-id="[[reportId]]"
filter="[[allFilters]]" <template is="dom-if" if="[[arrayFilled(data.rows)]]">
limit="[[limit]]" <div class="footer noprint">
offset="[[offset]]" <div>
from-date="[[fromDate]]" <paper-button class="limitBtn" on-tap="setLimit">25</paper-button>
to-date="[[toDate]]" <paper-button class="limitBtn" on-tap="setLimit">50</paper-button>
on-ajax-running="onAjaxRunning"></strolch-wc-reports-table> <paper-button class="limitBtn" 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]]</p>
</div>
</div>
</template>
</div> </div>
</div> </div>
</template> </template>
@ -359,7 +417,8 @@
}, },
showFacets: { showFacets: {
type: Boolean, type: Boolean,
value: true value: true,
observer: 'showFacetsChanged'
}, },
facets: { facets: {
type: Array, type: Array,
@ -375,12 +434,17 @@
}, },
allFilters: { allFilters: {
type: Array, type: Array,
value: [] value: [],
observer: 'filtersChanged'
}, },
reportId: { reportId: {
type: String, type: String,
value: null value: null
}, },
data: {
type: Object,
value: null
},
offset: { offset: {
type: Number, type: Number,
value: 0 value: 0
@ -401,7 +465,23 @@
type: Boolean, type: Boolean,
value: false value: false
}, },
nrOfAjaxCallsRunning: { loadingGetReports: {
type: Boolean,
value: false
},
loadingGetFacets: {
type: Boolean,
value: false
},
loadingPostCsv: {
type: Boolean,
value: false
},
loadingPostReport: {
type: Boolean,
value: false
},
nrOfFacetsLoading: {
type: Number, type: Number,
value: 0 value: 0
} }
@ -410,7 +490,17 @@
/* Computations */ /* Computations */
/* Observers */ /* Observers */
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();
}
},
/* Listeners */ /* Listeners */
listeners: { listeners: {
@ -429,41 +519,28 @@
this.$.dlg.open(); this.$.dlg.open();
}, },
onAjaxErrorCustom: function (e) { onFacetLoading: function (e) {
this.hideLoadingOverlay(); if (e.detail.loading)
this.onAjaxError(e); this.nrOfFacetsLoading = this.nrOfFacetsLoading + 1;
else
this.nrOfFacetsLoading = this.nrOfFacetsLoading - 1;
}, },
onAjaxRunning: function (e) {
if (e.detail.running) {
this.showLoadingOverlay();
} else {
this.hideLoadingOverlay();
}
},
showLoadingOverlay: function () { showLoadingOverlay: function () {
this.nrOfAjaxCallsRunning++; this.debounce("showLoadingOverlay", function () {
console.log("Showing loading overlay in 150ms...");
var that = this;
clearTimeout(this.showOverlayTimeout);
this.showOverlayTimeout = setTimeout(function () {
console.log("Showing loading overlay..."); console.log("Showing loading overlay...");
that.hideOverlay = false; this.hideOverlay = false;
that.$.content.classList.add("blur"); this.$.content.classList.add("blur");
}, 150); }.bind(this), 150);
}, },
hideLoadingOverlay: function () { hideLoadingOverlay: function () {
this.nrOfAjaxCallsRunning--; this.cancelDebouncer("showLoadingOverlay");
this.hideOverlay = true;
if (this.nrOfAjaxCallsRunning == 0) { this.$.content.classList.remove("blur");
console.log("Hiding loading overlay...");
clearTimeout(this.showOverlayTimeout);
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) { onToggleShowFacets: function (event) {
this.showFacets = !this.showFacets; this.showFacets = !this.showFacets;
Strolch.setQueryParamValue("showFacets", this.showFacets); Strolch.setQueryParamValue("showFacets", this.showFacets);
@ -508,23 +585,105 @@
restampTemplate.if = false; restampTemplate.if = false;
// remove all filters // remove all filters
this.set("allFilters", []); this.allFilters = [];
// directly set this as the available facets // directly set this as the available facets
this.set("facets", response.data); this.facets = response.data;
if (response.data.length == 0) { if (response.data.length === 0) {
this.showFacets = false; this.showFacets = false;
} }
// show the view // show the view
var that = this; this.async(function () {
setTimeout(function () { this.offset = 0;
that.offset = 0;
restampTemplate.if = true; restampTemplate.if = true;
that.filtersReady = 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) {
if (this._hasNext(data)) return data.nextOffset;
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;
this.queryReports();
},
_toPreviousPage: function () {
this.offset = this.data.previousOffset;
this.queryReports();
},
_toNextPage: function () {
if (this.data.size >= 2147483647) {
this.offset = this.data.offset + this.data.limit;
} else {
this.offset = this.data.nextOffset;
}
this.queryReports();
},
_toLastPage: function () {
this.offset = this.data.lastOffset;
this.queryReports();
},
setLimit: function (evt) {
this.limit = Number.parseInt(evt.target.textContent.trim());
this.queryReports();
},
filtersChanged: function (newValue) {
if (newValue != null)
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;
}); });
this.hideLoadingOverlay(); // directly set this as the columns and rows
this.data = response.data;
}, },
onPostCsvResponse: function (event) { onPostCsvResponse: function (event) {
@ -532,26 +691,22 @@
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 // clear the previous view
var restampTemplate = this.$.restampTemplate; var restampTemplate = this.$.restampTemplate;
restampTemplate.if = false; restampTemplate.if = false;
this.set("allFilters", []); this.allFilters = [];
this.set("facets", []); this.facets = [];
// set the new report id // set the new report id
this.filtersReady = false; this.filtersReady = false;
var reportId = this.reports[this.selectedReportIndex].id; var reportId = this.reports[this.selectedReportIndex].id;
this.set("reportId", reportId); this.reportId = reportId;
this.$.ajaxGetFacets.params = { this.$.ajaxGetFacets.params = {
limit: this.facetLimit limit: this.facetLimit
}; };
this.showLoadingOverlay();
this.$.ajaxGetFacets.generateRequest(); this.$.ajaxGetFacets.generateRequest();
Strolch.setQueryParamValue("reportId", reportId); Strolch.setQueryParamValue("reportId", reportId);
}, },
@ -577,17 +732,10 @@
} }
}; };
this.$.ajaxPostCsv.generateRequest(); this.$.ajaxPostCsv.generateRequest();
this.showLoadingOverlay();
}, },
onRefreshTapped: function (event) { onRefreshTapped: function (event) {
var table = this.$$("#table"); this.$.ajaxPostReport.generateRequest();
if (table == null) {
this.$.ajaxGetFacets.generateRequest();
this.showLoadingOverlay();
} else {
table.refreshReports();
}
}, },
onPrintTapped: function (elem) { onPrintTapped: function (elem) {
@ -597,14 +745,12 @@
reload: function () { reload: function () {
this.$.ajaxGetReports.generateRequest(); this.$.ajaxGetReports.generateRequest();
this.showLoadingOverlay();
}, },
/* Private */ /* Private */
/* Public */ /* Public */
attached: function () { attached: function () {
var reportId = Strolch.getQueryParamValue("reportId"); var reportId = Strolch.getQueryParamValue("reportId");
if (reportId != null && reportId !== "") { if (reportId != null && reportId !== "") {
console.log("Selected ReportId is " + reportId); console.log("Selected ReportId is " + reportId);
@ -623,9 +769,8 @@
facetFilters: facets[i].filters facetFilters: facets[i].filters
}); });
} }
this.set("allFilters", allFilters); this.allFilters = allFilters;
} }
}); });
</script> </script>
</dom-module> </dom-module>