From 69e95b21d7f5afde75500c62edccad0f9b62710c Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Fri, 9 Feb 2024 10:41:55 +0100 Subject: [PATCH 01/28] update sorting for properties --- .../data/document-type/document-type.data.ts | 47 ++++++++++++ ...-workspace-view-edit-properties.element.ts | 75 ++++++------------- ...nt-type-workspace-view-edit-tab.element.ts | 65 +++++----------- ...cument-type-workspace-view-edit.element.ts | 60 ++------------- 4 files changed, 96 insertions(+), 151 deletions(-) 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 4918e82655..071ec1a4f3 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 @@ -994,6 +994,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: [ { @@ -1003,6 +1043,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/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 b93078c07f..4fae1a1898 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,34 @@ 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/internal/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', -}; +import { UmbSorterController } from '@umbraco-cms/backoffice/sorter'; @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); + #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', + containerSelector: '#property-list', + onChange: ({ item }) => { + const container = this.getAttribute('container-id'); + if (container) { + this._propertyStructureHelper.partialUpdateProperty(item.id, { container: { id: container } }); } - return this._propertyStructureHelper.insertProperty(args.item, sortOrder); }, }); @@ -112,7 +86,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 +131,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; @@ -214,6 +183,10 @@ export class UmbDocumentTypeWorkspaceViewEditPropertiesElement extends UmbLitEle #add { width: 100%; } + #property-list { + /* 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-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 41c56db3ff..dfc538715b 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,33 @@ 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 { 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/internal/lit-element'; import type { PropertyTypeContainerModelBaseModel } from '@umbraco-cms/backoffice/backend-api'; 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< + PropertyTypeContainerModelBaseModel, + UmbDocumentTypeWorkspaceViewEditPropertiesElement + >(this, { + getUniqueOfElement: (element) => element.getAttribute('container-id'), + getUniqueOfModel: (modelEntry) => modelEntry.id, + identifier: 'document-type-container-sorter', + itemSelector: '[data-umb-group-id]', + containerSelector: '#container-list', + onChange: ({ item, model }) => { + console.log('item', item); + console.log('model', model); + this._groups = model; }, - }; + }); private _ownerTabId?: string | null; @@ -109,8 +84,6 @@ 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( @@ -118,9 +91,9 @@ export class UmbDocumentTypeWorkspaceViewEditTabElement extends UmbLitElement { (isSorting) => { this._sortModeActive = isSorting; if (isSorting) { - this.sorter?.setModel(this._groups); + this.#sorter.setModel(this._groups); } else { - this.sorter?.setModel([]); + this.#sorter.setModel([]); } }, '_observeIsSorting', @@ -153,7 +126,7 @@ export class UmbDocumentTypeWorkspaceViewEditTabElement extends UmbLitElement { ` : ''} -
+
${repeat( this._groups, (group) => group.id ?? '' + group.name, 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 a87bc48f51..031343b5f6 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 @@ -13,55 +13,9 @@ 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; - }, - }; - //private _hasRootProperties = false; @state() @@ -93,7 +47,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) @@ -137,12 +90,6 @@ 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([]); - } } private _createRoutes() { @@ -274,7 +221,7 @@ export class UmbDocumentTypeWorkspaceViewEditElement extends UmbLitElement imple return html`