[Major] Added paging to users, sessions, fixed layout in roles

This commit is contained in:
Robert von Burg 2019-01-14 14:17:45 +01:00
parent b856a925b0
commit 0c5a1e6d1c
8 changed files with 596 additions and 448 deletions

View File

@ -29,10 +29,6 @@
display: block;
}
.object-div {
background: #ffffff;
}
.title-div {
padding-left: 30px;
}
@ -49,8 +45,7 @@
}
paper-material {
border-radius: 2px;
background-color: #ffffff;
background: #ffffff;
}
paper-tabs {
@ -87,314 +82,322 @@
</style>
<div class="object-div">
<paper-material elevation="2">
<div class="g-row title-div" on-tap="_toggleExpanded">
<div class="g-12">
<h1 class="title">
<template is="dom-if" if="[[isRootElement]]">
<paper-checkbox checked="{{object._checked}}" on-tap="onCheckTapped"></paper-checkbox>
</template>
<span style="text-transform: uppercase">[[object.objectType]]</span> <span class="sub g-ml-4">Id:</span>
[[object.id]] <span class="sub g-ml-4">Name:</span> [[object.name]] <span class="sub g-ml-4">Type:</span>
[[object.type]]
<div class="object-div">
<paper-icon-button class="g-pull-right"
id="expandedIcon"
icon="expand-more"></paper-icon-button>
</h1>
</div>
</div>
<template is="dom-if" if="[[expanded]]">
<div class="g-row">
<div class="g-row title-div" on-tap="_toggleExpanded">
<div class="g-12">
<!-- Tabs -->
<paper-tabs selected="{{selectedDetailType}}"
attr-for-selected="name"
fallback-selection="none">
<paper-tab name="details">Details</paper-tab>
<paper-tab name="parameters">Parameters</paper-tab>
<paper-tab name="policies">Policies</paper-tab>
<template is="dom-if" if="[[_isResource(object.objectType)]]">
<paper-tab name="timedstates">Timed States</paper-tab>
</template>
<template is="dom-if" if="[[_isActivity(object.objectType)]]">
<paper-tab name="elements">Elements</paper-tab>
</template>
<h1 class="title">
<template is="dom-if" if="[[isRootElement]]">
<paper-tab name="model">Model</paper-tab>
<paper-checkbox checked="{{object._checked}}" on-tap="onCheckTapped"></paper-checkbox>
</template>
</paper-tabs>
<!-- Tab sections -->
<iron-pages selected="{{selectedDetailType}}" attr-for-selected="name">
<!-- details -->
<section name="details">
<template is="dom-if" if="[[!object]]">
<p class="g-center">Loading...</p>
</template>
<template is="dom-if" if="[[object]]">
<div class="g-row">
<div class="g-6">
<dl class="g-dl">
<dt>Id</dt>
<dd>[[object.id]]</dd>
<dt>Name</dt>
<dd>[[object.name]]</dd>
<dt>Type</dt>
<dd>[[object.type]]</dd>
<dt>Locator</dt>
<dd>[[object.locator]]</dd>
</dl>
<template is="dom-if"
if="[[_isActivity(object.objectType)]]"
restamp="true">
<dl class="g-dl">
<dt>State</dt>
<dd>[[object.state]]</dd>
<dt>TimeOrdering</dt>
<dd>[[object.timeOrdering]]</dd>
<dt>Start</dt>
<dd>[[_formatDate(object.start)]]</dd>
<dt>End</dt>
<dd>[[_formatDate(object.end)]]</dd>
</dl>
</template>
<template is="dom-if" if="[[_isOrder(object.objectType)]]" restamp="true">
<dl class="g-dl">
<dt>State</dt>
<dd>[[object.state]]</dd>
<dt>Date</dt>
<dd>[[_formatDate(object.date)]]</dd>
</dl>
</template>
<template is="dom-if" if="[[_isAction(object.objectType)]]" restamp="true">
<dl class="g-dl">
<dt>State</dt>
<dd>[[object.state]]</dd>
<dt>Start</dt>
<dd>[[_formatDate(object.start)]]</dd>
<dt>End</dt>
<dd>[[_formatDate(object.end)]]</dd>
<dt>Resource Type</dt>
<dd>[[object.resourceType]]</dd>
<dt>Resource Id</dt>
<dd>[[object.resourceId]]</dd>
</dl>
</template>
</div>
<div class="g-6">
<template is="dom-if" if="[[object.version]]" restamp="true">
<dl class="g-dl">
<dt>Created</dt>
<dd>[[_formatDate(object.version.created)]]</dd>
<dt>Updated</dt>
<dd>[[_formatDate(object.version.updated)]]</dd>
<dt>CreatedBy</dt>
<dd>[[object.version.createdBy]]</dd>
<dt>Deleted</dt>
<dd>[[object.version.deleted]]</dd>
<dt>Version</dt>
<dd>[[object.version.version]]</dd>
</dl>
</template>
</div>
</div>
</template>
</section>
<!-- parameters -->
<section name="parameters">
<template is="dom-if" if="[[!object]]">
<p class="g-center">Loading...</p>
</template>
<template is="dom-if" if="[[object]]">
<template is="dom-if" if="[[_isEmpty(object.parameterBags)]]">
<p class="g-center">No parameters defined on [[object.objectType]]
[[object.id]]</p>
</template>
<template is="dom-if" if="[[_isNotEmpty(object.parameterBags)]]">
<div class="g-row g-pt-2">
<div class="g-2"><b>ParameterBag</b></div>
<div class="g-2"><b>Parameter Id</b></div>
<div class="g-2"><b>Name</b></div>
<div class="g-2"><b>Interpretation</b></div>
<div class="g-1"><b>UOM</b></div>
<div class="g-1"><b>Type</b></div>
<div class="g-2"><b>Value</b></div>
</div>
<template is="dom-repeat" items="{{_asArray(object.parameterBags)}}" as="bag">
<template is="dom-repeat"
items="{{_asArray(bag.value.parameters)}}"
as="param">
<div class="g-row">
<div class="g-2 cell">[[bag.value.id]]</div>
<div class="g-2 cell">[[param.value.id]]</div>
<div class="g-2 cell">[[param.value.name]]</div>
<div class="g-2 cell">[[param.value.interpretation]]</div>
<div class="g-1 cell">[[param.value.uom]]</div>
<div class="g-1 cell">[[param.value.type]]</div>
<div class="g-2 cell">[[param.value.value]]</div>
</div>
</template>
</template>
</template>
</template>
</section>
<!-- policies -->
<section name="policies">
<template is="dom-if" if="[[!object]]">
<p class="g-m-4 g-center">Loading...</p>
</template>
<template is="dom-if" if="[[object]]">
<template is="dom-if" if="[[_isEmpty(object.policies)]]">
<p class="g-pt-4 g-center">No policies defined on [[objectName]]
[[object.id]]</p>
</template>
<template is="dom-if" if="[[_isNotEmpty(object.policies)]]">
<div class="g-row g-pt-2 data-list">
<div class="g-6"><b>Type</b></div>
<div class="g-6"><b>Value</b></div>
</div>
<template is="dom-repeat" items="{{_asArray(object.policies)}}" as="policy">
<div class="g-row data-list">
<div class="g-6 cell">[[policy.key]]</div>
<div class="g-6 g-pl-2 cell">[[policy.value]]</div>
</div>
</template>
</template>
</template>
</section>
<!-- timedstates -->
<template is="dom-if" if="[[_isResource(object.objectType)]]">
<section name="timedstates">
<template is="dom-if" if="[[!object]]">
<p class="g-center">Loading...</p>
</template>
<template is="dom-if" if="[[object]]">
<template is="dom-if" if="[[_isEmpty(object.timedStates)]]">
<p class="g-pt-4 g-center">No timed states defined on [[objectName]]
[[object.id]]</p>
</template>
<template is="dom-if" if="[[_isNotEmpty(object.timedStates)]]">
<template is="dom-repeat"
items="[[_asArray(object.timedStates)]]"
as="timedState">
<div class="g-row g-pt-2">
<div class="g-4"><b>Id</b> [[timedState.value.id]]</div>
<div class="g-4"><b>Name</b> [[timedState.value.name]]</div>
<div class="g-4"><b>Type</b> [[timedState.value.type]]</div>
</div>
<div class="g-row g-pt-4 data-list">
<div class="g-6"><b>Time</b></div>
<div class="g-6"><b>Value</b></div>
</div>
<template is="dom-repeat"
items="[[timedState.value.values]]"
as="timedStateValue">
<div class="g-row data-list">
<div class="g-6 cell">[[timedStateValue.time]]</div>
<div class="g-6 g-pl-2 cell">[[timedStateValue.value]]</div>
</div>
</template>
</template>
</template>
</template>
</section>
</template>
<!-- activity children -->
<template is="dom-if" if="[[_isActivity(object.objectType)]]">
<section name="elements">
<template is="dom-if" if="[[!object]]">
<p class="g-center">Loading...</p>
</template>
<template is="dom-if" if="[[object]]">
<template is="dom-repeat" items="[[object.elements]]" as="childElement">
<strolch-wc-inspector-object base-path="[[basePath]]"
realm="[[realm]]"
object="[[childElement]]"
class="g-m-2"></strolch-wc-inspector-object>
</template>
</template>
</section>
</template>
<!-- model -->
<template is="dom-if" if="[[isRootElement]]">
<section name="model">
<template is="dom-if" if="[[!object]]">
<p class="g-center">Loading...</p>
</template>
<template is="dom-if" if="[[object]]">
<textarea value="{{model::input}}"></textarea>
<div class="g-mt-3">
<paper-radio-group selected="{{modelType}}" style="font-size: small">
<paper-radio-button name="xml">XML</paper-radio-button>
<paper-radio-button name="json">JSON</paper-radio-button>
<paper-radio-button name="json-flat">JSON Flat</paper-radio-button>
</paper-radio-group>
<paper-button raised class="g-pull-right" on-tap="_saveModel">Save
</paper-button>
<paper-button class="g-pull-right" on-tap="_removeModel">Remove
</paper-button>
</div>
</template>
</section>
</template>
</iron-pages>
<span style="text-transform: uppercase">[[object.objectType]]</span>
<span class="sub g-ml-4">Id:</span> [[object.id]] <span class="sub g-ml-4">Name:</span>
[[object.name]] <span class="sub g-ml-4">Type:</span>
[[object.type]]
<paper-icon-button class="g-pull-right"
id="expandedIcon"
icon="expand-more"></paper-icon-button>
</h1>
</div>
</div>
</template>
<template is="dom-if" if="[[expanded]]">
<div class="g-row">
<div class="g-12">
<hr />
</div>
<!-- Tabs -->
<paper-tabs selected="{{selectedDetailType}}"
attr-for-selected="name"
fallback-selection="none">
<paper-tab name="details">Details</paper-tab>
<paper-tab name="parameters">Parameters</paper-tab>
<paper-tab name="policies">Policies</paper-tab>
<template is="dom-if" if="[[_isResource(object.objectType)]]">
<paper-tab name="timedstates">Timed States</paper-tab>
</template>
<template is="dom-if" if="[[_isActivity(object.objectType)]]">
<paper-tab name="elements">Elements</paper-tab>
</template>
<template is="dom-if" if="[[isRootElement]]">
<paper-tab name="model">Model</paper-tab>
</template>
</paper-tabs>
<!-- Tab sections -->
<iron-pages selected="{{selectedDetailType}}" attr-for-selected="name">
<!-- details -->
<section name="details">
<template is="dom-if" if="[[!object]]">
<p class="g-center">Loading...</p>
</template>
<template is="dom-if" if="[[object]]">
<div class="g-row">
<div class="g-6">
<dl class="g-dl">
<dt>Id</dt>
<dd>[[object.id]]</dd>
<dt>Name</dt>
<dd>[[object.name]]</dd>
<dt>Type</dt>
<dd>[[object.type]]</dd>
<dt>Locator</dt>
<dd>[[object.locator]]</dd>
</dl>
<template is="dom-if"
if="[[_isActivity(object.objectType)]]"
restamp="true">
<dl class="g-dl">
<dt>State</dt>
<dd>[[object.state]]</dd>
<dt>TimeOrdering</dt>
<dd>[[object.timeOrdering]]</dd>
<dt>Start</dt>
<dd>[[_formatDate(object.start)]]</dd>
<dt>End</dt>
<dd>[[_formatDate(object.end)]]</dd>
</dl>
</template>
<template is="dom-if"
if="[[_isOrder(object.objectType)]]"
restamp="true">
<dl class="g-dl">
<dt>State</dt>
<dd>[[object.state]]</dd>
<dt>Date</dt>
<dd>[[_formatDate(object.date)]]</dd>
</dl>
</template>
<template is="dom-if"
if="[[_isAction(object.objectType)]]"
restamp="true">
<dl class="g-dl">
<dt>State</dt>
<dd>[[object.state]]</dd>
<dt>Start</dt>
<dd>[[_formatDate(object.start)]]</dd>
<dt>End</dt>
<dd>[[_formatDate(object.end)]]</dd>
<dt>Resource Type</dt>
<dd>[[object.resourceType]]</dd>
<dt>Resource Id</dt>
<dd>[[object.resourceId]]</dd>
</dl>
</template>
</div>
<div class="g-6">
<template is="dom-if" if="[[object.version]]" restamp="true">
<dl class="g-dl">
<dt>Created</dt>
<dd>[[_formatDate(object.version.created)]]</dd>
<dt>Updated</dt>
<dd>[[_formatDate(object.version.updated)]]</dd>
<dt>CreatedBy</dt>
<dd>[[object.version.createdBy]]</dd>
<dt>Deleted</dt>
<dd>[[object.version.deleted]]</dd>
<dt>Version</dt>
<dd>[[object.version.version]]</dd>
</dl>
</template>
</div>
</div>
</template>
</section>
<!-- parameters -->
<section name="parameters">
<template is="dom-if" if="[[!object]]">
<p class="g-center">Loading...</p>
</template>
<template is="dom-if" if="[[object]]">
<template is="dom-if" if="[[_isEmpty(object.parameterBags)]]">
<p class="g-center">No parameters defined on [[object.objectType]]
[[object.id]]</p>
</template>
<template is="dom-if" if="[[_isNotEmpty(object.parameterBags)]]">
<div class="g-row g-pt-2">
<div class="g-2"><b>ParameterBag</b></div>
<div class="g-2"><b>Parameter Id</b></div>
<div class="g-2"><b>Name</b></div>
<div class="g-2"><b>Interpretation</b></div>
<div class="g-1"><b>UOM</b></div>
<div class="g-1"><b>Type</b></div>
<div class="g-2"><b>Value</b></div>
</div>
<template is="dom-repeat"
items="{{_asArray(object.parameterBags)}}"
as="bag">
<template is="dom-repeat"
items="{{_asArray(bag.value.parameters)}}"
as="param">
<div class="g-row">
<div class="g-2 cell">[[bag.value.id]]</div>
<div class="g-2 cell">[[param.value.id]]</div>
<div class="g-2 cell">[[param.value.name]]</div>
<div class="g-2 cell">[[param.value.interpretation]]</div>
<div class="g-1 cell">[[param.value.uom]]</div>
<div class="g-1 cell">[[param.value.type]]</div>
<div class="g-2 cell">[[param.value.value]]</div>
</div>
</template>
</template>
</template>
</template>
</section>
<!-- policies -->
<section name="policies">
<template is="dom-if" if="[[!object]]">
<p class="g-m-4 g-center">Loading...</p>
</template>
<template is="dom-if" if="[[object]]">
<template is="dom-if" if="[[_isEmpty(object.policies)]]">
<p class="g-pt-4 g-center">No policies defined on [[objectName]]
[[object.id]]</p>
</template>
<template is="dom-if" if="[[_isNotEmpty(object.policies)]]">
<div class="g-row g-pt-2 data-list">
<div class="g-6"><b>Type</b></div>
<div class="g-6"><b>Value</b></div>
</div>
<template is="dom-repeat" items="{{_asArray(object.policies)}}" as="policy">
<div class="g-row data-list">
<div class="g-6 cell">[[policy.key]]</div>
<div class="g-6 g-pl-2 cell">[[policy.value]]</div>
</div>
</template>
</template>
</template>
</section>
<!-- timedstates -->
<template is="dom-if" if="[[_isResource(object.objectType)]]">
<section name="timedstates">
<template is="dom-if" if="[[!object]]">
<p class="g-center">Loading...</p>
</template>
<template is="dom-if" if="[[object]]">
<template is="dom-if" if="[[_isEmpty(object.timedStates)]]">
<p class="g-pt-4 g-center">No timed states defined on [[objectName]]
[[object.id]]</p>
</template>
<template is="dom-if" if="[[_isNotEmpty(object.timedStates)]]">
<template is="dom-repeat"
items="[[_asArray(object.timedStates)]]"
as="timedState">
<div class="g-row g-pt-2">
<div class="g-4"><b>Id</b> [[timedState.value.id]]</div>
<div class="g-4"><b>Name</b> [[timedState.value.name]]</div>
<div class="g-4"><b>Type</b> [[timedState.value.type]]</div>
</div>
<div class="g-row g-pt-4 data-list">
<div class="g-6"><b>Time</b></div>
<div class="g-6"><b>Value</b></div>
</div>
<template is="dom-repeat"
items="[[timedState.value.values]]"
as="timedStateValue">
<div class="g-row data-list">
<div class="g-6 cell">[[timedStateValue.time]]</div>
<div class="g-6 g-pl-2 cell">[[timedStateValue.value]]</div>
</div>
</template>
</template>
</template>
</template>
</section>
</template>
<!-- activity children -->
<template is="dom-if" if="[[_isActivity(object.objectType)]]">
<section name="elements">
<template is="dom-if" if="[[!object]]">
<p class="g-center">Loading...</p>
</template>
<template is="dom-if" if="[[object]]">
<template is="dom-repeat" items="[[object.elements]]" as="childElement">
<strolch-wc-inspector-object base-path="[[basePath]]"
realm="[[realm]]"
object="[[childElement]]"
class="g-m-2"></strolch-wc-inspector-object>
</template>
</template>
</section>
</template>
<!-- model -->
<template is="dom-if" if="[[isRootElement]]">
<section name="model">
<template is="dom-if" if="[[!object]]">
<p class="g-center">Loading...</p>
</template>
<template is="dom-if" if="[[object]]">
<textarea value="{{model::input}}"></textarea>
<div class="g-mt-3">
<paper-radio-group selected="{{modelType}}" style="font-size: small">
<paper-radio-button name="xml">XML</paper-radio-button>
<paper-radio-button name="json">JSON</paper-radio-button>
<paper-radio-button name="json-flat">JSON Flat</paper-radio-button>
</paper-radio-group>
<paper-button raised class="g-pull-right" on-tap="_saveModel">Save
</paper-button>
<paper-button class="g-pull-right" on-tap="_removeModel">Remove
</paper-button>
</div>
</template>
</section>
</template>
</iron-pages>
</div>
</div>
</template>
</div>
</paper-material>
<iron-ajax id="ajax"

View File

@ -16,6 +16,7 @@
<link rel="import" href="../strolch-wc-styles/strolch-wc-styles.html">
<link rel="import" href="strolch-wc-inspector-behavior.html">
<link rel="import" href="strolch-wc-inspector-paging-behavior.html">
<link rel="import" href="strolch-wc-inspector-object.html">
<dom-module id="strolch-wc-inspector-objects">
@ -163,8 +164,9 @@
<div class="g-row">
<div class="g-12">
<template is="dom-repeat" items="[[objects.data]]">
<strolch-wc-inspector-object base-path="[[basePath]]"
<template is="dom-repeat" items="[[dataObj.data]]">
<strolch-wc-inspector-object class="g-ml-3 g-mr-3 g-mt-4"
base-path="[[basePath]]"
realm="[[realm]]"
is-root-element="true"
on-strolch-wc-obj-remove="onRemoveElement"
@ -174,7 +176,7 @@
</div>
</div>
<div class="g-row g-mb-1">
<div class="g-row g-mt-3 g-mb-1">
<div class="g-3 g-pt-3 g-pl-4">
<paper-button on-tap="_toggleAllSelected" raised>
<template is="dom-if" if="[[allSelected]]">Select None</template>
@ -189,13 +191,15 @@
<div class="g-m-2 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>[[objects.offset]] to [[_getEnd(objects)]] of [[objects.size]]</span>
<span>[[dataObj.offset]] to [[_getEnd(dataObj)]] of [[dataObj.size]] ([[dataObj.dataSetSize]])</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-3">
<paper-button on-tap="_setLimit">10</paper-button>
<paper-button on-tap="_setLimit">50</paper-button>
<paper-button on-tap="_setLimit">100</paper-button>
</div>
</div>
@ -227,7 +231,8 @@
is: 'strolch-wc-inspector-objects',
behaviors: [
StrolchInspectorBehavior
StrolchInspectorBehavior,
StrolchInspectorPagingBehavior
],
properties: {
@ -269,24 +274,6 @@
return null;
}
},
objects: {
type: Object,
value: function () {
return null;
}
},
offset: {
type: Number,
value: function () {
return 0;
}
},
limit: {
type: Number,
value: function () {
return 20;
}
},
allSelected: {
type: Boolean,
@ -324,8 +311,8 @@
}
this.debounce("doSearch", function () {
this.offset = 0;
this.reloadTypeDetails();
this.dataObj.offset = 0;
this.queryPage();
}, 500);
},
@ -333,7 +320,7 @@
this.selectedType = null;
this.section = 'typesSummary';
this.selectedType = null;
this.objects = null;
this.dataObj.data = null;
},
_noElements: function (objectSummaries) {
@ -341,7 +328,7 @@
},
_showTypeDetails: function (evt) {
this.offset = 0;
this.dataObj.offset = 0;
this.selectType(evt.model.item.type);
},
@ -349,23 +336,23 @@
var typeChanged = this.selectedType != type;
this.selectedType = type;
this.section = type == null ? 'typesSummary' : 'typeDetails';
this.objects = null;
this.dataObj.data = null;
console.log('Showing type ' + this.selectedType);
Strolch.setQueryParamValue('type', this.selectedType);
if (this.selectedType == null) {
this.offset = 0;
this.dataObj.offset = 0;
} else {
if (typeChanged) {
this.offset = 0;
this.dataObj.offset = 0;
}
this.reloadTypeDetails();
this.queryPage();
}
},
_closeTypeDetails: function () {
this.section = 'typesSummary';
this.selectedType = null;
this.objects = null;
this.dataObj.data = null;
Strolch.setQueryParamValue('type', null);
},
@ -381,35 +368,6 @@
}
},
_hasNext: function (objects) {
return objects != null && objects.nextOffset > objects.offset;
},
_hasPrevious: function (objects) {
return objects != null && objects.previousOffset < objects.offset;
},
_getEnd: function (objects) {
if (this._hasNext(objects)) return objects.nextOffset;
return objects == null ? 0 : objects.size;
},
_toFirstPage: function () {
this.offset = 0;
this.reloadTypeDetails();
},
_toPreviousPage: function () {
this.offset = this.objects.previousOffset;
this.reloadTypeDetails();
},
_toNextPage: function () {
this.offset = this.objects.nextOffset;
this.reloadTypeDetails(this.objects.nextOffset);
},
_toLastPage: function () {
this.offset = this.objects.lastOffset;
this.reloadTypeDetails(this.objects.lastOffset);
},
onImportTapped: function (event) {
this.set('importDlgTitle', 'Import Elements as XML');
this.importType = 'import';
@ -450,14 +408,14 @@
var select = !this.allSelected;
console.log(select ? 'Selecting ALL' : 'Selecting NONE');
this.set('selectedObjectIds', []);
for (var i = 0; i < this.objects.data.length; i++) {
var path = 'objects.data.' + i + '._checked';
for (var i = 0; i < this.dataObj.data.length; i++) {
var path = 'dataObj.data.' + i + '._checked';
this.set(path, !select);
this.set(path, select);
console.log('Set path ' + path + ' = ' + select);
if (select) {
var object = this.objects.data[i];
var object = this.dataObj.data[i];
this.push('selectedObjectIds', object.id);
console.log('Added ' + object.id + ' as selected');
}
@ -482,7 +440,7 @@
}
}
this.set('allSelected', this.selectedObjectIds.length == this.objects.data.length);
this.set('allSelected', this.selectedObjectIds.length == this.dataObj.data.length);
console.log(this.allSelected ? 'All are selected' : 'None or some are selected');
},
@ -491,26 +449,26 @@
var id = event.detail.object.id;
var index = null;
for (var i = 0; i < this.objects.data.length; i++) {
if (this.objects.data[i].id == id) {
for (var i = 0; i < this.dataObj.data.length; i++) {
if (this.dataObj.data[i].id == id) {
index = i;
break;
}
}
if (index != null) {
this.splice("objects.data", index, 1);
this.splice("dataObj.data", index, 1);
}
},
reloadTypeDetails: function () {
queryPage: function () {
this.dlgTitle = 'Reload failed';
this._handleAjaxResponse = function (data) {
this.set('objects', data.detail.response);
this.set('dataObj', data.detail.response);
};
var url = this.basePath + 'rest/strolch/inspector/' + this.realm + '/' + this._typeSubPath(this.objectType) + '/' + this.selectedType;
url += '?offset=' + this.offset + '&limit=' + this.limit + "&orderBy=id&query=" + encodeURIComponent(this.searchTerm) + '&overview=true';
url += '?offset=' + this.dataObj.offset + '&limit=' + this.dataObj.limit + "&orderBy=id&query=" + encodeURIComponent(this.searchTerm) + '&overview=true';
this.$.ajax.url = url;
this.$.ajax.method = 'GET';
@ -541,10 +499,10 @@
this.dlgTitle = 'Remove elements failed';
this._handleAjaxResponse = function (data) {
this.set('objects', null);
this.set('this.dataObj.data = null;.data', null);
this.set('selectedObjectIds', []);
this.set('allSelected', false);
this.reloadTypeDetails();
this.queryPage();
};
this.$.ajax.url = this.basePath + 'rest/strolch/inspector/' + this.realm + '/' + this._typeSubPath(this.objectType) + '/' + this.selectedType;

View File

@ -0,0 +1,71 @@
<script>
StrolchInspectorPagingBehavior = {
properties: {
dataObj: {
type: Object,
value: {
data: null,
offset: 0,
limit: 20,
dataSetSize: 0,
descending: true,
sortBy: 'id',
size: 0,
nextOffset: 0,
previousOffset: 0,
lastOffset: 0
}
}
},
_getDefaultObj: function () {
return {
data: null,
offset: 0,
limit: 20,
dataSetSize: 0,
descending: true,
sortBy: 'id',
size: 0,
nextOffset: 0,
previousOffset: 0,
lastOffset: 0
}
},
_hasNext: function (dataObj) {
return dataObj != null && dataObj.nextOffset > dataObj.offset;
},
_hasPrevious: function (dataObj) {
return dataObj != null && dataObj.previousOffset < dataObj.offset;
},
_getEnd: function (dataObj) {
if (this._hasNext(dataObj)) return dataObj.nextOffset;
return dataObj == null ? 0 : dataObj.size;
},
_setLimit: function (e) {
this.dataObj.limit = parseInt(e.target.textContent.trim());
this.queryPage();
},
_toFirstPage: function () {
this.dataObj.offset = 0;
this.queryPage();
},
_toPreviousPage: function () {
this.dataObj.offset = this.dataObj.previousOffset;
this.queryPage();
},
_toNextPage: function () {
this.dataObj.offset = this.dataObj.nextOffset;
this.queryPage();
},
_toLastPage: function () {
this.dataObj.offset = this.dataObj.lastOffset;
this.queryPage();
}
};
</script>

View File

@ -21,6 +21,7 @@
<link rel="import" href="../strolch-wc-styles/strolch-wc-styles.html">
<link rel="import" href="strolch-wc-inspector-behavior.html">
<link rel="import" href="strolch-wc-inspector-paging-behavior.html">
<dom-module id="strolch-wc-operations-log">
@ -139,7 +140,7 @@
<paper-icon-button class="g-pull-right"
icon="refresh"
title="Refresh"
on-tap="reloadOperationsLog"></paper-icon-button>
on-tap="queryPage"></paper-icon-button>
</div>
</div>
@ -166,7 +167,7 @@
<div class="g-1"></div>
</div>
<template is="dom-repeat" items="[[operationsLog.data]]" as="log">
<template is="dom-repeat" items="[[dataObj.data]]" as="log">
<hr />
@ -192,15 +193,21 @@
</template>
<div class="g-row">
<div class="g-12">
<div class="g-3"></div>
<div class="g-6">
<div class="g-m-2 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>[[operationsLog.offset]] to [[_getEnd(operationsLog)]] of [[operationsLog.size]]</span>
<span>[[dataObj.offset]] to [[_getEnd(dataObj)]] of [[dataObj.size]] ([[dataObj.dataSetSize]])</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-3">
<paper-button on-tap="_setLimit">10</paper-button>
<paper-button on-tap="_setLimit">50</paper-button>
<paper-button on-tap="_setLimit">100</paper-button>
</div>
</div>
</div>
@ -242,7 +249,8 @@
is: 'strolch-wc-operations-log',
behaviors: [
StrolchInspectorBehavior
StrolchInspectorBehavior,
StrolchInspectorPagingBehavior
],
properties: {
@ -306,7 +314,7 @@
cancel: "Cancel",
formatDate: function (datetime) {
if (typeof(datetime) == 'string') {
if (typeof (datetime) == 'string') {
datetime = new Date(datetime);
}
@ -331,45 +339,9 @@
return monthName + " " + fullYear;
}
}
},
operationsLog: {
type: Object
},
offset: {
type: Number,
value: 0
},
limit: {
type: Number,
value: 100
}
},
_hasNext: function (objects) {
return objects != null && objects.nextOffset > objects.offset;
},
_getEnd: function (objects) {
if (this._hasNext(objects)) return objects.nextOffset;
return objects == null ? 0 : objects.size;
},
_toFirstPage: function () {
this.offset = 0;
this.reloadOperationsLog();
},
_toPreviousPage: function () {
this.offset = this.operationsLog.previousOffset;
this.reloadOperationsLog();
},
_toNextPage: function () {
this.offset = this.operationsLog.nextOffset;
this.reloadOperationsLog();
},
_toLastPage: function () {
this.offset = this.operationsLog.lastOffset;
this.reloadOperationsLog();
},
toLocalDateTime: function (val) {
return Strolch.toDateTime(val);
},
@ -379,24 +351,24 @@
},
severityChanged: function (newValue, oldValue) {
if (newValue != null)
this.reloadOperationsLog();
this.queryPage();
},
searchTermChanged: function (newValue, oldValue) {
if (newValue != null)
this.reloadOperationsLog();
this.queryPage();
},
fromChanged: function (newValue, oldValue) {
if (newValue != null)
this.reloadOperationsLog();
this.queryPage();
},
toChanged: function (newValue, oldValue) {
if (newValue != null)
this.reloadOperationsLog();
this.queryPage();
},
realmChanged: function (newValue, oldValue) {
if (newValue != null) {
Strolch.setQueryParamValue('realm', newValue);
this.reloadOperationsLog();
this.queryPage();
}
},
@ -423,16 +395,14 @@
this.searchTerm = '';
},
reloadOperationsLog: function () {
queryPage: function () {
if (this.realms == null) {
return;
}
this.dlgTitle = 'Fetching log failed';
this._handleAjaxResponse = function (data) {
this.operationsLog = data.detail.response;
this.offset = this.operationsLog.offset;
this.limit = this.operationsLog.limit;
this.dataObj = data.detail.response;
};
this.$.ajax.url = this.basePath + 'rest/strolch/operations-log/' + this.selectedRealm;
@ -443,8 +413,8 @@
from: this.from,
to: this.to,
query: this.searchTerm,
offset: this.offset,
limit: this.limit
offset: this.dataObj.offset,
limit: this.dataObj.limit
};
this.$.ajax.generateRequest();
},

View File

@ -41,11 +41,12 @@
.content {
border-top: 1px black solid;
background: #eeeeee;
}
</style>
<paper-material elevation="1">
<paper-material elevation="2">
<h3 class="g-m-3 g-pt-2 g-pl-2 g-pr-2" on-tap="_toggleOpened">
<template is="dom-if" if="[[!opened]]">
<paper-icon-button icon="arrow-drop-down"></paper-icon-button>

View File

@ -113,6 +113,12 @@
},
roleName: {
type: String
},
propagateShowDialog: {
type: Boolean,
value: function () {
return false
}
}
},
@ -120,7 +126,11 @@
"strolch-show-dialog": "onShowDialog"
},
onShowDialog: function (event) {
this.showError(event.detail.title, event.detail.text);
if (!this.propagateShowDialog) {
event.cancelBubble = true;
event.stopPropagation();
this.showError(event.detail.title, event.detail.text);
}
},
showError: function (title, text) {
this.dlgTitle = title;

View File

@ -16,8 +16,10 @@
<link rel="import" href="../paper-tabs/paper-tabs.html">
<link rel="import" href="../strolch-wc-styles/strolch-wc-styles.html">
<link rel="import" href="../strolch-wc-debounced-input/strolch-wc-debounced-input.html">
<link rel="import" href="strolch-wc-inspector-behavior.html">
<link rel="import" href="strolch-wc-inspector-paging-behavior.html">
<dom-module id="strolch-wc-sessions">
@ -39,11 +41,26 @@
padding: 0.3em;
}
strolch-wc-debounced-input {
max-width: 200px;
display: inline-flex;
--regular-color: #919191;
--focus-color: #000000;
}
</style>
<div class="g-row g-pt-4">
<div class="g-12 g-right">
<paper-icon-button icon="refresh" title="Refresh" on-tap="reload"></paper-icon-button>
<div class="g-12">
<paper-icon-button class="g-pull-right"
icon="refresh"
title="Refresh"
on-tap="reload"></paper-icon-button>
<strolch-wc-debounced-input id="debouncedInput"
class="g-pull-right"
debounced-input="{{searchTerm}}"
disabled="[[arrayFilled(filters)]]"></strolch-wc-debounced-input>
</div>
</div>
@ -62,7 +79,7 @@
<div class="g-1"></div>
</div>
<template is="dom-repeat" items="[[sessions]]">
<template is="dom-repeat" items="[[dataObj.data]]">
<hr />
@ -85,6 +102,25 @@
</div>
<div class="g-row">
<div class="g-3">
</div>
<div class="g-6">
<div class="g-m-2 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>[[dataObj.offset]] to [[_getEnd(dataObj)]] of [[dataObj.size]] ([[dataObj.dataSetSize]])</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-3">
<paper-button on-tap="_setLimit">10</paper-button>
<paper-button on-tap="_setLimit">50</paper-button>
<paper-button on-tap="_setLimit">100</paper-button>
</div>
</div>
</paper-material>
<paper-dialog id="dlg" modal>
@ -110,12 +146,23 @@
is: 'strolch-wc-sessions',
behaviors: [
StrolchInspectorBehavior
StrolchInspectorBehavior,
StrolchInspectorPagingBehavior
],
properties: {
sessions: {
type: Array
},
searchTerm: {
type: String,
observer: 'searchTermChanged'
},
propagateShowDialog: {
type: Boolean,
value: function () {
return false
}
}
},
@ -140,7 +187,11 @@
"strolch-show-dialog": "onShowDialog"
},
onShowDialog: function (event) {
this.showError(event.detail.title, event.detail.text);
if (!this.propagateShowDialog) {
event.cancelBubble = true;
event.stopPropagation();
this.showError(event.detail.title, event.detail.text);
}
},
showError: function (title, text) {
this.dlgTitle = title;
@ -149,19 +200,35 @@
this.$.dlg.open();
},
searchTermChanged: function (newValue, oldValue) {
if (newValue != null && oldValue != null) {
this.queryPage();
}
},
ready: function () {
//
},
reload: function () {
this.queryPage();
},
queryPage: function () {
this.dlgTitle = 'Sessions query failed';
this._handleAjaxResponse = function (data) {
this.sessions = data.detail.response;
this.dataObj = data.detail.response;
};
this.$.ajax.url = this.basePath + 'rest/strolch/sessions';
this.$.ajax.method = 'GET';
this.$.ajax.params = {
query: this.searchTerm,
offset: this.dataObj.offset,
limit: this.dataObj.limit,
orderBy: 'username'
};
this.$.ajax.generateRequest();
},

