= [];
+
+ #userGroupItemRepository = new UmbUserGroupItemRepository(this);
+
+ async #loadUserGroups() {
+ if (!this.item || this.item?.userGroupUniques.length === 0) {
+ this._userGroupItems = [];
+ return;
+ }
+
+ const { data } = await this.#userGroupItemRepository.requestItems(
+ this.item.userGroupUniques.map((ref) => ref.unique),
+ );
+
+ this._userGroupItems = data ?? [];
+ }
+
+ #onSelected(event: CustomEvent) {
+ if (!this.item) return;
+ event.stopPropagation();
+ this.dispatchEvent(new UmbSelectedEvent(this.item.unique));
+ }
+
+ #onDeselected(event: CustomEvent) {
+ if (!this.item) return;
+ event.stopPropagation();
+ this.dispatchEvent(new UmbDeselectedEvent(this.item.unique));
+ }
+
+ override render() {
+ if (!this.item) return nothing;
+
+ return html`
+
+ ${this.#renderUserTag()} ${this.#renderUserGroupNames()} ${this.#renderUserLoginDate()}
+
+
+ `;
+ }
+
+ #renderUserTag() {
+ if (this.item?.state && this.item?.state === UserStateModel.ACTIVE) {
+ return nothing;
+ }
+
+ const statusLook = this.item?.state ? getDisplayStateFromUserStatus(this.item.state) : undefined;
+ return html`
+
+
+
+ `;
+ }
+
+ #renderUserGroupNames() {
+ const userGroupNames = this._userGroupItems
+ .filter((userGroup) =>
+ this.item?.userGroupUniques?.map((reference) => reference.unique).includes(userGroup.unique),
+ )
+ .map((userGroup) => userGroup.name)
+ .join(', ');
+
+ return html`${userGroupNames}
`;
+ }
+
+ #renderUserLoginDate() {
+ if (this.item?.kind === UmbUserKind.API) return nothing;
+ return html`
+
+ ${when(
+ this.item?.lastLoginDate,
+ (lastLoginDate) => html`
+ Last login
+ ${this.localize.date(lastLoginDate, TimeFormatOptions)}
+ `,
+ () => html`has not logged in yet`,
+ )}
+
+ `;
+ }
+
+ static override styles = [
+ css`
+ uui-card-user {
+ width: 100%;
+ justify-content: normal;
+ padding-top: var(--uui-size-space-5);
+ flex-direction: column;
+
+ umb-user-avatar {
+ font-size: 1.6rem;
+ }
+ }
+
+ .user-login-time {
+ margin-top: var(--uui-size-1);
+ }
+ `,
+ ];
+}
+
+export { UmbUserCollectionItemCardElement as element };
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'umb-user-collection-item-card': UmbUserCollectionItemCardElement;
+ }
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/manifests.ts
index 59374f44b52d..1a0c754f732c 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/manifests.ts
@@ -3,6 +3,8 @@ import { manifests as collectionActionManifests } from './action/manifests.js';
import { manifests as collectionMenuManifests } from './menu/manifests.js';
import { manifests as collectionRepositoryManifests } from './repository/manifests.js';
import { manifests as collectionViewManifests } from './views/manifests.js';
+import { manifests as itemManifests } from './item/manifests.js';
+
import { UMB_USER_COLLECTION_ALIAS } from './constants.js';
export const manifests: Array = [
@@ -20,4 +22,5 @@ export const manifests: Array = [
...collectionMenuManifests,
...collectionRepositoryManifests,
...collectionViewManifests,
+ ...itemManifests,
];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/views/grid/user-grid-collection-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/views/grid/user-grid-collection-view.element.ts
index 3f491f7f7460..a2bf780988bd 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/views/grid/user-grid-collection-view.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/collection/views/grid/user-grid-collection-view.element.ts
@@ -1,24 +1,10 @@
-import { getDisplayStateFromUserStatus, TimeFormatOptions } from '../../../utils.js';
-import { UmbUserKind } from '../../../utils/index.js';
import { UMB_USER_COLLECTION_CONTEXT } from '../../user-collection.context-token.js';
-import { UMB_USER_WORKSPACE_PATH } from '../../../paths.js';
import type { UmbUserCollectionContext } from '../../user-collection.context.js';
import type { UmbUserDetailModel } from '../../../types.js';
-import {
- css,
- customElement,
- html,
- ifDefined,
- nothing,
- repeat,
- state,
- when,
-} from '@umbraco-cms/backoffice/external/lit';
+import { UMB_USER_WORKSPACE_PATH } from '../../../paths.js';
+import { css, customElement, html, nothing, repeat, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import { UmbUserGroupCollectionRepository } from '@umbraco-cms/backoffice/user-group';
-import { UserStateModel } from '@umbraco-cms/backoffice/external/backend-api';
-import type { UmbUserGroupDetailModel } from '@umbraco-cms/backoffice/user-group';
@customElement('umb-user-grid-collection-view')
export class UmbUserGridCollectionViewElement extends UmbLitElement {
@@ -31,13 +17,8 @@ export class UmbUserGridCollectionViewElement extends UmbLitElement {
@state()
private _loading = false;
- #userGroups: Array = [];
-
#collectionContext?: UmbUserCollectionContext;
- // TODO: we need to use the item repository here
- #userGroupCollectionRepository = new UmbUserGroupCollectionRepository(this);
-
constructor() {
super();
@@ -56,18 +37,6 @@ export class UmbUserGridCollectionViewElement extends UmbLitElement {
'umbCollectionItemsObserver',
);
});
-
- this.#requestUserGroups();
- }
-
- async #requestUserGroups() {
- this._loading = true;
-
- const { data } = await this.#userGroupCollectionRepository.requestCollection();
-
- this.#userGroups = data?.items ?? [];
-
- this._loading = false;
}
#onSelect(user: UmbUserDetailModel) {
@@ -93,59 +62,14 @@ export class UmbUserGridCollectionViewElement extends UmbLitElement {
#renderUserCard(user: UmbUserDetailModel) {
return html`
- 0}
?selected=${this.#collectionContext?.selection.isSelected(user.unique)}
@selected=${() => this.#onSelect(user)}
- @deselected=${() => this.#onDeselect(user)}>
- ${this.#renderUserTag(user)} ${this.#renderUserGroupNames(user)} ${this.#renderUserLoginDate(user)}
-
-
- `;
- }
-
- #renderUserTag(user: UmbUserDetailModel) {
- if (user.state && user.state === UserStateModel.ACTIVE) {
- return nothing;
- }
-
- const statusLook = user.state ? getDisplayStateFromUserStatus(user.state) : undefined;
- return html`
-
-
-
- `;
- }
-
- #renderUserGroupNames(user: UmbUserDetailModel) {
- const userGroupNames = this.#userGroups
- .filter((userGroup) => user.userGroupUniques?.map((reference) => reference.unique).includes(userGroup.unique))
- .map((userGroup) => userGroup.name)
- .join(', ');
-
- return html`${userGroupNames}
`;
- }
-
- #renderUserLoginDate(user: UmbUserDetailModel) {
- if (user.kind === UmbUserKind.API) return nothing;
- return html`
-
- ${when(
- user.lastLoginDate,
- (lastLoginDate) => html`
- Last login
- ${this.localize.date(lastLoginDate, TimeFormatOptions)}
- `,
- () => html`has not logged in yet`,
- )}
-
+ @deselected=${() => this.#onDeselect(user)}>
`;
}
@@ -162,27 +86,10 @@ export class UmbUserGridCollectionViewElement extends UmbLitElement {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--uui-size-space-4);
}
-
- uui-card-user {
- width: 100%;
- justify-content: normal;
- padding-top: var(--uui-size-space-5);
- flex-direction: column;
-
- umb-user-avatar {
- font-size: 1.6rem;
- }
- }
-
- .user-login-time {
- margin-top: var(--uui-size-1);
- }
`,
];
}
-export default UmbUserGridCollectionViewElement;
-
export { UmbUserGridCollectionViewElement as element };
declare global {