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

Merge pull request #1652 from umbraco/bugfix/document-picker-sorting

Browse Source 
Bugfix: Document Picker sorting
This commit is contained in:
Lee Kelleher
2024-04-18 14:15:11 +01:00
committed by GitHub
parent 9def2d9913 bbcb0ef05f
commit 346b2e8da1
3 changed files with 82 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tree-picker/property-editor-ui-tree-picker.element.ts
View File

@@ -1,11 +1,11 @@
import { html, customElement, 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 { UmbDynamicRootRepository } from '@umbraco-cms/backoffice/dynamic-root';
import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor';
import { UMB_ENTITY_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace';
import type { UmbInputTreeElement } from '@umbraco-cms/backoffice/tree';
import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
import type { UmbInputTreeElement } from '@umbraco-cms/backoffice/tree';
import type { UmbTreePickerSource } from '@umbraco-cms/backoffice/components';
/**
@@ -26,7 +26,7 @@ export class UmbPropertyEditorUITreePickerElement extends UmbLitElement implemen
min = 0;
@state()
max = 0;
max = Infinity;
@state()
allowedContentTypeIds?: string | null;
@@ -42,20 +42,21 @@ export class UmbPropertyEditorUITreePickerElement extends UmbLitElement implemen
#dynamicRootRepository = new UmbDynamicRootRepository(this);
public set config(config: UmbPropertyEditorConfigCollection | undefined) {
const startNode: UmbTreePickerSource | undefined = config?.getValueByAlias('startNode');
if (!config) return;
const startNode = config.getValueByAlias<UmbTreePickerSource>('startNode');
if (startNode) {
this.type = startNode.type;
this.startNodeId = startNode.id;
this.#dynamicRoot = startNode.dynamicRoot;
}
this.min = Number(config?.getValueByAlias('minNumber')) || 0;
this.max = Number(config?.getValueByAlias('maxNumber')) || 0;
this.min = Number(config.getValueByAlias('minNumber')) || 0;
this.max = Number(config.getValueByAlias('maxNumber')) || Infinity;
this.type = config?.getValueByAlias('type') ?? 'content';
this.allowedContentTypeIds = config?.getValueByAlias('filter');
this.showOpenButton = config?.getValueByAlias('showOpenButton');
this.ignoreUserStartNodes = config?.getValueByAlias('ignoreUserStartNodes');
this.allowedContentTypeIds = config.getValueByAlias('filter');
this.showOpenButton = config.getValueByAlias('showOpenButton');
this.ignoreUserStartNodes = config.getValueByAlias('ignoreUserStartNodes');
}
connectedCallback() {
@@ -79,9 +80,8 @@ export class UmbPropertyEditorUITreePickerElement extends UmbLitElement implemen
}
}
#onChange(e: CustomEvent) {
const input = e.target as UmbInputTreeElement;
this.value = input.items;
#onChange(event: CustomEvent & { target: UmbInputTreeElement }) {
this.value = event.target.items;
this.dispatchEvent(new UmbPropertyValueChangeEvent());
}

75
src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document/input-document.element.ts
View File

@@ -1,18 +1,18 @@
import type { UmbDocumentTreeItemModel } from '../../tree/types.js';
import { UmbDocumentPickerContext } from './input-document.context.js';
import { css, html, customElement, property, state, ifDefined, repeat } from '@umbraco-cms/backoffice/external/lit';
import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { css, html, customElement, property, state, repeat } from '@umbraco-cms/backoffice/external/lit';
import { splitStringToArray } from '@umbraco-cms/backoffice/utils';
import { UMB_WORKSPACE_MODAL, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/modal';
import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UmbSorterController } from '@umbraco-cms/backoffice/sorter';
import { UMB_WORKSPACE_MODAL, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/modal';
import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
import type { UmbDocumentItemModel } from '@umbraco-cms/backoffice/document';
@customElement('umb-input-document')
export class UmbInputDocumentElement extends UUIFormControlMixin(UmbLitElement, '') {
#sorter = new UmbSorterController<string>(this, {
getUniqueOfElement: (element) => {
return element.getAttribute('detail');
return element.id;
},
getUniqueOfModel: (modelEntry) => {
return modelEntry;
@@ -22,6 +22,7 @@ export class UmbInputDocumentElement extends UUIFormControlMixin(UmbLitElement,
containerSelector: 'uui-ref-list',
onChange: ({ model }) => {
this.selection = model;
this.dispatchEvent(new UmbChangeEvent());
},
});
@@ -93,7 +94,6 @@ export class UmbInputDocumentElement extends UUIFormControlMixin(UmbLitElement,
@property()
public set value(idsString: string) {
// Its with full purpose we don't call super.value, as thats being handled by the observation of the context selection.
this.selection = splitStringToArray(idsString);
}
public get value() {
@@ -144,7 +144,7 @@ export class UmbInputDocumentElement extends UUIFormControlMixin(UmbLitElement,
return undefined;
}
#pickableFilter: (item: UmbDocumentTreeItemModel) => boolean = (item) => {
#pickableFilter: (item: UmbDocumentItemModel) => boolean = (item) => {
if (this.allowedContentTypeIds && this.allowedContentTypeIds.length > 0) {
return this.allowedContentTypeIds.includes(item.documentType.unique);
}
@@ -155,49 +155,50 @@ export class UmbInputDocumentElement extends UUIFormControlMixin(UmbLitElement,
// TODO: Configure the content picker, with `startNodeId` and `ignoreUserStartNodes` [LK]
this.#pickerContext.openPicker({
hideTreeRoot: true,
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
pickableFilter: this.#pickableFilter,
});
}
#removeItem(item: UmbDocumentItemModel) {
this.#pickerContext.requestRemoveItem(item.unique);
}
render() {
return html`${this.#renderItems()} ${this.#renderAddButton()}`;
}
#renderItems() {
if (!this._items?.length) return;
return html`<uui-ref-list>
${repeat(
this._items,
(item) => item.unique,
(item) => this.#renderItem(item),
)}
</uui-ref-list>`;
}
#renderAddButton() {
if (this.max === 1 && this.selection.length >= this.max) return;
return html`<uui-button
id="add-button"
look="placeholder"
@click=${this.#openPicker}
label=${this.localize.term('general_choose')}></uui-button>`;
return html`
<uui-button
id="btn-add"
look="placeholder"
@click=${this.#openPicker}
label=${this.localize.term('general_choose')}></uui-button>
`;
}
#renderItems() {
if (!this._items) return;
return html`
<uui-ref-list>
${repeat(
this._items,
(item) => item.unique,
(item) => this.#renderItem(item),
)}
</uui-ref-list>
`;
}
#renderItem(item: UmbDocumentItemModel) {
if (!item.unique) return;
// TODO: get correct variant name
const name = item.variants[0]?.name;
return html`
<uui-ref-node name=${name}>
<uui-ref-node name=${item.name} id=${item.unique}>
${this.#renderIcon(item)} ${this.#renderIsTrashed(item)}
<uui-action-bar slot="actions">
${this.#renderOpenButton(item)}
<uui-button @click=${() => this.#pickerContext.requestRemoveItem(item.unique)} label="Remove document ${name}"
>${this.localize.term('general_remove')}</uui-button
>
<uui-button @click=${() => this.#removeItem(item)} label=${this.localize.term('general_remove')}></uui-button>
</uui-action-bar>
</uui-ref-node>
`;
@@ -215,14 +216,10 @@ export class UmbInputDocumentElement extends UUIFormControlMixin(UmbLitElement,
#renderOpenButton(item: UmbDocumentItemModel) {
if (!this.showOpenButton) return;
// TODO: get correct variant name
const name = item.variants[0]?.name;
return html`
<uui-button
href="${this._editDocumentPath}edit/${item.unique}"
label="${this.localize.term('general_open')} ${name}">
label="${this.localize.term('general_open')} ${item.name}">
${this.localize.term('general_open')}
</uui-button>
`;
@@ -230,7 +227,7 @@ export class UmbInputDocumentElement extends UUIFormControlMixin(UmbLitElement,
static styles = [
css`
#add-button {
#btn-add {
width: 100%;
}

54
src/Umbraco.Web.UI.Client/src/packages/documents/documents/property-editors/document-picker/property-editor-ui-document-picker.element.ts
View File

@@ -1,11 +1,10 @@
import type { UmbInputDocumentElement } from '../../components/input-document/input-document.element.js';
import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import {
UmbPropertyValueChangeEvent,
type UmbPropertyEditorConfigCollection,
} from '@umbraco-cms/backoffice/property-editor';
import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor';
import type { NumberRangeValueType } from '@umbraco-cms/backoffice/models';
import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
@customElement('umb-property-editor-ui-document-picker')
export class UmbPropertyEditorUIDocumentPickerElement extends UmbLitElement implements UmbPropertyEditorUiElement {
@@ -13,34 +12,47 @@ export class UmbPropertyEditorUIDocumentPickerElement extends UmbLitElement impl
public value?: string;
public set config(config: UmbPropertyEditorConfigCollection | undefined) {
const validationLimit = config?.find((x) => x.alias === 'validationLimit');
if (!config) return;
this._limitMin = (validationLimit?.value as any)?.min;
this._limitMax = (validationLimit?.value as any)?.max;
}
public get config() {
return undefined;
const minMax = config?.getValueByAlias<NumberRangeValueType>('validationLimit');
this.min = minMax?.min ?? 0;
this.max = minMax?.max ?? Infinity;
this.ignoreUserStartNodes = config?.getValueByAlias('ignoreUserStartNodes');
this.startNodeId = config?.getValueByAlias('startNodeId');
this.showOpenButton = config?.getValueByAlias('showOpenButton');
}
@state()
private _limitMin?: number;
@state()
private _limitMax?: number;
min = 0;
private _onChange(event: CustomEvent) {
this.value = (event.target as UmbInputDocumentElement).selection.join(',');
@state()
max = Infinity;
@state()
startNodeId?: string;
@state()
showOpenButton?: boolean;
@state()
ignoreUserStartNodes?: boolean;
#onChange(event: CustomEvent & { target: UmbInputDocumentElement }) {
this.value = event.target.selection.join(',');
this.dispatchEvent(new UmbPropertyValueChangeEvent());
}
// TODO: Implement mandatory?
render() {
return html`
<umb-input-document
@change=${this._onChange}
.min=${this.min}
.max=${this.max}
.startNodeId=${this.startNodeId ?? ''}
.value=${this.value ?? ''}
.min=${this._limitMin ?? 0}
.max=${this._limitMax ?? Infinity}>
<umb-localize key="general_add">Add</umb-localize>
?showOpenButton=${this.showOpenButton}
?ignoreUserStartNodes=${this.ignoreUserStartNodes}
@change=${this.#onChange}>
</umb-input-document>
`;
}