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

add member picker, user picker, and member group picker

Browse Source
This commit is contained in:
Mads Rasmussen
2023-01-16 11:58:04 +01:00
parent 4461df40ef
commit 860f00a79d
19 changed files with 333 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.MemberGroupPicker.ts Normal file
View File

@@ -0,0 +1,8 @@
import type { ManifestPropertyEditorModel } from '@umbraco-cms/models';
export const manifest: ManifestPropertyEditorModel = {
type: 'propertyEditorModel',
name: 'Member Group Picker',
alias: 'Umbraco.MemberGroupPicker',
meta: {},
};

8
src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.MemberPicker.ts Normal file
View File

@@ -0,0 +1,8 @@
import type { ManifestPropertyEditorModel } from '@umbraco-cms/models';
export const manifest: ManifestPropertyEditorModel = {
type: 'propertyEditorModel',
name: 'Member Picker',
alias: 'Umbraco.MemberPicker',
meta: {},
};

8
src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.UserPicker.ts Normal file
View File

@@ -0,0 +1,8 @@
import type { ManifestPropertyEditorModel } from '@umbraco-cms/models';
export const manifest: ManifestPropertyEditorModel = {
type: 'propertyEditorModel',
name: 'User Picker',
alias: 'Umbraco.UserPicker',
meta: {},
};

24
src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/manifests.ts
View File

