@umbraco-cms/backoffice 14.0.0--preview007-b64c7cb9 → 14.0.0--preview007-dd76e4de

package/dist-cms/custom-elements.json

@@ -6263,11 +6263,6 @@
         }
       ],
       "properties": [
-        {
-          "name": "config",
-          "type": "UmbSorterConfig<PropertyTypeContainerModelBaseModel>",
-          "default": "{}"
-        },
         {
           "name": "ownerTabId",
           "attribute": "ownerTabId",
@@ -6287,9 +6282,6 @@
           "name": "styles",
           "type": "array",
           "default": "[\"UmbTextStyles\",null]"
-        },
-        {
-          "name": "sorter"
         }
       ]
     },
@@ -6297,18 +6289,10 @@
       "name": "umb-document-type-workspace-view-edit",
       "path": "./../src/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit.element.ts",
       "properties": [
-        {
-          "name": "config",
-          "type": "UmbSorterConfig<PropertyTypeContainerModelBaseModel>",
-          "default": "{}"
-        },
         {
           "name": "styles",
           "type": "array",
           "default": "[\"UmbTextStyles\",null]"
-        },
-        {
-          "name": "sorter"
         }
       ]
     },

package/dist-cms/mocks/data/document-type/document-type.data.js

@@ -1004,6 +1004,46 @@ export const data = [
                     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: [
             {
@@ -1013,6 +1053,13 @@ export const data = [
                 type: 'Group',
                 sortOrder: 0,
             },
+            {
+                id: '2e845ca8-1e3e-4b03-be1d-0b4149ce2120',
+                parent: null,
+                name: 'Alchemy',
+                type: 'Group',
+                sortOrder: 0,
+            },
         ],
         allowedDocumentTypes: [],
         compositions: [],

package/dist-cms/packages/documents/document-types/components/input-document-type/input-document-type.element.d.ts

@@ -42,6 +42,7 @@ export declare class UmbInputDocumentTypeElement extends UmbInputDocumentTypeEle
     get selectedIds(): Array<string>;
     set selectedIds(ids: Array<string> | undefined);
     set value(idsString: string);
+    get value(): string;
     private _items?;
     private _editDocumentTypePath;
     constructor();

package/dist-cms/packages/documents/document-types/components/input-document-type/input-document-type.element.js

@@ -51,6 +51,9 @@ let UmbInputDocumentTypeElement = class UmbInputDocumentTypeElement extends Form
         // 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);
     }
+    get value() {
+        return this.selectedIds.join(',');
+    }
     constructor() {
         super();
         _UmbInputDocumentTypeElement_instances.add(this);

package/dist-cms/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.d.ts

@@ -1,8 +1,8 @@
 import './document-type-workspace-view-edit-property.element.js';
 import type { UmbDocumentTypeDetailModel } from '../../../types.js';
+import { UmbLitElement } from '../../../../../core/lit-element/index.js';
 import type { UmbPropertyContainerTypes, UmbPropertyTypeModel } from '../../../../../core/content-type/index.js';
 import { UmbContentTypePropertyStructureHelper } from '../../../../../core/content-type/index.js';
-import { UmbLitElement } from '../../../../../core/lit-element/index.js';
 export declare class UmbDocumentTypeWorkspaceViewEditPropertiesElement extends UmbLitElement {
     #private;
     private _containerId;

package/dist-cms/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-properties.element.js

@@ -9,27 +9,21 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _UmbDocumentTypeWorkspaceViewEditPropertiesElement_instances, _UmbDocumentTypeWorkspaceViewEditPropertiesElement_propertySorter, _UmbDocumentTypeWorkspaceViewEditPropertiesElement_setModel, _UmbDocumentTypeWorkspaceViewEditPropertiesElement_addProperty;
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _UmbDocumentTypeWorkspaceViewEditPropertiesElement_instances, _UmbDocumentTypeWorkspaceViewEditPropertiesElement_model, _UmbDocumentTypeWorkspaceViewEditPropertiesElement_sorter, _UmbDocumentTypeWorkspaceViewEditPropertiesElement_addProperty;
 import './document-type-workspace-view-edit-property.element.js';
+import { UmbLitElement } from '../../../../../core/lit-element/index.js';
 import { css, html, customElement, property, state, repeat, ifDefined } from '../../../../../../external/lit/index.js';
 import { UmbTextStyles } from '../../../../../../shared/style/index.js';
 import { UmbContentTypePropertyStructureHelper } from '../../../../../core/content-type/index.js';
 import { UmbSorterController } from '../../../../../core/sorter/index.js';
-import { UmbLitElement } from '../../../../../core/lit-element/index.js';
 import { UMB_WORKSPACE_CONTEXT } from '../../../../../core/workspace/index.js';
 import { UMB_PROPERTY_SETTINGS_MODAL, UmbModalRouteRegistrationController } from '../../../../../core/modal/index.js';
-const SORTER_CONFIG = {
-    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',
-};
 let UmbDocumentTypeWorkspaceViewEditPropertiesElement = class UmbDocumentTypeWorkspaceViewEditPropertiesElement extends UmbLitElement {
     get containerId() {
         return this._containerId;
@@ -56,37 +50,64 @@ let UmbDocumentTypeWorkspaceViewEditPropertiesElement = class UmbDocumentTypeWor
     constructor() {
         super();
         _UmbDocumentTypeWorkspaceViewEditPropertiesElement_instances.add(this);
-        _UmbDocumentTypeWorkspaceViewEditPropertiesElement_propertySorter.set(this, 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);
+        _UmbDocumentTypeWorkspaceViewEditPropertiesElement_model.set(this, []);
+        _UmbDocumentTypeWorkspaceViewEditPropertiesElement_sorter.set(this, new UmbSorterController(this, {
+            getUniqueOfElement: (element) => {
+                return element.getAttribute('data-umb-property-id');
+            },
+            getUniqueOfModel: (modelEntry) => {
+                return modelEntry.id;
             },
-            performItemRemove: (args) => {
-                return this._propertyStructureHelper.removeProperty(args.item.id);
+            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 }) => {
+                __classPrivateFieldSet(this, _UmbDocumentTypeWorkspaceViewEditPropertiesElement_model, model, "f");
+                this._propertyStructure = model;
             },
-            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;
-                    }
+            onEnd: ({ item }) => {
+                /** Explanation: If the item is the first in list, we compare it to the item behind it to set a sortOrder.
+                 * If it's not the first in list, we will compare to the item in before it, and check the following item to see if it caused overlapping sortOrder, then update
+                 * the overlap if true, which may cause another overlap, so we loop through them till no more overlaps...
+                 */
+                const model = __classPrivateFieldGet(this, _UmbDocumentTypeWorkspaceViewEditPropertiesElement_model, "f");
+                const newIndex = model.findIndex((entry) => entry.id === item.id);
+                // Doesn't exist in model
+                if (newIndex === -1)
+                    return;
+                // First in list
+                if (newIndex === 0 && model.length > 1) {
+                    this._propertyStructureHelper.partialUpdateProperty(item.id, {
+                        sortOrder: model[1].sortOrder - 1,
+                        container: this._containerId ? { id: this._containerId } : null,
+                    });
+                    return;
+                }
+                // Not first in list
+                if (newIndex > 0 && model.length > 1) {
+                    const prevItemSortOrder = model[newIndex - 1].sortOrder;
+                    let weight = 1;
+                    this._propertyStructureHelper.partialUpdateProperty(item.id, {
+                        sortOrder: prevItemSortOrder + weight,
+                        container: this._containerId ? { id: this._containerId } : null,
+                    });
+                    // Check for overlaps
+                    model.some((entry, index) => {
+                        if (index <= newIndex)
+                            return;
+                        if (entry.sortOrder === prevItemSortOrder + weight) {
+                            weight++;
+                            this._propertyStructureHelper.partialUpdateProperty(entry.id, { sortOrder: prevItemSortOrder + weight });
+                        }
+                        // Break the loop
+                        return true;
+                    });
                 }
-                return this._propertyStructureHelper.insertProperty(args.item, sortOrder);
             },
         }));
         this._propertyStructureHelper = new UmbContentTypePropertyStructureHelper(this);
@@ -95,7 +116,12 @@ let UmbDocumentTypeWorkspaceViewEditPropertiesElement = class UmbDocumentTypeWor
             this._propertyStructureHelper.setStructureManager(workspaceContext.structure);
             this.observe(workspaceContext.isSorting, (isSorting) => {
                 this._sortModeActive = isSorting;
-                __classPrivateFieldGet(this, _UmbDocumentTypeWorkspaceViewEditPropertiesElement_instances, "m", _UmbDocumentTypeWorkspaceViewEditPropertiesElement_setModel).call(this, isSorting);
+                if (isSorting) {
+                    __classPrivateFieldGet(this, _UmbDocumentTypeWorkspaceViewEditPropertiesElement_sorter, "f").setModel(this._propertyStructure);
+                }
+                else {
+                    __classPrivateFieldGet(this, _UmbDocumentTypeWorkspaceViewEditPropertiesElement_sorter, "f").setModel([]);
+                }
             }, '_observeIsSorting');
             const docTypesObservable = await this._propertyStructureHelper.ownerDocumentTypes();
             if (!docTypesObservable)
@@ -106,6 +132,12 @@ let UmbDocumentTypeWorkspaceViewEditPropertiesElement = class UmbDocumentTypeWor
         });
         this.observe(this._propertyStructureHelper.propertyStructure, (propertyStructure) => {
             this._propertyStructure = propertyStructure;
+            if (this._sortModeActive) {
+                __classPrivateFieldGet(this, _UmbDocumentTypeWorkspaceViewEditPropertiesElement_sorter, "f").setModel(this._propertyStructure);
+            }
+            else {
+                __classPrivateFieldGet(this, _UmbDocumentTypeWorkspaceViewEditPropertiesElement_sorter, "f").setModel([]);
+            }
         });
         // Note: Route for adding a new property
         new UmbModalRouteRegistrationController(this, UMB_PROPERTY_SETTINGS_MODAL)
@@ -130,26 +162,30 @@ let UmbDocumentTypeWorkspaceViewEditPropertiesElement = class UmbDocumentTypeWor
         });
     }
     render() {
-        return html `<div id="property-list">
-				${repeat(this._propertyStructure, (property) => property.id ?? '' + property.container?.id ?? '' + property.sortOrder ?? '', (property) => {
+        return html `
+			<div id="property-list" ?sort-mode-active=${this._sortModeActive}>
+				${repeat(this._propertyStructure, (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 `<umb-document-type-workspace-view-edit-property
-							data-umb-property-id=${property.id}
-							owner-document-type-id=${ifDefined(inheritedFromDocument?.unique)}
-							owner-document-type-name=${ifDefined(inheritedFromDocument?.name)}
-							?inherited=${property.container?.id !== this.containerId}
-							?sort-mode-active=${this._sortModeActive}
-							.property=${property}
-							@partial-property-update=${(event) => {
+            return html `
+							<umb-document-type-workspace-view-edit-property
+								data-umb-property-id=${property.id}
+								owner-document-type-id=${ifDefined(inheritedFromDocument?.unique)}
+								owner-document-type-name=${ifDefined(inheritedFromDocument?.name)}
+								?inherited=${property.container?.id !== this.containerId}
+								?sort-mode-active=${this._sortModeActive}
+								.property=${property}
+								@partial-property-update=${(event) => {
                 this._propertyStructureHelper.partialUpdateProperty(property.id, event.detail);
             }}
-							@property-delete=${() => {
+								@property-delete=${() => {
                 this._propertyStructureHelper.removeProperty(property.id);
             }}>
-						</umb-document-type-workspace-view-edit-property>`;
+							</umb-document-type-workspace-view-edit-property>
+						`;
         })}
 			</div>
+
 			${!this._sortModeActive
             ? html `<uui-button
 						label=${this.localize.term('contentTypeEditor_addProperty')}
@@ -158,20 +194,13 @@ let UmbDocumentTypeWorkspaceViewEditPropertiesElement = class UmbDocumentTypeWor
 						href=${ifDefined(this._modalRouteNewProperty)}>
 						<umb-localize key="contentTypeEditor_addProperty">Add property</umb-localize>
 				  </uui-button> `
-            : ''} `;
+            : ''}
+		`;
     }
 };
-_UmbDocumentTypeWorkspaceViewEditPropertiesElement_propertySorter = new WeakMap();
+_UmbDocumentTypeWorkspaceViewEditPropertiesElement_model = new WeakMap();
+_UmbDocumentTypeWorkspaceViewEditPropertiesElement_sorter = new WeakMap();
 _UmbDocumentTypeWorkspaceViewEditPropertiesElement_instances = new WeakSet();
-_UmbDocumentTypeWorkspaceViewEditPropertiesElement_setModel = function _UmbDocumentTypeWorkspaceViewEditPropertiesElement_setModel(isSorting) {
-    if (isSorting) {
-        __classPrivateFieldGet(this, _UmbDocumentTypeWorkspaceViewEditPropertiesElement_propertySorter, "f").setModel(this._propertyStructure);
-    }
-    else {
-        // TODO: Make a more proper way to disable sorting:
-        __classPrivateFieldGet(this, _UmbDocumentTypeWorkspaceViewEditPropertiesElement_propertySorter, "f").setModel([]);
-    }
-};
 _UmbDocumentTypeWorkspaceViewEditPropertiesElement_addProperty = async function _UmbDocumentTypeWorkspaceViewEditPropertiesElement_addProperty(propertyData) {
     const propertyPlaceholder = await this._propertyStructureHelper.addProperty(this._containerId);
     if (!propertyPlaceholder)
@@ -184,6 +213,11 @@ UmbDocumentTypeWorkspaceViewEditPropertiesElement.styles = [
 			#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);
+			}
 		`,
 ];
 __decorate([

package/dist-cms/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-property.element.js

@@ -112,6 +112,7 @@ let UmbDocumentTypeWorkspacePropertyElement = class UmbDocumentTypeWorkspaceProp
 				type="number"
 				?readonly=${this.inherited}
 				label="sort order"
+				@change=${(e) => this._partialUpdate({ sortOrder: parseInt(e.target.value) || 0 })}
 				.value=${this.property.sortOrder ?? 0}></uui-input>
 		`;
     }
@@ -440,6 +441,13 @@ UmbDocumentTypeWorkspacePropertyElement.styles = [
 			a {
 				color: inherit;
 			}
+
+			:host([drag-placeholder]) {
+				opacity: 0.5;
+			}
+			:host([drag-placeholder]) uui-input {
+				visibility: hidden;
+			}
 		`,
 ];
 __decorate([

package/dist-cms/packages/documents/document-types/workspace/views/design/document-type-workspace-view-edit-tab.element.d.ts

@@ -1,14 +1,9 @@
 import type { UmbDocumentTypeDetailModel } from '../../../types.js';
-import { UmbContentTypeContainerStructureHelper } from '../../../../../core/content-type/index.js';
 import { UmbLitElement } from '../../../../../core/lit-element/index.js';
-import type { PropertyTypeContainerModelBaseModel } from '../../../../../../external/backend-api/index.js';
-import type { UmbSorterConfig } from '../../../../../core/sorter/index.js';
-import { UmbSorterController } from '../../../../../core/sorter/index.js';
+import { UmbContentTypeContainerStructureHelper, type UmbPropertyTypeContainerModel } from '../../../../../core/content-type/index.js';
 import './document-type-workspace-view-edit-properties.element.js';
 export declare class UmbDocumentTypeWorkspaceViewEditTabElement extends UmbLitElement {
     #private;
-    sorter?: UmbSorterController<PropertyTypeContainerModelBaseModel>;
-    config: UmbSorterConfig<PropertyTypeContainerModelBaseModel>;
     private _ownerTabId?;
     get ownerTabId(): string | null | undefined;
     set ownerTabId(value: string | null | undefined);
@@ -19,7 +14,7 @@ export declare class UmbDocumentTypeWorkspaceViewEditTabElement extends UmbLitEl
     get noTabName(): boolean;
     set noTabName(value: boolean);
     _groupStructureHelper: UmbContentTypeContainerStructureHelper<UmbDocumentTypeDetailModel>;
-    _groups: Array<PropertyTypeContainerModelBaseModel>;
+    _groups: Array<UmbPropertyTypeContainerModel>;
     _hasProperties: boolean;
     _sortModeActive?: boolean;
     constructor();