adjustments
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import type { UmbBlockDataType} from '../../block/index.js';
|
||||
import type { UmbBlockDataType } from '../../block/index.js';
|
||||
import { UMB_BLOCK_CATALOGUE_MODAL, UmbBlockEntriesContext } from '../../block/index.js';
|
||||
import type { UmbBlockGridWorkspaceData } from '../index.js';
|
||||
import type { UmbBlockGridLayoutModel, UmbBlockGridTypeModel } from '../types.js';
|
||||
@@ -16,15 +16,15 @@ export class UmbBlockGridEntriesContext extends UmbBlockEntriesContext<
|
||||
#catalogueModal: UmbModalRouteRegistrationController<typeof UMB_BLOCK_CATALOGUE_MODAL.DATA, undefined>;
|
||||
#catalogueRouteBuilder?: UmbModalRouteBuilder;
|
||||
|
||||
setParentKey(contentUdi: string) {
|
||||
this.#catalogueModal.setUniquePathValue('parentUnique', contentUdi);
|
||||
setParentKey(contentUdi: string | null) {
|
||||
this.#catalogueModal.setUniquePathValue('parentUnique', contentUdi ?? 'null');
|
||||
}
|
||||
getParentKey() {
|
||||
return '';
|
||||
}
|
||||
|
||||
setAreaKey(areaKey: string) {
|
||||
this.#catalogueModal.setUniquePathValue('areaKey', areaKey);
|
||||
setAreaKey(areaKey: string | null) {
|
||||
this.#catalogueModal.setUniquePathValue('areaKey', areaKey ?? 'null');
|
||||
}
|
||||
getAreaKey() {
|
||||
return '';
|
||||
@@ -92,6 +92,7 @@ export class UmbBlockGridEntriesContext extends UmbBlockEntriesContext<
|
||||
modalData: UmbBlockGridWorkspaceData,
|
||||
) {
|
||||
await this._retrieveManager;
|
||||
// TODO: Insert layout entry at the right spot.
|
||||
return this._manager?.insert(layoutEntry, content, settings, modalData) ?? false;
|
||||
}
|
||||
|
||||
|
||||
@@ -23,18 +23,18 @@ export class UmbPropertyEditorUIBlockGridEntriesElement extends UmbLitElement {
|
||||
}
|
||||
|
||||
@property({ attribute: false })
|
||||
public set parentUnique(value: string) {
|
||||
public set parentUnique(value: string | null) {
|
||||
this.#context.setParentKey(value);
|
||||
}
|
||||
public get parentUnique(): string {
|
||||
public get parentUnique(): string | null {
|
||||
return this.#context.getParentKey();
|
||||
}
|
||||
|
||||
@property({ attribute: false })
|
||||
public set areaKey(value: string) {
|
||||
public set areaKey(value: string | null) {
|
||||
this.#context.setAreaKey(value);
|
||||
}
|
||||
public get areaKey(): string {
|
||||
public get areaKey(): string | null {
|
||||
return this.#context.getAreaKey();
|
||||
}
|
||||
|
||||
@@ -51,6 +51,16 @@ export class UmbPropertyEditorUIBlockGridEntriesElement extends UmbLitElement {
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* TODO:
|
||||
BLOCK - element with entry(AreaS) context areas observable
|
||||
> AREA 1 - element med entries(Area) context area/entries observable
|
||||
> BLOCK A
|
||||
> BLOCK B
|
||||
> AREA 2
|
||||
> BLOCK C
|
||||
> BLOCK D
|
||||
*/
|
||||
render() {
|
||||
// TODO: Missing ability to jump directly to creating a Block, when there is only one Block Type.
|
||||
return html` ${repeat(
|
||||
|
||||
@@ -102,8 +102,8 @@ export class UmbPropertyEditorUIBlockGridElement extends UmbLitElement implement
|
||||
render() {
|
||||
return html`<umb-property-editor-ui-block-grid-entries
|
||||
.layoutEntries=${this._rootLayouts}
|
||||
.parentUnique=${'root'}
|
||||
.areaKey=${'root'}></umb-property-editor-ui-block-grid-entries>`;
|
||||
.parentUnique=${null}
|
||||
.areaKey=${null}></umb-property-editor-ui-block-grid-entries>`;
|
||||
}
|
||||
|
||||
static styles = [
|
||||
|
||||
@@ -26,7 +26,7 @@ const SORTER_CONFIG: UmbSorterConfig<UmbBlockListLayoutModel, UmbPropertyEditorU
|
||||
getUniqueOfModel: (modelEntry) => {
|
||||
return modelEntry.contentUdi;
|
||||
},
|
||||
identifier: 'block-list-editor',
|
||||
//identifier: 'block-list-editor',
|
||||
itemSelector: 'umb-property-editor-ui-block-list-block',
|
||||
//containerSelector: 'EMPTY ON PURPOSE, SO IT BECOMES THE HOST ELEMENT',
|
||||
};
|
||||
@@ -63,9 +63,9 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement
|
||||
buildUpValue.settingsData ??= [];
|
||||
this._value = buildUpValue as UmbBlockListValueModel;
|
||||
|
||||
this.#context.setLayouts(this._value.layout[UMB_BLOCK_LIST_PROPERTY_EDITOR_ALIAS] ?? []);
|
||||
this.#context.setContents(buildUpValue.contentData);
|
||||
this.#context.setSettings(buildUpValue.settingsData);
|
||||
this.#managerContext.setLayouts(this._value.layout[UMB_BLOCK_LIST_PROPERTY_EDITOR_ALIAS] ?? []);
|
||||
this.#managerContext.setContents(buildUpValue.contentData);
|
||||
this.#managerContext.setSettings(buildUpValue.settingsData);
|
||||
}
|
||||
|
||||
@state()
|
||||
@@ -81,7 +81,7 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement
|
||||
this._limitMax = validationLimit?.max;
|
||||
|
||||
const blocks = config.getValueByAlias<Array<UmbBlockTypeBaseModel>>('blocks') ?? [];
|
||||
this.#context.setBlockTypes(blocks);
|
||||
this.#managerContext.setBlockTypes(blocks);
|
||||
|
||||
const customCreateButtonLabel = config.getValueByAlias<string>('createLabel');
|
||||
if (customCreateButtonLabel) {
|
||||
@@ -91,12 +91,12 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement
|
||||
}
|
||||
|
||||
const useInlineEditingAsDefault = config.getValueByAlias<boolean>('useInlineEditingAsDefault');
|
||||
this.#context.setInlineEditingMode(useInlineEditingAsDefault);
|
||||
this.#managerContext.setInlineEditingMode(useInlineEditingAsDefault);
|
||||
// TODO:
|
||||
//config.useSingleBlockMode, not done jey
|
||||
this.style.maxWidth = config.getValueByAlias<string>('maxPropertyWidth') ?? '';
|
||||
|
||||
this.#context.setEditorConfiguration(config);
|
||||
this.#managerContext.setEditorConfiguration(config);
|
||||
}
|
||||
|
||||
@state()
|
||||
@@ -113,7 +113,7 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement
|
||||
@state()
|
||||
private _catalogueRouteBuilder?: UmbModalRouteBuilder;
|
||||
|
||||
#context = new UmbBlockListManagerContext(this);
|
||||
#managerContext = new UmbBlockListManagerContext(this);
|
||||
#entriesContext = new UmbBlockListEntriesContext(this);
|
||||
|
||||
constructor() {
|
||||
@@ -130,7 +130,7 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement
|
||||
});
|
||||
|
||||
// TODO: Prevent initial notification from these observes:
|
||||
this.observe(this.#context.layouts, (layouts) => {
|
||||
this.observe(this.#managerContext.layouts, (layouts) => {
|
||||
this._value = { ...this._value, layout: { [UMB_BLOCK_LIST_PROPERTY_EDITOR_ALIAS]: layouts } };
|
||||
// Notify that the value has changed.
|
||||
//console.log('layout changed', this._value);
|
||||
@@ -143,21 +143,21 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement
|
||||
// Update sorter.
|
||||
this.#sorter.setModel(layouts);
|
||||
// Update manager:
|
||||
this.#context.setLayouts(layouts);
|
||||
this.#managerContext.setLayouts(layouts);
|
||||
});
|
||||
this.observe(this.#context.contents, (contents) => {
|
||||
this.observe(this.#managerContext.contents, (contents) => {
|
||||
this._value = { ...this._value, contentData: contents };
|
||||
// Notify that the value has changed.
|
||||
//console.log('content changed', this._value);
|
||||
this.dispatchEvent(new UmbChangeEvent());
|
||||
});
|
||||
this.observe(this.#context.settings, (settings) => {
|
||||
this.observe(this.#managerContext.settings, (settings) => {
|
||||
this._value = { ...this._value, settingsData: settings };
|
||||
// Notify that the value has changed.
|
||||
//console.log('settings changed', this._value);
|
||||
this.dispatchEvent(new UmbChangeEvent());
|
||||
});
|
||||
this.observe(this.#context.blockTypes, (blockTypes) => {
|
||||
this.observe(this.#managerContext.blockTypes, (blockTypes) => {
|
||||
this._blocks = blockTypes;
|
||||
});
|
||||
|
||||
|
||||
@@ -22,6 +22,7 @@ export abstract class UmbBlockEntriesContext<
|
||||
|
||||
protected _layoutEntries = new UmbArrayState<BlockLayoutType>([], (x) => x.contentUdi);
|
||||
readonly layoutEntries = this._layoutEntries.asObservable();
|
||||
readonly layoutEntriesLength = this._layoutEntries.asObservablePart((x) => x.length);
|
||||
|
||||
setLayoutEntries(layoutEntries: Array<BlockLayoutType>) {
|
||||
this._layoutEntries.setValue(layoutEntries);
|
||||
|
||||
@@ -56,6 +56,8 @@ export abstract class UmbBlockEntryContext<
|
||||
public readonly content = this.#content.asObservable();
|
||||
public readonly contentTypeKey = this.#content.asObservablePart((x) => x?.contentTypeKey);
|
||||
|
||||
// TODO: Make sure changes to the Block Content / Settings are reflected back to Manager.
|
||||
|
||||
#settings = new UmbObjectState<UmbBlockDataType | undefined>(undefined);
|
||||
public readonly settings = this.#settings.asObservable();
|
||||
|
||||
|
||||
@@ -92,10 +92,18 @@ export abstract class UmbBlockManagerContext<
|
||||
},
|
||||
'observePropertyAlias',
|
||||
);
|
||||
this.observe(
|
||||
propertyContext?.variantId,
|
||||
(variantId) => {
|
||||
// TODO: This might not be the property variant ID, but the content variant ID. Check up on what makes most sense.
|
||||
this.#workspaceModal.setUniquePathValue('variantId', variantId?.toString());
|
||||
},
|
||||
'observePropertyVariantId',
|
||||
);
|
||||
});
|
||||
|
||||
this.#workspaceModal = new UmbModalRouteRegistrationController(this, UMB_BLOCK_WORKSPACE_MODAL)
|
||||
.addUniquePaths(['propertyAlias'])
|
||||
.addUniquePaths(['propertyAlias', 'variantId'])
|
||||
.addAdditionalPath('block')
|
||||
.onSetup(() => {
|
||||
return { data: { entityType: 'block', preset: {} }, modal: { size: 'medium' } };
|
||||
|
||||
Reference in New Issue
Block a user