renamed list to overview, and wip routing

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) {

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<string> = [];
 
@@ -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`<umb-editor-view-users-table></umb-editor-view-users-table>`;
-			case 'grid':
-				return html`<umb-editor-view-users-grid></umb-editor-view-users-grid>`;
-			default:
-				return html`<umb-editor-view-users-grid></umb-editor-view-users-grid>`;
-		}
+		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
 			</div>
 
 			<router-slot .routes=${this._routes}></router-slot>
-
-			<!-- <div id="user-list">${this._renderViewType()}</div> -->
 		`;
 	}
 }
 
-export default UmbEditorViewUsersListElement;
+export default UmbEditorViewUsersOverviewElement;
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-editor-view-users-list': UmbEditorViewUsersListElement;
+		'umb-editor-view-users-overview': UmbEditorViewUsersOverviewElement;
 	}
 }

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) {

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<Array<UserItem>> = new BehaviorSubject(tempData);