[Major] Added history to UI, and better table layout
This commit is contained in:
parent
193917ecc1
commit
87ce588f7c
|
@ -1,7 +1,7 @@
|
||||||
{
|
{
|
||||||
"name": "strolch-wc-inspector",
|
"name": "strolch-wc-inspector",
|
||||||
"description": "Strolch WebComponent Inspector",
|
"description": "Strolch WebComponent Inspector",
|
||||||
"version": "0.20.2",
|
"version": "0.21.0",
|
||||||
"authors": ["Robert von Burg"],
|
"authors": ["Robert von Burg"],
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"strolch",
|
"strolch",
|
||||||
|
|
|
@ -15,6 +15,8 @@
|
||||||
},
|
},
|
||||||
|
|
||||||
toLocalDateTime: function (val) {
|
toLocalDateTime: function (val) {
|
||||||
|
if (val == null || val.startsWith("1970-01-01T01:00:00"))
|
||||||
|
return "-";
|
||||||
return Strolch.toLocalDateTime(val);
|
return Strolch.toLocalDateTime(val);
|
||||||
},
|
},
|
||||||
arrayToString: function (arr) {
|
arrayToString: function (arr) {
|
||||||
|
|
|
@ -49,6 +49,68 @@
|
||||||
--focus-color: #000000;
|
--focus-color: #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.table {
|
||||||
|
min-width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-row {
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
margin-top: -1px;
|
||||||
|
padding-top: 5px;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-heading {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-heading,
|
||||||
|
.table-cell {
|
||||||
|
display: flex;
|
||||||
|
padding: 0 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
align-items: center;
|
||||||
|
flex-basis: 80px;
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 0;
|
||||||
|
justify-content: flex-start;
|
||||||
|
min-height: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.source {
|
||||||
|
flex-grow: 0;
|
||||||
|
flex-basis: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-time,
|
||||||
|
.last-access {
|
||||||
|
flex-grow: 0;
|
||||||
|
flex-basis: 160px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.username {
|
||||||
|
flex-grow: 0;
|
||||||
|
flex-basis: 250px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions {
|
||||||
|
flex-grow: 0;
|
||||||
|
flex-basis: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data {
|
||||||
|
padding-top: 10px;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data:nth-child(even) {
|
||||||
|
background: #f7f7f7;
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div class="g-row g-pt-4">
|
<div class="g-row g-pt-4">
|
||||||
|
@ -66,47 +128,33 @@
|
||||||
|
|
||||||
<paper-material elevation="1" class="g-m-3">
|
<paper-material elevation="1" class="g-m-3">
|
||||||
|
|
||||||
<div class="g-row g-pt-4">
|
<div class="table">
|
||||||
|
<div class="table-row">
|
||||||
<div class="g-12">
|
<div class="table-heading username"><b>Username</b></div>
|
||||||
|
<div class="table-heading roles"><b>Roles</b></div>
|
||||||
<div class="g-row">
|
<div class="table-heading source"><b>Source</b></div>
|
||||||
<div class="g-2"><b>Username</b></div>
|
<div class="table-heading login-time"><b>Login time</b></div>
|
||||||
<div class="g-2"><b>Name</b></div>
|
<div class="table-heading last-access"><b>Last Access</b></div>
|
||||||
<div class="g-2"><b>Roles</b></div>
|
<div class="table-heading actions"></div>
|
||||||
<div class="g-1"><b>Source</b></div>
|
|
||||||
<div class="g-2"><b>Login time</b></div>
|
|
||||||
<div class="g-2"><b>Last Access</b></div>
|
|
||||||
<div class="g-1"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<template is="dom-repeat" items="[[dataObj.data]]" as="session">
|
|
||||||
|
|
||||||
<hr />
|
|
||||||
|
|
||||||
<div class="g-row">
|
|
||||||
<div class="g-2 g-auto-middle">[[session.username]]</div>
|
|
||||||
<div class="g-2 g-auto-middle">[[_getName(session)]]</div>
|
|
||||||
<div class="g-2 g-auto-middle">[[arrayToString(session.roles)]]</div>
|
|
||||||
<div class="g-1 g-auto-middle">[[session.source]]</div>
|
|
||||||
<div class="g-2 g-auto-middle">[[toLocalDateTime(session.loginTime)]]</div>
|
|
||||||
<div class="g-2 g-auto-middle">[[toLocalDateTime(session.lastAccess)]]</div>
|
|
||||||
<div class="g-1 g-auto-middle">
|
|
||||||
<paper-icon-button icon="delete"
|
|
||||||
title="Remove"
|
|
||||||
on-tap="removeSession"></paper-icon-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<template is="dom-repeat" items="[[dataObj.data]]" as="session">
|
||||||
|
<div class="table-row data">
|
||||||
|
<div class="table-cell username">[[session.username]] <br><br>[[_getName(session)]]</div>
|
||||||
|
<div class="table-cell roles">[[arrayToString(session.roles)]]</div>
|
||||||
|
<div class="table-cell source">[[session.source]]</div>
|
||||||
|
<div class="table-cell login-time">[[toLocalDateTime(session.loginTime)]]</div>
|
||||||
|
<div class="table-cell last-access">[[toLocalDateTime(session.lastAccess)]]</div>
|
||||||
|
<div class="table-cell actions">
|
||||||
|
<paper-icon-button icon="delete" title="Remove" on-tap="removeSession"></paper-icon-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="g-row">
|
<div class="g-row">
|
||||||
<div class="g-3">
|
<div class="g-3"></div>
|
||||||
</div>
|
|
||||||
<div class="g-6">
|
<div class="g-6">
|
||||||
<div class="g-m-2 g-center">
|
<div class="g-m-2 g-center">
|
||||||
<paper-icon-button icon="first-page" on-tap="_toFirstPage"></paper-icon-button>
|
<paper-icon-button icon="first-page" on-tap="_toFirstPage"></paper-icon-button>
|
||||||
|
|
|
@ -27,9 +27,7 @@
|
||||||
<dom-module id="strolch-wc-users">
|
<dom-module id="strolch-wc-users">
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
||||||
<style is="custom-style" include="strolch-wc-styles">
|
<style is="custom-style" include="strolch-wc-styles">
|
||||||
|
|
||||||
:host {
|
:host {
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
@ -56,6 +54,67 @@
|
||||||
--focus-color: #000000;
|
--focus-color: #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.table {
|
||||||
|
min-width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-row {
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
margin-top: -1px;
|
||||||
|
padding-top: 5px;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-heading {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-heading,
|
||||||
|
.table-cell {
|
||||||
|
display: flex;
|
||||||
|
padding: 0 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
align-items: center;
|
||||||
|
flex-basis: 80px;
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 0;
|
||||||
|
justify-content: flex-start;
|
||||||
|
min-height: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.state,
|
||||||
|
.locale {
|
||||||
|
flex-grow: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.username {
|
||||||
|
flex-grow: 0;
|
||||||
|
flex-basis: 250px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions {
|
||||||
|
flex-grow: 0;
|
||||||
|
flex-basis: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history {
|
||||||
|
flex-grow: 0;
|
||||||
|
flex-basis: 250px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data {
|
||||||
|
padding-top: 10px;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data:nth-child(even) {
|
||||||
|
background: #f7f7f7;
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div class="g-row g-pt-4">
|
<div class="g-row g-pt-4">
|
||||||
|
@ -74,43 +133,36 @@
|
||||||
|
|
||||||
<paper-material elevation="1" class="g-ml-3 g-mr-3">
|
<paper-material elevation="1" class="g-ml-3 g-mr-3">
|
||||||
|
|
||||||
<div class="g-row g-pt-4">
|
<div class="table">
|
||||||
|
<div class="table-row">
|
||||||
<div class="g-12">
|
<div class="table-heading username">Username / Name</div>
|
||||||
|
<div class="table-heading state">State</div>
|
||||||
<div class="g-row">
|
<div class="table-heading locale">Locale</div>
|
||||||
<div class="g-2">Username</div>
|
<div class="table-heading roles">Roles</div>
|
||||||
<div class="g-3">Name</div>
|
<div class="table-heading history">History</div>
|
||||||
<div class="g-1">State</div>
|
<div class="table-heading actions"></div>
|
||||||
<div class="g-1">Locale</div>
|
|
||||||
<div class="g-3">Roles</div>
|
|
||||||
<div class="g-2"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<template is="dom-repeat" items="[[dataObj.data]]">
|
|
||||||
|
|
||||||
<hr />
|
|
||||||
|
|
||||||
<div class="g-row">
|
|
||||||
<div class="g-2">[[item.username]]</div>
|
|
||||||
<div class="g-3">[[_getName(item)]]</div>
|
|
||||||
<div class="g-1">[[item.userState]]</div>
|
|
||||||
<div class="g-1">[[item.locale]]</div>
|
|
||||||
<div class="g-3">[[arrayToString(item.roles)]]</div>
|
|
||||||
<div class="g-2">
|
|
||||||
<paper-icon-button icon="create" title="Edit" on-tap="_editUser"></paper-icon-button>
|
|
||||||
<paper-icon-button icon="lock-outline"
|
|
||||||
title="Set password"
|
|
||||||
on-tap="_openPwDlg"></paper-icon-button>
|
|
||||||
<paper-icon-button icon="delete"
|
|
||||||
title="Remove"
|
|
||||||
on-tap="_removeUser"></paper-icon-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<template is="dom-repeat" items="[[dataObj.data]]">
|
||||||
|
<div class="table-row data">
|
||||||
|
<div class="table-cell username">[[item.username]]<br /><br />[[_getName(item)]]</div>
|
||||||
|
<div class="table-cell state">[[item.userState]]</div>
|
||||||
|
<div class="table-cell locale">[[item.locale]]</div>
|
||||||
|
<div class="table-cell roles">[[arrayToString(item.roles)]]</div>
|
||||||
|
<div class="table-cell history">
|
||||||
|
FirstLogin: [[toLocalDateTime(item.history.firstLogin)]]<br /> LastLogin:
|
||||||
|
[[toLocalDateTime(item.history.lastLogin)]]<br /> PasswordChange:
|
||||||
|
[[toLocalDateTime(item.history.lastPasswordChange)]]
|
||||||
|
</div>
|
||||||
|
<div class="table-cell actions">
|
||||||
|
<paper-icon-button icon="create" title="Edit" on-tap="_editUser"></paper-icon-button>
|
||||||
|
<paper-icon-button icon="lock-outline"
|
||||||
|
title="Set password"
|
||||||
|
on-tap="_openPwDlg"></paper-icon-button>
|
||||||
|
<paper-icon-button icon="delete" title="Remove" on-tap="_removeUser"></paper-icon-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="g-row">
|
<div class="g-row">
|
||||||
|
@ -146,6 +198,7 @@
|
||||||
<paper-input label="Password" value="{{password0}}" type="password"></paper-input>
|
<paper-input label="Password" value="{{password0}}" type="password"></paper-input>
|
||||||
<paper-input label="Repeat" value="{{password1}}" type="password"></paper-input>
|
<paper-input label="Repeat" value="{{password1}}" type="password"></paper-input>
|
||||||
<div class="buttons">
|
<div class="buttons">
|
||||||
|
<paper-button on-tap="_clearPassword">Clear</paper-button>
|
||||||
<paper-button dialog-confirm autofocus>Close</paper-button>
|
<paper-button dialog-confirm autofocus>Close</paper-button>
|
||||||
<paper-button on-tap="_setPassword" autofocus>Save</paper-button>
|
<paper-button on-tap="_setPassword" autofocus>Save</paper-button>
|
||||||
</div>
|
</div>
|
||||||
|
@ -376,6 +429,22 @@
|
||||||
this.$.ajax.generateRequest();
|
this.$.ajax.generateRequest();
|
||||||
},
|
},
|
||||||
|
|
||||||
|
_clearPassword: function (e) {
|
||||||
|
this.dlgTitle = 'Clear password failed';
|
||||||
|
this._handleAjaxResponse = function (data) {
|
||||||
|
this.reload();
|
||||||
|
|
||||||
|
this.password0 = '';
|
||||||
|
this.password1 = '';
|
||||||
|
this.$.pwDlg.close();
|
||||||
|
};
|
||||||
|
|
||||||
|
this.$.ajax.url = this.basePath + 'rest/strolch/privilege/users/' + this.user.username + '/password';
|
||||||
|
this.$.ajax.method = 'DELETE';
|
||||||
|
this.$.ajax.body = {};
|
||||||
|
this.$.ajax.generateRequest();
|
||||||
|
},
|
||||||
|
|
||||||
_removeUser: function (e) {
|
_removeUser: function (e) {
|
||||||
var user = e.model.item;
|
var user = e.model.item;
|
||||||
if (!confirm('Do you really want to delete user ' + user.username + ': ' + user.firstname + ' ' + user.lastname)) {
|
if (!confirm('Do you really want to delete user ' + user.username + ': ' + user.firstname + ' ' + user.lastname)) {
|
||||||
|
@ -442,7 +511,7 @@
|
||||||
return 'User state is not set!';
|
return 'User state is not set!';
|
||||||
if (this.isEmptyString(user.locale))
|
if (this.isEmptyString(user.locale))
|
||||||
return 'Locale is not set!';
|
return 'Locale is not set!';
|
||||||
if (this.selectedRoles.length == 0)
|
if (this.selectedRoles.length === 0)
|
||||||
return 'No role selected!';
|
return 'No role selected!';
|
||||||
|
|
||||||
return '';
|
return '';
|
||||||
|
@ -460,7 +529,7 @@
|
||||||
|
|
||||||
var i = 0;
|
var i = 0;
|
||||||
for (; i < this.user.properties.length; i++) {
|
for (; i < this.user.properties.length; i++) {
|
||||||
if (this.user.properties[i].key == property.key) {
|
if (this.user.properties[i].key === property.key) {
|
||||||
this.user.properties.splice(i, 1);
|
this.user.properties.splice(i, 1);
|
||||||
this.notifySplices('user.properties', [
|
this.notifySplices('user.properties', [
|
||||||
{
|
{
|
||||||
|
@ -503,7 +572,7 @@
|
||||||
var role = this.roles[i];
|
var role = this.roles[i];
|
||||||
for (var j = 0; j < this.user.roles.length; j++) {
|
for (var j = 0; j < this.user.roles.length; j++) {
|
||||||
var r = this.user.roles[j];
|
var r = this.user.roles[j];
|
||||||
if (role.name == r)
|
if (role.name === r)
|
||||||
selectedRoles.push(i);
|
selectedRoles.push(i);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue