Pre-alpha release tidy-up

Added missing property-editor UI aliases on the data-sources and list-editors.
Updated the progress status dashboard.

Author: leekelleher

src/Umbraco.Community.Contentment/Client/src/dashboard/bellissima-status/bellissima-status.element.ts

@@ -15,7 +15,7 @@ const UmbMarked = new Marked({ gfm: true, breaks: true });
 const elementName = 'umb-bellissima-status-dashboard-element';
 @customElement(elementName)
 export class UmbBellissimaStatusDashboardElement extends UmbLitElement {
-	#started = 36;
+	#started = 40;
 	#total = 63;
 	#percentage = Math.floor((this.#started / this.#total) * 100);
 
@@ -29,12 +29,10 @@ export class UmbBellissimaStatusDashboardElement extends UmbLitElement {
 				markup: `
 <p>During the alpha phase of Contentment v6.0, this dashboard will appear to provide a status update of progress on Contentment for Umbraco Bellissima.</p>
 <p>Once the development is out of the alpha phase, this dashboard <strong>will be removed</strong> from stable releases.</p>
-<p>Development has started on <strong>${this.#started} of the ${
-					this.#total
-				}</strong> UI components. Package migration is <strong>${
-					this.#percentage
-				}% complete</strong>.</p>
-<uui-progress-bar progress="${this.#percentage}" style="background-color:var(--uui-color-divider)"></uui-progress-bar>`,
+<p>Development has started on <strong>${this.#started} of the ${this.#total}</strong> UI components. Package migration is <strong>${this.#percentage}% complete</strong>.</p>
+<uui-progress-bar progress="${this.#percentage}" style="background-color:var(--uui-color-divider)"></uui-progress-bar>
+<p>If you find any bugs, or feel something is amiss, then please raise an issue on <a href="https://github.com/leekelleher/umbraco-contentment/issues" target="_blank" rel="noopener">the Contentment source-code repository on GitHub</a>.</p>
+<p>Pleaes do keep in mind that I am a solo developer on this project, working on it in my own free time.</p>`,
 			},
 		},
 	]);
@@ -92,13 +90,13 @@ Status of list-editors used by the Data List editor.
 
 | :octocat:       | Editor          | Status      | Comment |
 | --------------- | --------------- | ----------- | ------- |
-| :green_circle: | **Buttons** | **Done** |  |
+| :green_circle: | **Buttons** | **Done** | |
 | :green_circle: | **Checkbox List** | **Done** |  |
-| :green_circle: | **Dropdown List** | **Done** |  |
+| :large_blue_circle: | **Dropdown List** | **Done** | :warning: Missing "HTML attributes" UI.  |
 | :grey_question: | Item Picker | _Pending_ | I haven't thought about it yet. |
 | :green_circle: | **Radio Button List** | **Done** |  |
 | :grey_question: | Tags | _Pending_ | I haven't thought about it yet. |
-| :thinking: | Templated List | _Researching_ | Exploring alternative options. |
+| :thinking: | Templated List | _Researching_ | Exploring alternative options. :warning: Missing "HTML attributes" UI. |
 
 ### Data List sources
 
@@ -109,7 +107,7 @@ The majority of this work is reliant on the internal **Configuration Editor** UI
 | --------------- | --------------- | ----------- | ------- |
 | :green_circle: | **.NET Countries** | **Done** | |
 | :green_circle: | **.NET Currencies** | **Done** | |
-| :grey_question: | .NET Enum | _Pending_ | I haven't thought about it yet. |
+| :large_blue_circle: | .NET Enum | _Reviewed_ | Missing "Enumeration type" UI. |
 | :green_circle: | **.NET Languages** | **Done** | |
 | :green_circle: | **.NET Time Zone** | **Done** | |
 | :green_circle: | Examine | **Done** | |
@@ -120,23 +118,23 @@ The majority of this work is reliant on the internal **Configuration Editor** UI
 | :green_circle: | **Text Delimited** | **Done** | |
 | :green_circle: | **uCssClassName** | **Done** | |
 | :thinking: | Umbraco Backoffice Sections | _Researching_ | :no_entry_sign: Backoffice sections are now registered client-side, unable to query on the server. Exploring alternative options. |
-| :grey_question: | Umbraco Content | _Pending_ | I haven't thought about it yet. |
-| :grey_question: | Umbraco Content Properties | _Pending_ | I haven't thought about it yet. |
+| :large_blue_circle: | Umbraco Content | _Reviewed_ | Missing "Parent node" UI. |
+| :large_blue_circle: | Umbraco Content Properties | _Reviewed_ | Missing "Content Type UI". |
 | :grey_question: | Umbraco Content Property Value | _Pending_ | I haven't thought about it yet. |
 | :grey_question: | Umbraco Content Types | _Pending_ | I haven't thought about it yet. |
 | :no_entry_sign: | Umbraco Content XPath | **Deprecated** | Umbraco 14 doesn't support XPath in the content cache. |
-| :grey_question: | Umbraco Dictionary | _Pending_ | I haven't thought about it yet. |
-| :grey_question: | Umbraco Entity | _Pending_ | I haven't thought about it yet. |
+| :large_blue_circle: | Umbraco Dictionary | _Reviewed_ | Missing "Dictionary Item" UI. |
+| :green_circle: | **Umbraco Entity** | **Done** | |
 | :grey_question: | Umbraco Files | _Pending_ | I haven't thought about it yet. |
-| :grey_question: | Umbraco Image Crop | _Pending_ | I haven't thought about it yet. |
+| :green_circle: | **Umbraco Image Crop** | **Done** | |
 | :green_circle: | **Umbraco Languages** | **Done** |  |
 | :green_circle: | **Umbraco Member Group** | **Done** | |
-| :grey_question: | Umbraco Members | _Pending_ | I haven't thought about it yet. |
-| :grey_question: | Umbraco Tags | _Pending_ | I haven't thought about it yet. |
-| :grey_question: | Umbraco Templates | _Pending_ | I haven't thought about it yet. |
+| :large_blue_circle: | Umbraco Members | _Reviewed_ | Missing "Member Type" UI. |
+| :green_circle: | **Umbraco Tags** | **Done** | |
+| :green_circle: | **Umbraco Templates** | **Done** | |
 | :green_circle: | **Umbraco User Group** | **Done** | |
-| :grey_question: | Umbraco Users | _Pending_ | I haven't thought about it yet. |
-| :grey_question: | User Defined | _Pending_ | I haven't thought about it yet. |
+| :large_blue_circle: | Umbraco Users | _Reviewed_ | Missing "User Group" UI. |
+| :large_blue_circle: | User Defined | _Reviewed_ | Missing "Options" UI. |
 | :green_circle: | **XML** | **Done** | |
 | :green_circle: | **XML Sitemap Change Frequency** | **Done** | |
 | :green_circle: | **XML Sitemap Priority** | **Done** | |

src/Umbraco.Community.Contentment/Client/src/property-editor-ui/data-list/data-list.element.ts

@@ -9,8 +9,8 @@ import {
 	UmbPropertyEditorConfigCollection,
 	UmbPropertyValueChangeEvent,
 } from '@umbraco-cms/backoffice/property-editor';
-import { UMB_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/property';
-import { UMB_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace';
+// import { UMB_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/property';
+// import { UMB_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace';
 import type { ContentmentConfigurationEditorValue, ContentmentDataListEditor } from '../types.js';
 import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
 
@@ -23,14 +23,14 @@ const ELEMENT_NAME = 'contentment-property-editor-ui-data-list';
 export class ContentmentPropertyEditorUIDataListElement extends UmbLitElement implements UmbPropertyEditorUiElement {
 	#listEditor?: ContentmentDataListEditor;
 
-	@state()
-	private _entityUnique?: string | null;
+	// @state()
+	// private _entityUnique?: string | null;
 
-	@state()
-	private _propertyAlias?: string;
+	// @state()
+	// private _propertyAlias?: string;
 
-	@state()
-	private _variantId?: string;
+	// @state()
+	// private _variantId?: string;
 
 	@state()
 	private _initialized = false;
@@ -53,15 +53,15 @@ export class ContentmentPropertyEditorUIDataListElement extends UmbLitElement im
 	constructor() {
 		super();
 
-		this.consumeContext(UMB_WORKSPACE_CONTEXT, (entityContext) => {
-			// @ts-ignore
-			this.observe(entityContext.unique, (unique) => (this._entityUnique = unique));
-		});
+		// this.consumeContext(UMB_WORKSPACE_CONTEXT, (entityContext) => {
+		// 	// @ts-ignore
+		// 	this.observe(entityContext.unique, (unique) => (this._entityUnique = unique));
+		// });
 
-		this.consumeContext(UMB_PROPERTY_CONTEXT, (propertyContext) => {
-			this.observe(propertyContext.alias, (alias) => (this._propertyAlias = alias));
-			this.observe(propertyContext.variantId, (variantId) => (this._variantId = variantId?.toString() || 'invariant'));
-		});
+		// this.consumeContext(UMB_PROPERTY_CONTEXT, (propertyContext) => {
+		// 	this.observe(propertyContext.alias, (alias) => (this._propertyAlias = alias));
+		// 	this.observe(propertyContext.variantId, (variantId) => (this._variantId = variantId?.toString() || 'invariant'));
+		// });
 	}
 
 	protected async firstUpdated() {
@@ -101,7 +101,7 @@ export class ContentmentPropertyEditorUIDataListElement extends UmbLitElement im
 	render() {
 		if (!this._initialized || !this.#listEditor) return html`<uui-loader></uui-loader>`;
 		if (!this.#listEditor.propertyEditorUiAlias) return html`<contentment-lee-was-here></contentment-lee-was-here>`;
-		console.log('data-list', [this._entityUnique, this._propertyAlias, this._variantId]);
+		//console.log('data-list', [this._entityUnique, this._propertyAlias, this._variantId]);
 		return html`
 			<contentment-property-editor-ui
 				.config=${this.#listEditor.config}

src/Umbraco.Community.Contentment/Client/src/property-editor-ui/editor-notes/editor-notes.element.ts

@@ -33,8 +33,8 @@ export class ContentmentPropertyEditorUIEditorNotesElement extends UmbLitElement
 		this.#alertType = config.getValueByAlias('alertType') || 'default';
 		this.#icon = config.getValueByAlias('icon');
 		this.#heading = config.getValueByAlias('heading');
-    const message = config.getValueByAlias('message');
-    this.#message = typeof message === 'string' ? message : (message as unknown as any).markup;
+		const message = config.getValueByAlias('message');
+		this.#message = (message as unknown as any)?.markup ?? message;
 		this.#hideLabel = parseBoolean(config.getValueByAlias('hideLabel'));
 
 		if (this.#icon) {
@@ -90,9 +90,9 @@ export class ContentmentPropertyEditorUIEditorNotesElement extends UmbLitElement
 				padding: 1rem;
 			}
 
-      #note  > div {
-        flex: 1;
-      }
+			#note > div {
+				flex: 1;
+			}
 
 			umb-icon {
 				font-size: 3rem;
@@ -107,6 +107,7 @@ export class ContentmentPropertyEditorUIEditorNotesElement extends UmbLitElement
 
 			details > summary {
 				cursor: pointer;
+				font-weight: bold;
 			}
 		`,
 	];

src/Umbraco.Community.Contentment/Client/src/property-editor-ui/read-only/read-only.element.ts

@@ -1,59 +1,58 @@
-import { css, customElement, html, property } from '@umbraco-cms/backoffice/external/lit';
+import { customElement, html, nothing, property } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
 
-const ELEMENT_NAME = 'contentment-property-editor-ui-templated-label';
+import '../../property-editor-ui/editor-notes/editor-notes.element.js';
+
+const ELEMENT_NAME = 'contentment-property-editor-ui-read-only';
 
 @customElement(ELEMENT_NAME)
-export class ContentmentPropertyEditorUITemplatedLabelElement
+export class ContentmentPropertyEditorUIReadOnlyElement
 	extends UmbLitElement
 	implements UmbPropertyEditorUiElement
 {
 	@property({ attribute: false })
 	public value?: unknown;
 
-	@property({ attribute: false })
-	public config?: UmbPropertyEditorConfigCollection;
+	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
+		if (!config) return;
+
+		const jsonConfig = JSON.stringify(config, null, 2);
+		const jsonValue = JSON.stringify(this.value, null, 2);
+		const markup = `
+<p><em>The property value and data-type configuration are in read-only mode.</em></p>
+${jsonValue ? `<details><summary>Value</summary><umb-code-block copy>${jsonValue}</umb-code-block></details>` : ''}
+${jsonConfig ? `<details><summary>Configuration</summary><umb-code-block copy>${jsonConfig}</umb-code-block></details>`	: ''}
+`;
+
+		this.#notesConfig = new UmbPropertyEditorConfigCollection([
+			{ alias: 'alertType', value: 'warning' },
+			{ alias: 'icon', value: 'icon-alert' },
+			{ alias: 'heading', value: 'This editor has not been developed yet.' },
+			{ alias: 'message', value: { markup } },
+		]);
+	}
+
+	#notesConfig?: UmbPropertyEditorConfigCollection;
 
 	constructor() {
 		super();
 	}
 
 	render() {
+		if (!this.#notesConfig) return nothing;
 		return html`
-			<div>
-				<p><em>This is a read-only view of the property value and data-type configuration.</em></p>
-				<details>
-					<summary>Value</summary>
-					<umb-code-block copy>${JSON.stringify(this.value, null, 2)}</umb-code-block>
-				</details>
-				<details>
-					<summary>Configuration</summary>
-					<umb-code-block copy>${JSON.stringify(this.config, null, 2)}</umb-code-block>
-				</details>
-			</div>
+			<contentment-property-editor-ui-editor-notes .config=${this.#notesConfig}>
+			</contentment-property-editor-ui-editor-notes>
 		`;
 	}
-
-	static styles = [
-		css`
-			details > summary {
-				cursor: pointer;
-				font-weight: bold;
-			}
-
-			umb-code-block {
-				margin-bottom: 1rem;
-			}
-		`,
-	];
 }
 
-export { ContentmentPropertyEditorUITemplatedLabelElement as element };
+export { ContentmentPropertyEditorUIReadOnlyElement as element };
 
 declare global {
 	interface HTMLElementTagNameMap {
-		[ELEMENT_NAME]: ContentmentPropertyEditorUITemplatedLabelElement;
+		[ELEMENT_NAME]: ContentmentPropertyEditorUIReadOnlyElement;
 	}
 }

src/Umbraco.Community.Contentment/Client/src/property-editor-ui/render-macro/render-macro.element.ts

@@ -1,7 +1,7 @@
 // SPDX-License-Identifier: MPL-2.0
 // Copyright © 2023 Lee Kelleher
 
-import { customElement, html, property } from '@umbraco-cms/backoffice/external/lit';
+import { customElement, html, nothing, property } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
 import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
@@ -15,15 +15,10 @@ export class ContentmentPropertyEditorUIRenderMacroElement extends UmbLitElement
 	@property()
 	public value?: string;
 
-	@property({ attribute: false })
-	config?: UmbPropertyEditorConfigCollection;
+	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
+		if (!config) return;
 
-	#notesConfig?: UmbPropertyEditorConfigCollection;
-
-	connectedCallback() {
-		super.connectedCallback();
-
-		const json = JSON.stringify(this.config, null, 2);
+		const json = JSON.stringify(config, null, 2);
 		const markup = `
 <p><em>Support for Macros were deprecated in Umbraco 14. Please consider alternative functionality.</em></p>
 ${json ? `<details><summary>Macro configuration</summary><umb-code-block copy>${json}</umb-code-block></details>` : ''}
@@ -37,7 +32,10 @@ ${json ? `<details><summary>Macro configuration</summary><umb-code-block copy>${
 		]);
 	}
 
+	#notesConfig?: UmbPropertyEditorConfigCollection;
+
 	render() {
+		if (!this.#notesConfig) return nothing;
 		return html`
 			<contentment-property-editor-ui-editor-notes .config=${this.#notesConfig}>
 			</contentment-property-editor-ui-editor-notes>

src/Umbraco.Community.Contentment/DataEditors/Buttons/ButtonsDataListEditor.cs

@@ -13,6 +13,8 @@ public sealed class ButtonsDataListEditor : IDataListEditor
     {
         internal const string DataEditorViewPath = Constants.Internals.EditorsPathRoot + "buttons.html";
 
+        internal const string DataEditorUiAlias = "Umb.Contentment.PropertyEditorUi.Buttons";
+
         private readonly IIOHelper _ioHelper;
 
         public ButtonsDataListEditor(IIOHelper ioHelper)
@@ -106,6 +108,6 @@ public bool HasMultipleValues(Dictionary<string, object>? config)
 
         public string View => DataEditorViewPath;
 
-        public string PropertyEditorUiAlias => "Umb.Contentment.PropertyEditorUi.Buttons";
+        public string PropertyEditorUiAlias => DataEditorUiAlias;
     }
 }

src/Umbraco.Community.Contentment/DataEditors/CascadingDropdownList/CascadingDropdownListDataEditor.cs

@@ -1,4 +1,4 @@
-/* Copyright © 2019 Lee Kelleher.
+/* Copyright © 2019 Lee Kelleher.
  * This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
@@ -10,5 +10,8 @@ internal sealed class CascadingDropdownListDataEditor
         internal const string APIs = "apis";
 
         internal const string DataEditorViewPath = Constants.Internals.EditorsPathRoot + "cascading-dropdown-list.html";
+
+        // TODO: [LK] This property-editor UI needs to be developed.
+        internal const string DataEditorUiAlias = "Umb.Contentment.PropertyEditorUi.ReadOnly";
     }
 }

src/Umbraco.Community.Contentment/DataEditors/CheckboxList/CheckboxListDataListEditor.cs

@@ -10,6 +10,7 @@ namespace Umbraco.Community.Contentment.DataEditors
     public sealed class CheckboxListDataListEditor : IDataListEditor
     {
         internal const string DataEditorViewPath = Constants.Internals.EditorsPathRoot + "checkbox-list.html";
+        internal const string DataEditorUiAlias = "Umb.Contentment.PropertyEditorUi.CheckBoxList";
 
         public string Name => "Checkbox List";
 
@@ -43,6 +44,6 @@ public sealed class CheckboxListDataListEditor : IDataListEditor
 
         public string View => DataEditorViewPath;
 
-        public string PropertyEditorUiAlias => "Umb.Contentment.PropertyEditorUi.CheckBoxList";
+        public string PropertyEditorUiAlias => DataEditorUiAlias;
     }
 }

src/Umbraco.Community.Contentment/DataEditors/ConfigurationEditor/ConfigurationEditorDataEditor.cs

@@ -13,5 +13,8 @@ internal sealed class ConfigurationEditorDataEditor
         internal const string DataEditorInlineViewPath = Constants.Internals.EditorsPathRoot + "configuration-editor.inline.html";
         internal const string DataEditorOverlayViewPath = Constants.Internals.EditorsPathRoot + "configuration-editor.overlay.html";
         internal const string DataEditorIcon = UmbConstants.Icons.Package;
+
+        // TODO: [LK] This property-editor UI needs to be developed.
+        internal const string DataEditorUiAlias = "Umb.Contentment.PropertyEditorUi.ReadOnly";
     }
 }

src/Umbraco.Community.Contentment/DataEditors/ContentPicker/ContentPickerDataEditor.cs

@@ -1,4 +1,4 @@
-/* Copyright © 2020 Lee Kelleher.
+/* Copyright © 2020 Lee Kelleher.
  * This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
@@ -8,5 +8,8 @@ namespace Umbraco.Community.Contentment.DataEditors
     internal sealed class ContentPickerDataEditor
     {
         internal const string DataEditorViewPath = Constants.Internals.EditorsPathRoot + "content-source.html";
+
+        // TODO: [LK] This property-editor UI needs to be developed.
+        internal const string DataEditorUiAlias = "Umb.Contentment.PropertyEditorUi.ReadOnly";
     }
 }