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

render property editor ui config

Browse Source
This commit is contained in:
Mads Rasmussen
2022-09-23 15:05:16 +02:00
parent 9adfb4bbf1
commit 1407a370b0
15 changed files with 1077 additions and 695 deletions
Download Patch File Download Diff File Expand all files Collapse all files

174
src/Umbraco.Web.UI.Client/schemas/api/api.yml
View File

@@ -105,6 +105,66 @@ paths:
application/json:
schema:
$ref: '#/components/schemas/ProblemDetails'
/property-editors/list:
get:
operationId: PropertyEditorsListRequest
responses:
'200':
description: 200 response
content:
application/json:
schema:
$ref: '#/components/schemas/PropertyEditorsListResponse'
default:
description: default response
content:
application/json:
schema:
$ref: '#/components/schemas/ProblemDetails'
/property-editors/property-editor/{propertyEditorAlias}:
get:
operationId: PropertyEditorRequest
parameters:
- name: propertyEditorAlias
in: path
required: true
schema:
type: string
responses:
'200':
description: 200 response
content:
application/json:
schema:
$ref: '#/components/schemas/PropertyEditorResponse'
default:
description: default response
content:
application/json:
schema:
$ref: '#/components/schemas/ProblemDetails'
/property-editors/property-editor/config/{propertyEditorAlias}:
get:
operationId: PropertyEditorConfigRequest
parameters:
- name: propertyEditorAlias
in: path
required: true
schema:
type: string
responses:
'200':
description: 200 response
content:
application/json:
schema:
$ref: '#/components/schemas/PropertyEditorConfigResponse'
default:
description: default response
content:
application/json:
schema:
$ref: '#/components/schemas/ProblemDetails'
/server/status:
get:
operationId: GetStatus
@@ -527,20 +587,21 @@ components:
- meta
- alias
- name
IPrevalueField:
PropertyEditorConfigProperty:
type: object
properties:
label:
type: string
description:
type: string
key:
alias:
type: string
view:
propertyEditorUI:
type: string
required:
- key
- view
- label
- alias
- propertyEditorUI
MetaPropertyEditorUI:
type: object
properties:
@@ -550,17 +611,17 @@ components:
type: string
group:
type: string
prevalues:
config:
type: object
properties:
fields:
properties:
type: array
items:
$ref: '#/components/schemas/IPrevalueField'
$ref: '#/components/schemas/PropertyEditorConfigProperty'
defaultConfig:
type: object
required:
- fields
defaultConfig:
type: object
- properties
required:
- propertyEditor
- icon
@@ -838,6 +899,97 @@ components:
$ref: '#/components/schemas/PackageInstalled'
required:
- packages
PropertyEditor:
type: object
properties:
alias:
type: string
name:
type: string
icon:
type: string
group:
type: string
isSystem:
type: boolean
hasConfig:
type: boolean
config:
type: object
properties:
properties:
type: array
items:
$ref: '#/components/schemas/PropertyEditorConfigProperty'
defaultConfig:
type: object
required:
- properties
required:
- alias
- name
- icon
- isSystem
- hasConfig
PropertyEditorsListResponse:
type: object
properties:
propertyEditors:
type: array
items:
$ref: '#/components/schemas/PropertyEditor'
required:
- propertyEditors
PropertyEditorResponse:
type: object
properties:
alias:
type: string
name:
type: string
icon:
type: string
group:
type: string
isSystem:
type: boolean
hasConfig:
type: boolean
config:
type: object
properties:
properties:
type: array
items:
$ref: '#/components/schemas/PropertyEditorConfigProperty'
defaultConfig:
type: object
required:
- properties
required:
- alias
- name
- icon
- isSystem
- hasConfig
PropertyEditorConfigResponse:
type: object
properties:
propertyEditorAlias:
type: string
config:
type: object
properties:
properties:
type: array
items:
$ref: '#/components/schemas/PropertyEditorConfigProperty'
defaultConfig:
type: object
required:
- properties
required:
- propertyEditorAlias
ServerStatus:
type: string
enum:

1167
src/Umbraco.Web.UI.Client/schemas/generated-schema.ts
View File

File diff suppressed because it is too large Load Diff

