@umbraco-cms/backoffice 14.0.0--preview007-02546fcd → 14.0.0--preview007-dd76e4de

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

@@ -1,6 +1,6 @@
-import { UmbLitElement } from '../../../../../core/lit-element/index.js';
 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';
 export declare class UmbDocumentTypeWorkspaceViewEditPropertiesElement extends UmbLitElement {

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

@@ -9,9 +9,15 @@ 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 __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 { UmbLitElement } from '../../../../../core/lit-element/index.js';
 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';
@@ -54,27 +60,52 @@ let UmbDocumentTypeWorkspaceViewEditPropertiesElement = class UmbDocumentTypeWor
             },
             identifier: 'document-type-property-sorter',
             itemSelector: 'umb-document-type-workspace-view-edit-property',
-            disabledItemSelector: '[inherited]',
+            //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 });
+                __classPrivateFieldSet(this, _UmbDocumentTypeWorkspaceViewEditPropertiesElement_model, model, "f");
+                this._propertyStructure = model;
+            },
+            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;
                 }
-                else {
-                    model.forEach((entry, index) => {
-                        this._propertyStructureHelper.partialUpdateProperty(entry.id, { sortOrder: index });
+                // 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;
                     });
                 }
             },
@@ -101,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)

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

@@ -443,7 +443,10 @@ UmbDocumentTypeWorkspacePropertyElement.styles = [
 			}
 
 			:host([drag-placeholder]) {
-				opacity: 0.2;
+				opacity: 0.5;
+			}
+			:host([drag-placeholder]) uui-input {
+				visibility: hidden;
 			}
 		`,
 ];

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

@@ -9,7 +9,13 @@ 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 _UmbDocumentTypeWorkspaceViewEditTabElement_instances, _UmbDocumentTypeWorkspaceViewEditTabElement_sorter, _UmbDocumentTypeWorkspaceViewEditTabElement_onAddGroup, _UmbDocumentTypeWorkspaceViewEditTabElement_renderHeader, _UmbDocumentTypeWorkspaceViewEditTabElement_renderInputGroupName, _UmbDocumentTypeWorkspaceViewEditTabElement_renderAddGroupButton;
+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 _UmbDocumentTypeWorkspaceViewEditTabElement_instances, _UmbDocumentTypeWorkspaceViewEditTabElement_model, _UmbDocumentTypeWorkspaceViewEditTabElement_sorter, _UmbDocumentTypeWorkspaceViewEditTabElement_onAddGroup, _UmbDocumentTypeWorkspaceViewEditTabElement_renderHeader, _UmbDocumentTypeWorkspaceViewEditTabElement_renderInputGroupName, _UmbDocumentTypeWorkspaceViewEditTabElement_renderAddGroupButton;
 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';
@@ -51,6 +57,7 @@ let UmbDocumentTypeWorkspaceViewEditTabElement = class UmbDocumentTypeWorkspaceV
     constructor() {
         super();
         _UmbDocumentTypeWorkspaceViewEditTabElement_instances.add(this);
+        _UmbDocumentTypeWorkspaceViewEditTabElement_model.set(this, []);
         _UmbDocumentTypeWorkspaceViewEditTabElement_sorter.set(this, new UmbSorterController(this, {
             getUniqueOfElement: (element) => element.querySelector('umb-document-type-workspace-view-edit-properties').getAttribute('container-id'),
             getUniqueOfModel: (modelEntry) => modelEntry.id,
@@ -58,9 +65,41 @@ let UmbDocumentTypeWorkspaceViewEditTabElement = class UmbDocumentTypeWorkspaceV
             itemSelector: '.container-handle',
             containerSelector: '.container-list',
             onChange: ({ model }) => {
-                model.forEach((modelItem, index) => {
-                    this._groupStructureHelper.partialUpdateContainer(modelItem.id, { sortOrder: index });
-                });
+                this._groups = model;
+                __classPrivateFieldSet(this, _UmbDocumentTypeWorkspaceViewEditTabElement_model, model, "f");
+            },
+            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, _UmbDocumentTypeWorkspaceViewEditTabElement_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._groupStructureHelper.partialUpdateContainer(item.id, { sortOrder: model[1].sortOrder - 1 });
+                    return;
+                }
+                // Not first in list
+                if (newIndex > 0 && model.length > 1) {
+                    const prevItemSortOrder = model[newIndex - 1].sortOrder;
+                    let weight = 1;
+                    this._groupStructureHelper.partialUpdateContainer(item.id, { sortOrder: prevItemSortOrder + weight });
+                    // Check for overlaps
+                    model.some((entry, index) => {
+                        if (index <= newIndex)
+                            return;
+                        if (entry.sortOrder === prevItemSortOrder + weight) {
+                            weight++;
+                            this._groupStructureHelper.partialUpdateContainer(entry.id, { sortOrder: prevItemSortOrder + weight });
+                        }
+                        // Break the loop
+                        return true;
+                    });
+                }
             },
         }));
         this._groupStructureHelper = new UmbContentTypeContainerStructureHelper(this);
@@ -84,6 +123,12 @@ let UmbDocumentTypeWorkspaceViewEditTabElement = class UmbDocumentTypeWorkspaceV
         });
         this.observe(this._groupStructureHelper.containers, (groups) => {
             this._groups = groups;
+            if (this._sortModeActive) {
+                __classPrivateFieldGet(this, _UmbDocumentTypeWorkspaceViewEditTabElement_sorter, "f").setModel(this._groups);
+            }
+            else {
+                __classPrivateFieldGet(this, _UmbDocumentTypeWorkspaceViewEditTabElement_sorter, "f").setModel([]);
+            }
             this.requestUpdate('_groups');
         });
         this.observe(this._groupStructureHelper.hasProperties, (hasProperties) => {
@@ -111,7 +156,7 @@ let UmbDocumentTypeWorkspaceViewEditTabElement = class UmbDocumentTypeWorkspaceV
 				  `
             : ''}
 				<div class="container-list" ?sort-mode-active=${this._sortModeActive}>
