add field creation logic

src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-value-sidebar.element.ts

@@ -1,7 +1,8 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css';
-import { css, html } from 'lit';
+import { PropertyValueMap, css, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
+import { UUIComboboxElement, UUIInputElement } from '@umbraco-ui/uui';
 
 @customElement('umb-insert-value-sidebar')
 export default class UmbInsertValueSidebarElement extends UmbModalBaseElement<object, string> {
@@ -40,12 +41,58 @@ export default class UmbInsertValueSidebarElement extends UmbModalBaseElement<ob
 	}
 
 	private _submit() {
-		this.modalHandler?.submit('I am some value to be inserted');
+		this.modalHandler?.submit(this.output);
 	}
 
 	@state()
 	showDefaultValueInput = false;
 
+	@state()
+	recursive = false;
+
+	@state()
+	defaultValue: string | null = null;
+
+	@state()
+	field: string | null = null;
+
+	@state()
+	output = '';
+
+	protected willUpdate(): void {
+		this.output = this.generateOutputSample();
+	}
+
+	#setField(event: Event) {
+		const target = event.target as UUIComboboxElement;
+		this.field = target.value as string;
+	}
+
+	#setDefaultValue(event: Event) {
+		const target = event.target as UUIInputElement;
+		this.defaultValue = target.value === '' ? null : (target.value as string);
+	}
+
+	generateOutputSample() {
+		let fallback = null;
+
+		if (this.recursive !== false && this.defaultValue !== null) {
+			fallback = 'Fallback.To(Fallback.Ancestors, Fallback.DefaultValue)';
+		} else if (this.recursive !== false) {
+			fallback = 'Fallback.ToAncestors';
+		} else if (this.defaultValue !== null) {
+			fallback = 'Fallback.ToDefaultValue';
+		}
+
+		const field = `${this.field !== null ? `@Model.Value("${this.field}"` : ''}, ${
+			fallback !== null ? `fallback: ${fallback}` : ''
+		}, ${this.defaultValue !== null ? `defaultValue: new HtmlString("${this.defaultValue}")` : ''}${
+			this.field ? ')' : ''
+		}`;
+
+		return field;
+	}
+
 	render() {
 		return html`
 			<umb-workspace-layout headline="Insert">
@@ -53,7 +100,7 @@ export default class UmbInsertValueSidebarElement extends UmbModalBaseElement<ob
 					<uui-box>
 						<uui-form-layout-item>
 							<uui-label slot="label" for="field-selector">Choose field</uui-label>
-							<uui-combobox id="field-selector">
+							<uui-combobox id="field-selector" @change=${this.#setField}>
 								<uui-combobox-list>
 									<uui-combobox-list-option style="padding: 8px"> apple </uui-combobox-list-option>
 									<uui-combobox-list-option style="padding: 8px"> orange </uui-combobox-list-option>
@@ -64,7 +111,13 @@ export default class UmbInsertValueSidebarElement extends UmbModalBaseElement<ob
 						${this.showDefaultValueInput
 							? html` <uui-form-layout-item>
 									<uui-label slot="label" for="default-value">Default value</uui-label>
-									<uui-input id="default-value" type="text" name="default-value" label="default value"> </uui-input>
+									<uui-input
+										id="default-value"
+										type="text"
+										name="default-value"
+										label="default value"
+										@input=${this.#setDefaultValue}>
+									</uui-input>
 							  </uui-form-layout-item>`
 							: html` <uui-button
 									@click=${() => (this.showDefaultValueInput = true)}
@@ -74,11 +127,11 @@ export default class UmbInsertValueSidebarElement extends UmbModalBaseElement<ob
 							  >`}
 						<uui-form-layout-item>
 							<uui-label slot="label" for="default-value">Recursive</uui-label>
-							<uui-checkbox>Yes, make it recursive</uui-checkbox>
+							<uui-checkbox @change=${() => (this.recursive = !this.recursive)}>Yes, make it recursive</uui-checkbox>
 						</uui-form-layout-item>
 						<uui-form-layout-item>
 							<uui-label slot="label">Output sample</uui-label>
-							<uui-code-block> Some code that goes here... </uui-code-block>
+							<uui-code-block>${this.output}</uui-code-block>
 						</uui-form-layout-item>
 					</uui-box>
 				</div>