@umbraco-cms/backoffice 17.0.2 → 17.1.0-rc

package/dist-cms/packages/user/user/collection/item/types.d.ts

@@ -0,0 +1,2 @@
+import type { UmbUserDetailModel } from '../../types.js';
+export type UmbUserCollectionItemModel = UmbUserDetailModel;

package/dist-cms/packages/user/user/collection/item/types.js

@@ -0,0 +1 @@
+export {};

package/dist-cms/packages/user/user/collection/item/user-collection-item-card.element.d.ts

@@ -0,0 +1,23 @@
+import type { UmbUserCollectionItemModel } from './types.js';
+import { nothing } from '../../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../../core/lit-element/index.js';
+import type { UmbEntityCollectionItemElement } from '../../../../core/collection/index.js';
+export declare class UmbUserCollectionItemCardElement extends UmbLitElement implements UmbEntityCollectionItemElement {
+    #private;
+    get item(): UmbUserCollectionItemModel | undefined;
+    set item(value: UmbUserCollectionItemModel | undefined);
+    selectable: boolean;
+    selected: boolean;
+    selectOnly: boolean;
+    disabled: boolean;
+    href?: string;
+    private _userGroupItems;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+export { UmbUserCollectionItemCardElement as element };
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-user-collection-item-card': UmbUserCollectionItemCardElement;
+    }
+}

package/dist-cms/packages/user/user/collection/item/user-collection-item-card.element.js

