From 3675a4516163e08e66955d4cb8cb29a10120a0cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?= Date: Tue, 4 Oct 2022 12:02:42 +0200 Subject: [PATCH] renamed list to overview, and wip routing --- .../users/editor-view-users-grid.element.ts | 2 +- ... => editor-view-users-overview.element.ts} | 37 ++++++++----------- .../users/editor-view-users-table.element.ts | 2 +- .../views/users/editor-view-users.element.ts | 14 +++++-- 4 files changed, 28 insertions(+), 27 deletions(-) rename src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/{editor-view-users-list.element.ts => editor-view-users-overview.element.ts} (87%) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users-grid.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users-grid.element.ts index 7023fd33f8..3a79c58a76 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users-grid.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users-grid.element.ts @@ -68,7 +68,7 @@ export class UmbEditorViewUsersGridElement extends UmbContextConsumerMixin(LitEl //TODO How should we handle url stuff? private _handleOpenCard(key: string) { - history.pushState(null, '', location.pathname + '/' + key); + history.pushState(null, '', '/section/users/view/users/details' + '/' + key); //TODO Change to a tag with href and make dynamic } private _selectRowHandler(user: UserItem) { diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users-list.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users-overview.element.ts similarity index 87% rename from src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users-list.element.ts rename to src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users-overview.element.ts index e427595fea..a15ef41b1b 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users-list.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users-overview.element.ts @@ -10,10 +10,11 @@ import './editor-view-users-invite.element'; import { IRoute } from 'router-slot'; import UmbEditorViewUsersElement from './editor-view-users.element'; import { UUIPopoverElement } from '@umbraco-ui/uui'; +import { isPathActive } from 'router-slot'; export type UsersViewType = 'list' | 'grid'; -@customElement('umb-editor-view-users-list') -export class UmbEditorViewUsersListElement extends UmbContextConsumerMixin(LitElement) { +@customElement('umb-editor-view-users-overview') +export class UmbEditorViewUsersOverviewElement extends UmbContextConsumerMixin(LitElement) { static styles = [ UUITextStyles, css` @@ -67,9 +68,6 @@ export class UmbEditorViewUsersListElement extends UmbContextConsumerMixin(LitEl `, ]; - @state() - private _viewType: UsersViewType = 'grid'; - @state() private _selection: Array = []; @@ -117,18 +115,11 @@ export class UmbEditorViewUsersListElement extends UmbContextConsumerMixin(LitEl } private _toggleViewType() { - this._viewType = this._viewType === 'list' ? 'grid' : 'list'; - } + const isList = window.location.pathname.split('/').pop() === 'list'; - private _renderViewType() { - switch (this._viewType) { - case 'list': - return html``; - case 'grid': - return html``; - default: - return html``; - } + isList + ? history.pushState(null, '', '/section/users/view/users/overview/grid') + : history.pushState(null, '', '/section/users/view/users/overview/list'); } private _renderSelection() { @@ -140,13 +131,17 @@ export class UmbEditorViewUsersListElement extends UmbContextConsumerMixin(LitEl @state() private _routes: IRoute[] = [ { - path: '/grid', + path: 'grid', component: () => import('./editor-view-users-grid.element'), }, { - path: '/list', + path: 'list', component: () => import('./editor-view-users-table.element'), }, + { + path: '**', + redirectTo: '/section/users/view/users/overview/grid', //TODO: this should be dynamic + }, ]; private _handleTogglePopover(event: PointerEvent) { @@ -214,16 +209,14 @@ export class UmbEditorViewUsersListElement extends UmbContextConsumerMixin(LitEl - - `; } } -export default UmbEditorViewUsersListElement; +export default UmbEditorViewUsersOverviewElement; declare global { interface HTMLElementTagNameMap { - 'umb-editor-view-users-list': UmbEditorViewUsersListElement; + 'umb-editor-view-users-overview': UmbEditorViewUsersOverviewElement; } } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users-table.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users-table.element.ts index 66dfd3b8d3..572b3bd996 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users-table.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users-table.element.ts @@ -149,7 +149,7 @@ export class UmbEditorViewUsersTableElement extends UmbContextConsumerMixin(LitE //TODO How should we handle url stuff? private _handleOpenUser(event: Event, key: string) { event.stopImmediatePropagation(); - history.pushState(null, '', location.pathname + '/' + key); + history.pushState(null, '', '/section/users/view/users/details' + '/' + key); //TODO: make a tag with href } private _selectRowHandler(user: UserItem) { diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users.element.ts index 67b635f282..20e4ff026c 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/users/views/users/editor-view-users.element.ts @@ -37,13 +37,21 @@ export class UmbEditorViewUsersElement extends UmbContextProviderMixin(LitElemen @state() private _routes: IRoute[] = [ { - path: '/', - component: () => import('./editor-view-users-list.element'), + path: 'overview', + component: () => import('./editor-view-users-overview.element'), }, { - path: '/invite', + path: 'invite', component: () => import('./editor-view-users-invite.element'), }, + { + path: 'details/:key', + component: () => import('./editor-view-users-user-details.element'), + }, + { + path: '**', + redirectTo: '/section/users/view/users/overview', //TODO: this should be dynamic + }, ]; private _users: BehaviorSubject> = new BehaviorSubject(tempData);