updated mock data and implemented user info
This commit is contained in:
@@ -98,8 +98,13 @@ export class UmbEditorViewUsersGridElement extends UmbContextConsumerMixin(LitEl
|
||||
${user.status}
|
||||
</uui-tag>`
|
||||
: nothing}
|
||||
<div>${user.userGroup}</div>
|
||||
<div class="user-login-time">${user.lastLogin}</div>
|
||||
<div>USER GROUPS NOT IMPLEMENTED</div>
|
||||
${user.lastLoginDate
|
||||
? html`<div class="user-login-time">
|
||||
<div>Last login</div>
|
||||
${user.lastLoginDate}
|
||||
</div>`
|
||||
: html`<div class="user-login-time">${`${user.name} has not logged in yet`}</div>`}
|
||||
</uui-card-user>
|
||||
`;
|
||||
}
|
||||
|
||||
@@ -4,6 +4,7 @@ import { customElement, state } from 'lit/decorators.js';
|
||||
import { UmbContextConsumerMixin } from '../../../../../core/context';
|
||||
import UmbEditorViewUsersElement, { UserItem } from './editor-view-users.element';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { tempData } from './tempData';
|
||||
|
||||
@customElement('umb-editor-view-users-user-details')
|
||||
export class UmbEditorViewUsersUserDetailsElement extends UmbContextConsumerMixin(LitElement) {
|
||||
@@ -80,24 +81,30 @@ export class UmbEditorViewUsersUserDetailsElement extends UmbContextConsumerMixi
|
||||
protected _usersContext?: UmbEditorViewUsersElement;
|
||||
protected _usersSubscription?: Subscription;
|
||||
|
||||
private _languages = [
|
||||
{ name: 'English', value: 'en', selected: true },
|
||||
{ name: 'Dutch', value: 'nl' },
|
||||
{ name: 'French', value: 'fr' },
|
||||
{ name: 'German', value: 'de' },
|
||||
{ name: 'Spanish', value: 'es' },
|
||||
];
|
||||
private _languages = tempData //TODO Get languages from API instead of fakeData
|
||||
.reduce((acc, curr) => {
|
||||
if (!acc.includes(curr.language)) {
|
||||
acc.push(curr.language);
|
||||
}
|
||||
return acc;
|
||||
}, [] as Array<string>)
|
||||
.map((language) => {
|
||||
return {
|
||||
name: language,
|
||||
value: language,
|
||||
selected: false,
|
||||
};
|
||||
});
|
||||
|
||||
connectedCallback(): void {
|
||||
super.connectedCallback();
|
||||
|
||||
this.consumeContext('umbUsersContext', (usersContext: UmbEditorViewUsersElement) => {
|
||||
this._usersContext = usersContext;
|
||||
|
||||
this._usersSubscription?.unsubscribe();
|
||||
this._usersSubscription = this._usersContext?.users.subscribe((users: Array<UserItem>) => {
|
||||
this._users = users;
|
||||
this._user = this._users.find((user: UserItem) => user.key === this._userKey);
|
||||
this._initUser();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -106,8 +113,7 @@ export class UmbEditorViewUsersUserDetailsElement extends UmbContextConsumerMixi
|
||||
const pathParts = path.split('/');
|
||||
this._userKey = pathParts[pathParts.length - 1];
|
||||
|
||||
// get user from users array
|
||||
this._user = this._users.find((user: UserItem) => user.key === this._userKey);
|
||||
this._initUser();
|
||||
}
|
||||
|
||||
disconnectedCallback(): void {
|
||||
@@ -116,6 +122,15 @@ export class UmbEditorViewUsersUserDetailsElement extends UmbContextConsumerMixi
|
||||
this._usersSubscription?.unsubscribe();
|
||||
}
|
||||
|
||||
private _initUser() {
|
||||
this._user = this._users.find((user: UserItem) => user.key === this._userKey);
|
||||
|
||||
const index = this._languages.findIndex((language) => language.value === this._user?.language);
|
||||
if (index !== -1) {
|
||||
this._languages[index].selected = true;
|
||||
}
|
||||
}
|
||||
|
||||
private _updateUserStatus() {
|
||||
if (!this._user) return;
|
||||
|
||||
@@ -138,11 +153,11 @@ export class UmbEditorViewUsersUserDetailsElement extends UmbContextConsumerMixi
|
||||
|
||||
return html` <uui-box>
|
||||
<div slot="headline">Profile</div>
|
||||
<uui-form-layout-item>
|
||||
<uui-form-layout-item style="margin-top: 0">
|
||||
<uui-label for="email">Email</uui-label>
|
||||
<uui-input name="email" readonly value="FIX EMAIL"></uui-input>
|
||||
<uui-input name="email" readonly value="NOT IMPLEMENTED"></uui-input>
|
||||
</uui-form-layout-item>
|
||||
<uui-form-layout-item>
|
||||
<uui-form-layout-item style="margin-bottom: 0">
|
||||
<uui-label for="language">Language</uui-label>
|
||||
<uui-select name="language" .options=${this._languages}> </uui-select>
|
||||
</uui-form-layout-item>
|
||||
@@ -205,32 +220,32 @@ export class UmbEditorViewUsersUserDetailsElement extends UmbContextConsumerMixi
|
||||
: nothing}
|
||||
<div>
|
||||
<b>Last login:</b>
|
||||
<span>${this._user.lastLogin}</span>
|
||||
<span>${this._user.lastLoginDate || `${this._user.name} has not logged in yet`}</span>
|
||||
</div>
|
||||
<div>
|
||||
<b>Failed login attempts</b>
|
||||
<span>NOT IMPLEMENTED</span>
|
||||
<span>${this._user.failedLoginAttempts}</span>
|
||||
</div>
|
||||
<div>
|
||||
<b>Last lockout date:</b>
|
||||
<span>NOT IMPLEMENTED</span>
|
||||
<span>${this._user.lastLockoutDate || `${this._user.name} has not been locked out`}</span>
|
||||
</div>
|
||||
<div>
|
||||
<b>Password last changed:</b>
|
||||
<span>NOT IMPLEMENTED</span>
|
||||
<span>${this._user.lastLoginDate || `${this._user.name} has not changed password`}</span>
|
||||
</div>
|
||||
<div>
|
||||
<b>User created:</b>
|
||||
<span>NOT IMPLEMENTED</span>
|
||||
<span>${this._user.createDate}</span>
|
||||
</div>
|
||||
<div>
|
||||
<b>User last updated:</b>
|
||||
<span>NOT IMPLEMENTED</span>
|
||||
<span>${this._user.updateDate}</span>
|
||||
</div>
|
||||
<div>
|
||||
<b>Id:</b>
|
||||
<span>${this._user.id}</span>
|
||||
<span>${this._user.key}</span>
|
||||
<span>NOT IMPLEMENTED</span>
|
||||
</div>
|
||||
</div>
|
||||
</uui-box>`;
|
||||
|
||||
@@ -10,12 +10,22 @@ import './editor-view-users-grid.element';
|
||||
import './editor-view-users-selection.element';
|
||||
import './editor-view-users-user-details.element';
|
||||
|
||||
import { tempData } from './tempData';
|
||||
|
||||
export interface UserItem {
|
||||
id: number;
|
||||
key: string;
|
||||
name: string;
|
||||
userGroup: string;
|
||||
lastLogin: string;
|
||||
email: string;
|
||||
status: string;
|
||||
language: string;
|
||||
lastLoginDate?: string;
|
||||
lastLockoutDate?: string;
|
||||
lastPasswordChangeDate?: string;
|
||||
updateDate: string;
|
||||
createDate: string;
|
||||
failedLoginAttempts: number;
|
||||
userGroup?: string; //TODO Implement this
|
||||
}
|
||||
|
||||
@customElement('umb-editor-view-users')
|
||||
@@ -34,164 +44,7 @@ export class UmbEditorViewUsersElement extends UmbContextProviderMixin(LitElemen
|
||||
},
|
||||
];
|
||||
|
||||
private tempData = [
|
||||
{
|
||||
key: 'a9b18a00-58f2-420e-bf60-48d33ab156db',
|
||||
name: 'Cecílie Bryon',
|
||||
userGroup: 'Translators',
|
||||
lastLogin: 'Fri, 23 April 2021',
|
||||
status: 'Active',
|
||||
},
|
||||
{
|
||||
key: '3179d0b2-eec2-4045-b86a-149e13b93e14',
|
||||
name: 'Kathleen G. Smith',
|
||||
userGroup: 'Editors',
|
||||
lastLogin: 'Tue, 6 June 2021',
|
||||
status: 'Active',
|
||||
},
|
||||
{
|
||||
key: '1b1c9733-b845-4d9a-9ed2-b2f46c05fd72',
|
||||
name: 'Adrian Andresen',
|
||||
userGroup: 'Administrators',
|
||||
lastLogin: 'Mon, 15 November 2021',
|
||||
status: 'Active',
|
||||
},
|
||||
{
|
||||
key: 'b75af81a-b994-4e65-9330-b66c336d0207',
|
||||
name: 'Lorenza Trentino',
|
||||
userGroup: 'Editors',
|
||||
lastLogin: 'Fri, 13 April 2022',
|
||||
status: 'Disabled',
|
||||
},
|
||||
{
|
||||
key: 'b75af81a-b994-4e65-9330-b66c336d0202',
|
||||
name: 'John Doe',
|
||||
userGroup: 'Translators',
|
||||
lastLogin: 'Tue, 11 December 2021',
|
||||
status: 'Active',
|
||||
},
|
||||
{
|
||||
key: 'b75af81a-b994-4e65-9330-b66c336d0203',
|
||||
name: 'Jane Doe',
|
||||
userGroup: 'Editors',
|
||||
lastLogin: 'Fri, 13 April 2022',
|
||||
status: 'Invited',
|
||||
},
|
||||
{
|
||||
key: 'b75af81a-b994-4e65-9330-b66c336d0204',
|
||||
name: 'John Smith',
|
||||
userGroup: 'Administrators',
|
||||
lastLogin: 'Mon, 15 November 2021',
|
||||
status: 'Active',
|
||||
},
|
||||
{
|
||||
key: 'b75af81a-b994-4e65-9330-b66c336d0205',
|
||||
name: 'Jane Smith',
|
||||
userGroup: 'Editors',
|
||||
lastLogin: 'Fri, 13 April 2022',
|
||||
status: 'Active',
|
||||
},
|
||||
{
|
||||
key: 'b75af81a-b994-4e65-9330-b66c336d0206',
|
||||
name: 'Oliver Twist',
|
||||
userGroup: 'Translators',
|
||||
lastLogin: 'Tue, 11 December 2021',
|
||||
status: 'Active',
|
||||
},
|
||||
{
|
||||
key: 'b75af81a-b994-4e65-2330-b66c336d0207',
|
||||
name: 'Olivia Doe',
|
||||
userGroup: 'Editors',
|
||||
lastLogin: 'Fri, 13 April 2022',
|
||||
status: 'Inactive',
|
||||
},
|
||||
{
|
||||
key: 'b75af81a-b994-4e65-9330-b66c336d0208',
|
||||
name: 'Hans Hansen',
|
||||
userGroup: 'Administrators',
|
||||
lastLogin: 'Mon, 15 November 2021',
|
||||
status: 'Active',
|
||||
},
|
||||
{
|
||||
key: 'a9b18a00-58f2-sjh2-bf60-48d33ab156db',
|
||||
name: 'Brian Adams',
|
||||
userGroup: 'Translators',
|
||||
lastLogin: 'Fri, 23 April 2021',
|
||||
status: 'Invited',
|
||||
},
|
||||
{
|
||||
key: '3179d0b2-eec2-4432-b86a-149e13b93e14',
|
||||
name: 'Smith John',
|
||||
userGroup: 'Editors',
|
||||
lastLogin: 'Tue, 6 June 2021',
|
||||
status: 'Active',
|
||||
},
|
||||
{
|
||||
key: '1b1c9723-b845-4d9a-9ed2-b2f46c05fd72',
|
||||
name: 'Reese Witherspoon',
|
||||
userGroup: 'Administrators',
|
||||
lastLogin: 'Mon, 15 November 2021',
|
||||
status: 'Disabled',
|
||||
},
|
||||
{
|
||||
key: 'b75af81a-2f94-4e65-9330-b66c336d0207',
|
||||
name: 'Denzel Washington',
|
||||
userGroup: 'Editors',
|
||||
lastLogin: 'Fri, 13 April 2022',
|
||||
status: 'Active',
|
||||
},
|
||||
{
|
||||
key: 'b75af81a-b994-4e23-9330-b66c336d0202',
|
||||
name: 'Leonardo DiCaprio',
|
||||
userGroup: 'Translators',
|
||||
lastLogin: 'Tue, 11 December 2021',
|
||||
status: 'Active',
|
||||
},
|
||||
{
|
||||
key: 'b75af81a-2394-4e65-9330-b66c336d0203',
|
||||
name: 'Idris Elba',
|
||||
userGroup: 'Editors',
|
||||
lastLogin: 'Fri, 13 April 2022',
|
||||
status: 'Active',
|
||||
},
|
||||
{
|
||||
key: 'b75af81a-b994-4e65-9330-b6u7336d0204',
|
||||
name: 'Quentin Tarantino',
|
||||
userGroup: 'Administrators',
|
||||
lastLogin: 'Mon, 15 November 2021',
|
||||
status: 'Active',
|
||||
},
|
||||
{
|
||||
key: 'b75af81a-b994-4e65-2330-c66c336d0205',
|
||||
name: 'Tom Hanks',
|
||||
userGroup: 'Editors',
|
||||
lastLogin: 'Fri, 13 April 2022',
|
||||
status: 'Active',
|
||||
},
|
||||
{
|
||||
key: 'b75af82a-b994-4b65-9330-b66c336d0206',
|
||||
name: 'Oprah Winfrey',
|
||||
userGroup: 'Translators',
|
||||
lastLogin: 'Tue, 11 December 2021',
|
||||
status: 'Active',
|
||||
},
|
||||
{
|
||||
key: 'b75af81a-b994-4e65-2s30-b66b336d0207',
|
||||
name: 'Pamela Anderson',
|
||||
userGroup: 'Editors',
|
||||
lastLogin: 'Fri, 13 April 2022',
|
||||
status: 'Active',
|
||||
},
|
||||
{
|
||||
key: 'b75af81a-b994-4e65-9930-b66c336d0l33t',
|
||||
name: 'Keanu Reeves',
|
||||
userGroup: 'Administrators',
|
||||
lastLogin: 'Mon, 15 November 2021',
|
||||
status: 'Active',
|
||||
},
|
||||
];
|
||||
|
||||
private _users: BehaviorSubject<Array<UserItem>> = new BehaviorSubject(this.tempData);
|
||||
private _users: BehaviorSubject<Array<UserItem>> = new BehaviorSubject(tempData);
|
||||
public readonly users: Observable<Array<UserItem>> = this._users.asObservable();
|
||||
|
||||
private _selection: BehaviorSubject<Array<string>> = new BehaviorSubject(<Array<string>>[]);
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user