@@ -0,0 +1,149 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { getDisplayStateFromUserStatus, TimeFormatOptions } from '../../utils.js';
+import { UmbUserKind } from '../../utils/user-kind.js';
+import { css, customElement, html, ifDefined, nothing, property, state, when, } from '../../../../../external/lit/index.js';
+import { UmbLitElement } from '../../../../core/lit-element/index.js';
+import { UmbUserGroupItemRepository } from '../../../user-group/index.js';
+import { UmbDeselectedEvent, UmbSelectedEvent } from '../../../../core/event/index.js';
+import { UserStateModel } from '../../../../core/backend-api/index.js';
+let UmbUserCollectionItemCardElement = class UmbUserCollectionItemCardElement extends UmbLitElement {
+    constructor() {
+        super(...arguments);
+        this.selectable = false;
+        this.selected = false;
+        this.selectOnly = false;
+        this.disabled = false;
+        this._userGroupItems = [];
+        this.#userGroupItemRepository = new UmbUserGroupItemRepository(this);
+    }
+    #item;
+    get item() {
+        return this.#item;
+    }
+    set item(value) {
+        this.#item = value;
+        this.#loadUserGroups();
+    }
+    #userGroupItemRepository;
+    async #loadUserGroups() {
+        if (!this.item || !this.item.userGroupUniques || 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) {
+        if (!this.item)
+            return;
+        event.stopPropagation();
+        this.dispatchEvent(new UmbSelectedEvent(this.item.unique));
+    }
+    #onDeselected(event) {
+        if (!this.item)
+            return;
+        event.stopPropagation();
+        this.dispatchEvent(new UmbDeselectedEvent(this.item.unique));
+    }
+    render() {
+        if (!this.item)
+            return nothing;
+        return html `
+			<uui-card-user
+				.name=${this.item.name ?? this.localize.term('general_unnamed')}
+				href=${ifDefined(this.href)}
+				?selectable=${this.selectable}
+				?select-only=${this.selectOnly}
+				?selected=${this.selected}
+				?disabled=${this.disabled}
+				@selected=${this.#onSelected}
+				@deselected=${this.#onDeselected}>
+				${this.#renderUserTag()} ${this.#renderUserGroupNames()} ${this.#renderUserLoginDate()}
+				<umb-user-avatar
+					slot="avatar"
+					.name=${this.item.name}
+					.kind=${this.item.kind}
+					.imgUrls=${this.item.avatarUrls}></umb-user-avatar>
+			</uui-card-user>
+		`;
+    }
+    #renderUserTag() {
+        if (this.item?.state && this.item?.state === UserStateModel.ACTIVE) {
+            return nothing;
+        }
+        const statusLook = this.item?.state ? getDisplayStateFromUserStatus(this.item.state) : undefined;
+        return html `
+			<uui-tag slot="tag" look=${ifDefined(statusLook?.look)} color=${ifDefined(statusLook?.color)}>
+				<umb-localize key=${'user_' + statusLook?.key}></umb-localize>
+			</uui-tag>
+		`;
+    }
+    #renderUserGroupNames() {
+        const userGroupNames = this._userGroupItems
+            .filter((userGroup) => this.item?.userGroupUniques?.map((reference) => reference.unique).includes(userGroup.unique))
+            .map((userGroup) => userGroup.name)
+            .join(', ');
+        return html `<div>${userGroupNames}</div>`;
+    }
+    #renderUserLoginDate() {
+        if (this.item?.kind === UmbUserKind.API)
+            return nothing;
+        return html `
+			<div class="user-login-time">
+				${when(this.item?.lastLoginDate, (lastLoginDate) => html `
+						<umb-localize key="user_lastLogin">Last login</umb-localize>
+						<span>${this.localize.date(lastLoginDate, TimeFormatOptions)}</span>
+					`, () => html `<umb-localize key="user_noLogin">has not logged in yet</umb-localize>`)}
+			</div>
+		`;
+    }
+    static { this.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);
+			}
+		`,
+    ]; }
+};
+__decorate([
+    property({ type: Object })
+], UmbUserCollectionItemCardElement.prototype, "item", null);
+__decorate([
+    property({ type: Boolean })
+], UmbUserCollectionItemCardElement.prototype, "selectable", void 0);
+__decorate([
+    property({ type: Boolean })
+], UmbUserCollectionItemCardElement.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean })
+], UmbUserCollectionItemCardElement.prototype, "selectOnly", void 0);
+__decorate([
+    property({ type: Boolean })
+], UmbUserCollectionItemCardElement.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], UmbUserCollectionItemCardElement.prototype, "href", void 0);
+__decorate([
+    state()
+], UmbUserCollectionItemCardElement.prototype, "_userGroupItems", void 0);
+UmbUserCollectionItemCardElement = __decorate([
+    customElement('umb-user-collection-item-card')
+], UmbUserCollectionItemCardElement);
+export { UmbUserCollectionItemCardElement };
+export { UmbUserCollectionItemCardElement as element };

package/dist-cms/packages/user/user/collection/manifests.js

@@ -3,6 +3,7 @@ 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 = [
     {
@@ -19,4 +20,5 @@ export const manifests = [
     ...collectionMenuManifests,
     ...collectionRepositoryManifests,
     ...collectionViewManifests,
+    ...itemManifests,
 ];

package/dist-cms/packages/user/user/collection/user-collection.context.d.ts

@@ -39,5 +39,11 @@ export declare class UmbUserCollectionContext extends UmbDefaultCollectionContex
      * @memberof UmbUserCollectionContext
      */
     setOrderDirectionFilter(orderDirection: UmbDirectionType): void;
+    /**
+     * Returns the href for a specific user collection item.
+     * @param {UmbUserDetailModel} item - The user item to get the href for.
+     * @returns {Promise<string | undefined>} - The edit workspace href for the user.
+     */
+    requestItemHref(item: UmbUserDetailModel): Promise<string | undefined>;
 }
 export { UmbUserCollectionContext as api };

package/dist-cms/packages/user/user/collection/user-collection.context.js

@@ -1,3 +1,4 @@
+import { UMB_EDIT_USER_WORKSPACE_PATH_PATTERN } from '../paths.js';
 import { UMB_COLLECTION_VIEW_USER_GRID } from './views/index.js';
 import { UmbUserOrderBy } from './utils/index.js';
 import { UmbDefaultCollectionContext } from '../../../core/collection/index.js';
@@ -103,5 +104,13 @@ export class UmbUserCollectionContext extends UmbDefaultCollectionContext {
     setOrderDirectionFilter(orderDirection) {
         this.setFilter({ orderDirection });
     }
+    /**
+     * Returns the href for a specific user collection item.
+     * @param {UmbUserDetailModel} item - The user item to get the href for.
+     * @returns {Promise<string | undefined>} - The edit workspace href for the user.
+     */
+    async requestItemHref(item) {
+        return `${UMB_EDIT_USER_WORKSPACE_PATH_PATTERN.generateAbsolute({ unique: item.unique })}`;
+    }
 }
 export { UmbUserCollectionContext as api };

package/dist-cms/packages/user/user/collection/views/grid/user-grid-collection-view.element.d.ts

@@ -9,7 +9,6 @@ export declare class UmbUserGridCollectionViewElement extends UmbLitElement {
     render(): typeof nothing | import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];
 }
-export default UmbUserGridCollectionViewElement;
 export { UmbUserGridCollectionViewElement as element };
 declare global {
     interface HTMLElementTagNameMap {

package/dist-cms/packages/user/user/collection/views/grid/user-grid-collection-view.element.js

@@ -4,40 +4,23 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-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 { css, customElement, html, ifDefined, nothing, repeat, state, when, } from '../../../../../../external/lit/index.js';
+import { css, customElement, html, nothing, repeat, state } from '../../../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../../core/lit-element/index.js';
 import { UmbTextStyles } from '../../../../../core/style/index.js';
-import { UmbUserGroupCollectionRepository } from '../../../../user-group/index.js';
-import { UserStateModel } from '../../../../../core/backend-api/index.js';
 let UmbUserGridCollectionViewElement = class UmbUserGridCollectionViewElement extends UmbLitElement {
-    #userGroups;
     #collectionContext;
-    // TODO: we need to use the item repository here
-    #userGroupCollectionRepository;
     constructor() {
         super();
         this._users = [];
         this._selection = [];
         this._loading = false;
-        this.#userGroups = [];
-        // TODO: we need to use the item repository here
-        this.#userGroupCollectionRepository = new UmbUserGroupCollectionRepository(this);
         this.consumeContext(UMB_USER_COLLECTION_CONTEXT, (instance) => {
             this.#collectionContext = instance;
             this.observe(this.#collectionContext?.selection.selection, (selection) => (this._selection = selection ?? []), 'umbCollectionSelectionObserver');
             this.observe(this.#collectionContext?.items, (items) => (this._users = items ?? []), 'umbCollectionItemsObserver');
         });
-        this.#requestUserGroups();
-    }
-    async #requestUserGroups() {
-        this._loading = true;
-        const { data } = await this.#userGroupCollectionRepository.requestCollection();
-        this.#userGroups = data?.items ?? [];
-        this._loading = false;
     }
     #onSelect(user) {
         this.#collectionContext?.selection.select(user.unique ?? '');
@@ -56,51 +39,14 @@ let UmbUserGridCollectionViewElement = class UmbUserGridCollectionViewElement ex
     }
     #renderUserCard(user) {
         return html `
