From 0c5a1e6d1c90307ec4730097fe90a1ad7e195962 Mon Sep 17 00:00:00 2001
From: Robert von Burg <eitch@eitchnet.ch>
Date: Mon, 14 Jan 2019 14:17:45 +0100
Subject: [PATCH] [Major] Added paging to users, sessions, fixed layout in
 roles

---
 strolch-wc-inspector-object.html          | 611 +++++++++++-----------
 strolch-wc-inspector-objects.html         | 106 ++--
 strolch-wc-inspector-paging-behavior.html |  71 +++
 strolch-wc-operations-log.html            |  76 +--
 strolch-wc-role.html                      |   3 +-
 strolch-wc-roles.html                     |  12 +-
 strolch-wc-sessions.html                  |  79 ++-
 strolch-wc-users.html                     |  86 ++-
 8 files changed, 596 insertions(+), 448 deletions(-)
 create mode 100644 strolch-wc-inspector-paging-behavior.html

diff --git a/strolch-wc-inspector-object.html b/strolch-wc-inspector-object.html
index 19646fd..7e23f28 100644
--- a/strolch-wc-inspector-object.html
+++ b/strolch-wc-inspector-object.html
@@ -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"
diff --git a/strolch-wc-inspector-objects.html b/strolch-wc-inspector-objects.html
index 5a82525..b730a45 100644
--- a/strolch-wc-inspector-objects.html
+++ b/strolch-wc-inspector-objects.html
@@ -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;
diff --git a/strolch-wc-inspector-paging-behavior.html b/strolch-wc-inspector-paging-behavior.html
new file mode 100644
index 0000000..274f52e
--- /dev/null
+++ b/strolch-wc-inspector-paging-behavior.html
@@ -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>
\ No newline at end of file
diff --git a/strolch-wc-operations-log.html b/strolch-wc-operations-log.html
index 507a2c5..4f86ac1 100644
--- a/strolch-wc-operations-log.html
+++ b/strolch-wc-operations-log.html
@@ -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();
             },
diff --git a/strolch-wc-role.html b/strolch-wc-role.html
index 83435b0..730545e 100644
--- a/strolch-wc-role.html
+++ b/strolch-wc-role.html
@@ -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>
diff --git a/strolch-wc-roles.html b/strolch-wc-roles.html
index 3a26afc..561402f 100644
--- a/strolch-wc-roles.html
+++ b/strolch-wc-roles.html
@@ -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;
diff --git a/strolch-wc-sessions.html b/strolch-wc-sessions.html
index 06105c1..80b7e91 100644
--- a/strolch-wc-sessions.html
+++ b/strolch-wc-sessions.html
@@ -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();
             },
 
diff --git a/strolch-wc-users.html b/strolch-wc-users.html
index be7abeb..f5fbf64 100644
--- a/strolch-wc-users.html
+++ b/strolch-wc-users.html
@@ -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:
                     <paper-listbox always-float-label
                                    label="Roles"
@@ -173,7 +210,7 @@
             </div>
 
             <div class="g-row g-m-0">
-                <div class="g-12 g-pr-4 g-pl-4">
+                <div class="g-12 g-pr-4 g-pl-4"style="max-height: 150px; overflow:auto;">
                     Properties:
                     <template is="dom-repeat" items="[[user.properties]]" as="property">
                         <div class="g-row">
@@ -216,7 +253,8 @@
             is: 'strolch-wc-users',
 
             behaviors: [
-                StrolchInspectorBehavior
+                StrolchInspectorBehavior,
+                StrolchInspectorPagingBehavior
             ],
 
             properties: {
@@ -232,6 +270,16 @@
                 selectedRoles: {
                     type: Array,
                     value: []
+                },
+                searchTerm: {
+                    type: String,
+                    observer: 'searchTermChanged'
+                },
+                propagateShowDialog: {
+                    type: Boolean,
+                    value: function () {
+                        return false
+                    }
                 }
             },
 
@@ -243,7 +291,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;
@@ -252,15 +304,25 @@
                 this.$.dlg.open();
             },
 
+            searchTermChanged: function (newValue, oldValue) {
+                if (newValue != null && oldValue != null) {
+                    this.queryPage();
+                }
+            },
+
             ready: function () {
                 //
             },
 
             reload: function () {
+                this.queryPage();
+            },
+
+            queryPage: function () {
 
                 this.dlgTitle = 'User query failed';
                 this._handleAjaxResponse = function (data) {
-                    this.users = data.detail.response;
+                    this.dataObj = data.detail.response;
 
                     this.dlgTitle = 'Role query failed';
                     this._handleAjaxResponse = function (data) {
@@ -278,6 +340,12 @@
 
                 this.$.ajax.url = this.basePath + 'rest/strolch/privilege/users';
                 this.$.ajax.method = 'GET';
+                this.$.ajax.params = {
+                    query: this.searchTerm,
+                    offset: this.dataObj.offset,
+                    limit: this.dataObj.limit,
+                    orderBy: 'username'
+                };
                 this.$.ajax.generateRequest();
             },