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

Merge pull request #1745 from umbraco/feature/property-editor-ui/collection-order-by

Browse Source 
Feature: Collection - syncs Order By with Columns Displayed field
This commit is contained in:
Lee Kelleher
2024-05-07 09:23:47 +01:00
committed by GitHub
parent 3464336641 77c84967b7
commit ef90626d2d
2 changed files with 38 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/Umbraco.Web.UI.Client/src/packages/property-editors/collection/config/order-by/order-by.element.ts
View File

@@ -1,34 +1,44 @@
import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
import type { UUISelectEvent } from '@umbraco-cms/backoffice/external/uui';
import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor';
import type { UmbCollectionColumnConfiguration } from '../../../../core/collection/types.js';
import { customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor';
import { UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property';
import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
import type { UUISelectEvent } from '@umbraco-cms/backoffice/external/uui';
/**
* @element umb-property-editor-ui-collection-order-by
*/
@customElement('umb-property-editor-ui-collection-order-by')
export class UmbPropertyEditorUICollectionOrderByElement extends UmbLitElement implements UmbPropertyEditorUiElement {
private _value = '';
@property()
public set value(v: string) {
this._value = v;
this._options = this._options.map((option) => (option.value === v ? { ...option, selected: true } : option));
}
public get value() {
return this._value;
}
public value: string = '';
public config?: UmbPropertyEditorConfigCollection;
@state()
_options: Array<Option> = [
{ value: 'name', name: 'Name' },
{ value: 'updateDate', name: 'Last edited' },
{ value: 'owner', name: 'Created by' },
];
private _options: Array<Option> = [];
@property({ type: Object, attribute: false })
public config?: UmbPropertyEditorConfigCollection;
constructor() {
super();
this.consumeContext(UMB_PROPERTY_DATASET_CONTEXT, async (instance) => {
const workspace = instance;
this.observe(
await workspace.propertyValueByAlias<Array<UmbCollectionColumnConfiguration>>('includeProperties'),
(includeProperties) => {
if (!includeProperties) return;
this._options = includeProperties.map((property) => ({
name: property.header,
value: property.alias,
selected: property.alias === this.value,
}));
},
'_observeIncludeProperties',
);
});
}
#onChange(e: UUISelectEvent) {
this.value = e.target.value as string;
@@ -36,6 +46,7 @@ export class UmbPropertyEditorUICollectionOrderByElement extends UmbLitElement i
}
render() {
if (!this._options.length) return html`<p><em>Add a column (above) to order by.</em></p>`;
return html`<uui-select label="select" .options=${this._options} @change=${this.#onChange}></uui-select>`;
}
}

14
src/Umbraco.Web.UI.Client/src/packages/property-editors/collection/manifests.ts
View File

@@ -23,13 +23,6 @@ const propertyEditorUiManifest: ManifestPropertyEditorUi = {
description: 'The properties that will be displayed for each column.',
propertyEditorUiAlias: 'Umb.PropertyEditorUi.Collection.LayoutConfiguration',
},
{
alias: 'pageSize',
label: 'Page Size',
description: 'Number of items per page.',
propertyEditorUiAlias: 'Umb.PropertyEditorUi.Number',
config: [{ alias: 'min', value: 0 }],
},
{
alias: 'orderBy',
label: 'Order By',
@@ -41,6 +34,13 @@ const propertyEditorUiManifest: ManifestPropertyEditorUi = {
label: 'Order Direction',
propertyEditorUiAlias: 'Umb.PropertyEditorUi.OrderDirection',
},
{
alias: 'pageSize',
label: 'Page Size',
description: 'Number of items per page.',
propertyEditorUiAlias: 'Umb.PropertyEditorUi.Number',
config: [{ alias: 'min', value: 0 }],
},
{
alias: 'bulkActionPermissions',
label: 'Bulk Action Permissions',