updated mock data and implemented user info

This commit is contained in:
Jesper Møller Jensen
2022-10-03 11:16:22 +02:00
parent 5059002e4a
commit da48578882
4 changed files with 1424 additions and 183 deletions

View File

@@ -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>
`;
}

View File

@@ -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>`;

View File

@@ -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