-			<uui-card-user
-				.name=${user.name ?? this.localize.term('general_unnamed')}
+			<umb-entity-collection-item-card
+				.item=${user}
 				href="${UMB_USER_WORKSPACE_PATH}/edit/${user.unique}"
 				selectable
 				?select-only=${this._selection.length > 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)}
-				<umb-user-avatar
-					slot="avatar"
-					.name=${user.name}
-					.kind=${user.kind}
-					.imgUrls=${user.avatarUrls}></umb-user-avatar>
-			</uui-card-user>
-		`;
-    }
-    #renderUserTag(user) {
-        if (user.state && user.state === UserStateModel.ACTIVE) {
-            return nothing;
-        }
-        const statusLook = user.state ? getDisplayStateFromUserStatus(user.state) : undefined;
-        return html `
-			<uui-tag slot="tag" look=${ifDefined(statusLook?.look)} color=${ifDefined(statusLook?.color)}>
-				<umb-localize key=${'user_' + statusLook?.key}></umb-localize>
-			</uui-tag>
-		`;
-    }
-    #renderUserGroupNames(user) {
-        const userGroupNames = this.#userGroups
-            .filter((userGroup) => user.userGroupUniques?.map((reference) => reference.unique).includes(userGroup.unique))
-            .map((userGroup) => userGroup.name)
-            .join(', ');
-        return html `<div>${userGroupNames}</div>`;
-    }
-    #renderUserLoginDate(user) {
-        if (user.kind === UmbUserKind.API)
-            return nothing;
-        return html `
-			<div class="user-login-time">
-				${when(user.lastLoginDate, (lastLoginDate) => html `
-						<umb-localize key="user_lastLogin">Last login</umb-localize>
-						<span>${this.localize.date(lastLoginDate, TimeFormatOptions)}</span>
-					`, () => html `<umb-localize key="user_noLogin">has not logged in yet</umb-localize>`)}
-			</div>
+				@deselected=${() => this.#onDeselect(user)}></umb-entity-collection-item-card>
 		`;
     }
     static { this.styles = [
@@ -116,21 +62,6 @@ let UmbUserGridCollectionViewElement = class UmbUserGridCollectionViewElement ex
 				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);
-			}
 		`,
     ]; }
 };
