adjustments

This commit is contained in:
Niels Lyngsø
2024-02-09 13:03:34 +01:00
parent f717203af6
commit c33d1a7de6
7 changed files with 47 additions and 25 deletions

View File

@@ -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;
}

View File

@@ -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(

View File

@@ -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 = [

View File

@@ -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;
});

View File

@@ -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);

View File

@@ -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();

View File

@@ -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' } };