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

fix context

Browse Source
This commit is contained in:
Jesper Møller Jensen
2023-03-14 15:47:20 +13:00
parent ad02cb0643
commit 10a6e60ac1
4 changed files with 59 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/repository/sources/relation-type.server.data.ts
View File

@@ -100,6 +100,7 @@ export class UmbRelationTypeServerDataSource implements RepositoryDetailDataSour
const requestBody: UpdateRelationTypeRequestModel = { ...RelationType };
console.log('AHSGd');
// TODO: use resources when end point is ready:
return tryExecuteAndNotify<RelationTypeResponseModel>(
this.#host,

30
src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/workspace/relation-type-workspace.context.ts
View File

@@ -1,8 +1,8 @@
import { UmbWorkspaceContext } from '../../../shared/components/workspace/workspace-context/workspace-context';
import { UmbWorkspaceEntityContextInterface } from '../../../shared/components/workspace/workspace-context/workspace-entity-context.interface';
import { UmbRelationTypeRepository } from '../repository/relation-type.repository';
import type { RelationTypeResponseModel } from '@umbraco-cms/backend-api';
import { appendToFrozenArray, ObjectState } from '@umbraco-cms/observable-api';
import type { RelationTypeBaseModel, RelationTypeResponseModel } from '@umbraco-cms/backend-api';
import { ObjectState } from '@umbraco-cms/observable-api';
import { UmbControllerHostInterface } from '@umbraco-cms/controller';
export class UmbRelationTypeWorkspaceContext
@@ -49,26 +49,9 @@ export class UmbRelationTypeWorkspaceContext
this.#data.update({ name });
}
setPropertyEditorAlias(alias?: string) {
this.#data.update({ propertyEditorAlias: alias });
}
setPropertyEditorUiAlias(alias?: string) {
this.#data.update({ propertyEditorUiAlias: alias });
}
// TODO: its not called a property in the model, but we do consider this way in our front-end
setPropertyValue(alias: string, value: unknown) {
const entry = { alias: alias, value: value };
const currentData = this.#data.value;
if (currentData) {
// TODO: make a partial update method for array of data, (idea/concept, use if this case is getting common)
const newDataSet = appendToFrozenArray(currentData.data || [], entry, (x) => x.alias);
this.#data.update({ data: newDataSet });
}
}
async save() {
console.log('WORKSPACE SAVE');
if (!this.#data.value) return;
if (this.isNew) {
await this.repository.create(this.#data.value);
@@ -76,9 +59,14 @@ export class UmbRelationTypeWorkspaceContext
await this.repository.save(this.#data.value);
}
// If it went well, then its not new anymore?.
this.setIsNew(false);
}
update<K extends keyof RelationTypeBaseModel>(key: K, value: RelationTypeBaseModel[K]) {
this.#data.next({ ...this.#data.value, [key]: value });
}
async delete(key: string) {
await this.repository.delete(key);
}

2
src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/workspace/relation-type-workspace.element.ts
View File

@@ -34,6 +34,8 @@ export class UmbRelationTypeWorkspaceElement extends UmbLitElement {
private _RelationTypeName = '';
public load(value: string) {
console.log('load');
this.#workspaceContext?.load(value);
//this._unique = entityKey;
}

169
src/Umbraco.Web.UI.Client/src/backoffice/settings/relation-types/workspace/views/edit/relation-type-workspace-view-edit.element.ts
View File

@@ -1,14 +1,11 @@
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { css, html, nothing } from 'lit';
import { css, html } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { UmbModalContext, UMB_MODAL_CONTEXT_TOKEN } from '../../../../../../core/modal';
import { UUIBooleanInputEvent, UUIRadioGroupElement, UUIRadioGroupEvent, UUIToggleElement } from '@umbraco-ui/uui';
import { ifDefined } from 'lit/directives/if-defined.js';
import { UmbRelationTypeWorkspaceContext } from '../../relation-type-workspace.context';
import { UmbLitElement } from '@umbraco-cms/element';
import type { RelationTypeResponseModel } from '@umbraco-cms/backend-api';
import { umbExtensionsRegistry } from '@umbraco-cms/extensions-api';
import '../../../../../shared/property-editors/shared/property-editor-config/property-editor-config.element';
import '../../../../../shared/components/ref-property-editor-ui/ref-property-editor-ui.element';
import type { RelationTypeBaseModel, RelationTypeResponseModel } from '@umbraco-cms/backend-api';
@customElement('umb-relation-type-workspace-view-edit')
export class UmbRelationTypeWorkspaceViewEditElement extends UmbLitElement {
@@ -23,148 +20,76 @@ export class UmbRelationTypeWorkspaceViewEditElement extends UmbLitElement {
];
@state()
_RelationType?: RelationTypeResponseModel;
private _relationType?: RelationTypeResponseModel;
@state()
private _propertyEditorUIIcon = '';
@state()
private _propertyEditorUIName = '';
@state()
private _propertyEditorUiAlias = '';
@state()
private _propertyEditorAlias = '';
@state()
private _data: Array<any> = [];
private _workspaceContext?: UmbRelationTypeWorkspaceContext;
private _modalContext?: UmbModalContext;
#workspaceContext?: UmbRelationTypeWorkspaceContext;
constructor() {
super();
this.consumeContext(UMB_MODAL_CONTEXT_TOKEN, (instance) => {
this._modalContext = instance;
});
// TODO: Figure out if this is the best way to consume a context or if it could be strongly typed using UmbContextToken
this.consumeContext<UmbRelationTypeWorkspaceContext>('umbWorkspaceContext', (_instance) => {
this._workspaceContext = _instance;
this.consumeContext<UmbRelationTypeWorkspaceContext>('umbWorkspaceContext', (instance) => {
this.#workspaceContext = instance;
this._observeRelationType();
});
}
private _observeRelationType() {
if (!this._workspaceContext) {
if (!this.#workspaceContext) {
return;
}
this.observe(this._workspaceContext.data, (RelationType) => {
if (!RelationType) return;
// TODO: handle if model is not of the type wanted.
this._RelationType = RelationType;
if (this._RelationType.propertyEditorUiAlias !== this._propertyEditorUiAlias) {
this._observePropertyEditorUI(this._RelationType.propertyEditorUiAlias || undefined);
}
if (this._RelationType.data && this._RelationType.data !== this._data) {
this._data = this._RelationType.data;
}
this.observe(this.#workspaceContext.data, (relationType) => {
if (!relationType) return;
this._relationType = relationType as RelationTypeBaseModel;
});
}
private _observePropertyEditorUI(propertyEditorUiAlias?: string) {
if (!propertyEditorUiAlias) return;
this.observe(
umbExtensionsRegistry.getByTypeAndAlias('propertyEditorUI', propertyEditorUiAlias),
(propertyEditorUI) => {
// TODO: show error. We have stored a PropertyEditorUIAlias and can't find the PropertyEditorUI in the registry.
if (!propertyEditorUI) return;
this._propertyEditorUIName = propertyEditorUI?.meta.label ?? propertyEditorUI?.name ?? '';
this._propertyEditorUiAlias = propertyEditorUI?.alias ?? '';
this._propertyEditorUIIcon = propertyEditorUI?.meta.icon ?? '';
this._propertyEditorAlias = propertyEditorUI?.meta.propertyEditorModel ?? '';
this._workspaceContext?.setPropertyEditorAlias(this._propertyEditorAlias);
}
);
#handleDirectionChange(event: UUIRadioGroupEvent) {
const target = event.target as UUIRadioGroupElement;
const value = target.value === 'true';
this.#workspaceContext?.update('isBidirectional', value);
}
private _openPropertyEditorUIPicker() {
if (!this._RelationType) return;
const modalHandler = this._modalContext?.propertyEditorUIPicker({
selection: this._propertyEditorUiAlias ? [this._propertyEditorUiAlias] : [],
});
modalHandler?.onClose().then(({ selection } = {}) => {
if (!selection) return;
this._selectPropertyEditorUI(selection[0]);
});
}
private _selectPropertyEditorUI(propertyEditorUiAlias: string | undefined) {
if (!this._RelationType || this._RelationType.propertyEditorUiAlias === propertyEditorUiAlias) return;
this._workspaceContext?.setPropertyEditorUiAlias(propertyEditorUiAlias);
this._observePropertyEditorUI(propertyEditorUiAlias);
#handleIsDependencyChange(event: UUIBooleanInputEvent) {
const target = event.target as UUIToggleElement;
const value = target.checked;
this.#workspaceContext?.update('isDependency', value);
}
render() {
return html`
<uui-box style="margin-bottom: var(--uui-size-space-5);"> ${this._renderPropertyEditorUI()} </uui-box>
${this._renderConfig()} </uui-box>
<uui-box>
<umb-workspace-property-layout label="Direction">
<uui-radio-group
value=${ifDefined(this._relationType?.isBidirectional)}
@change=${this.#handleDirectionChange}
slot="editor">
<uui-radio label="Parent to child" value="false"></uui-radio>
<uui-radio label="Bidirectional" value="true"></uui-radio>
</uui-radio-group>
</umb-workspace-property-layout>
<umb-workspace-property-layout label="Parent">${this.#renderParentProperty()}</umb-workspace-property-layout>
<umb-workspace-property-layout label="Child"> ${this.#renderChildProperty()} </umb-workspace-property-layout>
<umb-workspace-property-layout label="Is dependency">
<uui-toggle
slot="editor"
@change=${this.#handleIsDependencyChange}
.checked=${this._relationType?.isDependency ?? false}></uui-toggle>
</umb-workspace-property-layout>
</uui-box>
`;
}
private _renderPropertyEditorUI() {
return html`
<umb-workspace-property-layout label="Property Editor" description="Select a property editor">
${this._propertyEditorUiAlias
? html`
<!-- TODO: border is a bit weird attribute name. Maybe single or standalone would be better? -->
<umb-ref-property-editor-ui
slot="editor"
name=${this._propertyEditorUIName}
alias=${this._propertyEditorUiAlias}
property-editor-model-alias=${this._propertyEditorAlias}
border>
<uui-icon name="${this._propertyEditorUIIcon}" slot="icon"></uui-icon>
<uui-action-bar slot="actions">
<uui-button label="Change" @click=${this._openPropertyEditorUIPicker}></uui-button>
</uui-action-bar>
</umb-ref-property-editor-ui>
`
: html`
<uui-button
slot="editor"
label="Select Property Editor"
look="placeholder"
color="default"
@click=${this._openPropertyEditorUIPicker}></uui-button>
`}
</umb-workspace-property-layout>
`;
#renderParentProperty() {
if (this._relationType?.key) return html`<div slot="editor">${this._relationType.parentObjectTypeName}</div>`;
return html`<uui-select slot="editor"></uui-select>`;
}
private _renderConfig() {
return html`
${this._propertyEditorAlias && this._propertyEditorUiAlias
? html`
<uui-box headline="Config">
<umb-property-editor-config
property-editor-ui-alias="${this._propertyEditorUiAlias}"
.data="${this._data}"></umb-property-editor-config>
</uui-box>
`
: nothing}
`;
#renderChildProperty() {
if (this._relationType?.key) return html`<div slot="editor">${this._relationType.parentObjectTypeName}</div>`;
return html`<uui-select slot="editor"></uui-select>`;
}
}