+ return html`
${repeat(
- this.value,
- (area) => area,
- (area) => html`
Missing component for a value entry`,
+ this._value,
+ (permission) => permission,
+ (permission, index) => {
+ const showCategoryHeader = this._blockGroups.length && this._blockTypes.length;
+
+ return html`
+ this.#setPermissionKey(e, index)}
+ .value=${permission.elementTypeKey ?? permission.groupKey ?? ''}>
+
+ ${showCategoryHeader ? html`${this.localize.term('general_groups')}` : nothing}
+ ${this.#renderBlockGroups(permission)}
+ ${showCategoryHeader ? html`${this.localize.term('general_elements')}` : nothing}
+ ${this.#renderBlockTypes(permission)}
+
+
+
+ this.#setPermissionMinimumRange(e, index)}>
+ -
+ this.#setPermissionMaximumRange(e, index)}>
+ this.#remove(index)}>
+
+
+
+
`;
+ },
)}
`;
+ label=${this.localize.term('general_add')}
+ @click=${this.#addNewPermission}>
+ ${!this._value.length
+ ? html`
+
+ By default, all block types are allowed in an Area, Use this option to allow only selected types.
+
+ `
+ : nothing} `;
}
- static styles = [UmbTextStyles, css``];
+ #renderBlockGroups(area: UmbBlockGridTypeAreaTypePermission) {
+ return repeat(
+ this._blockGroups,
+ (group) => group.key,
+ (group) =>
+ html`
+ ${group.name}
+ `,
+ );
+ }
+
+ #renderBlockTypes(area: UmbBlockGridTypeAreaTypePermission) {
+ return repeat(
+ this._blockTypes,
+ (block) => block.contentElementTypeKey,
+ (block) =>
+ html`
+ ${block.label}
+ `,
+ );
+ }
+
+ static styles = [
+ UmbTextStyles,
+ css`
+ #permissions {
+ display: flex;
+ flex-direction: column;
+ gap: var(--uui-size-space-3);
+ margin-bottom: var(--uui-size-space-3);
+ }
+
+ #add-button {
+ width: 100%;
+ }
+
+ .permission-setting {
+ flex: 1;
+ display: flex;
+ gap: var(--uui-size-space-6);
+ }
+
+ .permission-setting > uui-combobox {
+ flex: 1;
+ }
+
+ .permission-setting > span {
+ display: flex;
+ gap: var(--uui-size-space-1);
+ align-items: center;
+ }
+
+ uui-combobox strong {
+ padding: 0 var(--uui-size-space-1);
+ }
+ `,
+ ];
}
export default UmbPropertyEditorUIBlockGridAreaTypePermissionElement;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-areas-config/property-editor-ui-block-grid-areas-config.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-areas-config/property-editor-ui-block-grid-areas-config.element.ts
index 55edaf9fd0..551ee938fb 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-areas-config/property-editor-ui-block-grid-areas-config.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-areas-config/property-editor-ui-block-grid-areas-config.element.ts
@@ -3,9 +3,8 @@ import { UMB_BLOCK_GRID_DEFAULT_LAYOUT_STYLESHEET } from '../../context/block-gr
import { UMB_BLOCK_GRID_AREA_TYPE_WORKSPACE_MODAL } from '../../components/block-grid-area-config-entry/index.js';
import { UmbBlockGridAreaTypeEntriesContext } from './block-grid-area-type-entries.context.js';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { html, customElement, property, css, state, repeat } from '@umbraco-cms/backoffice/external/lit';
+import { html, customElement, property, state, repeat } from '@umbraco-cms/backoffice/external/lit';
import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
-import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property';
import {
UmbPropertyValueChangeEvent,
@@ -143,8 +142,6 @@ export class UmbPropertyEditorUIBlockGridAreasConfigElement
`
: '';
}
-
- static styles = [UmbTextStyles, css``];
}
export default UmbPropertyEditorUIBlockGridAreasConfigElement;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid.element.ts
index bfe8ed82a6..ae7ab63921 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid.element.ts
@@ -8,7 +8,8 @@ import {
UmbPropertyValueChangeEvent,
type UmbPropertyEditorConfigCollection,
} from '@umbraco-cms/backoffice/property-editor';
-import type { UmbBlockGridTypeModel, UmbBlockGridValueModel, UmbBlockTypeGroup } from '@umbraco-cms/backoffice/block';
+import type { UmbBlockTypeGroup } from '@umbraco-cms/backoffice/block-type';
+import type { UmbBlockGridTypeModel, UmbBlockGridValueModel } from '@umbraco-cms/backoffice/block-grid';
import type { NumberRangeValueType } from '@umbraco-cms/backoffice/models';
import '../../components/block-grid-entries/index.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-group-configuration/property-editor-ui-block-grid-group-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-group-configuration/property-editor-ui-block-grid-group-configuration.element.ts
index 055ca023e3..c4d9db8862 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-group-configuration/property-editor-ui-block-grid-group-configuration.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-group-configuration/property-editor-ui-block-grid-group-configuration.element.ts
@@ -4,7 +4,7 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { UmbId } from '@umbraco-cms/backoffice/id';
-import type { UmbBlockGridTypeGroupType } from '@umbraco-cms/backoffice/block';
+import type { UmbBlockGridTypeGroupType } from '@umbraco-cms/backoffice/block-grid';
@customElement('umb-property-editor-ui-block-grid-group-configuration')
export class UmbPropertyEditorUIBlockGridGroupConfigurationElement
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts
index 04a95ec941..359b4998b2 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-type-configuration/property-editor-ui-block-grid-type-configuration.element.ts
@@ -1,21 +1,31 @@
import type { UmbBlockTypeWithGroupKey, UmbInputBlockTypeElement } from '../../../block-type/index.js';
import '../../../block-type/components/input-block-type/index.js';
import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
-import { html, customElement, property, state, repeat, nothing, css } from '@umbraco-cms/backoffice/external/lit';
+import {
+ html,
+ customElement,
+ property,
+ state,
+ repeat,
+ nothing,
+ css,
+ ifDefined,
+} from '@umbraco-cms/backoffice/external/lit';
import {
UmbPropertyValueChangeEvent,
type UmbPropertyEditorConfigCollection,
} from '@umbraco-cms/backoffice/property-editor';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import {
- UMB_BLOCK_GRID_TYPE,
- type UmbBlockGridTypeGroupType,
- type UmbBlockGridGroupTypeConfiguration,
-} from '@umbraco-cms/backoffice/block';
+import { UMB_BLOCK_GRID_TYPE, type UmbBlockGridTypeGroupType } from '@umbraco-cms/backoffice/block-grid';
import type { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
import { UMB_PROPERTY_DATASET_CONTEXT, type UmbPropertyDatasetContext } from '@umbraco-cms/backoffice/property';
import { UMB_WORKSPACE_MODAL, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/modal';
+import { UmbSorterController } from '@umbraco-cms/backoffice/sorter';
+
+interface MappedGroupWithBlockTypes extends UmbBlockGridTypeGroupType {
+ blocks: Array
;
+}
/**
* @element umb-property-editor-ui-block-grid-type-configuration
@@ -25,6 +35,23 @@ export class UmbPropertyEditorUIBlockGridTypeConfigurationElement
extends UmbLitElement
implements UmbPropertyEditorUiElement
{
+ #sorter = new UmbSorterController(this, {
+ getUniqueOfElement: (element) => element.getAttribute('data-umb-group-key'),
+ getUniqueOfModel: (modelEntry) => modelEntry.key!,
+ itemSelector: '.group',
+ draggableSelector: '.group-handle',
+ containerSelector: '#groups',
+ onChange: ({ model }) => {
+ this._groupsWithBlockTypes = model;
+ },
+ onEnd: () => {
+ this.#datasetContext?.setPropertyValue(
+ 'blockGroups',
+ this._groupsWithBlockTypes.map((group) => ({ key: group.key, name: group.name })),
+ );
+ },
+ });
+
#datasetContext?: UmbPropertyDatasetContext;
#blockTypeWorkspaceModalRegistration?: UmbModalRouteRegistrationController<
typeof UMB_WORKSPACE_MODAL.DATA,
@@ -47,7 +74,10 @@ export class UmbPropertyEditorUIBlockGridTypeConfigurationElement
private _blockGroups: Array = [];
@state()
- private _mappedValuesAndGroups: Array = [];
+ private _groupsWithBlockTypes: Array = [];
+
+ @state()
+ private _notGroupedBlockTypes: Array = [];
@state()
private _workspacePath?: string;
@@ -77,20 +107,24 @@ export class UmbPropertyEditorUIBlockGridTypeConfigurationElement
this._blockGroups = (value as Array) ?? [];
this.#mapValuesToBlockGroups();
});
- this.observe(await this.#datasetContext.propertyValueByAlias('blocks'), () => {
+ this.observe(await this.#datasetContext.propertyValueByAlias('blocks'), (value) => {
+ this.value = (value as Array) ?? [];
this.#mapValuesToBlockGroups();
});
}
#mapValuesToBlockGroups() {
- // What if a block is in a group that does not exist in the block groups? Should it be removed? (Right now they will never be rendered)
- const valuesWithNoGroup = this._value.filter((value) => !value.groupKey);
+ // Map blocks that are not in any group, or in a group that does not exist
+ this._notGroupedBlockTypes = this._value.filter(
+ (block) => !block.groupKey || !this._blockGroups.find((group) => group.key === block.groupKey),
+ );
- const valuesWithGroup = this._blockGroups.map((group) => {
+ // Map blocks to the group they belong to
+ this._groupsWithBlockTypes = this._blockGroups.map((group) => {
return { name: group.name, key: group.key, blocks: this._value.filter((value) => value.groupKey === group.key) };
});
- this._mappedValuesAndGroups = [{ blocks: valuesWithNoGroup }, ...valuesWithGroup];
+ this.#sorter.setModel(this._groupsWithBlockTypes);
}
#onChange(e: CustomEvent, groupKey?: string) {
@@ -100,21 +134,22 @@ export class UmbPropertyEditorUIBlockGridTypeConfigurationElement
this.dispatchEvent(new UmbPropertyValueChangeEvent());
}
- #onCreate(e: CustomEvent, groupKey: string | null) {
+ #onCreate(e: CustomEvent, groupKey?: string) {
const selectedElementType = e.detail.contentElementTypeKey;
if (selectedElementType) {
- this.#blockTypeWorkspaceModalRegistration?.open({}, 'create/' + selectedElementType + '/' + groupKey);
+ this.#blockTypeWorkspaceModalRegistration?.open({}, 'create/' + selectedElementType + '/' + (groupKey ?? null));
}
}
+ // TODO: Implement confirm dialog
#deleteGroup(groupKey: string) {
this.#datasetContext?.setPropertyValue(
'blockGroups',
this._blockGroups.filter((group) => group.key !== groupKey),
);
- // Should blocks that belonged to the removed group be deleted as well?
- this.value = this._value.filter((block) => block.groupKey !== groupKey);
+ // If a group is deleted, Move the blocks to no group:
+ this.value = this._value.map((block) => (block.groupKey === groupKey ? { ...block, groupKey: undefined } : block));
}
#changeGroupName(e: UUIInputEvent, groupKey: string) {
@@ -126,45 +161,69 @@ export class UmbPropertyEditorUIBlockGridTypeConfigurationElement
}
render() {
- return html`${repeat(
- this._mappedValuesAndGroups,
- (group) => group.key,
- (group) =>
- html`${group.key ? this.#renderGroupInput(group.key, group.name) : nothing}
-
+ ${this._notGroupedBlockTypes
+ ? html` this.#onCreate(e, group.key ?? null)}
- @change=${(e: CustomEvent) => this.#onChange(e, group.key)}>`,
- )}`;
+ @create=${(e: CustomEvent) => this.#onCreate(e, undefined)}
+ @change=${(e: CustomEvent) => this.#onChange(e, undefined)}>`
+ : ''}
+ ${repeat(
+ this._groupsWithBlockTypes,
+ (group) => group.key,
+ (group) =>
+ html`
+ ${group.key ? this.#renderGroupInput(group.key, group.name) : nothing}
+ this.#onCreate(e, group.key)}
+ @change=${(e: CustomEvent) => this.#onChange(e, group.key)}>
+
`,
+ )}
+