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

modal data

Browse Source
This commit is contained in:
Niels Lyngsø
2023-05-11 11:00:12 +02:00
parent 6a8db9dcd6
commit dd4a4acb3a
5 changed files with 51 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Umbraco.Web.UI.Client/libs/modal/token/create-dictionary-modal.token.ts
View File

@@ -1,8 +1,6 @@
import { Observable } from 'rxjs';
import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
// TODO: add interface for data
// PropertyTypeViewModelBaseModel
export interface UmbCreateDictionaryModalData {
unique: string | null;
parentName?: Observable<string | undefined>;

2
src/Umbraco.Web.UI.Client/libs/modal/token/import-dictionary-modal.token.ts
View File

@@ -1,7 +1,5 @@
import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
// TODO: add interface for data
// PropertyTypeViewModelBaseModel
export interface UmbImportDictionaryModalData {
unique: string | null;
}

21
src/Umbraco.Web.UI.Client/libs/modal/token/property-settings-modal.token.ts
View File

@@ -1,9 +1,12 @@
import { PropertyTypeResponseModelBaseModel } from '@umbraco-cms/backoffice/backend-api';
import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
// TODO: add interface for data
// PropertyTypeViewModelBaseModel
export interface UmbPropertySettingsModalResult {
export type UmbPropertySettingsModalData = PropertyTypeResponseModelBaseModel;
export type UmbPropertySettingsModalResult = PropertyTypeResponseModelBaseModel;
/*{
label: string;
alias: string;
description: string;
@@ -15,12 +18,12 @@ export interface UmbPropertySettingsModalResult {
pattern: string;
patternMessage: string;
};
}
}*/
export const UMB_PROPERTY_SETTINGS_MODAL = new UmbModalToken<object, UmbPropertySettingsModalResult>(
'Umb.Modal.PropertySettings',
{
type: 'sidebar',
size: 'small',
}
);
export const UMB_PROPERTY_SETTINGS_MODAL = new UmbModalToken<
UmbPropertySettingsModalData,
UmbPropertySettingsModalResult
>('Umb.Modal.PropertySettings', {
type: 'sidebar',
size: 'small',
});

9
src/Umbraco.Web.UI.Client/src/backoffice/core/modals/property-settings/property-settings-modal.element.ts
View File

@@ -7,15 +7,18 @@ import {
UMB_MODAL_CONTEXT_TOKEN,
UMB_PROPERTY_EDITOR_UI_PICKER_MODAL,
UmbPropertySettingsModalResult,
UmbPropertySettingsModalData,
} from '@umbraco-cms/backoffice/modal';
import { ManifestPropertyEditorUI } from '@umbraco-cms/backoffice/extensions-registry';
import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extensions-api';
import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
@customElement('umb-property-settings-modal')
export class UmbPropertySettingsModalElement extends UmbModalBaseElement<object, UmbPropertySettingsModalResult> {
// TODO: Could base take a token to get its types?.
export class UmbPropertySettingsModalElement extends UmbModalBaseElement<
UmbPropertySettingsModalData,
UmbPropertySettingsModalResult
> {
@state() private _selectedPropertyEditorUI?: ManifestPropertyEditorUI;
@state() private _selectedPropertyEditorUIAlias = '';

43
src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts
View File

@@ -1,6 +1,6 @@
import { css, html } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, property } from 'lit/decorators.js';
import { customElement, property, state } from 'lit/decorators.js';
import { PropertyTypeResponseModelBaseModel } from '@umbraco-cms/backoffice/backend-api';
import { UMB_PROPERTY_SETTINGS_MODAL, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/modal';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
@@ -12,6 +12,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
*/
@customElement('document-type-workspace-view-edit-property')
export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement {
private _property?: PropertyTypeResponseModelBaseModel | undefined;
/**
* Property, the data object for the property.
* @type {PropertyTypeResponseModelBaseModel}
@@ -19,7 +20,15 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement {
* @default undefined
*/
@property({ type: Object })
public property?: PropertyTypeResponseModelBaseModel;
public get property(): PropertyTypeResponseModelBaseModel | undefined {
return this._property;
}
public set property(value: PropertyTypeResponseModelBaseModel | undefined) {
const oldValue = this._property;
this._property = value;
this.#modalRegistration.setUniquePathValue('propertyId', value?.id?.toString());
this.requestUpdate('property', oldValue);
}
/**
* Inherited, Determines if the property is part of the main document type thats being edited.
@@ -33,16 +42,30 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement {
#modalRegistration;
@state()
protected _modalRoute?: string;
constructor() {
super();
this.#modalRegistration = new UmbModalRouteRegistrationController(this, UMB_PROPERTY_SETTINGS_MODAL)
.addUniquePaths(
['propertyId']
);
.addUniquePaths(['propertyId'])
.onSetup(() => {
return this.property ?? false;
})
.onSubmit((result) => {
this._partialUpdate(result);
})
.observeRouteBuilder((routeBuilder) => {
this._modalRoute = routeBuilder(null);
});
}
_firePartialUpdate(propertyName: string, value: string | number | boolean | null | undefined) {
_partialUpdate(partialObject: PropertyTypeResponseModelBaseModel) {
this.dispatchEvent(new CustomEvent('partial-property-update', { detail: partialObject }));
}
_singleValueUpdate(propertyName: string, value: string | number | boolean | null | undefined) {
const partialObject = {} as any;
partialObject[propertyName] = value;
@@ -69,23 +92,23 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement {
<uui-input
.value=${this.property.name}
@input=${(e: CustomEvent) => {
if (e.target) this._firePartialUpdate('name', (e.target as HTMLInputElement).value);
if (e.target) this._singleValueUpdate('name', (e.target as HTMLInputElement).value);
}}></uui-input>
<uui-input-lock
.value=${this.property.alias}
@input=${(e: CustomEvent) => {
if (e.target) this._firePartialUpdate('alias', (e.target as HTMLInputElement).value);
if (e.target) this._singleValueUpdate('alias', (e.target as HTMLInputElement).value);
}}></uui-input-lock>
<slot name="property-action-menu"></slot>
<p>
<uui-textarea
.value=${this.property.description}
@input=${(e: CustomEvent) => {
if (e.target) this._firePartialUpdate('description', (e.target as HTMLInputElement).value);
if (e.target) this._singleValueUpdate('description', (e.target as HTMLInputElement).value);
}}></uui-textarea>
</p>
</div>
<div id="editor"></div>
<uui-button id="editor" label="Edit property settings" href=${this._modalRoute}><b></b></uui-button>
`
: '';
}