@@ -26,6 +26,9 @@ import { manifest as listView } from './Umbraco.ListView';
import { manifest as label } from './Umbraco.Label';
import { manifest as integer } from './Umbraco.Integer';
import { manifest as decimal } from './Umbraco.Decimal';
import { manifest as userPicker } from './Umbraco.UserPicker';
import { manifest as memberPicker } from './Umbraco.MemberPicker';
import { manifest as memberGroupPicker } from './Umbraco.MemberGroupPicker';
import type { ManifestPropertyEditorModel } from '@umbraco-cms/models';
@@ -58,24 +61,9 @@ export const manifests: Array<ManifestPropertyEditorModel> = [
label,
integer,
decimal,
{
type: 'propertyEditorModel',
name: 'Member Group Picker',
alias: 'Umbraco.MemberGroupPicker',
meta: {},
},
{
type: 'propertyEditorModel',
name: 'Member Picker',
alias: 'Umbraco.MemberPicker',
meta: {},
},
{
type: 'propertyEditorModel',
name: 'User Picker',
alias: 'Umbraco.UserPicker',
meta: {},
},
userPicker,
memberPicker,
memberGroupPicker,
{
type: 'propertyEditorModel',
name: 'Icon Picker',

6
src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/manifests.ts
View File

@@ -29,6 +29,9 @@ import { manifest as iconPicker } from './icon-picker/manifests';
import { manifest as label } from './label/manifests';
import { manifest as valueType } from './value-type/manifests';
import { manifests as numbers } from './number/manifests';
import { manifest as userPicker } from './user-picker/manifests';
import { manifest as memberPicker } from './member-picker/manifests';
import { manifest as memberGroupPicker } from './member-group-picker/manifests';
import type { ManifestPropertyEditorUI } from '@umbraco-cms/models';
export const manifests: Array<ManifestPropertyEditorUI> = [
@@ -55,6 +58,9 @@ export const manifests: Array<ManifestPropertyEditorUI> = [
iconPicker,
label,
valueType,
userPicker,
memberPicker,
memberGroupPicker,
...numbers,
...textBoxes,
...treePicker,

14
src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-group-picker/manifests.ts Normal file
View File

@@ -0,0 +1,14 @@
import type { ManifestPropertyEditorUI } from '@umbraco-cms/models';
export const manifest: ManifestPropertyEditorUI = {
type: 'propertyEditorUI',
alias: 'Umb.PropertyEditorUI.MemberGroupPicker',
name: 'Member Group Picker Property Editor UI',
loader: () => import('./property-editor-ui-member-group-picker.element'),
meta: {
label: 'Member Group Picker',
propertyEditorModel: 'Umbraco.MemberGroupPicker',
icon: 'umb:users-alt',
group: 'people',
},
};

30
src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-group-picker/property-editor-ui-member-group-picker.element.ts Normal file
View File

@@ -0,0 +1,30 @@
import { html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { UmbLitElement } from '@umbraco-cms/element';
/**
* @element umb-property-editor-ui-member-group-picker
*/
@customElement('umb-property-editor-ui-member-group-picker')
export class UmbPropertyEditorUIMemberGroupPickerElement extends UmbLitElement {
static styles = [UUITextStyles];
@property()
value = '';
@property({ type: Array, attribute: false })
public config = [];
render() {
return html`<div>umb-property-editor-ui-member-group-picker</div>`;
}
}
export default UmbPropertyEditorUIMemberGroupPickerElement;
declare global {
interface HTMLElementTagNameMap {
'umb-property-editor-ui-member-group-picker': UmbPropertyEditorUIMemberGroupPickerElement;
}
}

15
src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-group-picker/property-editor-ui-member-group-picker.stories.ts Normal file
View File

@@ -0,0 +1,15 @@
import { Meta, Story } from '@storybook/web-components';
import { html } from 'lit-html';
import type { UmbPropertyEditorUIMemberGroupPickerElement } from './property-editor-ui-member-group-picker.element';
import './property-editor-ui-member-group-picker.element';
export default {
title: 'Property Editor UIs/Member Group Picker',
component: 'umb-property-editor-ui-member-group-picker',
id: 'umb-property-editor-ui-member-group-picker',
} as Meta;
export const AAAOverview: Story<UmbPropertyEditorUIMemberGroupPickerElement> = () =>
html`<umb-property-editor-ui-member-group-picker></umb-property-editor-ui-member-group-picker>`;
AAAOverview.storyName = 'Overview';

21
src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-group-picker/property-editor-ui-member-group-picker.test.ts Normal file
View File

@@ -0,0 +1,21 @@
import { expect, fixture, html } from '@open-wc/testing';
import { UmbPropertyEditorUIMemberGroupPickerElement } from './property-editor-ui-member-group-picker.element';
import { defaultA11yConfig } from '@umbraco-cms/test-utils';
describe('UmbPropertyEditorUIMemberGroupPickerElement', () => {
let element: UmbPropertyEditorUIMemberGroupPickerElement;
beforeEach(async () => {
element = await fixture(
html` <umb-property-editor-ui-member-group-picker></umb-property-editor-ui-member-group-picker> `
);
});
it('is defined with its own instance', () => {
expect(element).to.be.instanceOf(UmbPropertyEditorUIMemberGroupPickerElement);
});
it('passes the a11y audit', async () => {
await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
});
});

14
src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-picker/manifests.ts Normal file
View File

@@ -0,0 +1,14 @@
import type { ManifestPropertyEditorUI } from '@umbraco-cms/models';
export const manifest: ManifestPropertyEditorUI = {
type: 'propertyEditorUI',
alias: 'Umb.PropertyEditorUI.MemberPicker',
name: 'Member Picker Property Editor UI',
loader: () => import('./property-editor-ui-member-picker.element'),
meta: {
label: 'Member Picker',
propertyEditorModel: 'Umbraco.MemberPicker',
icon: 'umb:user',
group: 'people',
},
};

30
src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-picker/property-editor-ui-member-picker.element.ts Normal file
View File

@@ -0,0 +1,30 @@
import { html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { UmbLitElement } from '@umbraco-cms/element';
/**
* @element umb-property-editor-ui-member-picker
*/
@customElement('umb-property-editor-ui-member-picker')
export class UmbPropertyEditorUIMemberPickerElement extends UmbLitElement {
static styles = [UUITextStyles];
@property()
value = '';
@property({ type: Array, attribute: false })
public config = [];
render() {
return html`<div>umb-property-editor-ui-member-picker</div>`;
}
}
export default UmbPropertyEditorUIMemberPickerElement;
declare global {
interface HTMLElementTagNameMap {
'umb-property-editor-ui-member-picker': UmbPropertyEditorUIMemberPickerElement;
}
}

15
src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-picker/property-editor-ui-member-picker.stories.ts Normal file
View File

@@ -0,0 +1,15 @@
import { Meta, Story } from '@storybook/web-components';
import { html } from 'lit-html';
import type { UmbPropertyEditorUIMemberPickerElement } from './property-editor-ui-member-picker.element';
import './property-editor-ui-member-picker.element';
export default {
title: 'Property Editor UIs/Member Picker',
component: 'umb-property-editor-ui-member-picker',
id: 'umb-property-editor-ui-member-picker',
} as Meta;
export const AAAOverview: Story<UmbPropertyEditorUIMemberPickerElement> = () =>
html`<umb-property-editor-ui-member-picker></umb-property-editor-ui-member-picker>`;
AAAOverview.storyName = 'Overview';

21
src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/member-picker/property-editor-ui-member-picker.test.ts Normal file
View File

@@ -0,0 +1,21 @@
import { expect, fixture, html } from '@open-wc/testing';
import { UmbPropertyEditorUIMemberPickerElement } from './property-editor-ui-member-picker.element';
import { defaultA11yConfig } from '@umbraco-cms/test-utils';
describe('UmbPropertyEditorUIMemberPickerElement', () => {
let element: UmbPropertyEditorUIMemberPickerElement;
beforeEach(async () => {
element = await fixture(
html` <umb-property-editor-ui-member-picker></umb-property-editor-ui-member-picker> `
);
});
it('is defined with its own instance', () => {
expect(element).to.be.instanceOf(UmbPropertyEditorUIMemberPickerElement);
});
it('passes the a11y audit', async () => {
await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
});
});

14
src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/user-picker/manifests.ts Normal file
View File

@@ -0,0 +1,14 @@
import type { ManifestPropertyEditorUI } from '@umbraco-cms/models';
export const manifest: ManifestPropertyEditorUI = {
type: 'propertyEditorUI',
alias: 'Umb.PropertyEditorUI.UserPicker',
name: 'User Picker Property Editor UI',
loader: () => import('./property-editor-ui-user-picker.element'),
meta: {
label: 'User Picker',
propertyEditorModel: 'Umbraco.UserPicker',
icon: 'umb:user',
group: 'people',
},
};

30
src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/user-picker/property-editor-ui-user-picker.element.ts Normal file
View File

@@ -0,0 +1,30 @@
import { html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { UmbLitElement } from '@umbraco-cms/element';
/**
* @element umb-property-editor-ui-user-picker
*/
@customElement('umb-property-editor-ui-user-picker')
export class UmbPropertyEditorUIUserPickerElement extends UmbLitElement {
static styles = [UUITextStyles];
@property()
value = '';
@property({ type: Array, attribute: false })
public config = [];
render() {
return html`<div>umb-property-editor-ui-user-picker</div>`;
}
}
export default UmbPropertyEditorUIUserPickerElement;
declare global {
interface HTMLElementTagNameMap {
'umb-property-editor-ui-user-picker': UmbPropertyEditorUIUserPickerElement;
}
}

15
src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/user-picker/property-editor-ui-user-picker.stories.ts Normal file
View File

@@ -0,0 +1,15 @@
import { Meta, Story } from '@storybook/web-components';
import { html } from 'lit-html';
import type { UmbPropertyEditorUIUserPickerElement } from './property-editor-ui-user-picker.element';
import './property-editor-ui-user-picker.element';
export default {
title: 'Property Editor UIs/User Picker',
component: 'umb-property-editor-ui-user-picker',
id: 'umb-property-editor-ui-user-picker',
} as Meta;
export const AAAOverview: Story<UmbPropertyEditorUIUserPickerElement> = () =>
html`<umb-property-editor-ui-user-picker></umb-property-editor-ui-user-picker>`;
AAAOverview.storyName = 'Overview';

21
src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/user-picker/property-editor-ui-user-picker.test.ts Normal file
View File

@@ -0,0 +1,21 @@
import { expect, fixture, html } from '@open-wc/testing';
import { UmbPropertyEditorUIUserPickerElement } from './property-editor-ui-user-picker.element';
import { defaultA11yConfig } from '@umbraco-cms/test-utils';
describe('UmbPropertyEditorUIUserPickerElement', () => {
let element: UmbPropertyEditorUIUserPickerElement;
beforeEach(async () => {
element = await fixture(
html` <umb-property-editor-ui-user-picker></umb-property-editor-ui-user-picker> `
);
});
it('is defined with its own instance', () => {
expect(element).to.be.instanceOf(UmbPropertyEditorUIUserPickerElement);
});
it('passes the a11y audit', async () => {
await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
});
});

39
src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts
View File

@@ -473,6 +473,45 @@ export const data: Array<DataTypeDetails> = [
propertyEditorUIAlias: 'Umb.PropertyEditorUI.Decimal',
data: [],
},
{
name: 'User Picker',
type: 'data-type',
icon: 'umb:autofill',
hasChildren: false,
key: 'dt-userPicker',
isContainer: false,
parentKey: null,
isFolder: false,
propertyEditorModelAlias: 'Umbraco.UserPicker',
propertyEditorUIAlias: 'Umb.PropertyEditorUI.UserPicker',
data: [],
},
{
name: 'Member Picker',
type: 'data-type',
icon: 'umb:autofill',
hasChildren: false,
key: 'dt-memberPicker',
isContainer: false,
parentKey: null,
isFolder: false,
propertyEditorModelAlias: 'Umbraco.MemberPicker',
propertyEditorUIAlias: 'Umb.PropertyEditorUI.MemberPicker',
data: [],
},
{
name: 'Member Group Picker',
type: 'data-type',
icon: 'umb:autofill',
hasChildren: false,
key: 'dt-memberGroupPicker',
isContainer: false,
parentKey: null,
isFolder: false,
propertyEditorModelAlias: 'Umbraco.MemberGroupPicker',
propertyEditorUIAlias: 'Umb.PropertyEditorUI.MemberGroupPicker',
data: [],
},
];
// Temp mocked database

18
src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts
View File

@@ -186,6 +186,24 @@ export const data: Array<DocumentDetails> = [
description: '',
dataTypeKey: 'dt-decimal',
},
{
alias: 'memberPicker',
label: 'Member Picker',
description: '',
dataTypeKey: 'dt-memberPicker',
},
{
alias: 'memberGroupPicker',
label: 'Member Group Picker',
description: '',
dataTypeKey: 'dt-memberGroupPicker',
},
{
alias: 'userPicker',
label: 'User Picker',
description: '',
dataTypeKey: 'dt-userPicker',
},
],
data: [],
variants: [],