View File

@ -19,8 +19,10 @@
<link rel="import" href="../paper-tabs/paper-tabs.html">
<link rel="import" href="../strolch-wc-styles/strolch-wc-styles.html">
<link rel="import" href="../strolch-wc-debounced-input/strolch-wc-debounced-input.html">
<link rel="import" href="strolch-wc-inspector-behavior.html">
<link rel="import" href="strolch-wc-inspector-paging-behavior.html">
<dom-module id="strolch-wc-users">
@ -46,12 +48,27 @@
padding: 0.3em;
}
strolch-wc-debounced-input {
max-width: 200px;
display: inline-flex;
--regular-color: #919191;
--focus-color: #000000;
}
</style>
<div class="g-row g-pt-4">
<div class="g-12 g-right">
<paper-button on-tap="_addUser" raised>Add</paper-button>
<paper-icon-button icon="refresh" title="Refresh" on-tap="reload"></paper-icon-button>
<div class="g-12">
<paper-icon-button class="g-pull-right"
icon="refresh"
title="Refresh"
on-tap="reload"></paper-icon-button>
<paper-button class="g-pull-right" on-tap="_addUser" raised>Add</paper-button>
<strolch-wc-debounced-input id="debouncedInput"
class="g-pull-right"
debounced-input="{{searchTerm}}"
disabled="[[arrayFilled(filters)]]"></strolch-wc-debounced-input>
</div>
</div>
@ -70,7 +87,7 @@
<div class="g-2"></div>
</div>
<template is="dom-repeat" items="[[users]]">
<template is="dom-repeat" items="[[dataObj.data]]">
<hr />
@ -95,6 +112,26 @@
</div>
</div>
<div class="g-row">
<div class="g-3">
</div>
<div class="g-6">
<div class="g-m-2 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>[[dataObj.offset]] to [[_getEnd(dataObj)]] of [[dataObj.size]] ([[dataObj.dataSetSize]])</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-3">
<paper-button on-tap="_setLimit">10</paper-button>
<paper-button on-tap="_setLimit">50</paper-button>
<paper-button on-tap="_setLimit">100</paper-button>
</div>
</div>
</paper-material>
<paper-dialog id="dlg" modal>
@ -157,7 +194,7 @@
</div>
<div class="g-6 g-p-4">
<div class="g-6 g-p-4" style="max-height: 360px; overflow:auto;">
Roles: