change node property tempValue to data array

src/Umbraco.Web.UI.Client/src/backoffice/components/node-editor.element.ts

@@ -104,13 +104,20 @@ export class UmbNodeEditor extends UmbContextConsumerMixin(LitElement) {
 		// TODO: Set value.
 		const property = this._node?.properties.find((x) => x.alias === target.property.alias);
 		if (property) {
-			// TODO: Dont set the temp value, but set it on the data part of our model.
-			property.tempValue = target.value;
+			this._setPropertyValue(property.alias, target.value);
 		} else {
 			console.error('property was not found', target.property.alias);
 		}
 	};
 
+	private _setPropertyValue(alias: string, value: unknown) {
+		this._node?.data.forEach((data) => {
+			if (data.alias === alias) {
+				data.value = value;
+			}
+		});
+	}
+
 	private _useNode() {
 		this._nodeSubscription?.unsubscribe();
 

src/Umbraco.Web.UI.Client/src/backoffice/editor-views/editor-view-node-edit.element.ts

@@ -1,6 +1,7 @@
 import { css, html, LitElement } from 'lit';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, property } from 'lit/decorators.js';
+import { DocumentNode, NodeProperty } from '../../mocks/data/content.data';
 
 @customElement('umb-editor-view-node-edit')
 export class UmbEditorViewNodeEdit extends LitElement {
@@ -15,16 +16,17 @@ export class UmbEditorViewNodeEdit extends LitElement {
 		`,
 	];
 
-	@property()
-	node: any;
+	@property({ type: Object })
+	node?: DocumentNode;
 
 	render() {
 		return html`
 			<uui-box>
-				<!-- TODO: Make sure map get data from data object?, parse on property object. -->
 				${this.node?.properties.map(
-					(property: any) => html`
-						<umb-node-property .property=${property} .value=${property.tempValue}> </umb-node-property>
+					(property: NodeProperty) => html`
+						<umb-node-property
+							.property=${property}
+							.value=${this.node?.data.find((data) => data.alias === property.alias)?.value}></umb-node-property>
 						<hr />
 					`
 				)}

src/Umbraco.Web.UI.Client/src/mocks/data/content.data.ts

@@ -4,8 +4,8 @@ export interface DocumentNode {
 	name: string;
 	alias: string;
 	icon: string; // TODO: should come from the doc type?
-	properties: NodeProperty[];
-	//data: any; // TODO: define data type
+	properties: Array<NodeProperty>;
+	data: Array<NodePropertyData>;
 	//layout?: any; // TODO: define layout type - make it non-optional
 }
 
@@ -23,7 +23,11 @@ export interface NodeProperty {
 	label: string;
 	description: string;
 	dataTypeKey: string;
-	tempValue: string; // TODO: remove this - only used for testing
+}
+
+export interface NodePropertyData {
+	alias: string;
+	value: unknown;
 }
 
 /* TODO:
@@ -46,29 +50,24 @@ export const data: Array<DocumentNode> = [
 				label: 'Headline',
 				description: 'Text string property',
 				dataTypeKey: 'dt-1',
-				tempValue: 'The daily life at Umbraco HQ',
 			},
 			{
 				alias: 'myDescription',
 				label: 'Description',
 				description: 'Textarea property',
 				dataTypeKey: 'dt-2',
-				tempValue: 'Every day, a rabbit in a military costume greets me at the front door',
 			},
 		],
-		/*
-    // Concept for stored values, better approach for variants, separating data from structure/configuration, still needs structure for variants. (We could actually split it up so we have each variants data through a separate end-point?)
-    data: [
-      {
-        alias: 'myHeadline',
-        value: 'hello world',
-      },
-      {
-        alias: 'myDescription',
-        value: 'Teeeeexxxt areaaaaaa',
-      },
-    ],
-    */
+		data: [
+			{
+				alias: 'myHeadline',
+				value: 'The daily life at Umbraco HQ',
+			},
+			{
+				alias: 'myDescription',
+				value: 'Every day, a rabbit in a military costume greets me at the front door',
+			},
+		],
 		/*
     // Concept for node layout, separation of design from config and data.
     layout: [
@@ -100,29 +99,43 @@ export const data: Array<DocumentNode> = [
 				label: 'Text string label',
 				description: 'this is a text string property',
 				dataTypeKey: 'dt-1',
-				tempValue: 'Is it all just fun and curling and scary rabbits?',
 			},
 			{
 				alias: 'myDescription',
 				label: 'Textarea label',
 				description: 'This is the a textarea property',
 				dataTypeKey: 'dt-2',
-				tempValue:
-					"So no, there's not confetti every day. And no, there's not champagne every week or a crazy rabbit running around 🐰",
 			},
 			{
 				alias: 'myExternalEditor',
 				label: 'My JS Property Editor',
 				description: 'This is the a external property',
 				dataTypeKey: 'dt-3',
-				tempValue: 'Tex lkasdfkljdfsa 1',
 			},
 			{
 				alias: 'myContextExampleEditor',
 				label: 'Context example label',
 				description: 'This is the a example property',
 				dataTypeKey: 'dt-4',
-				tempValue: '',
+			},
+		],
+		data: [
+			{
+				alias: 'myHeadline',
+				value: 'Is it all just fun and curling and scary rabbits?',
+			},
+			{
+				alias: 'myDescription',
+				value:
+					"So no, there's not confetti every day. And no, there's not champagne every week or a crazy rabbit running around 🐰",
+			},
+			{
+				alias: 'myExternalEditor',
+				value: 'Tex lkasdfkljdfsa 1',
+			},
+			{
+				alias: 'myContextExampleEditor',
+				value: '',
 			},
 		],
 	},