53
src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/shared/property-editor-config.element.ts
View File

@@ -1,10 +1,14 @@
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { html, LitElement } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { ifDefined } from 'lit-html/directives/if-defined.js';
import { Subscription } from 'rxjs';
import { UmbContextConsumerMixin } from '../../../../core/context';
import { UmbExtensionRegistry } from '../../../../core/extension';
import { UmbPropertyEditorConfigStore } from '../../../../core/stores/property-editor-config/property-editor-config.store';
import type { PropertyEditorConfigProperty } from '../../../../core/models';
import '../../../components/entity-property/entity-property.element';
@customElement('umb-property-editor-config')
@@ -23,15 +27,33 @@ export class UmbPropertyEditorConfigElement extends UmbContextConsumerMixin(LitE
this._observePropertyEditorConfig();
}
private _propertyEditorUIAlias = '';
@property({ type: String, attribute: 'property-editor-ui-alias' })
public get propertyEditorUIAlias(): string {
return this._propertyEditorUIAlias;
}
public set propertyEditorUIAlias(value: string) {
const oldVal = this._propertyEditorUIAlias;
this._propertyEditorUIAlias = value;
this.requestUpdate('propertyEditorUIAlias', oldVal);
this._observePropertyEditorUIConfig();
}
@property({ type: Array })
public data: Array<any> = [];
@state()
private _properties: Array<any> = [];
private _properties: Array<PropertyEditorConfigProperty> = [];
private _propertyEditorConfigProperties: Array<PropertyEditorConfigProperty> = [];
private _propertyEditorUIConfigProperties: Array<PropertyEditorConfigProperty> = [];
private _propertyEditorConfigStore?: UmbPropertyEditorConfigStore;
private _propertyEditorConfigSubscription?: Subscription;
private _extensionRegistry?: UmbExtensionRegistry;
private _propertyEditorUIConfigSubscription?: Subscription;
constructor() {
super();
@@ -39,6 +61,11 @@ export class UmbPropertyEditorConfigElement extends UmbContextConsumerMixin(LitE
this._propertyEditorConfigStore = propertyEditorConfigStore;
this._observePropertyEditorConfig();
});
this.consumeContext('umbExtensionRegistry', (extensionRegistry) => {
this._extensionRegistry = extensionRegistry;
this._observePropertyEditorUIConfig();
});
}
private _observePropertyEditorConfig() {
@@ -50,10 +77,28 @@ export class UmbPropertyEditorConfigElement extends UmbContextConsumerMixin(LitE
?.getByAlias(this.propertyEditorAlias)
.subscribe((propertyEditorConfig) => {
if (!propertyEditorConfig) return;
this._properties = propertyEditorConfig?.properties;
this._propertyEditorConfigProperties = propertyEditorConfig?.config?.properties || [];
this._applyProperties();
});
}
private _observePropertyEditorUIConfig() {
if (!this._extensionRegistry || !this._propertyEditorUIAlias) return;
this._propertyEditorUIConfigSubscription?.unsubscribe();
this._extensionRegistry?.getByAlias(this.propertyEditorUIAlias).subscribe((manifest) => {
if (manifest?.type === 'propertyEditorUI') {
this._propertyEditorUIConfigProperties = manifest?.meta.config?.properties || [];
this._applyProperties();
}
});
}
private _applyProperties() {
this._properties = [...this._propertyEditorConfigProperties, ...this._propertyEditorUIConfigProperties];
}
render() {
return html`
<uui-box headline="Config">
@@ -63,14 +108,14 @@ export class UmbPropertyEditorConfigElement extends UmbContextConsumerMixin(LitE
(property) => html`
<umb-entity-property
label="${property.label}"
description="${property.description}"
description="${ifDefined(property.description)}"
alias="${property.alias}"
property-editor-ui-alias="${property.propertyEditorUI}"
.value=${this.data.find((data) => data.alias === property.alias)?.value}></umb-entity-property>
`
)}
`
: html` <div>No configuration</div> `}
: html`<div>No configuration</div>`}
</uui-box>
`;
}

3
src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/views/edit/editor-view-data-type-edit.element.ts
View File

@@ -60,11 +60,11 @@ export class UmbEditorViewDataTypeEditElement extends UmbContextConsumerMixin(Li
constructor() {
super();
// TODO: wait for more contexts
this.consumeContext('umbModalService', (modalService) => {
this._modalService = modalService;
});
// TODO: wait for more contexts
this.consumeContext('umbDataTypeContext', (dataTypeContext) => {
this._dataTypeContext = dataTypeContext;
this._observeDataType();
@@ -281,6 +281,7 @@ export class UmbEditorViewDataTypeEditElement extends UmbContextConsumerMixin(Li
? html`
<umb-property-editor-config
property-editor-alias="${this._propertyEditorAlias}"
property-editor-ui-alias="${this._propertyEditorUIAlias}"
.data="${this._data}"></umb-property-editor-config>
`
: nothing}

11
src/Umbraco.Web.UI.Client/src/core/api/fetcher.ts
View File

@@ -21,3 +21,14 @@ export const getUpgradeSettings = fetcher.path('/upgrade/settings').method('get'
export const PostUpgradeAuthorize = fetcher.path('/upgrade/authorize').method('post').create();
export const getManifests = fetcher.path('/manifests').method('get').create();
export const getPackagesInstalled = fetcher.path('/manifests/packages/installed').method('get').create();
// Property Editors
export const getPropertyEditorsList = fetcher.path('/property-editors/list').method('get').create();
export const getPropertyEditor = fetcher
.path('/property-editors/property-editor/{propertyEditorAlias}')
.method('get')
.create();
export const getPropertyEditorConfig = fetcher
.path('/property-editors/property-editor/config/{propertyEditorAlias}')
.method('get')
.create();

7
src/Umbraco.Web.UI.Client/src/core/models/index.ts
View File

@@ -31,6 +31,13 @@ export type ManifestCustom = components['schemas']['IManifestCustom'];
export type ManifestPackageView = components['schemas']['IManifestPackageView'];
export type PackageInstalled = components['schemas']['PackageInstalled'];
// Property Editors
export type PropertyEditorsListResponse = components['schemas']['PropertyEditorsListResponse'];
export type PropertyEditorResponse = components['schemas']['PropertyEditorResponse'];
export type PropertyEditorConfigResponse = components['schemas']['PropertyEditorConfigResponse'];
export type PropertyEditor = components['schemas']['PropertyEditor'];
export type PropertyEditorConfigProperty = components['schemas']['PropertyEditorConfigProperty'];
export type ManifestElementType =
| ManifestSection
| ManifestTree

14
src/Umbraco.Web.UI.Client/src/core/stores/property-editor-config/property-editor-config.store.ts
View File

@@ -1,17 +1,19 @@
import { BehaviorSubject, map, Observable } from 'rxjs';
import { PropertyEditorConfig } from '../../../mocks/data/property-editor-config.data';
import { getPropertyEditorConfig } from '../../api/fetcher';
import type { PropertyEditorConfig } from '../../models';
export class UmbPropertyEditorConfigStore {
private _items: BehaviorSubject<Array<PropertyEditorConfig>> = new BehaviorSubject(<Array<PropertyEditorConfig>>[]);
public readonly items: Observable<Array<PropertyEditorConfig>> = this._items.asObservable();
getByAlias(alias: string): Observable<PropertyEditorConfig | undefined> {
// TODO: use Fetcher API.
// TODO: only fetch if the data type is not in the store?
fetch(`/umbraco/backoffice/property-editors/config/${alias}`)
.then((res) => res.json())
.then((data) => {
this.update(data);
getPropertyEditorConfig({ propertyEditorAlias: alias })
.then((res) => {
this.update([res.data]);
})
.catch((err) => {
console.log(err);
});
return this.items.pipe(map((items) => items.find((item) => item.propertyEditorAlias === alias)));

25
src/Umbraco.Web.UI.Client/src/core/stores/property-editor/property-editor.store.ts
View File

@@ -1,29 +1,32 @@
import { BehaviorSubject, map, Observable } from 'rxjs';
import { PropertyEditor } from '../../../mocks/data/property-editor.data';
import type { PropertyEditor } from '../../models';
import { getPropertyEditorsList, getPropertyEditor } from '../../api/fetcher';
export class UmbPropertyEditorStore {
private _items: BehaviorSubject<Array<PropertyEditor>> = new BehaviorSubject(<Array<PropertyEditor>>[]);
public readonly items: Observable<Array<PropertyEditor>> = this._items.asObservable();
getAll(): Observable<Array<PropertyEditor> | []> {
// TODO: use Fetcher API.
// TODO: only fetch if the data type is not in the store?
fetch(`/umbraco/backoffice/property-editors/list`)
.then((res) => res.json())
.then((data) => {
this._items.next(data);
getPropertyEditorsList({})
.then((res) => {
this._items.next(res.data.propertyEditors);
})
.catch((err) => {
console.log(err);
});
return this.items;
}
getByAlias(alias: string): Observable<PropertyEditor | undefined> {
// TODO: use Fetcher API.
// TODO: only fetch if the data type is not in the store?
fetch(`/umbraco/backoffice/property-editors/property-editor/${alias}`)
.then((res) => res.json())
.then((data) => {
this.update(data);
getPropertyEditor({ propertyEditorAlias: alias })
.then((res) => {
this.update([res.data]);
})
.catch((err) => {
console.log(err);
});
return this.items.pipe(map((items) => items.find((item) => item.alias === alias)));

57
src/Umbraco.Web.UI.Client/src/mocks/data/property-editor-config.data.ts
View File

@@ -1,57 +0,0 @@
import { UmbData } from './data';
export interface PropertyEditorConfig {
propertyEditorAlias: string;
properties: Array<PropertyEditorConfigProperty>;
}
export interface PropertyEditorConfigProperty {
alias: string;
label: string;
description: string;
propertyEditorUI: string;
}
export const data: Array<PropertyEditorConfig> = [
{
propertyEditorAlias: 'Umbraco.TextBox',
properties: [
{
alias: 'maxChars',
label: 'Maximum allowed characters',
description: 'If empty, 512 character limit',
propertyEditorUI: 'Umb.PropertyEditorUI.Textarea',
},
],
},
{
propertyEditorAlias: 'Umbraco.TextArea',
properties: [
{
alias: 'maxChars',
label: 'Maximum allowed characters',
description: 'If empty - no character limit',
propertyEditorUI: 'Umb.PropertyEditorUI.Number',
},
{
alias: 'rows',
label: 'Number of rows',
description: 'If empty - 10 rows would be set as the default value',
propertyEditorUI: 'Umb.PropertyEditorUI.Number',
},
],
},
];
// Temp mocked database
class UmbPropertyEditorConfigData extends UmbData<PropertyEditorConfig> {
constructor() {
super(data);
}
getByAlias(alias: string) {
return this.data.find((x) => x.propertyEditorAlias === alias);
}
}
export const umbPropertyEditorConfigData = new UmbPropertyEditorConfigData();

109
src/Umbraco.Web.UI.Client/src/mocks/data/property-editor.data.ts
View File

@@ -1,19 +1,11 @@
import { UmbData } from './data';
export interface PropertyEditor {
alias: string;
name: string;
icon: string;
group?: string;
isSystem: boolean;
hasPrevalues: boolean;
}
import type { PropertyEditor } from '../../core/models';
export const data: Array<PropertyEditor> = [
{
isSystem: false,
group: 'Pickers',
hasPrevalues: true,
hasConfig: true,
name: 'Color Picker',
icon: 'umb:colorpicker',
alias: 'Umbraco.ColorPicker',
@@ -21,7 +13,7 @@ export const data: Array<PropertyEditor> = [
{
isSystem: false,
group: 'Pickers',
hasPrevalues: true,
hasConfig: true,
name: 'Content Picker',
icon: 'umb:autofill',
alias: 'Umbraco.ContentPicker',
@@ -29,7 +21,7 @@ export const data: Array<PropertyEditor> = [
{
isSystem: false,
group: 'Pickers',
hasPrevalues: true,
hasConfig: true,
name: 'Eye Dropper Color Picker',
icon: 'umb:colorpicker',
alias: 'Umbraco.ColorPicker.EyeDropper',
@@ -37,7 +29,7 @@ export const data: Array<PropertyEditor> = [
{
isSystem: false,
group: 'Pickers',
hasPrevalues: true,
hasConfig: true,
name: 'Form Picker',
icon: 'umb:umb-contour',
alias: 'UmbracoForms.FormPicker',
@@ -45,7 +37,7 @@ export const data: Array<PropertyEditor> = [
{
isSystem: false,
group: 'Pickers',
hasPrevalues: false,
hasConfig: false,
name: 'Form Theme Picker',
icon: 'umb:brush',
alias: 'UmbracoForms.ThemePicker',
@@ -53,7 +45,7 @@ export const data: Array<PropertyEditor> = [
{
isSystem: false,
group: 'Pickers',
hasPrevalues: true,
hasConfig: true,
name: 'Multi URL Picker',
icon: 'umb:link',
alias: 'Umbraco.MultiUrlPicker',
@@ -61,7 +53,7 @@ export const data: Array<PropertyEditor> = [
{
isSystem: false,
group: 'Pickers',
hasPrevalues: true,
hasConfig: true,
name: 'Multinode Treepicker',
icon: 'umb:page-add',
alias: 'Umbraco.MultiNodeTreePicker',
@@ -69,7 +61,7 @@ export const data: Array<PropertyEditor> = [
{
isSystem: false,
group: 'Common',
hasPrevalues: true,
hasConfig: true,
name: 'Date/Time',
icon: 'umb:time',
alias: 'Umbraco.DateTime',
@@ -77,7 +69,7 @@ export const data: Array<PropertyEditor> = [
{
isSystem: false,
group: 'Common',
hasPrevalues: true,
hasConfig: true,
name: 'Decimal',
icon: 'umb:autofill',
alias: 'Umbraco.Decimal',
@@ -85,7 +77,7 @@ export const data: Array<PropertyEditor> = [
{
isSystem: false,
group: 'Common',
hasPrevalues: true,
hasConfig: true,
name: 'Email address',
icon: 'umb:message',
alias: 'Umbraco.EmailAddress',
@@ -93,7 +85,7 @@ export const data: Array<PropertyEditor> = [
{
isSystem: false,
group: 'Common',
hasPrevalues: true,
hasConfig: true,
name: 'Label',
icon: 'umb:readonly',
alias: 'Umbraco.Label',
@@ -101,7 +93,7 @@ export const data: Array<PropertyEditor> = [
{
isSystem: false,
group: 'Common',
hasPrevalues: true,
hasConfig: true,
name: 'Numeric',
icon: 'umb:autofill',
alias: 'Umbraco.Integer',
@@ -109,7 +101,7 @@ export const data: Array<PropertyEditor> = [
{
isSystem: false,
group: 'Common',
hasPrevalues: true,
hasConfig: true,
name: 'Open Street Map',
icon: 'umb:map-location',
alias: 'Bergmania.OpenStreetMap',
@@ -117,7 +109,7 @@ export const data: Array<PropertyEditor> = [
{
isSystem: false,
group: 'Common',
hasPrevalues: true,
hasConfig: true,
name: 'Slider',
icon: 'umb:navigation-horizontal',
alias: 'Umbraco.Slider',
@@ -125,7 +117,7 @@ export const data: Array<PropertyEditor> = [
{
isSystem: false,
group: 'Common',
hasPrevalues: true,
hasConfig: true,
name: 'Tags',
icon: 'umb:tags',
alias: 'Umbraco.Tags',
@@ -133,23 +125,43 @@ export const data: Array<PropertyEditor> = [
{
isSystem: false,
group: 'Common',
hasPrevalues: true,
hasConfig: true,
name: 'Textarea',
icon: 'umb:application-window-alt',
alias: 'Umbraco.TextArea',
config: {
properties: [
{
alias: 'maxChars',
label: 'Maximum allowed characters',
description: 'If empty - no character limit',
propertyEditorUI: 'Umb.PropertyEditorUI.Number',
},
],
},
},
{
isSystem: false,
group: 'Common',
hasPrevalues: true,
hasConfig: true,
name: 'Textbox',
icon: 'umb:autofill',
alias: 'Umbraco.TextBox',
config: {
properties: [
{
alias: 'maxChars',
label: 'Maximum allowed characters',
description: 'If empty, 512 character limit',
propertyEditorUI: 'Umb.PropertyEditorUI.Textarea',
},
],
},
},
{
isSystem: false,
group: 'Common',
hasPrevalues: true,
hasConfig: true,
name: 'Toggle',
icon: 'umb:checkbox',
alias: 'Umbraco.TrueFalse',
@@ -157,7 +169,7 @@ export const data: Array<PropertyEditor> = [
{
isSystem: false,
group: 'Rich Content',
hasPrevalues: true,
hasConfig: true,
name: 'Grid layout',
icon: 'umb:layout',
alias: 'Umbraco.Grid',
@@ -165,7 +177,7 @@ export const data: Array<PropertyEditor> = [
{
isSystem: false,
group: 'Rich Content',
hasPrevalues: true,
hasConfig: true,
name: 'Markdown editor',
icon: 'umb:code',
alias: 'Umbraco.MarkdownEditor',
@@ -173,7 +185,7 @@ export const data: Array<PropertyEditor> = [
{
isSystem: false,
group: 'Rich Content',
hasPrevalues: true,
hasConfig: true,
name: 'Rich Text Editor',
icon: 'umb:browser-window',
alias: 'Umbraco.TinyMCE',
@@ -181,7 +193,7 @@ export const data: Array<PropertyEditor> = [
{
isSystem: false,
group: 'People',
hasPrevalues: false,
hasConfig: false,
name: 'Member Group Picker',
icon: 'umb:users-alt',
alias: 'Umbraco.MemberGroupPicker',
@@ -189,7 +201,7 @@ export const data: Array<PropertyEditor> = [
{
isSystem: false,
group: 'People',
hasPrevalues: false,
hasConfig: false,
name: 'Member Picker',
icon: 'umb:user',
alias: 'Umbraco.MemberPicker',
@@ -197,7 +209,7 @@ export const data: Array<PropertyEditor> = [
{
isSystem: false,
group: 'People',
hasPrevalues: false,
hasConfig: false,
name: 'User Picker',
icon: 'umb:user',
alias: 'Umbraco.UserPicker',
@@ -205,7 +217,7 @@ export const data: Array<PropertyEditor> = [
{
isSystem: false,
group: 'Lists',
hasPrevalues: true,
hasConfig: true,
name: 'Block Grid',
icon: 'umb:thumbnail-list',
alias: 'Umbraco.BlockGrid',
@@ -213,7 +225,7 @@ export const data: Array<PropertyEditor> = [
{
isSystem: false,
group: 'Lists',
hasPrevalues: true,
hasConfig: true,
name: 'Block List',
icon: 'umb:thumbnail-list',
alias: 'Umbraco.BlockList',
@@ -221,7 +233,7 @@ export const data: Array<PropertyEditor> = [
{
isSystem: false,
group: 'Lists',
hasPrevalues: true,
hasConfig: true,
name: 'Checkbox list',
icon: 'umb:bulleted-list',
alias: 'Umbraco.CheckBoxList',
@@ -229,7 +241,7 @@ export const data: Array<PropertyEditor> = [
{
isSystem: false,
group: 'Lists',
hasPrevalues: true,
hasConfig: true,
name: 'Dropdown',
icon: 'umb:indent',
alias: 'Umbraco.DropDown.Flexible',
@@ -237,7 +249,7 @@ export const data: Array<PropertyEditor> = [
{
isSystem: false,
group: 'Lists',
hasPrevalues: true,
hasConfig: true,
name: 'List view',
icon: 'umb:thumbnail-list',
alias: 'Umbraco.ListView',
@@ -245,7 +257,7 @@ export const data: Array<PropertyEditor> = [
{
isSystem: false,
group: 'Lists',
hasPrevalues: true,
hasConfig: true,
name: 'Nested Content',
icon: 'umb:thumbnail-list',
alias: 'Umbraco.NestedContent',
@@ -253,7 +265,7 @@ export const data: Array<PropertyEditor> = [
{
isSystem: false,
group: 'Lists',
hasPrevalues: true,
hasConfig: true,
name: 'Radio button list',
icon: 'umb:target',
alias: 'Umbraco.RadioButtonList',
@@ -261,7 +273,7 @@ export const data: Array<PropertyEditor> = [
{
isSystem: false,
group: 'Lists',
hasPrevalues: true,
hasConfig: true,
name: 'Repeatable textstrings',
icon: 'umb:ordered-list',
alias: 'Umbraco.MultipleTextstring',
@@ -269,7 +281,7 @@ export const data: Array<PropertyEditor> = [
{
isSystem: false,
group: 'Media',
hasPrevalues: true,
hasConfig: true,
name: 'File upload',
icon: 'umb:download-alt',
alias: 'Umbraco.UploadField',
@@ -277,7 +289,7 @@ export const data: Array<PropertyEditor> = [
{
isSystem: false,
group: 'Media',
hasPrevalues: true,
hasConfig: true,
name: 'Image Cropper',
icon: 'umb:crop',
alias: 'Umbraco.ImageCropper',
@@ -285,7 +297,7 @@ export const data: Array<PropertyEditor> = [
{
isSystem: false,
group: 'Media',
hasPrevalues: true,
hasConfig: true,
name: 'Media Picker',
icon: 'umb:picture',
alias: 'Umbraco.MediaPicker3',
@@ -293,7 +305,7 @@ export const data: Array<PropertyEditor> = [
{
isSystem: false,
group: 'Media',
hasPrevalues: true,
hasConfig: true,
name: 'Media Picker (legacy)',
icon: 'umb:picture',
alias: 'Umbraco.MediaPicker',
@@ -301,7 +313,7 @@ export const data: Array<PropertyEditor> = [
{
isSystem: false,
group: 'Custom',
hasPrevalues: true,
hasConfig: true,
name: 'Custom Property Editor',
icon: 'umb:autofill',
alias: 'Umbraco.Custom',
@@ -321,6 +333,11 @@ class UmbPropertyEditorData extends UmbData<PropertyEditor> {
getByAlias(alias: string) {
return this.data.find((x) => x.alias === alias);
}
getConfig(alias: string) {
const editor = this.getByAlias(alias);
return editor?.config ?? undefined;
}
}
export const umbPropertyEditorData = new UmbPropertyEditorData();

37
src/Umbraco.Web.UI.Client/src/mocks/domains/property-editor.handlers.ts
View File

@@ -1,33 +1,48 @@
import { rest } from 'msw';
import umbracoPath from '../../core/helpers/umbraco-path';
import type {
PropertyEditorsListResponse,
PropertyEditorResponse,
PropertyEditorConfigResponse,
} from '../../core/models';
import { umbPropertyEditorData } from '../data/property-editor.data';
import { umbPropertyEditorConfigData } from '../data/property-editor-config.data';
// TODO: add schema
export const handlers = [
rest.get('/umbraco/backoffice/property-editors/list', (req, res, ctx) => {
rest.get(umbracoPath('/property-editors/list'), (req, res, ctx) => {
const propertyEditors = umbPropertyEditorData.getAll();
return res(ctx.status(200), ctx.json(propertyEditors));
const response = {
propertyEditors,
};
return res(ctx.status(200), ctx.json<PropertyEditorsListResponse>(response));
}),
rest.get('/umbraco/backoffice/property-editors/property-editor/:alias', (req, res, ctx) => {
console.warn('Please move to schema');
const alias = req.params.alias as string;
if (!alias) return;
const propertyEditor = umbPropertyEditorData.getByAlias(alias);
return res(ctx.status(200), ctx.json([propertyEditor]));
if (propertyEditor) {
return res(ctx.status(200), ctx.json<PropertyEditorResponse>(propertyEditor));
} else {
return res(ctx.status(404));
}
}),
rest.get('/umbraco/backoffice/property-editors/config/:alias', (req, res, ctx) => {
console.warn('Please move to schema');
rest.get('/umbraco/backoffice/property-editors/property-editor/config/:alias', (req, res, ctx) => {
const alias = req.params.alias as string;
if (!alias) return;
const propertyEditorConfig = umbPropertyEditorConfigData.getByAlias(alias);
const response = propertyEditorConfig ? [propertyEditorConfig] : [];
return res(ctx.status(200), ctx.json(response));
const config = umbPropertyEditorData.getConfig(alias);
const response = {
propertyEditorAlias: alias,
config: config,
};
return res(ctx.status(200), ctx.json<PropertyEditorConfigResponse>(response));
}),
];

19
src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts
View File

@@ -151,6 +151,16 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
icon: 'edit',
group: 'common',
propertyEditor: 'Umbraco.TextArea',
config: {
properties: [
{
alias: 'rows',
label: 'Number of rows',
description: 'If empty - 10 rows would be set as the default value',
propertyEditorUI: 'Umb.PropertyEditorUI.Number',
},
],
},
},
},
{
@@ -162,6 +172,15 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
icon: 'favorite',
group: 'common',
propertyEditor: 'Umbraco.Custom',
config: {
properties: [
{
label: 'Some Configuration',
alias: 'someConfiruation',
propertyEditorUI: 'Umb.PropertyEditorUI.Text',
},
],
},
},
},
{

1
src/Umbraco.Web.UI.Client/temp-schema-generator/api.ts
View File

@@ -3,6 +3,7 @@ import './manifests';
import './server';
import './upgrader';
import './user';
import './property-editors';
import { api } from '@airtasker/spot';

17
src/Umbraco.Web.UI.Client/temp-schema-generator/manifests.ts
View File

@@ -1,6 +1,7 @@
import { body, defaultResponse, endpoint, response } from '@airtasker/spot';
import { ProblemDetails } from './models';
import { PropertyEditorConfig } from './property-editors';
@endpoint({ method: 'GET', path: '/manifests' })
export class Manifests {
@@ -78,20 +79,6 @@ export interface IManifest {
name: string;
}
export interface IPrevalueField {
label?: string;
description?: string;
key: string;
view: string;
}
export interface IPrevalues {
prevalues?: {
fields: IPrevalueField[];
};
defaultConfig?: {};
}
export interface MetaSection {
pathname: string;
weight: number;
@@ -112,7 +99,7 @@ export interface MetaTreeItemAction {
icon: string;
weight: number;
}
export interface MetaPropertyEditorUI extends IPrevalues {
export interface MetaPropertyEditorUI extends PropertyEditorConfig {
propertyEditor: string;
icon: string;
group: string;

78
src/Umbraco.Web.UI.Client/temp-schema-generator/property-editors.ts Normal file
View File

@@ -0,0 +1,78 @@
import { body, defaultResponse, endpoint, response, request, pathParams, String } from '@airtasker/spot';
import { ProblemDetails } from './models';
@endpoint({ method: 'GET', path: '/property-editors/list' })
export class PropertyEditorsListEndpoint {
@response({ status: 200 })
response(@body body: PropertyEditorsListResponse) {}
@defaultResponse
default(@body body: ProblemDetails) {}
}
@endpoint({ method: 'GET', path: '/property-editors/property-editor/:propertyEditorAlias' })
export class PropertyEditorEndpoint {
@request
request(
@pathParams
pathParams: {
propertyEditorAlias: String;
}
) {}
@response({ status: 200 })
response(@body body: PropertyEditorResponse) {}
@defaultResponse
default(@body body: ProblemDetails) {}
}
@endpoint({ method: 'GET', path: '/property-editors/property-editor/config/:propertyEditorAlias' })
export class PropertyEditorConfigEndpoint {
@request
request(
@pathParams
pathParams: {
propertyEditorAlias: String;
}
) {}
@response({ status: 200 })
response(@body body: PropertyEditorConfigResponse) {}
@defaultResponse
default(@body body: ProblemDetails) {}
}
export interface PropertyEditorsListResponse {
propertyEditors: PropertyEditor[];
}
export interface PropertyEditorResponse extends PropertyEditor {}
export interface PropertyEditorConfigResponse extends PropertyEditorConfig {
propertyEditorAlias: string;
}
export interface PropertyEditor extends PropertyEditorConfig {
alias: string;
name: string;
icon: string;
group?: string;
isSystem: boolean;
hasConfig: boolean;
}
export interface PropertyEditorConfig {
config?: {
properties: PropertyEditorConfigProperty[];
defaultConfig?: {};
};
}
export interface PropertyEditorConfigProperty {
label: string;
description?: string;
alias: string;
propertyEditorUI: string;
}