yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

moved router and context provider to top level

Browse Source
This commit is contained in:
Jesper Møller Jensen
2022-09-21 15:05:40 +02:00
parent 3497d34ba2
commit 8cd66dccb2
4 changed files with 236 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

220
src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users-list.element.ts
View File

@@ -2,25 +2,18 @@ import { css, html, LitElement, nothing } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, property, state } from 'lit/decorators.js';
import { UmbContextConsumerMixin, UmbContextProviderMixin } from '../../../../../core/context';
import { BehaviorSubject, Observable } from 'rxjs';
import { BehaviorSubject, Observable, Subscription } from 'rxjs';
import { InterfaceColor, InterfaceLook } from '@umbraco-ui/uui-base/lib/types';
import './editor-view-users-table.element';
import './editor-view-users-grid.element';
import './editor-view-users-selection.element';
import { IRoute } from 'router-slot';
import UmbEditorViewUsersElement from './editor-view-users.element';
export type UsersViewType = 'list' | 'grid';
export interface UserItem {
key: string;
name: string;
userGroup: string;
lastLogin: string;
status?: string;
}
@customElement('umb-editor-view-users-list')
export class UmbEditorViewUsersListElement extends UmbContextProviderMixin(LitElement) {
export class UmbEditorViewUsersListElement extends UmbContextConsumerMixin(LitElement) {
static styles = [
UUITextStyles,
css`
@@ -55,167 +48,40 @@ export class UmbEditorViewUsersListElement extends UmbContextProviderMixin(LitEl
`,
];
private tempData = [
{
key: 'a9b18a00-58f2-420e-bf60-48d33ab156db',
name: 'Cecílie Bryon',
userGroup: 'Translators',
lastLogin: 'Fri, 23 April 2021',
status: 'Invited',
},
{
key: '3179d0b2-eec2-4045-b86a-149e13b93e14',
name: 'Kathleen G. Smith',
userGroup: 'Editors',
lastLogin: 'Tue, 6 June 2021',
status: 'Disabled',
},
{
key: '1b1c9733-b845-4d9a-9ed2-b2f46c05fd72',
name: 'Adrian Andresen',
userGroup: 'Administrators',
lastLogin: 'Mon, 15 November 2021',
},
{
key: 'b75af81a-b994-4e65-9330-b66c336d0207',
name: 'Lorenza Trentino',
userGroup: 'Editors',
lastLogin: 'Fri, 13 April 2022',
},
{
key: 'b75af81a-b994-4e65-9330-b66c336d0202',
name: 'John Doe',
userGroup: 'Translators',
lastLogin: 'Tue, 11 December 2021',
},
{
key: 'b75af81a-b994-4e65-9330-b66c336d0203',
name: 'Jane Doe',
userGroup: 'Editors',
lastLogin: 'Fri, 13 April 2022',
},
{
key: 'b75af81a-b994-4e65-9330-b66c336d0204',
name: 'John Smith',
userGroup: 'Administrators',
lastLogin: 'Mon, 15 November 2021',
},
{
key: 'b75af81a-b994-4e65-9330-b66c336d0205',
name: 'Jane Smith',
userGroup: 'Editors',
lastLogin: 'Fri, 13 April 2022',
},
{
key: 'b75af81a-b994-4e65-9330-b66c336d0206',
name: 'Oliver Twist',
userGroup: 'Translators',
lastLogin: 'Tue, 11 December 2021',
},
{
key: 'b75af81a-b994-4e65-2330-b66c336d0207',
name: 'Olivia Doe',
userGroup: 'Editors',
lastLogin: 'Fri, 13 April 2022',
},
{
key: 'b75af81a-b994-4e65-9330-b66c336d0208',
name: 'Hans Hansen',
userGroup: 'Administrators',
lastLogin: 'Mon, 15 November 2021',
},
{
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: 'Disabled',
},
{
key: '1b1c9723-b845-4d9a-9ed2-b2f46c05fd72',
name: 'Reese Witherspoon',
userGroup: 'Administrators',
lastLogin: 'Mon, 15 November 2021',
},
{
key: 'b75af81a-2f94-4e65-9330-b66c336d0207',
name: 'Denzel Washington',
userGroup: 'Editors',
lastLogin: 'Fri, 13 April 2022',
},
{
key: 'b75af81a-b994-4e23-9330-b66c336d0202',
name: 'Leonardo DiCaprio',
userGroup: 'Translators',
lastLogin: 'Tue, 11 December 2021',
},
{
key: 'b75af81a-2394-4e65-9330-b66c336d0203',
name: 'Idris Elba',
userGroup: 'Editors',
lastLogin: 'Fri, 13 April 2022',
},
{
key: 'b75af81a-b994-4e65-9330-b6u7336d0204',
name: 'Quentin Tarantino',
userGroup: 'Administrators',
lastLogin: 'Mon, 15 November 2021',
},
{
key: 'b75af81a-b994-4e65-2330-c66c336d0205',
name: 'Tom Hanks',
userGroup: 'Editors',
lastLogin: 'Fri, 13 April 2022',
},
{
key: 'b75af82a-b994-4b65-9330-b66c336d0206',
name: 'Oprah Winfrey',
userGroup: 'Translators',
lastLogin: 'Tue, 11 December 2021',
},
{
key: 'b75af81a-b994-4e65-2s30-b66b336d0207',
name: 'Pamela Anderson',
userGroup: 'Editors',
lastLogin: 'Fri, 13 April 2022',
},
{
key: 'b75af81a-b994-4e65-9930-b66c336d0l33t',
name: 'Keanu Reeves',
userGroup: 'Administrators',
lastLogin: 'Mon, 15 November 2021',
},
];
@state()
private _viewType: UsersViewType = 'grid';
private _users: BehaviorSubject<Array<UserItem>> = new BehaviorSubject(this.tempData);
public readonly users: Observable<Array<UserItem>> = this._users.asObservable();
@state()
private _selection: Array<string> = [];
private _selection: BehaviorSubject<Array<string>> = new BehaviorSubject(<Array<string>>[]);
public readonly selection: Observable<Array<string>> = this._selection.asObservable();
private _IntersectionObserverOptions = {
root: this,
rootMargin: '0px',
threshold: 1.0,
};
private _usersContext?: UmbEditorViewUsersElement;
private _selectionSubscription?: Subscription;
constructor() {
super();
this.provideContext('umbUsersContext', this);
this.setupHeaderIntersectionObserver();
}
connectedCallback(): void {
super.connectedCallback();
this.consumeContext('umbUsersContext', (usersContext: UmbEditorViewUsersElement) => {
this._usersContext = usersContext;
this._selectionSubscription?.unsubscribe();
this._selectionSubscription = this._usersContext?.selection.subscribe((selection: Array<string>) => {
this._selection = selection;
});
});
}
disconnectedCallback(): void {
super.disconnectedCallback();
this._selectionSubscription?.unsubscribe();
}
public setupHeaderIntersectionObserver() {
requestAnimationFrame(() => {
const el = this.shadowRoot?.querySelector('#sticky-top');
@@ -231,38 +97,6 @@ export class UmbEditorViewUsersListElement extends UmbContextProviderMixin(LitEl
});
}
public setSelection(value: Array<string>) {
if (!value) return;
this._selection.next(value);
this.requestUpdate('selection');
}
public select(key: string) {
const selection = this._selection.getValue();
this._selection.next([...selection, key]);
this.requestUpdate('selection');
}
public deselect(key: string) {
const selection = this._selection.getValue();
this._selection.next(selection.filter((k) => k !== key));
this.requestUpdate('selection');
}
public getTagLookAndColor(status: string): { color: InterfaceColor; look: InterfaceLook } {
switch (status.toLowerCase()) {
case 'invited':
case 'inactive':
return { look: 'primary', color: 'warning' };
case 'active':
return { look: 'primary', color: 'positive' };
case 'disabled':
return { look: 'primary', color: 'danger' };
default:
return { look: 'secondary', color: 'default' };
}
}
private _toggleViewType() {
this._viewType = this._viewType === 'list' ? 'grid' : 'list';
}
@@ -279,7 +113,7 @@ export class UmbEditorViewUsersListElement extends UmbContextProviderMixin(LitEl
}
private _renderSelection() {
if (this._selection.getValue().length === 0) return nothing;
if (this._selection.length === 0) return nothing;
return html`<umb-editor-view-users-selection></umb-editor-view-users-selection>`;
}

10
src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users-selection.element.ts
View File

@@ -4,7 +4,7 @@ import { customElement, property, state } from 'lit/decorators.js';
import { UmbContextConsumerMixin } from '../../../../../core/context';
import { repeat } from 'lit/directives/repeat.js';
import { Subscription } from 'rxjs';
import UmbEditorViewUsersListElement, { UserItem } from './editor-view-users-list.element';
import UmbEditorViewUsersElement, { UserItem } from './editor-view-users.element';
@customElement('umb-editor-view-users-selection')
export class UmbEditorViewUsersSelectionElement extends UmbContextConsumerMixin(LitElement) {
@@ -30,14 +30,14 @@ export class UmbEditorViewUsersSelectionElement extends UmbContextConsumerMixin(
@state()
private _selection: Array<string> = [];
protected _usersContext?: UmbEditorViewUsersListElement;
protected _usersSubscription?: Subscription;
protected _selectionSubscription?: Subscription;
private _usersContext?: UmbEditorViewUsersElement;
private _usersSubscription?: Subscription;
private _selectionSubscription?: Subscription;
connectedCallback(): void {
super.connectedCallback();
this.consumeContext('umbUsersContext', (usersContext: UmbEditorViewUsersListElement) => {
this.consumeContext('umbUsersContext', (usersContext: UmbEditorViewUsersElement) => {
this._usersContext = usersContext;
this._usersSubscription?.unsubscribe();

14
src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users-table.element.ts
View File

@@ -4,7 +4,7 @@ import { customElement, property, state } from 'lit/decorators.js';
import { UmbContextConsumerMixin } from '../../../../../core/context';
import { repeat } from 'lit/directives/repeat.js';
import { Subscription } from 'rxjs';
import UmbEditorViewUsersListElement, { UserItem } from './editor-view-users-list.element';
import UmbEditorViewUsersElement, { UserItem } from './editor-view-users.element';
interface TableColumn {
name: string;
@@ -67,14 +67,14 @@ export class UmbEditorViewUsersTableElement extends UmbContextConsumerMixin(LitE
@state()
private _users: Array<UserItem> = [];
protected _usersContext?: UmbEditorViewUsersListElement;
protected _usersSubscription?: Subscription;
protected _selectionSubscription?: Subscription;
private _usersContext?: UmbEditorViewUsersElement;
private _usersSubscription?: Subscription;
private _selectionSubscription?: Subscription;
connectedCallback(): void {
super.connectedCallback();
this.consumeContext('umbUsersContext', (usersContext: UmbEditorViewUsersListElement) => {
this.consumeContext('umbUsersContext', (usersContext: UmbEditorViewUsersElement) => {
this._usersContext = usersContext;
this._usersSubscription?.unsubscribe();
@@ -177,8 +177,8 @@ export class UmbEditorViewUsersTableElement extends UmbContextConsumerMixin(LitE
selectable
?select-only=${this._selectionMode}
?selected=${this._isSelected(user.key)}
@selected=${() => this._usersContext?.select(user.key)}
@unselected=${() => this._usersContext?.deselect(user.key)}>
@selected=${() => this._selectRowHandler(user)}
@unselected=${() => this._deselectRowHandler(user)}>
<uui-table-cell>
<div style="display: flex; align-items: center;">
<uui-avatar name="${user.name}"></uui-avatar>

203
src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users.element.ts
View File

@@ -1,14 +1,22 @@
import { css, html, LitElement, nothing } from 'lit';
import { css, html, LitElement } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, property, state } from 'lit/decorators.js';
import { UmbContextConsumerMixin, UmbContextProviderMixin } from '../../../../../core/context';
import { customElement, state } from 'lit/decorators.js';
import { UmbContextProviderMixin } from '../../../../../core/context';
import { BehaviorSubject, Observable } from 'rxjs';
import { InterfaceColor, InterfaceLook } from '@umbraco-ui/uui-base/lib/types';
import { IRoute } from 'router-slot';
import './editor-view-users-table.element';
import './editor-view-users-grid.element';
import './editor-view-users-selection.element';
import './editor-view-users-user-details.element';
import { IRoute } from 'router-slot';
export interface UserItem {
key: string;
name: string;
userGroup: string;
lastLogin: string;
status?: string;
}
@customElement('umb-editor-view-users')
export class UmbEditorViewUsersElement extends UmbContextProviderMixin(LitElement) {
@@ -17,15 +25,198 @@ export class UmbEditorViewUsersElement extends UmbContextProviderMixin(LitElemen
@state()
private _routes: IRoute[] = [
{
path: 'list',
path: '/',
component: () => import('./editor-view-users-list.element'),
},
{
path: 'details/:key',
path: '/:key',
component: () => import('./editor-view-users-user-details.element'),
},
];
private tempData = [
{
key: 'a9b18a00-58f2-420e-bf60-48d33ab156db',
name: 'Cecílie Bryon',
userGroup: 'Translators',
lastLogin: 'Fri, 23 April 2021',
status: 'Invited',
},
{
key: '3179d0b2-eec2-4045-b86a-149e13b93e14',
name: 'Kathleen G. Smith',
userGroup: 'Editors',
lastLogin: 'Tue, 6 June 2021',
status: 'Disabled',
},
{
key: '1b1c9733-b845-4d9a-9ed2-b2f46c05fd72',
name: 'Adrian Andresen',
userGroup: 'Administrators',
lastLogin: 'Mon, 15 November 2021',
},
{
key: 'b75af81a-b994-4e65-9330-b66c336d0207',
name: 'Lorenza Trentino',
userGroup: 'Editors',
lastLogin: 'Fri, 13 April 2022',
},
{
key: 'b75af81a-b994-4e65-9330-b66c336d0202',
name: 'John Doe',
userGroup: 'Translators',
lastLogin: 'Tue, 11 December 2021',
},
{
key: 'b75af81a-b994-4e65-9330-b66c336d0203',
name: 'Jane Doe',
userGroup: 'Editors',
lastLogin: 'Fri, 13 April 2022',
},
{
key: 'b75af81a-b994-4e65-9330-b66c336d0204',
name: 'John Smith',
userGroup: 'Administrators',
lastLogin: 'Mon, 15 November 2021',
},
{
key: 'b75af81a-b994-4e65-9330-b66c336d0205',
name: 'Jane Smith',
userGroup: 'Editors',
lastLogin: 'Fri, 13 April 2022',
},
{
key: 'b75af81a-b994-4e65-9330-b66c336d0206',
name: 'Oliver Twist',
userGroup: 'Translators',
lastLogin: 'Tue, 11 December 2021',
},
{
key: 'b75af81a-b994-4e65-2330-b66c336d0207',
name: 'Olivia Doe',
userGroup: 'Editors',
lastLogin: 'Fri, 13 April 2022',
},
{
key: 'b75af81a-b994-4e65-9330-b66c336d0208',
name: 'Hans Hansen',
userGroup: 'Administrators',
lastLogin: 'Mon, 15 November 2021',
},
{
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: 'Disabled',
},
{
key: '1b1c9723-b845-4d9a-9ed2-b2f46c05fd72',
name: 'Reese Witherspoon',
userGroup: 'Administrators',
lastLogin: 'Mon, 15 November 2021',
},
{
key: 'b75af81a-2f94-4e65-9330-b66c336d0207',
name: 'Denzel Washington',
userGroup: 'Editors',
lastLogin: 'Fri, 13 April 2022',
},
{
key: 'b75af81a-b994-4e23-9330-b66c336d0202',
name: 'Leonardo DiCaprio',
userGroup: 'Translators',
lastLogin: 'Tue, 11 December 2021',
},
{
key: 'b75af81a-2394-4e65-9330-b66c336d0203',
name: 'Idris Elba',
userGroup: 'Editors',
lastLogin: 'Fri, 13 April 2022',
},
{
key: 'b75af81a-b994-4e65-9330-b6u7336d0204',
name: 'Quentin Tarantino',
userGroup: 'Administrators',
lastLogin: 'Mon, 15 November 2021',
},
{
key: 'b75af81a-b994-4e65-2330-c66c336d0205',
name: 'Tom Hanks',
userGroup: 'Editors',
lastLogin: 'Fri, 13 April 2022',
},
{
key: 'b75af82a-b994-4b65-9330-b66c336d0206',
name: 'Oprah Winfrey',
userGroup: 'Translators',
lastLogin: 'Tue, 11 December 2021',
},
{
key: 'b75af81a-b994-4e65-2s30-b66b336d0207',
name: 'Pamela Anderson',
userGroup: 'Editors',
lastLogin: 'Fri, 13 April 2022',
},
{
key: 'b75af81a-b994-4e65-9930-b66c336d0l33t',
name: 'Keanu Reeves',
userGroup: 'Administrators',
lastLogin: 'Mon, 15 November 2021',
},
];
private _users: BehaviorSubject<Array<UserItem>> = new BehaviorSubject(this.tempData);
public readonly users: Observable<Array<UserItem>> = this._users.asObservable();
private _selection: BehaviorSubject<Array<string>> = new BehaviorSubject(<Array<string>>[]);
public readonly selection: Observable<Array<string>> = this._selection.asObservable();
constructor() {
super();
this.provideContext('umbUsersContext', this);
}
public setSelection(value: Array<string>) {
if (!value) return;
this._selection.next(value);
this.requestUpdate('selection');
}
public select(key: string) {
const selection = this._selection.getValue();
this._selection.next([...selection, key]);
this.requestUpdate('selection');
}
public deselect(key: string) {
const selection = this._selection.getValue();
this._selection.next(selection.filter((k) => k !== key));
this.requestUpdate('selection');
}
public getTagLookAndColor(status: string): { color: InterfaceColor; look: InterfaceLook } {
switch (status.toLowerCase()) {
case 'invited':
case 'inactive':
return { look: 'primary', color: 'warning' };
case 'active':
return { look: 'primary', color: 'positive' };
case 'disabled':
return { look: 'primary', color: 'danger' };
default:
return { look: 'secondary', color: 'default' };
}
}
render() {
return html` <router-slot .routes=${this._routes}></router-slot> `;
}