[Project] Initial Commit
This commit is contained in:
commit
82c6f394ea
|
|
@ -0,0 +1,4 @@
|
|||
# Created by .ignore support plugin (hsz.mobi)
|
||||
.idea/
|
||||
bower_components/
|
||||
*.iml
|
||||
|
|
@ -0,0 +1,201 @@
|
|||
Apache License
|
||||
Version 2.0, January 2004
|
||||
http://www.apache.org/licenses/
|
||||
|
||||
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
||||
|
||||
1. Definitions.
|
||||
|
||||
"License" shall mean the terms and conditions for use, reproduction,
|
||||
and distribution as defined by Sections 1 through 9 of this document.
|
||||
|
||||
"Licensor" shall mean the copyright owner or entity authorized by
|
||||
the copyright owner that is granting the License.
|
||||
|
||||
"Legal Entity" shall mean the union of the acting entity and all
|
||||
other entities that control, are controlled by, or are under common
|
||||
control with that entity. For the purposes of this definition,
|
||||
"control" means (i) the power, direct or indirect, to cause the
|
||||
direction or management of such entity, whether by contract or
|
||||
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
||||
outstanding shares, or (iii) beneficial ownership of such entity.
|
||||
|
||||
"You" (or "Your") shall mean an individual or Legal Entity
|
||||
exercising permissions granted by this License.
|
||||
|
||||
"Source" form shall mean the preferred form for making modifications,
|
||||
including but not limited to software source code, documentation
|
||||
source, and configuration files.
|
||||
|
||||
"Object" form shall mean any form resulting from mechanical
|
||||
transformation or translation of a Source form, including but
|
||||
not limited to compiled object code, generated documentation,
|
||||
and conversions to other media types.
|
||||
|
||||
"Work" shall mean the work of authorship, whether in Source or
|
||||
Object form, made available under the License, as indicated by a
|
||||
copyright notice that is included in or attached to the work
|
||||
(an example is provided in the Appendix below).
|
||||
|
||||
"Derivative Works" shall mean any work, whether in Source or Object
|
||||
form, that is based on (or derived from) the Work and for which the
|
||||
editorial revisions, annotations, elaborations, or other modifications
|
||||
represent, as a whole, an original work of authorship. For the purposes
|
||||
of this License, Derivative Works shall not include works that remain
|
||||
separable from, or merely link (or bind by name) to the interfaces of,
|
||||
the Work and Derivative Works thereof.
|
||||
|
||||
"Contribution" shall mean any work of authorship, including
|
||||
the original version of the Work and any modifications or additions
|
||||
to that Work or Derivative Works thereof, that is intentionally
|
||||
submitted to Licensor for inclusion in the Work by the copyright owner
|
||||
or by an individual or Legal Entity authorized to submit on behalf of
|
||||
the copyright owner. For the purposes of this definition, "submitted"
|
||||
means any form of electronic, verbal, or written communication sent
|
||||
to the Licensor or its representatives, including but not limited to
|
||||
communication on electronic mailing lists, source code control systems,
|
||||
and issue tracking systems that are managed by, or on behalf of, the
|
||||
Licensor for the purpose of discussing and improving the Work, but
|
||||
excluding communication that is conspicuously marked or otherwise
|
||||
designated in writing by the copyright owner as "Not a Contribution."
|
||||
|
||||
"Contributor" shall mean Licensor and any individual or Legal Entity
|
||||
on behalf of whom a Contribution has been received by Licensor and
|
||||
subsequently incorporated within the Work.
|
||||
|
||||
2. Grant of Copyright License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
copyright license to reproduce, prepare Derivative Works of,
|
||||
publicly display, publicly perform, sublicense, and distribute the
|
||||
Work and such Derivative Works in Source or Object form.
|
||||
|
||||
3. Grant of Patent License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
(except as stated in this section) patent license to make, have made,
|
||||
use, offer to sell, sell, import, and otherwise transfer the Work,
|
||||
where such license applies only to those patent claims licensable
|
||||
by such Contributor that are necessarily infringed by their
|
||||
Contribution(s) alone or by combination of their Contribution(s)
|
||||
with the Work to which such Contribution(s) was submitted. If You
|
||||
institute patent litigation against any entity (including a
|
||||
cross-claim or counterclaim in a lawsuit) alleging that the Work
|
||||
or a Contribution incorporated within the Work constitutes direct
|
||||
or contributory patent infringement, then any patent licenses
|
||||
granted to You under this License for that Work shall terminate
|
||||
as of the date such litigation is filed.
|
||||
|
||||
4. Redistribution. You may reproduce and distribute copies of the
|
||||
Work or Derivative Works thereof in any medium, with or without
|
||||
modifications, and in Source or Object form, provided that You
|
||||
meet the following conditions:
|
||||
|
||||
(a) You must give any other recipients of the Work or
|
||||
Derivative Works a copy of this License; and
|
||||
|
||||
(b) You must cause any modified files to carry prominent notices
|
||||
stating that You changed the files; and
|
||||
|
||||
(c) You must retain, in the Source form of any Derivative Works
|
||||
that You distribute, all copyright, patent, trademark, and
|
||||
attribution notices from the Source form of the Work,
|
||||
excluding those notices that do not pertain to any part of
|
||||
the Derivative Works; and
|
||||
|
||||
(d) If the Work includes a "NOTICE" text file as part of its
|
||||
distribution, then any Derivative Works that You distribute must
|
||||
include a readable copy of the attribution notices contained
|
||||
within such NOTICE file, excluding those notices that do not
|
||||
pertain to any part of the Derivative Works, in at least one
|
||||
of the following places: within a NOTICE text file distributed
|
||||
as part of the Derivative Works; within the Source form or
|
||||
documentation, if provided along with the Derivative Works; or,
|
||||
within a display generated by the Derivative Works, if and
|
||||
wherever such third-party notices normally appear. The contents
|
||||
of the NOTICE file are for informational purposes only and
|
||||
do not modify the License. You may add Your own attribution
|
||||
notices within Derivative Works that You distribute, alongside
|
||||
or as an addendum to the NOTICE text from the Work, provided
|
||||
that such additional attribution notices cannot be construed
|
||||
as modifying the License.
|
||||
|
||||
You may add Your own copyright statement to Your modifications and
|
||||
may provide additional or different license terms and conditions
|
||||
for use, reproduction, or distribution of Your modifications, or
|
||||
for any such Derivative Works as a whole, provided Your use,
|
||||
reproduction, and distribution of the Work otherwise complies with
|
||||
the conditions stated in this License.
|
||||
|
||||
5. Submission of Contributions. Unless You explicitly state otherwise,
|
||||
any Contribution intentionally submitted for inclusion in the Work
|
||||
by You to the Licensor shall be under the terms and conditions of
|
||||
this License, without any additional terms or conditions.
|
||||
Notwithstanding the above, nothing herein shall supersede or modify
|
||||
the terms of any separate license agreement you may have executed
|
||||
with Licensor regarding such Contributions.
|
||||
|
||||
6. Trademarks. This License does not grant permission to use the trade
|
||||
names, trademarks, service marks, or product names of the Licensor,
|
||||
except as required for reasonable and customary use in describing the
|
||||
origin of the Work and reproducing the content of the NOTICE file.
|
||||
|
||||
7. Disclaimer of Warranty. Unless required by applicable law or
|
||||
agreed to in writing, Licensor provides the Work (and each
|
||||
Contributor provides its Contributions) on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
||||
implied, including, without limitation, any warranties or conditions
|
||||
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
||||
PARTICULAR PURPOSE. You are solely responsible for determining the
|
||||
appropriateness of using or redistributing the Work and assume any
|
||||
risks associated with Your exercise of permissions under this License.
|
||||
|
||||
8. Limitation of Liability. In no event and under no legal theory,
|
||||
whether in tort (including negligence), contract, or otherwise,
|
||||
unless required by applicable law (such as deliberate and grossly
|
||||
negligent acts) or agreed to in writing, shall any Contributor be
|
||||
liable to You for damages, including any direct, indirect, special,
|
||||
incidental, or consequential damages of any character arising as a
|
||||
result of this License or out of the use or inability to use the
|
||||
Work (including but not limited to damages for loss of goodwill,
|
||||
work stoppage, computer failure or malfunction, or any and all
|
||||
other commercial damages or losses), even if such Contributor
|
||||
has been advised of the possibility of such damages.
|
||||
|
||||
9. Accepting Warranty or Additional Liability. While redistributing
|
||||
the Work or Derivative Works thereof, You may choose to offer,
|
||||
and charge a fee for, acceptance of support, warranty, indemnity,
|
||||
or other liability obligations and/or rights consistent with this
|
||||
License. However, in accepting such obligations, You may act only
|
||||
on Your own behalf and on Your sole responsibility, not on behalf
|
||||
of any other Contributor, and only if You agree to indemnify,
|
||||
defend, and hold each Contributor harmless for any liability
|
||||
incurred by, or claims asserted against, such Contributor by reason
|
||||
of your accepting any such warranty or additional liability.
|
||||
|
||||
END OF TERMS AND CONDITIONS
|
||||
|
||||
APPENDIX: How to apply the Apache License to your work.
|
||||
|
||||
To apply the Apache License to your work, attach the following
|
||||
boilerplate notice, with the fields enclosed by brackets "{}"
|
||||
replaced with your own identifying information. (Don't include
|
||||
the brackets!) The text should be enclosed in the appropriate
|
||||
comment syntax for the file format. We also recommend that a
|
||||
file or class name and description of purpose be included on the
|
||||
same "printed page" as the copyright notice for easier
|
||||
identification within third-party archives.
|
||||
|
||||
Copyright {yyyy} {name of copyright owner}
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
{
|
||||
"name": "strolch-wc-reports",
|
||||
"description": "Strolch WebComponent Reports",
|
||||
"version": "0.1.0",
|
||||
"authors": [
|
||||
"Robert von Burg"
|
||||
],
|
||||
"keywords": [
|
||||
"strolch",
|
||||
"reports"
|
||||
],
|
||||
"main": "strolch-wc-reports.html",
|
||||
"private": true,
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git@github.com:4treesCH/strolch-wc-reports.git"
|
||||
},
|
||||
"license": "https://github.com/4treesCH/strolch-wc-reports/blob/master/LICENSE",
|
||||
"homepage": "https://github.com/4treesCH/strolch-wc-reports",
|
||||
"ignore": [],
|
||||
"dependencies": {
|
||||
|
||||
"strolchjs": "4treesCH/strolchjs#^0.2.3",
|
||||
"strolch-wc-styles": "4treesCH/strolch-wc-styles#^0.1.7",
|
||||
"strolch-wc-badge": "4treesCH/strolch-wc-badge#^0.1.0",
|
||||
"strolch-wc-debounced-input": "4treesCH/strolch-wc-debounced-input#^0.1.0",
|
||||
"strolch-wc-localize-behavior": "4treesCH/strolch-wc-localize-behavior#^1.0.2",
|
||||
|
||||
"polymer": "Polymer/polymer#^1.11.3",
|
||||
|
||||
"iron-ajax": "PolymerElements/iron-ajax#^1.4.4",
|
||||
"iron-pages": "PolymerElements/iron-pages#^1.0.9",
|
||||
"iron-icon": "PolymerElements/iron-icon#^1.0.13",
|
||||
"iron-icons": "PolymerElements/iron-icons#^1.2.1",
|
||||
"iron-a11y-keys": "PolymerElements/iron-a11y-keys#^1.0.9",
|
||||
"iron-collapse": "PolymerElements/iron-collapse#^1.3.0",
|
||||
|
||||
"paper-ripple": "PolymerElements/paper-ripple#^1.0.10",
|
||||
"paper-tooltip": "PolymerElements/paper-tooltip#^1.1.4",
|
||||
"paper-material": "PolymerElements/paper-material#^1.0.7",
|
||||
"paper-header-panel": "PolymerElements/paper-header-panel#^1.1.7",
|
||||
"paper-card": "PolymerElements/paper-card#^1.1.6",
|
||||
"paper-badge": "PolymerElements/paper-badge#^1.1.4",
|
||||
"paper-dialog": "PolymerElements/paper-dialog#^1.1.0",
|
||||
"paper-button": "PolymerElements/paper-button#^1.0.15",
|
||||
"paper-toolbar": "PolymerElements/paper-toolbar#^1.1.7",
|
||||
"paper-icon-button": "PolymerElements/paper-icon-button#^1.1.6",
|
||||
"paper-tabs": "PolymerElements/paper-tabs#^1.8.0",
|
||||
"paper-dropdown-menu": "PolymerElements/paper-dropdown-menu#^1.5.1",
|
||||
"paper-styles": "PolymerElements/paper-styles#^1.3.1",
|
||||
"paper-listbox": "polymerelements/paper-listbox#^1.1.3",
|
||||
"paper-item": "PolymerElements/paper-item#^1.2.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"strolch-wc-auth": "4treesCH/strolch-wc-auth#^0.6.3"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,191 @@
|
|||
<script>
|
||||
StrolchReportsBehavior = {
|
||||
|
||||
properties: {
|
||||
basePath: {
|
||||
type: String,
|
||||
value: './'
|
||||
},
|
||||
baseRestPath: {
|
||||
type: String,
|
||||
value: './'
|
||||
},
|
||||
localesPath: {
|
||||
type: String,
|
||||
value: './locales.json'
|
||||
},
|
||||
dlgTitle: {
|
||||
type: String
|
||||
},
|
||||
dlgText: {
|
||||
type: String
|
||||
},
|
||||
|
||||
vaadinI18n: {
|
||||
type: Object,
|
||||
value: {
|
||||
// An array with the full names of months starting with January.
|
||||
monthNames: [
|
||||
"January", "February", "March", "April", "May", "June",
|
||||
"July", "August", "September", "October", "November", "December"
|
||||
],
|
||||
|
||||
// An array of weekday names starting with Sunday. Used in screen reader announcements.
|
||||
weekdays: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
|
||||
|
||||
// An array of short weekday names starting with Sunday. Displayed in the calendar.
|
||||
weekdaysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
|
||||
|
||||
// An integer indicating the first day of the week (0 = Sunday, 1 = Monday, etc.).
|
||||
firstDayOfWeek: 0,
|
||||
|
||||
// Used in screen reader announcements along with week numbers, if they are displayed.
|
||||
week: "Week",
|
||||
|
||||
// Translation of the Calendar icon button title.
|
||||
calendar: "Calendar",
|
||||
|
||||
// Translation of the Clear icon button title.
|
||||
clear: "Clear",
|
||||
|
||||
// Translation of the Today shortcut button text.
|
||||
today: "Today",
|
||||
|
||||
// Translation of the Cancel button text.
|
||||
cancel: "Cancel",
|
||||
|
||||
// A function to format given `Date` object as date string.
|
||||
formatDate: function (datetime) {
|
||||
if (typeof(datetime) == 'string') {
|
||||
datetime = new Date(datetime);
|
||||
}
|
||||
|
||||
var day = (datetime.getDate()).toString();
|
||||
var month = (datetime.getMonth() + 1).toString();
|
||||
var year = (datetime.getFullYear()).toString();
|
||||
|
||||
day = day.length < 2 ? "0" + day : day;
|
||||
month = month.length < 2 ? "0" + month : month;
|
||||
return day + "." + month + "." + year;
|
||||
},
|
||||
|
||||
// A function to parse the given text to a `Date` object.
|
||||
// Must properly parse (at least) text formatted by `formatDate`.
|
||||
// Setting the property to null will disable keyboard input feature.
|
||||
parseDate: function (datetimeString) {
|
||||
var splitString = datetimeString.split(".");
|
||||
if (splitString.length != 3) return null;
|
||||
|
||||
var year = Number(splitString[2]);
|
||||
var month = Number(splitString[1]) - 1;
|
||||
var day = Number(splitString[0]);
|
||||
return new Date(year, month, day);
|
||||
},
|
||||
|
||||
// A function to format given `monthName` and `fullYear` integer as calendar title string.
|
||||
formatTitle: function (monthName, fullYear) {
|
||||
return monthName + " " + fullYear;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
toLocalDateTime: function (val) {
|
||||
return Strolch.toLocalDateTime(val);
|
||||
},
|
||||
arrayToString: function (arr) {
|
||||
var s = '';
|
||||
for (var i = 0; i < arr.length; i++) {
|
||||
s += arr[i];
|
||||
if (i + 1 < arr.length)
|
||||
s += ', ';
|
||||
}
|
||||
|
||||
return s;
|
||||
},
|
||||
isEmptyArray: function (arr) {
|
||||
return arr == null || arr.length == 0;
|
||||
},
|
||||
isNotEmptyArray: function (list) {
|
||||
return !this.isEmptyArray(list);
|
||||
},
|
||||
isEmptyString: function (v) {
|
||||
return v != null && v.length == 0
|
||||
},
|
||||
isNotEmptyString: function (v) {
|
||||
return v != null && v.length > 0
|
||||
},
|
||||
|
||||
lesserEqual: function (arg0, arg1) {
|
||||
return arg0 <= arg1;
|
||||
},
|
||||
arrayFilled: function (array) {
|
||||
return !!(array && array.length && array.length > 0);
|
||||
},
|
||||
|
||||
toDateTime: function (val) {
|
||||
|
||||
function pad10(i) {
|
||||
if (i < 10) return '0' + i;
|
||||
return i;
|
||||
}
|
||||
|
||||
function pad100(i) {
|
||||
if (i < 10) return '00' + i;
|
||||
if (i < 100) return '0' + i;
|
||||
return i;
|
||||
}
|
||||
|
||||
if (Strolch.isEmptyString(val) || val == '-') return '-';
|
||||
var date = new Date(val);
|
||||
|
||||
var y = date.getFullYear();
|
||||
var m = pad10(date.getMonth() + 1);
|
||||
var d = pad10(date.getDate());
|
||||
var h = pad10(date.getHours());
|
||||
var mi = pad10(date.getMinutes());
|
||||
var s = pad10(date.getSeconds());
|
||||
var mil = pad100(date.getMilliseconds());
|
||||
|
||||
return y + m + d + h + mi + s;
|
||||
},
|
||||
|
||||
_handleAjaxError: function (data) {
|
||||
var dlgText;
|
||||
if (data.detail.request.response) {
|
||||
dlgText = data.detail.request.response.msg;
|
||||
} else {
|
||||
dlgText = data.detail.error;
|
||||
}
|
||||
this.fire('strolch-show-dialog', {
|
||||
title: this.dlgTitle,
|
||||
text: dlgText
|
||||
});
|
||||
},
|
||||
|
||||
onAjaxError: function (data) {
|
||||
var dlgText;
|
||||
if (data.detail.request.response) {
|
||||
if (data.detail.request.response.msg) {
|
||||
dlgText = data.detail.request.response.msg;
|
||||
} else if (data.detail.request.response.charAt(0) == '{') {
|
||||
var json = JSON.parse(data.detail.request.response);
|
||||
if (json.msg) {
|
||||
dlgText = json.msg;
|
||||
} else {
|
||||
dlgText = data.detail.request.response;
|
||||
}
|
||||
} else {
|
||||
dlgText = data.detail.request.response;
|
||||
}
|
||||
} else {
|
||||
dlgText = data.detail.error;
|
||||
}
|
||||
|
||||
this.fire('strolch-show-dialog', {
|
||||
title: this.dlgTitle,
|
||||
text: dlgText
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,302 @@
|
|||
<link rel="import" href="../polymer/polymer.html">
|
||||
|
||||
<link rel="import" href="../iron-collapse/iron-collapse.html">
|
||||
<link rel="import" href="../iron-icon/iron-icon.html">
|
||||
<link rel="import" href="../iron-ajax/iron-ajax.html">
|
||||
<link rel="import" href="../paper-card/paper-card.html">
|
||||
<link rel="import" href="../paper-item/paper-item.html">
|
||||
<link rel="import" href="../paper-listbox/paper-listbox.html">
|
||||
<link rel="import" href="../paper-ripple/paper-ripple.html">
|
||||
<link rel="import" href="../paper-tooltip/paper-tooltip.html">
|
||||
<link rel="import" href="../strolch-wc-debounced-input/strolch-wc-debounced-input.html">
|
||||
|
||||
<link rel="import" href="../strolch-wc-badge/strolch-wc-badge.html">
|
||||
<link rel="import" href="../strolch-wc-localize-behavior/strolch-wc-localize-behavior.html">
|
||||
|
||||
<link rel="import" href="strolch-wc-reports-behavior.html">
|
||||
|
||||
<dom-module id="strolch-wc-reports-facet">
|
||||
<template>
|
||||
|
||||
<!-- Style -->
|
||||
<style is="custom-style" include="strolch-wc-styles">
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
paper-card {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
paper-card .card-actions {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.headline {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-center);
|
||||
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.headline > * {
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.headline > :last-child {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.badge-wrapper {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
padding-left: 6px;
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
.badge-wrapper > strolch-wc-badge {
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
strolch-wc-debounced-input {
|
||||
--focus-color: var(--google-grey-700);
|
||||
margin: 0 12px;
|
||||
}
|
||||
|
||||
#fieldList > .field:not(:first-child) {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
#fieldList > .field {
|
||||
padding: 0 16px;
|
||||
min-height: 40px;
|
||||
cursor: pointer;
|
||||
|
||||
--paper-item: {
|
||||
background-color: var(--google-grey-100);
|
||||
};
|
||||
--paper-item-selected: {
|
||||
background-color: var(--paper-indigo-400);
|
||||
color: white;
|
||||
};
|
||||
--paper-item-focused-before: {
|
||||
background-color: unset;
|
||||
};
|
||||
}
|
||||
|
||||
.field {
|
||||
@apply(--layout-horizontal);
|
||||
}
|
||||
|
||||
.field:not(.iron-selected):hover {
|
||||
background-color: var(--paper-indigo-50);
|
||||
color: black;
|
||||
}
|
||||
|
||||
.field-count {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.field-name {
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.field.iron-selected > .field-count {
|
||||
background-color: var(--paper-indigo-300);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.field-count {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-center);
|
||||
margin-left: auto;
|
||||
min-width: 30px;
|
||||
font-size: 12px;
|
||||
background-color: #ededed;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.field-count > div {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
paper-listbox paper-item {
|
||||
height: 1px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Requests -->
|
||||
<iron-ajax id="ajaxGetFields"
|
||||
url="[[baseRestPath]]/strolch/reports/[[reportId]]/facets/[[facetId]]/fields"
|
||||
content-type="application/json"
|
||||
handle-as="json"
|
||||
method="GET"
|
||||
on-response="onPostFieldResponse"
|
||||
on-error="onAjaxError"></iron-ajax>
|
||||
|
||||
<!-- Content -->
|
||||
<paper-card>
|
||||
<div class="headline" on-tap="toggleListCollapse">
|
||||
<div>
|
||||
[[localize(facetId)]]
|
||||
</div>
|
||||
<div class="badge-wrapper">
|
||||
<strolch-wc-badge hide="[[lesserEqual(filters.length, 0)]]"
|
||||
label="[[filters.length]]"></strolch-wc-badge>
|
||||
</div>
|
||||
<paper-ripple></paper-ripple>
|
||||
<iron-icon icon="[[headlineIcon]]"></iron-icon>
|
||||
</div>
|
||||
<iron-collapse id="listCollapse" opened="{{listOpened}}">
|
||||
<div class="card-actions">
|
||||
|
||||
<strolch-wc-debounced-input id="debouncedInput"
|
||||
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">
|
||||
<paper-item id="field[[index]]"
|
||||
class="field"
|
||||
field-id="[[field.id]]"
|
||||
on-tap="onItemsTapped">
|
||||
<div class="field-name">
|
||||
[[field.name]]
|
||||
</div>
|
||||
<template is="dom-if" if="[[field.count]]">
|
||||
<div class="field-count">
|
||||
<div>[[field.count]]</div>
|
||||
</div>
|
||||
</template>
|
||||
</paper-item>
|
||||
<paper-tooltip for="field[[index]]" position="top" offset="4">
|
||||
[[field.name]]
|
||||
</paper-tooltip>
|
||||
</template>
|
||||
</paper-listbox>
|
||||
</div>
|
||||
</iron-collapse>
|
||||
</paper-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
Polymer({
|
||||
|
||||
/* Component */
|
||||
is: "strolch-wc-reports-facet",
|
||||
behaviors: [
|
||||
StrolchLocalizeBehavior,
|
||||
StrolchReportsBehavior
|
||||
],
|
||||
|
||||
/* Properties */
|
||||
properties: {
|
||||
headlineIcon: {
|
||||
type: String,
|
||||
computed: "computeHeadlineIcon(listOpened)"
|
||||
},
|
||||
headlineIconCollapse: {
|
||||
type: String,
|
||||
value: "expand-less"
|
||||
},
|
||||
headlineIconExpand: {
|
||||
type: String,
|
||||
value: "expand-more"
|
||||
},
|
||||
listOpened: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
searchTerm: {
|
||||
type: String,
|
||||
value: "",
|
||||
observer: "searchTermChanged"
|
||||
},
|
||||
fields: {
|
||||
type: Array,
|
||||
value: []
|
||||
},
|
||||
filters: {
|
||||
type: Array,
|
||||
value: [],
|
||||
notify: true
|
||||
},
|
||||
filter: {
|
||||
type: Array,
|
||||
value: []
|
||||
}
|
||||
},
|
||||
|
||||
/* Computations */
|
||||
computeHeadlineIcon: function (listOpened) {
|
||||
return listOpened ? this.headlineIconCollapse : this.headlineIconExpand;
|
||||
},
|
||||
|
||||
/* Observers */
|
||||
searchTermChanged: function (newValue, oldValue) {
|
||||
if (newValue != null && oldValue != null) {
|
||||
this.$.ajaxGetFields.params = {
|
||||
query: newValue,
|
||||
limit: Susi.Constants.limit
|
||||
};
|
||||
this.$.ajaxGetFields.generateRequest();
|
||||
}
|
||||
},
|
||||
|
||||
/* Listeners */
|
||||
listeners: {},
|
||||
onPostFieldResponse: function (event) {
|
||||
// get the response
|
||||
var response = event.detail.response;
|
||||
|
||||
// directly set this as the available types
|
||||
this.set("fields", response.data);
|
||||
},
|
||||
onItemsTapped: function (event) {
|
||||
// get the tapped filter
|
||||
var tappedFilter = event.currentTarget.fieldId;
|
||||
|
||||
// get all filters that are already selected
|
||||
var selectedItems = this.$.fieldList.selectedItems;
|
||||
var filters = [];
|
||||
for (var i in selectedItems) {
|
||||
filters.push(selectedItems[i].fieldId);
|
||||
}
|
||||
|
||||
// if the tapped filter is in the array it must be removed, if not added
|
||||
var filterIndex = filters.findIndex(function (filter) {
|
||||
return filter == tappedFilter
|
||||
});
|
||||
if (filterIndex >= 0) {
|
||||
filters.splice(filterIndex, 1);
|
||||
}
|
||||
else {
|
||||
filters.push(tappedFilter);
|
||||
}
|
||||
|
||||
// update the filters
|
||||
this.set("filters", filters);
|
||||
},
|
||||
|
||||
/* Private */
|
||||
|
||||
/* Public */
|
||||
toggleListCollapse: function () {
|
||||
this.$.listCollapse.toggle();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</dom-module>
|
||||
|
|
@ -0,0 +1,270 @@
|
|||
<link rel="import" href="../polymer/polymer.html">
|
||||
<link rel="import" href="../paper-material/paper-material.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">
|
||||
|
||||
<dom-module id="strolch-wc-reports-table">
|
||||
<template>
|
||||
|
||||
<!-- Style -->
|
||||
<style is="custom-style" include="strolch-wc-styles">
|
||||
:host {
|
||||
--column-count: 0;
|
||||
--column-min-width: 100px;
|
||||
--column-side-padding: 24px;
|
||||
|
||||
display: block;
|
||||
min-width: 100%;
|
||||
|
||||
}
|
||||
|
||||
paper-material {
|
||||
min-width: 100%;
|
||||
display: inline-flex;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.table {
|
||||
min-width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.table-caption {
|
||||
display: table-caption;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-size: larger;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.table-row:not(:first-child) {
|
||||
border-top: 1px solid #e3e3e3;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.table-heading {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.table-heading,
|
||||
.table-cell {
|
||||
display: flex;
|
||||
padding: 0 var(--column-side-padding);
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
flex-basis: var(--column-min-width);
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
justify-content: flex-start;
|
||||
min-height: 48px;
|
||||
}
|
||||
|
||||
.selected {
|
||||
background: #e7e7e7;
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.footer p {
|
||||
color: #b5b5b5;
|
||||
}
|
||||
|
||||
.limitBtn {
|
||||
min-width: inherit;
|
||||
}
|
||||
|
||||
</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="onAjaxError"></iron-ajax>
|
||||
|
||||
<!-- Content -->
|
||||
<paper-material id="content">
|
||||
<div class="table">
|
||||
<div class="table-row">
|
||||
<template is="dom-repeat" items="[[columns]]" as="column">
|
||||
<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>
|
||||
</template>
|
||||
</div>
|
||||
</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]] to [[_getEnd(data)]] of [[data.size]]</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>
|
||||
|
||||
<script>
|
||||
Polymer({
|
||||
|
||||
/* Component */
|
||||
is: "strolch-wc-reports-table",
|
||||
behaviors: [
|
||||
StrolchLocalizeBehavior,
|
||||
StrolchReportsBehavior
|
||||
],
|
||||
|
||||
/* Properties */
|
||||
properties: {
|
||||
filtersReady: {
|
||||
type: Boolean
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
value: null
|
||||
},
|
||||
columns: {
|
||||
type: Array,
|
||||
value: []
|
||||
},
|
||||
rows: {
|
||||
type: Array,
|
||||
value: []
|
||||
}
|
||||
},
|
||||
|
||||
/* Computations */
|
||||
|
||||
/* 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;
|
||||
},
|
||||
|
||||
_toFirstPage: function () {
|
||||
this.offset = 0;
|
||||
},
|
||||
_toPreviousPage: function () {
|
||||
this.offset = this.data.previousOffset;
|
||||
},
|
||||
_toNextPage: function () {
|
||||
this.offset = this.data.nextOffset;
|
||||
},
|
||||
_toLastPage: function () {
|
||||
this.offset = this.data.lastOffset;
|
||||
},
|
||||
|
||||
setLimit: function (evt) {
|
||||
this.limit = Number.parseInt(evt.target.textContent.trim());
|
||||
},
|
||||
|
||||
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();
|
||||
},
|
||||
|
||||
/* 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);
|
||||
},
|
||||
|
||||
/* Private */
|
||||
onRowTapped: function (evt) {
|
||||
if (this.selectedRow != null) {
|
||||
this.selectedRow.classList.remove('selected');
|
||||
}
|
||||
this.selectedRow = evt.target.closest('.table-row');
|
||||
this.selectedRow.classList.add('selected');
|
||||
},
|
||||
|
||||
/* Public */
|
||||
getCellProperty: function (row, column) {
|
||||
// TODO check the property type
|
||||
return row[column.id] ? row[column.id] : "";
|
||||
},
|
||||
refreshReports: function () {
|
||||
this.$.ajaxPostReport.generateRequest();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</dom-module>
|
||||
|
|
@ -0,0 +1,445 @@
|
|||
<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-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-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);
|
||||
};
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Requests -->
|
||||
<iron-ajax auto
|
||||
url="[[baseRestPath]]/strolch/reports"
|
||||
content-type="application/json"
|
||||
handle-as="json"
|
||||
method="GET"
|
||||
on-response="onGetReportResponse"
|
||||
on-error="onAjaxError"></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>
|
||||
<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>
|
||||
|
||||
<!-- Content -->
|
||||
<div 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]]"></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]]"></strolch-wc-reports-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</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
|
||||
},
|
||||
reports: {
|
||||
type: Array
|
||||
},
|
||||
filtersReady: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
allFilters: {
|
||||
type: Array,
|
||||
value: []
|
||||
},
|
||||
reportId: {
|
||||
type: String,
|
||||
value: null
|
||||
},
|
||||
offset: {
|
||||
type: Number,
|
||||
value: 0
|
||||
},
|
||||
limit: {
|
||||
type: Number,
|
||||
value: Susi.Constants.limit
|
||||
},
|
||||
fromDate: {
|
||||
type: Date,
|
||||
value: null
|
||||
},
|
||||
toDate: {
|
||||
type: Date,
|
||||
value: null
|
||||
}
|
||||
},
|
||||
|
||||
/* Computations */
|
||||
|
||||
/* Observers */
|
||||
observers: [],
|
||||
|
||||
/* Listeners */
|
||||
listeners: {},
|
||||
onToggleShowFacets: function (event) {
|
||||
this.showFacets = !this.showFacets;
|
||||
},
|
||||
onGetReportResponse: function (event) {
|
||||
// get the response
|
||||
var response = event.detail.response;
|
||||
|
||||
// directly set this as the available types
|
||||
this.set("reports", response.data);
|
||||
},
|
||||
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);
|
||||
|
||||
// show the view
|
||||
var that = this;
|
||||
setTimeout(function () {
|
||||
that.offset = 0;
|
||||
restampTemplate.if = true;
|
||||
that.filtersReady = true;
|
||||
});
|
||||
},
|
||||
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) {
|
||||
// set the new report id
|
||||
this.filtersReady = false;
|
||||
this.set("reportId", this.reports[this.selectedReportIndex].id);
|
||||
this.$.ajaxGetFacets.generateRequest();
|
||||
},
|
||||
onSelectionChanged: function (event) {
|
||||
this.updateAllFilters();
|
||||
},
|
||||
onExportTapped: function (event) {
|
||||
this.$.ajaxPostCsv.headers = {
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'text/csv'
|
||||
};
|
||||
this.$.ajaxPostCsv.body = {
|
||||
filter: this.allFilters
|
||||
};
|
||||
this.$.ajaxPostCsv.generateRequest();
|
||||
},
|
||||
onRefreshTapped: function (event) {
|
||||
this.$$("#table").refreshReports();
|
||||
},
|
||||
|
||||
onPrintTapped: function (elem) {
|
||||
window.print();
|
||||
return true;
|
||||
},
|
||||
|
||||
/* 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>
|
||||
Loading…
Reference in New Issue