add group picker

This commit is contained in:
JesmoDev
2024-03-05 16:50:02 +01:00
parent 8236e13f53
commit 9226f3c685
2 changed files with 19 additions and 7 deletions

View File

@@ -3,11 +3,7 @@ import type { UmbMemberDetailModel, UmbMemberVariantModel, UmbMemberVariantOptio
import { UmbMemberPropertyDataContext } from '../property-dataset-context/member-property-dataset-context.js';
import { UMB_MEMBER_WORKSPACE_ALIAS } from './manifests.js';
import { UmbMemberTypeDetailRepository } from '@umbraco-cms/backoffice/member-type';
import {
UMB_VARIANT_WORKSPACE_CONTEXT,
UmbEditableWorkspaceContextBase,
UmbWorkspaceSplitViewManager,
} from '@umbraco-cms/backoffice/workspace';
import { UmbEditableWorkspaceContextBase, UmbWorkspaceSplitViewManager } from '@umbraco-cms/backoffice/workspace';
import type {
UmbVariantableWorkspaceContextInterface,
UmbSaveableWorkspaceContextInterface,
@@ -375,6 +371,10 @@ export class UmbMemberWorkspaceContext
return new Date(date).toLocaleString();
}
get memberGroups() {
return this.#get('groups') || [];
}
#get<PropertyName extends keyof UmbMemberDetailModel>(propertyName: PropertyName) {
return this.#currentData.getValue()?.[propertyName];
}

View File

@@ -1,13 +1,14 @@
// import { UMB_COMPOSITION_PICKER_MODAL, type UmbCompositionPickerModalData } from '../../../modals/index.js';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { UMB_MEMBER_WORKSPACE_CONTEXT } from '../../member-workspace.context.js';
import type { UmbMemberDetailModel } from '../../../types.js';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { css, html, customElement, state, when } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry';
import type { UUIBooleanInputEvent } from '@umbraco-cms/backoffice/external/uui';
import './member-workspace-view-member-info.element.js';
import type { UmbInputMemberGroupElement } from '@umbraco-cms/backoffice/member-group';
@customElement('umb-member-workspace-view-member')
export class UmbMemberWorkspaceViewMemberElement extends UmbLitElement implements UmbWorkspaceViewElement {
@@ -37,9 +38,17 @@ export class UmbMemberWorkspaceViewMemberElement extends UmbLitElement implement
#onChange(propertyName: keyof UmbMemberDetailModel, value: UmbMemberDetailModel[keyof UmbMemberDetailModel]) {
if (!this._workspaceContext) return;
console.log('Setting', propertyName, value);
this._workspaceContext.set(propertyName, value);
}
#onGroupsUpdated(event: CustomEvent) {
const uniques = (event.target as UmbInputMemberGroupElement).selectedIds;
this._workspaceContext?.set('groups', uniques);
}
#onPasswordUpdate = () => {
const newPassword = this.shadowRoot?.querySelector<HTMLInputElement>('uui-input[name="newPassword"]')?.value;
const confirmPassword = this.shadowRoot?.querySelector<HTMLInputElement>('uui-input[name="confirmPassword"]')
@@ -147,7 +156,10 @@ export class UmbMemberWorkspaceViewMemberElement extends UmbLitElement implement
${this.#renderPasswordInput()}
<umb-property-layout label="Member Group">
<div slot="editor">MEMBER GROUP PICKER</div>
<umb-input-member-group
slot="editor"
@change=${this.#onGroupsUpdated}
.selectedIds=${this._workspaceContext.memberGroups}></umb-input-member-group>
</umb-property-layout>
<umb-property-layout label="Approved">