225 lines
8.5 KiB
HTML
225 lines
8.5 KiB
HTML
<link rel="import" href="../../bower_components/polymer/polymer.html">
|
|
|
|
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
|
|
|
|
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
|
|
<link rel="import" href="../../bower_components/paper-badge/paper-badge.html">
|
|
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
|
|
<link rel="import" href="../../bower_components/paper-toggle-button/paper-toggle-button.html">
|
|
|
|
<link rel="import" href="../../bower_components/strolch-wc-badge/strolch-wc-badge.html">
|
|
<link rel="import" href="../../bower_components/strolch-wc-styles/strolch-wc-styles.html">
|
|
|
|
<link rel="import" href="../styles/c-app-style.html">
|
|
|
|
<link rel="import" href="../widgets/c-demo-location-detail.html">
|
|
|
|
<dom-module id="c-demo-locations">
|
|
<template>
|
|
|
|
<style is="custom-style" include="c-app-style">
|
|
:host {
|
|
display: block;
|
|
padding: 10px 10px;
|
|
}
|
|
|
|
paper-card {
|
|
margin: 0;
|
|
}
|
|
|
|
c-demo-location-detail {
|
|
margin-bottom: 10px;
|
|
}
|
|
</style>
|
|
|
|
<h1>Demo actions to test UI</h1>
|
|
|
|
<div class="actions">
|
|
<div>
|
|
<paper-button on-tap="onShowBooks" raised>Show Books</paper-button>
|
|
<paper-button raised on-tap="_showNotification">Show Notification</paper-button>
|
|
<paper-button raised on-tap="_showInfo">Show Info</paper-button>
|
|
</div>
|
|
|
|
<div>
|
|
<paper-button raised on-tap="_showConfirmation">Show Confirmation</paper-button>
|
|
</div>
|
|
|
|
<div>
|
|
<paper-button id="showToast" raised on-tap="_showToast">Show Toast</paper-button>
|
|
<strolch-wc-badge hide="[[arrayEmpty(selectedRows)]]" label="[[selectedRows.length]]" for="showToast"></strolch-wc-badge>
|
|
<paper-toggle-button>[[localize('Toggle')]]</paper-toggle-button>
|
|
<paper-icon-button icon="refresh" on-tap="reload"></paper-icon-button>
|
|
</div>
|
|
</div>
|
|
|
|
<p>Current search criteria:
|
|
<template is="dom-if" if="[[isEmptyString(searchTerm)]]"><i>empty</i></template>
|
|
<template is="dom-if" if="[[isNotEmptyString(searchTerm)]]">[[searchTerm]]
|
|
<paper-icon-button icon="clear" on-tap="clearSearchTerm"></paper-icon-button>
|
|
</template>
|
|
</p>
|
|
|
|
<template is="dom-if" if="[[arrayFilled(rows)]]">
|
|
<template is="dom-repeat" items="[[rows]]" as="row">
|
|
<c-demo-location-detail data="[[row]]" on-data-selected="onRowSelected" on-remove-location="onRemoveLocation"></c-demo-location-detail>
|
|
</template>
|
|
</template>
|
|
<template is="dom-if" if="[[!arrayFilled(rows)]]">
|
|
<p class="g-center"><i>[[localize('noElementsAvailable')]]</i></p>
|
|
</template>
|
|
|
|
<strolch-wc-paging id="paging" data-obj="[[dataObj]]" hidden$="[[!arrayFilled(rows)]]"></strolch-wc-paging>
|
|
|
|
<iron-ajax id="ajaxGetLocations"
|
|
url="[[baseRestPath]]/locations?query=[[searchTerm]]"
|
|
content-type="application/json"
|
|
params=""
|
|
handle-as="json"
|
|
method="GET"
|
|
on-response="onGetLocationsResponse"
|
|
on-error="onRequestError"></iron-ajax>
|
|
<iron-ajax id="ajaxRemoveLocation"
|
|
content-type="application/json"
|
|
handle-as="json"
|
|
method="DELETE"
|
|
on-response="onRemoveLocationResponse"
|
|
on-error="onRequestError"></iron-ajax>
|
|
</template>
|
|
|
|
<script>
|
|
Polymer({
|
|
is: 'c-demo-locations',
|
|
|
|
behaviors: [
|
|
CustomComponentBehavior
|
|
],
|
|
|
|
properties: {
|
|
toolbarConfig: {
|
|
type: Object,
|
|
readOnly: true,
|
|
value: {
|
|
hasSearchTerm: true
|
|
}
|
|
},
|
|
searchTerm: {
|
|
type: String,
|
|
observer: "searchTermChanged"
|
|
},
|
|
selectedRows: {
|
|
type: Array,
|
|
value: []
|
|
},
|
|
dataObj: {
|
|
type: Object,
|
|
value: null
|
|
},
|
|
rows: {
|
|
type: Array,
|
|
value: []
|
|
}
|
|
},
|
|
|
|
searchTermChanged: function (newValue, oldValue) {
|
|
if (newValue != null && oldValue !== undefined)
|
|
this.reload();
|
|
},
|
|
|
|
onShowBooks : function () {
|
|
this.changePage("demo-books");
|
|
},
|
|
|
|
_showNotification: function (e) {
|
|
this.showNotification("notification-one", //
|
|
"This is a notification!", //
|
|
"fa-exclamation-triangle", //
|
|
"Close", function () {
|
|
this.clearNotification("notification-one");
|
|
});
|
|
},
|
|
_showInfo: function (e) {
|
|
this.showDialog("This is an info dialog!", false);
|
|
},
|
|
_showConfirmation: function (e) {
|
|
this.showInfo({
|
|
title: "Confirmation",
|
|
line1: "This is a confirmation dialog. Do you want to confirm?",
|
|
callback: function (confirmed) {
|
|
this.async(function () {
|
|
if (confirmed) {
|
|
this.showDialog("You confirmed the dialog", false);
|
|
return;
|
|
}
|
|
|
|
this.showNotification("notification-two", //
|
|
"You did not confirm the dialog", "fa-exclamation-triangle", //
|
|
"Cancel", function () {
|
|
this.clearNotification("notification-two");
|
|
}.bind(this), //
|
|
"Close", function () {
|
|
this.clearNotification("notification-two");
|
|
}.bind(this), //
|
|
"Info", function () {
|
|
this._showInfo();
|
|
}.bind(this));
|
|
});
|
|
}.bind(this)
|
|
});
|
|
},
|
|
_showToast: function (e) {
|
|
this.showToast("This is a toast!");
|
|
},
|
|
|
|
/* Private */
|
|
onRowSelected: function (e) {
|
|
if (e.detail.data.checked) {
|
|
this.push('selectedRows', e.detail.data);
|
|
} else {
|
|
this.arrayDelete('selectedRows', e.detail.data);
|
|
}
|
|
},
|
|
onRemoveLocation: function (e) {
|
|
var location = e.detail.location;
|
|
this.showInfo({
|
|
title: "Remove location",
|
|
line1: "Do you really want to remove location " + location.name,
|
|
callback: function (confirmed) {
|
|
this.async(function () {
|
|
if (!confirmed) return;
|
|
this.$.ajaxRemoveLocation.url = this.baseRestPath + "/locations/" + location.id;
|
|
this.$.ajaxRemoveLocation.generateRequest();
|
|
});
|
|
}.bind(this)
|
|
});
|
|
},
|
|
|
|
/* Public */
|
|
reload: function () {
|
|
this.$.ajaxGetLocations.generateRequest();
|
|
},
|
|
|
|
onGetLocationsResponse: function (e) {
|
|
this.selectedRows = [];
|
|
var response = e.detail.response;
|
|
response.data.forEach(function (location) {
|
|
location.selectable = true;
|
|
});
|
|
this.rows = response.data;
|
|
this.dataObj = response;
|
|
},
|
|
onRemoveLocationResponse: function (e) {
|
|
this.reload();
|
|
},
|
|
|
|
/* Lifecycle */
|
|
attached: function () {
|
|
this.$.ajaxGetLocations.params.limit = 20;
|
|
this.$.paging.ajax = this.$.ajaxGetLocations;
|
|
},
|
|
ready: function () {
|
|
|
|
},
|
|
});
|
|
</script>
|
|
</dom-module> |