yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update user group picker to use collection repository

Browse Source
This commit is contained in:
Mads Rasmussen
2023-10-01 21:50:53 +02:00
parent d1e433b2cf
commit 3eb9eab34e
1 changed files with 12 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/Umbraco.Web.UI.Client/src/packages/users/user-groups/modals/user-group-picker/user-group-picker-modal.element.ts
View File

@@ -1,12 +1,9 @@
import type { UmbUserGroupRepository } from '../../repository/user-group.repository.js';
import { UmbTextStyles } from "@umbraco-cms/backoffice/style";
import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbUserGroupCollectionRepository } from '../../collection/repository/index.js';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { css, html, customElement, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
import { UmbSelectionManagerBase } from '@umbraco-cms/backoffice/utils';
import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
import { UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
import { UserGroupResponseModel } from '@umbraco-cms/backoffice/backend-api';
import { createExtensionClass } from '@umbraco-cms/backoffice/extension-api';
@customElement('umb-user-group-picker-modal')
export class UmbUserGroupPickerModalElement extends UmbModalBaseElement<any, any> {
@@ -14,41 +11,16 @@ export class UmbUserGroupPickerModalElement extends UmbModalBaseElement<any, any
private _userGroups: Array<UserGroupResponseModel> = [];
#selectionManager = new UmbSelectionManagerBase();
#userGroupRepository?: UmbUserGroupRepository;
#userGroupCollectionRepository = new UmbUserGroupCollectionRepository(this);
connectedCallback(): void {
super.connectedCallback();
// TODO: in theory this config could change during the lifetime of the modal, so we could observe it
this.#selectionManager.setMultiple(this.data?.multiple ?? false);
this.#selectionManager.setSelection(this.data?.selection ?? []);
// TODO: this code is reused in multiple places, so it should be extracted to a function
new UmbObserverController(
this,
umbExtensionsRegistry.getByTypeAndAlias('repository', 'Umb.Repository.UserGroup'),
async (repositoryManifest) => {
if (!repositoryManifest) return;
try {
const result = await createExtensionClass<UmbUserGroupRepository>(repositoryManifest, [this]);
this.#userGroupRepository = result;
this.#observeUserGroups();
} catch (error) {
throw new Error('Could not create repository with alias: Umb.Repository.User');
}
}
);
protected firstUpdated(): void {
this.#observeUserGroups();
}
async #observeUserGroups() {
if (!this.#userGroupRepository) return;
// TODO is this the correct end point?
const { data } = await this.#userGroupRepository.requestCollection();
if (data) {
this._userGroups = data.items;
}
const { error, asObservable } = await this.#userGroupCollectionRepository.requestCollection();
if (error) return;
this.observe(asObservable(), (items) => (this._userGroups = items));
}
#submit() {
@@ -68,14 +40,14 @@ export class UmbUserGroupPickerModalElement extends UmbModalBaseElement<any, any
${this._userGroups.map(
(item) => html`
<uui-menu-item
label=${item.name}
label=${ifDefined(item.name)}
selectable
@selected=${() => this.#selectionManager.select(item.id!)}
@deselected=${() => this.#selectionManager.deselect(item.id!)}
?selected=${this.#selectionManager.isSelected(item.id!)}>
<uui-icon .name=${item.icon} slot="icon"></uui-icon>
<uui-icon .name=${item.icon || null} slot="icon"></uui-icon>
</uui-menu-item>
`
`,
)}
</uui-box>
<div slot="actions">