@@ -147,5 +78,4 @@ UmbUserGridCollectionViewElement = __decorate([
     customElement('umb-user-grid-collection-view')
 ], UmbUserGridCollectionViewElement);
 export { UmbUserGridCollectionViewElement };
-export default UmbUserGridCollectionViewElement;
 export { UmbUserGridCollectionViewElement as element };

package/dist-cms/packages/user/user/collection/views/manifests.js

@@ -8,7 +8,7 @@ export const manifests = [
         element: () => import('./table/user-table-collection-view.element.js'),
         meta: {
             label: 'Table',
-            icon: 'icon-list',
+            icon: 'icon-table',
             pathName: 'table',
         },
         conditions: [
@@ -20,15 +20,9 @@ export const manifests = [
     },
     {
         type: 'collectionView',
+        kind: 'card',
         alias: UMB_COLLECTION_VIEW_USER_GRID,
         name: 'User Grid Collection View',
-        element: () => import('./grid/user-grid-collection-view.element.js'),
-        weight: 200,
-        meta: {
-            label: 'Grid',
-            icon: 'icon-grid',
-            pathName: 'grid',
-        },
         conditions: [
             {
                 alias: UMB_COLLECTION_ALIAS_CONDITION,

package/dist-cms/packages/user/user/collection/views/table/column-layouts/name/user-table-name-column-layout.element.d.ts

@@ -1,9 +1,14 @@
 import { LitElement } from '../../../../../../../../external/lit/index.js';
-import type { UmbTableColumn, UmbTableItem } from '../../../../../../../core/components/index.js';
+import type { UmbTableColumn } from '../../../../../../../core/components/index.js';
 export declare class UmbUserTableNameColumnLayoutElement extends LitElement {
     column: UmbTableColumn;
-    item: UmbTableItem;
-    value: any;
+    value: {
+        name: string;
+        unique: string;
+        kind: string;
+        avatarUrls: Record<string, string>;
+        href?: string;
+    };
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];
 }

package/dist-cms/packages/user/user/collection/views/table/column-layouts/name/user-table-name-column-layout.element.js

@@ -4,19 +4,20 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { UMB_USER_WORKSPACE_PATH } from '../../../../../paths.js';
 import { html, LitElement, customElement, property } from '../../../../../../../../external/lit/index.js';
 import { UmbTextStyles } from '../../../../../../../core/style/index.js';
 let UmbUserTableNameColumnLayoutElement = class UmbUserTableNameColumnLayoutElement extends LitElement {
     render() {
-        const href = UMB_USER_WORKSPACE_PATH + '/edit/' + this.value.unique;
         return html ` <div style="display: flex; align-items: center;">
 			<umb-user-avatar
 				style="margin-right: var(--uui-size-space-3);"
 				name=${this.value.name}
 				kind=${this.value.kind}
 				.imgUrls=${this.value.avatarUrls}></umb-user-avatar>
-			<a style="font-weight: bold;" href="${href}">${this.value.name}</a>
+
+			${this.value.href
+            ? html `<a style="font-weight: bold;" href="${this.value.href}">${this.value.name}</a>`
+            : html ` <span>${this.value.name}</span>`}
 		</div>`;
     }
     static { this.styles = [UmbTextStyles]; }
@@ -24,9 +25,6 @@ let UmbUserTableNameColumnLayoutElement = class UmbUserTableNameColumnLayoutElem
 __decorate([
     property({ type: Object, attribute: false })
 ], UmbUserTableNameColumnLayoutElement.prototype, "column", void 0);
-__decorate([
-    property({ type: Object, attribute: false })
-], UmbUserTableNameColumnLayoutElement.prototype, "item", void 0);
 __decorate([
     property({ attribute: false })
 ], UmbUserTableNameColumnLayoutElement.prototype, "value", void 0);

package/dist-cms/packages/user/user/collection/views/table/user-table-collection-view.element.d.ts

@@ -9,6 +9,7 @@ export declare class UmbUserTableCollectionViewElement extends UmbLitElement {
     private _userGroupItems;
     private _users;
     private _selection;
+    private _itemHrefs;
     constructor();
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];

package/dist-cms/packages/user/user/collection/views/table/user-table-collection-view.element.js

@@ -50,11 +50,13 @@ let UmbUserTableCollectionViewElement = class UmbUserTableCollectionViewElement
         this.#userGroupItemRepository = new UmbUserGroupItemRepository(this);
         this._users = [];
         this._selection = [];
+        this._itemHrefs = new Map();
         this.consumeContext(UMB_USER_COLLECTION_CONTEXT, (instance) => {
             this.#collectionContext = instance;
             this.observe(this.#collectionContext?.selection.selection, (selection) => (this._selection = selection ?? []), 'umbCollectionSelectionObserver');
-            this.observe(this.#collectionContext?.items, (items) => {
+            this.observe(this.#collectionContext?.items, async (items) => {
                 this._users = items ?? [];
+                await this.#updateItemHrefs();
                 this.#observeUserGroups();
             }, 'umbCollectionItemsObserver');
         });
@@ -78,6 +80,16 @@ let UmbUserTableCollectionViewElement = class UmbUserTableCollectionViewElement
         })
             .join(', ');
     }
+    async #updateItemHrefs() {
+        const hrefs = new Map();
+        for (const user of this._users) {
+            const href = await this.#collectionContext?.requestItemHref?.(user);
+            if (href && user.unique) {
+                hrefs.set(user.unique, href);
+            }
+        }
+        this._itemHrefs = hrefs;
+    }
     #createTableItems() {
         this._tableItems = this._users.map((user) => {
             return {
@@ -91,6 +103,7 @@ let UmbUserTableCollectionViewElement = class UmbUserTableCollectionViewElement
                             name: user.name,
                             avatarUrls: user.avatarUrls,
                             kind: user.kind,
+                            href: user.unique ? this._itemHrefs.get(user.unique) : undefined,
                         },
                     },
                     {
@@ -178,6 +191,9 @@ __decorate([
 __decorate([
     state()
 ], UmbUserTableCollectionViewElement.prototype, "_selection", void 0);
+__decorate([
+    state()
+], UmbUserTableCollectionViewElement.prototype, "_itemHrefs", void 0);
 UmbUserTableCollectionViewElement = __decorate([
     customElement('umb-user-table-collection-view')
 ], UmbUserTableCollectionViewElement);

package/dist-cms/packages/user/user/components/user-input/user-input.element.d.ts

@@ -1,7 +1,20 @@
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
-declare const UmbUserInputElement_base: (new (...args: any[]) => import("@umbraco-ui/uui-base").UUIFormControlMixinElement<FormDataEntryValue | FormData>) & typeof UmbLitElement;
+declare const UmbUserInputElement_base: import("../../../../../libs/extension-api/index.js").HTMLElementConstructor<import("../../../../core/validation/index.js").UmbFormControlMixinElement<string | undefined>> & typeof UmbLitElement;
 export declare class UmbUserInputElement extends UmbUserInputElement_base {
     #private;
+    /**
+     * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    readonly: boolean;
+    /**
+     * Sets the input to required, meaning validation will fail if the value is empty.
+     * @type {boolean}
+     */
+    required?: boolean;
+    requiredMessage?: string;
     /**
      * This is a minimum amount of selected items in this input.
      * @type {number}
@@ -34,9 +47,10 @@ export declare class UmbUserInputElement extends UmbUserInputElement_base {
     maxMessage: string;
     set selection(uniques: Array<string>);
     get selection(): Array<string>;
-    set value(uniques: string);
-    get value(): string;
+    set value(uniques: string | undefined);
+    get value(): string | undefined;
     private _items?;
+    private _statuses?;
     constructor();
     protected getFormElement(): undefined;
     render(): import("lit-html").TemplateResult<1>;