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

get grid columns from data type

Browse Source
This commit is contained in:
Niels Lyngsø
2024-01-05 14:41:36 +01:00
parent 9efd816b42
commit fe2d641ef6
2 changed files with 45 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-column-span/property-editor-ui-block-grid-column-span.element.ts
View File

@@ -1,4 +1,4 @@
import { html, customElement, property, css, state } from '@umbraco-cms/backoffice/external/lit';
import { html, customElement, property, css, state, repeat } from '@umbraco-cms/backoffice/external/lit';
import { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
@@ -14,13 +14,13 @@ export class UmbPropertyEditorUIBlockGridColumnSpanElement extends UmbLitElement
value: Array<BlockGridColumn> = [];
@state()
private _maxColumns = 12;
private _columnsArray = Array.from(Array(12).keys());
@property({ attribute: false })
public set config(config: UmbPropertyEditorConfigCollection | undefined) {
const maxColumns = config?.getValueByAlias('gridColumns');
const maxColumns = config?.getValueByAlias('maxColumns');
if (typeof maxColumns === 'number') {
this._maxColumns = maxColumns;
this._columnsArray = Array.from(Array(maxColumns).keys());
}
}
@@ -38,21 +38,25 @@ export class UmbPropertyEditorUIBlockGridColumnSpanElement extends UmbLitElement
}
render() {
const template = Array.from({ length: this._maxColumns }, (_, index) => {
const number = index + 1;
let classes = 'default';
const template = repeat(
this._columnsArray,
(index) => index,
(index) => {
const number = index + 1;
let classes = 'default';
if (this.value && this.value.length > 0) {
const applied = this.value.find((column) => column.columnSpan >= index);
const picked = this.value.find((column) => column.columnSpan === index);
classes = picked ? 'picked applied' : applied ? 'applied' : 'default';
}
if (this.value && this.value.length > 0) {
const applied = this.value.find((column) => column.columnSpan >= index);
const picked = this.value.find((column) => column.columnSpan === index);
classes = picked ? 'picked applied' : applied ? 'applied' : 'default';
}
return html`<div class="${classes}" data-index=${index}>
<span>${number}</span>
<button type="button" aria-label=${number} @click=${() => this.#pickColumn(index)}></button>
</div>`;
});
return html`<div class="${classes}" data-index=${index}>
<span>${number}</span>
<button type="button" aria-label=${number} @click=${() => this.#pickColumn(index)}></button>
</div>`;
},
);
return html`<div id="wrapper">${template}</div>`;
}

28
src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-settings.element.ts
View File

@@ -4,6 +4,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry';
import { UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property';
import { UmbInputNumberRangeElement } from '@umbraco-cms/backoffice/components';
import { UMB_DATA_TYPE_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/data-type';
@customElement('umb-block-grid-type-workspace-view')
export class UmbBlockTypeGridWorkspaceViewSettingsElement extends UmbLitElement implements UmbWorkspaceViewElement {
@@ -18,6 +19,9 @@ export class UmbBlockTypeGridWorkspaceViewSettingsElement extends UmbLitElement
@state()
private _rowMaxSpan?: number;
@state()
private _dataTypeGridColumns?: number;
#datasetContext?: typeof UMB_PROPERTY_DATASET_CONTEXT.TYPE;
#onRowSpanChange(e: CustomEvent) {
@@ -27,6 +31,15 @@ export class UmbBlockTypeGridWorkspaceViewSettingsElement extends UmbLitElement
constructor() {
super();
this.consumeContext(UMB_DATA_TYPE_WORKSPACE_CONTEXT, async (context) => {
this.observe(
await context.propertyValueByAlias<undefined | string>('gridColumns'),
(value) => {
this._dataTypeGridColumns = value ? parseInt(value, 10) : undefined;
},
'observeGridColumns',
);
}).exactMatch();
this.consumeContext(UMB_PROPERTY_DATASET_CONTEXT, async (context) => {
this.#datasetContext = context;
// TODO set showSizeOption to true when rowMinSpan or rowMaxSpan is set
@@ -38,21 +51,21 @@ export class UmbBlockTypeGridWorkspaceViewSettingsElement extends UmbLitElement
}
this.removeControllerByAlias('_observeColumnSpanOptions');
},
'_observeColumnSpanOptions',
'observeColumnSpanOptions',
);
this.observe(
await context.propertyValueByAlias<number | undefined>('rowMinSpan'),
(value) => {
this._rowMinSpan = value;
},
'_observeRowMinSpan',
'observeRowMinSpan',
);
this.observe(
await context.propertyValueByAlias<number | undefined>('rowMaxSpan'),
(value) => {
this._rowMaxSpan = value;
},
'_observeRowMaxSpan',
'observeRowMaxSpan',
);
});
}
@@ -102,7 +115,14 @@ export class UmbBlockTypeGridWorkspaceViewSettingsElement extends UmbLitElement
return html`<umb-property
label=${this.localize.term('blockEditor_allowedBlockColumns')}
alias="columnSpanOptions"
property-editor-ui-alias="Umb.PropertyEditorUi.BlockGridColumnSpan"></umb-property>
property-editor-ui-alias="Umb.PropertyEditorUi.BlockGridColumnSpan"
data-test-attr="${this._dataTypeGridColumns + ' '}"
.config=${[
{
alias: 'maxColumns',
value: this._dataTypeGridColumns,
},
]}></umb-property>
<umb-property-layout label=${this.localize.term('blockEditor_allowedBlockRows')}>
<umb-input-number-range
slot="editor"