diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/document-type/document-type.data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/document-type/document-type.data.ts index 69f61a87d9..b6ee696086 100644 --- a/src/Umbraco.Web.UI.Client/src/mocks/data/document-type/document-type.data.ts +++ b/src/Umbraco.Web.UI.Client/src/mocks/data/document-type/document-type.data.ts @@ -1017,6 +1017,46 @@ export const data: Array = [ labelOnTop: false, }, }, + { + id: 'a92de6ac-1a22-4a45-a481-b6cae1cccbba', + container: { id: '2e845ca8-1e3e-4b03-be1d-0b4149ce2120' }, + alias: 'alchemyElement', + name: 'Alchemy Element', + description: null, + dataType: { id: '0cc0eba1-9960-42c9-bf9b-60e150b429ae' }, + variesByCulture: false, + variesBySegment: false, + sortOrder: 0, + validation: { + mandatory: false, + mandatoryMessage: null, + regEx: null, + regExMessage: null, + }, + appearance: { + labelOnTop: false, + }, + }, + { + id: 'c92de6ac-1a22-4a45-a481-b6cae1cccbba', + container: { id: '2e845ca8-1e3e-4b03-be1d-0b4149ce2120' }, + alias: 'acidScale', + name: 'Acid Scale', + description: null, + dataType: { id: '0cc0eba1-9960-42c9-bf9b-60e150b429ae' }, + variesByCulture: false, + variesBySegment: false, + sortOrder: 0, + validation: { + mandatory: false, + mandatoryMessage: null, + regEx: null, + regExMessage: null, + }, + appearance: { + labelOnTop: false, + }, + }, ], containers: [ { @@ -1026,6 +1066,13 @@ export const data: Array = [ type: 'Group', sortOrder: 0, }, + { + id: '2e845ca8-1e3e-4b03-be1d-0b4149ce2120', + parent: null, + name: 'Alchemy', + type: 'Group', + sortOrder: 0, + }, ], allowedDocumentTypes: [], compositions: [], diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/input-document-type/input-document-type.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/input-document-type/input-document-type.element.ts index aac219c253..bf6219a855 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/input-document-type/input-document-type.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/input-document-type/input-document-type.element.ts @@ -84,6 +84,9 @@ export class UmbInputDocumentTypeElement extends FormControlMixin(UmbLitElement) // Its with full purpose we don't call super.value, as thats being handled by the observation of the context selection. this.selectedIds = splitStringToArray(idsString); } + public get value(): string { + return this.selectedIds.join(','); + } @state() private _items?: Array; diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts index 02999e503d..dc7699b0dd 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.ts @@ -1,60 +1,50 @@ +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import type { UmbDocumentTypeWorkspaceContext } from '../../document-type-workspace.context.js'; import './document-type-workspace-view-edit-property.element.js'; import type { UmbDocumentTypeDetailModel } from '../../../types.js'; +import type { UmbDocumentTypeWorkspacePropertyElement } from './document-type-workspace-view-edit-property.element.js'; import { css, html, customElement, property, state, repeat, ifDefined } from '@umbraco-cms/backoffice/external/lit'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import type { UmbPropertyContainerTypes, UmbPropertyTypeModel } from '@umbraco-cms/backoffice/content-type'; import { UmbContentTypePropertyStructureHelper } from '@umbraco-cms/backoffice/content-type'; -import type { UmbSorterConfig } from '@umbraco-cms/backoffice/sorter'; import { UmbSorterController } from '@umbraco-cms/backoffice/sorter'; -import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UMB_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace'; import { UMB_PROPERTY_SETTINGS_MODAL, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/modal'; -const SORTER_CONFIG: UmbSorterConfig = { - getUniqueOfElement: (element) => { - return element.getAttribute('data-umb-property-id'); - }, - getUniqueOfModel: (modelEntry) => { - return modelEntry.id; - }, - identifier: 'content-type-property-sorter', - itemSelector: '[data-umb-property-id]', - disabledItemSelector: '[inherited]', - containerSelector: '#property-list', -}; - @customElement('umb-document-type-workspace-view-edit-properties') export class UmbDocumentTypeWorkspaceViewEditPropertiesElement extends UmbLitElement { - #propertySorter = new UmbSorterController(this, { - ...SORTER_CONFIG, - performItemInsert: (args) => { - let sortOrder = 0; - if (this._propertyStructure.length > 0) { - if (args.newIndex === 0) { - sortOrder = (this._propertyStructure[0].sortOrder ?? 0) - 1; - } else { - sortOrder = - (this._propertyStructure[Math.min(args.newIndex, this._propertyStructure.length - 1)].sortOrder ?? 0) + 1; - } - } - return this._propertyStructureHelper.insertProperty(args.item, sortOrder); + #model: Array = []; + #sorter = new UmbSorterController(this, { + getUniqueOfElement: (element) => { + return element.getAttribute('data-umb-property-id'); }, - performItemRemove: (args) => { - return this._propertyStructureHelper.removeProperty(args.item.id!); + getUniqueOfModel: (modelEntry) => { + return modelEntry.id; }, - performItemMove: (args) => { - this._propertyStructureHelper.removeProperty(args.item.id!); - let sortOrder = 0; - if (this._propertyStructure.length > 0) { - if (args.newIndex === 0) { - sortOrder = (this._propertyStructure[0].sortOrder ?? 0) - 1; - } else { - sortOrder = - (this._propertyStructure[Math.min(args.newIndex, this._propertyStructure.length - 1)].sortOrder ?? 0) + 1; - } + identifier: 'document-type-property-sorter', + itemSelector: 'umb-document-type-workspace-view-edit-property', + disabledItemSelector: '[inherited]', + //TODO: Set the property list (sorter wrapper) to inherited, if its inherited + // This is because we don't want to move local properties into an inherited group container. + // Or maybe we do, but we still need to check if the group exists locally, if not, then it needs to be created before we move a property into it. + // TODO: Fix bug where a local property turn into an inherited when moved to a new group container. + containerSelector: '#property-list', + onChange: ({ item, model }) => { + const isInNewContainer = model.find((entry) => entry?.container?.id !== this._containerId && this._containerId); + if (isInNewContainer) { + model.forEach((entry, index) => { + entry.id === item.id + ? this._propertyStructureHelper.partialUpdateProperty(entry.id, { + sortOrder: index, + container: { id: this._containerId! }, + }) + : this._propertyStructureHelper.partialUpdateProperty(entry.id, { sortOrder: index }); + }); + } else { + model.forEach((entry, index) => { + this._propertyStructureHelper.partialUpdateProperty(entry.id, { sortOrder: index }); + }); } - return this._propertyStructureHelper.insertProperty(args.item, sortOrder); }, }); @@ -112,7 +102,11 @@ export class UmbDocumentTypeWorkspaceViewEditPropertiesElement extends UmbLitEle (workspaceContext as UmbDocumentTypeWorkspaceContext).isSorting, (isSorting) => { this._sortModeActive = isSorting; - this.#setModel(isSorting); + if (isSorting) { + this.#sorter.setModel(this._propertyStructure); + } else { + this.#sorter.setModel([]); + } }, '_observeIsSorting', ); @@ -153,15 +147,6 @@ export class UmbDocumentTypeWorkspaceViewEditPropertiesElement extends UmbLitEle }); } - #setModel(isSorting?: boolean) { - if (isSorting) { - this.#propertySorter.setModel(this._propertyStructure); - } else { - // TODO: Make a more proper way to disable sorting: - this.#propertySorter.setModel([]); - } - } - async #addProperty(propertyData: UmbPropertyTypeModel) { const propertyPlaceholder = await this._propertyStructureHelper.addProperty(this._containerId); if (!propertyPlaceholder) return; @@ -170,33 +155,37 @@ export class UmbDocumentTypeWorkspaceViewEditPropertiesElement extends UmbLitEle } render() { - return html`
+ return html` +
${repeat( this._propertyStructure, - (property) => property.id ?? '' + property.container?.id ?? '' + property.sortOrder ?? '', + (property) => '' + property.container?.id + property.id + '' + property.sortOrder, (property) => { // Note: This piece might be moved into the property component const inheritedFromDocument = this._ownerDocumentTypes?.find( (types) => types.containers?.find((containers) => containers.id === property.container?.id), ); - return html` { - this._propertyStructureHelper.partialUpdateProperty(property.id, event.detail); - }} - @property-delete=${() => { - this._propertyStructureHelper.removeProperty(property.id!); - }}> - `; + return html` + { + this._propertyStructureHelper.partialUpdateProperty(property.id, event.detail); + }} + @property-delete=${() => { + this._propertyStructureHelper.removeProperty(property.id!); + }}> + + `; }, )}
+ ${!this._sortModeActive ? html` Add property ` - : ''} `; + : ''} + `; } static styles = [ @@ -214,6 +204,11 @@ export class UmbDocumentTypeWorkspaceViewEditPropertiesElement extends UmbLitEle #add { width: 100%; } + + #property-list[sort-mode-active]:not(:has(umb-document-type-workspace-view-edit-property)) { + /* Some height so that the sorter can target the area if the group is empty*/ + min-height: var(--uui-size-layout-1); + } `, ]; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts index 27112c4e49..d0c7858416 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.ts @@ -186,7 +186,6 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement { } } } - renderSortableProperty() { if (!this.property) return; return html` @@ -198,6 +197,8 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement { type="number" ?readonly=${this.inherited} label="sort order" + @change=${(e: UUIInputEvent) => + this._partialUpdate({ sortOrder: parseInt(e.target.value as string) || 0 } as UmbPropertyTypeModel)} .value=${this.property.sortOrder ?? 0}> `; } @@ -476,6 +477,10 @@ export class UmbDocumentTypeWorkspacePropertyElement extends UmbLitElement { a { color: inherit; } + + :host([drag-placeholder]) { + opacity: 0.2; + } `, ]; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-tab.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-tab.element.ts index 0c18b304c6..616cbf4787 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-tab.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-tab.element.ts @@ -1,58 +1,38 @@ import type { UmbDocumentTypeDetailModel } from '../../../types.js'; import type { UmbDocumentTypeWorkspaceContext } from '../../document-type-workspace.context.js'; +import type { UmbDocumentTypeWorkspaceViewEditPropertiesElement } from './document-type-workspace-view-edit-properties.element.js'; + +import type { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui'; +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { css, html, customElement, property, state, repeat, ifDefined } from '@umbraco-cms/backoffice/external/lit'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import { UmbContentTypeContainerStructureHelper } from '@umbraco-cms/backoffice/content-type'; -import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; -import type { PropertyTypeContainerModelBaseModel } from '@umbraco-cms/backoffice/external/backend-api'; +import { + UmbContentTypeContainerStructureHelper, + type UmbPropertyTypeContainerModel, +} from '@umbraco-cms/backoffice/content-type'; import { UMB_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace'; -import type { UmbSorterConfig } from '@umbraco-cms/backoffice/sorter'; -import { UmbSorterController } from '@umbraco-cms/backoffice/sorter'; import './document-type-workspace-view-edit-properties.element.js'; - -const SORTER_CONFIG: UmbSorterConfig = { - getUniqueOfElement: (element) => { - return element.getAttribute('data-umb-group-id'); - }, - getUniqueOfModel: (modelEntry) => { - return modelEntry.id; - }, - identifier: 'content-type-group-sorter', - itemSelector: '[data-umb-group-id]', - disabledItemSelector: '[inherited]', - containerSelector: '#group-list', -}; +import { UmbSorterController } from '@umbraco-cms/backoffice/sorter'; @customElement('umb-document-type-workspace-view-edit-tab') export class UmbDocumentTypeWorkspaceViewEditTabElement extends UmbLitElement { - public sorter?: UmbSorterController; - - config: UmbSorterConfig = { - ...SORTER_CONFIG, - // TODO: Missing handlers to work properly: performItemMove and performItemRemove - performItemInsert: async (args) => { - if (!this._groups) return false; - const oldIndex = this._groups.findIndex((group) => group.id! === args.item.id); - if (args.newIndex === oldIndex) return true; - - let sortOrder = 0; - //TODO the sortOrder set is not correct - if (this._groups.length > 0) { - if (args.newIndex === 0) { - sortOrder = (this._groups[0].sortOrder ?? 0) - 1; - } else { - sortOrder = (this._groups[Math.min(args.newIndex, this._groups.length - 1)].sortOrder ?? 0) + 1; - } - - if (sortOrder !== args.item.sortOrder) { - await this._groupStructureHelper.partialUpdateContainer(args.item.id!, { sortOrder }); - } - } - - return true; + #sorter = new UmbSorterController( + this, + { + getUniqueOfElement: (element) => + element.querySelector('umb-document-type-workspace-view-edit-properties')!.getAttribute('container-id'), + getUniqueOfModel: (modelEntry) => modelEntry.id, + identifier: 'document-type-container-sorter', + itemSelector: '.container-handle', + containerSelector: '.container-list', + onChange: ({ model }) => { + model.forEach((modelItem, index) => { + this._groupStructureHelper.partialUpdateContainer(modelItem.id, { sortOrder: index }); + }); + }, }, - }; + ); private _ownerTabId?: string | null; @@ -98,7 +78,7 @@ export class UmbDocumentTypeWorkspaceViewEditTabElement extends UmbLitElement { _groupStructureHelper = new UmbContentTypeContainerStructureHelper(this); @state() - _groups: Array = []; + _groups: Array = []; @state() _hasProperties = false; @@ -109,18 +89,17 @@ export class UmbDocumentTypeWorkspaceViewEditTabElement extends UmbLitElement { constructor() { super(); - this.sorter = new UmbSorterController(this, this.config); - this.consumeContext(UMB_WORKSPACE_CONTEXT, (context) => { this._groupStructureHelper.setStructureManager((context as UmbDocumentTypeWorkspaceContext).structure); this.observe( (context as UmbDocumentTypeWorkspaceContext).isSorting, (isSorting) => { this._sortModeActive = isSorting; + if (isSorting) { - this.sorter?.setModel(this._groups); + this.#sorter.setModel(this._groups); } else { - this.sorter?.setModel([]); + this.#sorter.setModel([]); } }, '_observeIsSorting', @@ -143,7 +122,17 @@ export class UmbDocumentTypeWorkspaceViewEditTabElement extends UmbLitElement { render() { return html` - ${!this._noTabName + ${ + this._sortModeActive + ? html`` + : '' + } + + ${ + !this._noTabName ? html` ` - : ''} -
- ${repeat( - this._groups, - (group) => group.id ?? '' + group.name, - (group) => html` - - ${ - this._groupStructureHelper.isOwnerChildContainer(group.id!) - ? html` -
-
- ${this._sortModeActive ? html`` : ''} - - { - const newName = (e.target as HTMLInputElement).value; - this._groupStructureHelper.updateContainerName( - group.id!, - group.parent?.id ?? null, - newName, - ); - }}> - -
- ${this._sortModeActive - ? html`` - : ''} -
- ` - : html`
-
${group.name ?? ''} (Inherited)
- ${!this._sortModeActive - ? html`` - : ''} -
` - } -
- - `, - )} + : '' + } +
+ ${repeat( + this._groups, + (group) => group.id ?? '' + group.name, + (group) => + html` + ${this.#renderHeader(group)} + + `, + )} +
+ ${this.#renderAddGroupButton()}
- ${!this._sortModeActive - ? html` - ${this.localize.term('contentTypeEditor_addGroup')} - ` - : ''} `; } + #renderHeader(group: UmbPropertyTypeContainerModel) { + const inherited = !this._groupStructureHelper.isOwnerChildContainer(group.id!); + + if (this._sortModeActive) { + return html`
+
+ + ${this.#renderInputGroupName(group)} +
+ { + this._groupStructureHelper.partialUpdateContainer(group.id!, { + sortOrder: parseInt(e.target.value as string) || 0, + }); + }} + .value=${group.sortOrder || 0} + ?disabled=${inherited}> +
`; + } else { + return html`
+ ${inherited ? html`` : this.#renderInputGroupName(group)} +
`; + } + } + + #renderInputGroupName(group: UmbPropertyTypeContainerModel) { + return html` { + const newName = (e.target as HTMLInputElement).value; + this._groupStructureHelper.updateContainerName(group.id!, group.parent?.id ?? null, newName); + }}>`; + } + + #renderAddGroupButton() { + if (this._sortModeActive) return; + return html` + ${this.localize.term('contentTypeEditor_addGroup')} + `; + } + static styles = [ UmbTextStyles, css` + [drag-placeholder] { + opacity: 0.2; + } + #add { width: 100%; } @@ -226,6 +225,7 @@ export class UmbDocumentTypeWorkspaceViewEditTabElement extends UmbLitElement { #add:first-child { margin-top: var(--uui-size-layout-1); } + uui-box { margin-bottom: var(--uui-size-layout-1); } @@ -236,6 +236,7 @@ export class UmbDocumentTypeWorkspaceViewEditTabElement extends UmbLitElement { } div[slot='header'] { + flex: 1; display: flex; align-items: center; justify-content: space-between; @@ -251,20 +252,18 @@ export class UmbDocumentTypeWorkspaceViewEditTabElement extends UmbLitElement { max-width: 75px; } - .sorting { + [sort-mode-active] div[slot='header'] { cursor: grab; } - .--umb-sorter-placeholder > uui-box { - visibility: hidden; + .container-list { + display: grid; + gap: 10px; } - .--umb-sorter-placeholder::after { - content: ''; - inset: 0; - position: absolute; - border-radius: var(--uui-border-radius); - border: 1px dashed var(--uui-color-divider-emphasis); + #convert-to-tab { + margin-bottom: var(--uui-size-layout-1); + display: flex; } `, ]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit.element.ts index 24123dcebd..412001d3ed 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit.element.ts @@ -3,7 +3,7 @@ import type { UmbDocumentTypeWorkspaceContext } from '../../document-type-worksp import type { UmbDocumentTypeDetailModel } from '../../../types.js'; import type { UmbDocumentTypeWorkspaceViewEditTabElement } from './document-type-workspace-view-edit-tab.element.js'; import { css, html, customElement, state, repeat, nothing, ifDefined } from '@umbraco-cms/backoffice/external/lit'; -import type { UUIInputElement, UUIInputEvent } from '@umbraco-cms/backoffice/external/uui'; +import type { UUIInputElement, UUIInputEvent, UUITabElement } from '@umbraco-cms/backoffice/external/uui'; import { UmbContentTypeContainerStructureHelper } from '@umbraco-cms/backoffice/content-type'; import { encodeFolderName } from '@umbraco-cms/backoffice/router'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; @@ -17,54 +17,24 @@ import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension- import type { UmbConfirmModalData } from '@umbraco-cms/backoffice/modal'; import { UMB_CONFIRM_MODAL, UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import type { UmbSorterConfig } from '@umbraco-cms/backoffice/sorter'; import { UmbSorterController } from '@umbraco-cms/backoffice/sorter'; -const SORTER_CONFIG: UmbSorterConfig = { - getUniqueOfElement: (element) => { - return element.getAttribute('data-umb-tabs-id'); - }, - getUniqueOfModel: (modelEntry) => { - return modelEntry.id; - }, - identifier: 'content-type-tabs-sorter', - itemSelector: '[data-umb-tabs-id]', - containerSelector: '#tabs-group', - disabledItemSelector: '[inherited]', - resolveVerticalDirection: () => { - return false; - }, -}; - @customElement('umb-document-type-workspace-view-edit') export class UmbDocumentTypeWorkspaceViewEditElement extends UmbLitElement implements UmbWorkspaceViewElement { - public sorter?: UmbSorterController; - - config: UmbSorterConfig = { - ...SORTER_CONFIG, - // TODO: Missing handlers to work properly: performItemMove and performItemRemove - performItemInsert: async (args) => { - if (!this._tabs) return false; - const oldIndex = this._tabs.findIndex((tab) => tab.id! === args.item.id); - if (args.newIndex === oldIndex) return true; - - let sortOrder = 0; - //TODO the sortOrder set is not correct - if (this._tabs.length > 0) { - if (args.newIndex === 0) { - sortOrder = (this._tabs[0].sortOrder ?? 0) - 1; - } else { - sortOrder = (this._tabs[Math.min(args.newIndex, this._tabs.length - 1)].sortOrder ?? 0) + 1; - } - - if (sortOrder !== args.item.sortOrder) { - await this._tabsStructureHelper.partialUpdateContainer(args.item.id!, { sortOrder }); - } - } - - return true; + #sorter = new UmbSorterController(this, { + getUniqueOfElement: (element) => element.getAttribute('data-umb-tabs-id'), + getUniqueOfModel: (modelEntry) => modelEntry.id, + identifier: 'document-type-tabs-sorter', + itemSelector: 'uui-tab', + containerSelector: 'uui-tab-group', + disabledItemSelector: '#root-tab', + resolveVerticalDirection: () => false, + onChange: ({ model }) => { + model.forEach((modelItem, index) => { + this._tabsStructureHelper.partialUpdateContainer(modelItem.id, { sortOrder: index }); + }); }, - }; + }); //private _hasRootProperties = false; @@ -84,7 +54,7 @@ export class UmbDocumentTypeWorkspaceViewEditElement extends UmbLitElement imple private _activePath = ''; @state() - private sortModeActive?: boolean; + private _sortModeActive?: boolean; @state() private _buttonDisabled: boolean = false; @@ -100,7 +70,6 @@ export class UmbDocumentTypeWorkspaceViewEditElement extends UmbLitElement imple constructor() { super(); - this.sorter = new UmbSorterController(this, this.config); //TODO: We need to differentiate between local and composition tabs (and hybrids) @@ -118,7 +87,14 @@ export class UmbDocumentTypeWorkspaceViewEditElement extends UmbLitElement imple this._tabsStructureHelper.setStructureManager((workspaceContext as UmbDocumentTypeWorkspaceContext).structure); this.observe( this._workspaceContext.isSorting, - (isSorting) => (this.sortModeActive = isSorting), + (isSorting) => { + this._sortModeActive = isSorting; + if (isSorting) { + this.#sorter.setModel(this._tabs!); + } else { + this.#sorter.setModel([]); + } + }, '_observeIsSorting', ); @@ -156,13 +132,7 @@ export class UmbDocumentTypeWorkspaceViewEditElement extends UmbLitElement imple } #changeMode() { - this._workspaceContext?.setIsSorting(!this.sortModeActive); - - if (this.sortModeActive && this._tabs) { - this.sorter?.setModel(this._tabs); - } else { - this.sorter?.setModel([]); - } + this._workspaceContext?.setIsSorting(!this._sortModeActive); } private _createRoutes() { @@ -309,7 +279,7 @@ export class UmbDocumentTypeWorkspaceViewEditElement extends UmbLitElement imple return html`