-					${repeat(this._groups, (group) => group.id ?? '' + group.name, (group) => html `<uui-box class="container-handle">
+					${repeat(this._groups, (group) => group.id + '' + group.name + group.sortOrder, (group) => html `<uui-box class="container-handle">
 								${__classPrivateFieldGet(this, _UmbDocumentTypeWorkspaceViewEditTabElement_instances, "m", _UmbDocumentTypeWorkspaceViewEditTabElement_renderHeader).call(this, group)}
 								<umb-document-type-workspace-view-edit-properties
 									container-id=${ifDefined(group.id)}
@@ -124,6 +169,7 @@ let UmbDocumentTypeWorkspaceViewEditTabElement = class UmbDocumentTypeWorkspaceV
 		`;
     }
 };
+_UmbDocumentTypeWorkspaceViewEditTabElement_model = new WeakMap();
 _UmbDocumentTypeWorkspaceViewEditTabElement_sorter = new WeakMap();
 _UmbDocumentTypeWorkspaceViewEditTabElement_onAddGroup = new WeakMap();
 _UmbDocumentTypeWorkspaceViewEditTabElement_instances = new WeakSet();
@@ -138,11 +184,9 @@ _UmbDocumentTypeWorkspaceViewEditTabElement_renderHeader = function _UmbDocument
 				<uui-input
 					type="number"
 					label=${this.localize.term('sort_sortOrder')}
-					@change=${(e) => {
-            this._groupStructureHelper.partialUpdateContainer(group.id, {
-                sortOrder: parseInt(e.target.value) || 0,
-            });
-        }}
+					@change=${(e) => this._groupStructureHelper.partialUpdateContainer(group.id, {
+            sortOrder: parseInt(e.target.value) || 0,
+        })}
 					.value=${group.sortOrder || 0}
 					?disabled=${inherited}></uui-input>
 			</div> `;
@@ -178,7 +222,11 @@ UmbDocumentTypeWorkspaceViewEditTabElement.styles = [
     UmbTextStyles,
     css `
 			[drag-placeholder] {
-				opacity: 0.2;
+				opacity: 0.5;
+			}
+
+			[drag-placeholder] > * {
+				visibility: hidden;
 			}
 
 			#add {

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

@@ -9,7 +9,13 @@ 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 _UmbDocumentTypeWorkspaceViewEditElement_instances, _UmbDocumentTypeWorkspaceViewEditElement_sorter, _UmbDocumentTypeWorkspaceViewEditElement_changeMode, _UmbDocumentTypeWorkspaceViewEditElement_requestRemoveTab, _UmbDocumentTypeWorkspaceViewEditElement_remove, _UmbDocumentTypeWorkspaceViewEditElement_addTab, _UmbDocumentTypeWorkspaceViewEditElement_focusInput, _UmbDocumentTypeWorkspaceViewEditElement_tabNameChanged, _UmbDocumentTypeWorkspaceViewEditElement_openCompositionModal, _UmbDocumentTypeWorkspaceViewEditElement_changeOrderNumber;
+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 _UmbDocumentTypeWorkspaceViewEditElement_instances, _UmbDocumentTypeWorkspaceViewEditElement_model, _UmbDocumentTypeWorkspaceViewEditElement_sorter, _UmbDocumentTypeWorkspaceViewEditElement_changeMode, _UmbDocumentTypeWorkspaceViewEditElement_requestRemoveTab, _UmbDocumentTypeWorkspaceViewEditElement_remove, _UmbDocumentTypeWorkspaceViewEditElement_addTab, _UmbDocumentTypeWorkspaceViewEditElement_focusInput, _UmbDocumentTypeWorkspaceViewEditElement_tabNameChanged, _UmbDocumentTypeWorkspaceViewEditElement_openCompositionModal, _UmbDocumentTypeWorkspaceViewEditElement_changeOrderNumber;
 import { UMB_COMPOSITION_PICKER_MODAL } from '../../../modals/index.js';
 import { css, html, customElement, state, repeat, nothing, ifDefined } from '../../../../../../external/lit/index.js';
 import { UmbContentTypeContainerStructureHelper } from '../../../../../core/content-type/index.js';
@@ -24,6 +30,7 @@ let UmbDocumentTypeWorkspaceViewEditElement = class UmbDocumentTypeWorkspaceView
     constructor() {
         super();
         _UmbDocumentTypeWorkspaceViewEditElement_instances.add(this);
+        _UmbDocumentTypeWorkspaceViewEditElement_model.set(this, []);
         _UmbDocumentTypeWorkspaceViewEditElement_sorter.set(this, new UmbSorterController(this, {
             getUniqueOfElement: (element) => element.getAttribute('data-umb-tabs-id'),
             getUniqueOfModel: (modelEntry) => modelEntry.id,
@@ -33,9 +40,41 @@ let UmbDocumentTypeWorkspaceViewEditElement = class UmbDocumentTypeWorkspaceView
             disabledItemSelector: '#root-tab',
             resolveVerticalDirection: () => false,
             onChange: ({ model }) => {
-                model.forEach((modelItem, index) => {
-                    this._tabsStructureHelper.partialUpdateContainer(modelItem.id, { sortOrder: index });
-                });
+                __classPrivateFieldSet(this, _UmbDocumentTypeWorkspaceViewEditElement_model, model, "f");
+                this._tabs = model;
+            },
+            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, _UmbDocumentTypeWorkspaceViewEditElement_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._tabsStructureHelper.partialUpdateContainer(item.id, { sortOrder: model[1].sortOrder - 1 });
+                    return;
+                }
+                // Not first in list
+                if (newIndex > 0 && model.length > 1) {
+                    const prevItemSortOrder = model[newIndex - 1].sortOrder;
+                    let weight = 1;
+                    this._tabsStructureHelper.partialUpdateContainer(item.id, { sortOrder: prevItemSortOrder + weight });
+                    // Check for overlaps
+                    model.some((entry, index) => {
+                        if (index <= newIndex)
+                            return;
+                        if (entry.sortOrder === prevItemSortOrder + weight) {
+                            weight++;
+                            this._tabsStructureHelper.partialUpdateContainer(entry.id, { sortOrder: prevItemSortOrder + weight });
+                        }
+                        // Break the loop
+                        return true;
+                    });
+                }
             },
         }));
         //private _hasRootProperties = false;
@@ -49,6 +88,12 @@ let UmbDocumentTypeWorkspaceViewEditElement = class UmbDocumentTypeWorkspaceView
         this._tabsStructureHelper.setContainerChildType('Tab');
         this.observe(this._tabsStructureHelper.containers, (tabs) => {
             this._tabs = tabs;
+            if (this._sortModeActive) {
+                __classPrivateFieldGet(this, _UmbDocumentTypeWorkspaceViewEditElement_sorter, "f").setModel(tabs);
+            }
+            else {
+                __classPrivateFieldGet(this, _UmbDocumentTypeWorkspaceViewEditElement_sorter, "f").setModel([]);
+            }
             this._createRoutes();
         });
         // _hasRootProperties can be gotten via _tabsStructureHelper.hasProperties. But we do not support root properties currently.
@@ -260,6 +305,7 @@ let UmbDocumentTypeWorkspaceViewEditElement = class UmbDocumentTypeWorkspaceView
 		</uui-button>`;
     }
 };
+_UmbDocumentTypeWorkspaceViewEditElement_model = new WeakMap();
 _UmbDocumentTypeWorkspaceViewEditElement_sorter = new WeakMap();
 _UmbDocumentTypeWorkspaceViewEditElement_instances = new WeakSet();
 _UmbDocumentTypeWorkspaceViewEditElement_changeMode = function _UmbDocumentTypeWorkspaceViewEditElement_changeMode() {
@@ -367,7 +413,11 @@ UmbDocumentTypeWorkspaceViewEditElement.styles = [
 			}
 
 			[drag-placeholder] {
-				opacity: 0.2;
+				opacity: 0.5;
+			}
+
+			[drag-placeholder] uui-input {
+				visibility: hidden;
 			}
 
 			/* TODO: This should be replaced with a general workspace bar — naming is hard */