added selection subscription

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

@@ -31,8 +31,12 @@ export class UmbEditorViewUsersGridElement extends UmbContextConsumerMixin(LitEl
 	@state()
 	private _users: Array<UserItem> = [];
 
-	protected _usersSubscription?: Subscription;
+	@state()
+	private _selection: Array<string> = [];
+
 	protected _usersContext?: UmbEditorViewUsersElement;
+	protected _usersSubscription?: Subscription;
+	protected _selectionSubscription?: Subscription;
 
 	connectedCallback(): void {
 		super.connectedCallback();
@@ -41,9 +45,13 @@ export class UmbEditorViewUsersGridElement extends UmbContextConsumerMixin(LitEl
 			this._usersContext = usersContext;
 
 			this._usersSubscription?.unsubscribe();
+			this._selectionSubscription?.unsubscribe();
 			this._usersSubscription = this._usersContext?.users.subscribe((users: Array<UserItem>) => {
 				this._users = users;
 			});
+			this._selectionSubscription = this._usersContext?.selection.subscribe((selection: Array<string>) => {
+				this._selection = selection;
+			});
 		});
 	}
 
@@ -51,6 +59,11 @@ export class UmbEditorViewUsersGridElement extends UmbContextConsumerMixin(LitEl
 		super.disconnectedCallback();
 
 		this._usersSubscription?.unsubscribe();
+		this._selectionSubscription?.unsubscribe();
+	}
+
+	private _isSelected(key: string) {
+		return this._selection.includes(key);
 	}
 
 	private renderUserCard(user: UserItem) {
@@ -59,7 +72,13 @@ export class UmbEditorViewUsersGridElement extends UmbContextConsumerMixin(LitEl
 		const statusLook = this._usersContext.getTagLookAndColor(user.status ? user.status : '');
 
 		return html`
-			<uui-card-user .name=${user.name}>
+			<uui-card-user
+				.name=${user.name}
+				selectable
+				?select-only=${this._selection.length > 0}
+				?selected=${this._isSelected(user.key)}
+				@selected=${() => this._usersContext?.select(user.key)}
+				@unselected=${() => this._usersContext?.deselect(user.key)}>
 				${user.status
 					? html`<uui-tag slot="tag" size="s" look="${statusLook.look}" color="${statusLook.color}">
 							${user.status}

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

@@ -67,8 +67,9 @@ export class UmbEditorViewUsersListElement extends UmbContextConsumerMixin(LitEl
 	@state()
 	private _users: Array<UserItem> = [];
 
-	protected _usersSubscription?: Subscription;
 	protected _usersContext?: UmbEditorViewUsersElement;
+	protected _usersSubscription?: Subscription;
+	protected _selectionSubscription?: Subscription;
 
 	connectedCallback(): void {
 		super.connectedCallback();
@@ -77,9 +78,13 @@ export class UmbEditorViewUsersListElement extends UmbContextConsumerMixin(LitEl
 			this._usersContext = usersContext;
 
 			this._usersSubscription?.unsubscribe();
+			this._selectionSubscription?.unsubscribe();
 			this._usersSubscription = this._usersContext?.users.subscribe((users: Array<UserItem>) => {
 				this._users = users;
 			});
+			this._selectionSubscription = this._usersContext?.selection.subscribe((selection: Array<string>) => {
+				this._selection = selection;
+			});
 		});
 
 		this._columns = [
@@ -126,28 +131,19 @@ export class UmbEditorViewUsersListElement extends UmbContextConsumerMixin(LitEl
 		super.disconnectedCallback();
 
 		this._usersSubscription?.unsubscribe();
+		this._selectionSubscription?.unsubscribe();
 	}
 
 	private _selectAllHandler(event: Event) {
-		const checkboxElement = event.target as HTMLInputElement;
-		this._selection = checkboxElement.checked ? this._users.map((item: UserItem) => item.key) : [];
-		this._selectionMode = this._selection.length > 0;
+		console.log('SELECT ALL NOT IMPLEMENTED');
 	}
 
-	private _selectHandler(event: Event, item: UserItem) {
-		const checkboxElement = event.target as HTMLInputElement;
-		this._selection = checkboxElement.checked
-			? [...this._selection, item.key]
-			: this._selection.filter((selectionKey) => selectionKey !== item.key);
-		this._selectionMode = this._selection.length > 0;
+	private _selectRowHandler(user: UserItem) {
+		this._usersContext?.select(user.key);
 	}
-	private _selectRowHandler(item: UserItem) {
-		this._selection = [...this._selection, item.key];
-		this._selectionMode = this._selection.length > 0;
-	}
-	private _unselectRowHandler(item: UserItem) {
-		this._selection = this._selection.filter((selectionKey) => selectionKey !== item.key);
-		this._selectionMode = this._selection.length > 0;
+
+	private _deselectRowHandler(user: UserItem) {
+		this._usersContext?.deselect(user.key);
 	}
 
 	private _sortingHandler(column: TableColumn) {
@@ -181,8 +177,8 @@ export class UmbEditorViewUsersListElement extends UmbContextConsumerMixin(LitEl
 			selectable
 			?select-only=${this._selectionMode}
 			?selected=${this._isSelected(user.key)}
-			@selected=${() => this._selectRowHandler(user)}
-			@unselected=${() => this._unselectRowHandler(user)}>
+			@selected=${() => this._usersContext?.select(user.key)}
+			@unselected=${() => this._usersContext?.deselect(user.key)}>
 			<uui-table-cell>
 				<div style="display: flex; align-items: center;">
 					<uui-avatar name="${user.name}"></uui-avatar>

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

@@ -80,12 +80,44 @@ export class UmbEditorViewUsersElement extends UmbContextProviderMixin(LitElemen
 	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);
+	}
+
+	public select(key: string) {
+		const selection = this._selection.getValue();
+		this._selection.next([...selection, key]);
+	}
+
+	public deselect(key: string) {
+		const selection = this._selection.getValue();
+		this._selection.next(selection.filter((k) => k !== key));
+	}
+
+	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 _renderViewType() {
 		switch (this._viewType) {
 			case 'list':
@@ -101,20 +133,6 @@ export class UmbEditorViewUsersElement extends UmbContextProviderMixin(LitElemen
 		this._viewType = this._viewType === 'list' ? 'grid' : 'list';
 	}
 
-	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`<div id="top-bar">
 				<uui-button label="Invite user" look="outline"></uui-button>