From aeb8dfc6a2f1fbfc8307d3dc79a59bf8cd0a7333 Mon Sep 17 00:00:00 2001
From: Julia Gru <56249914+julczka@users.noreply.github.com>
Date: Tue, 9 May 2023 11:18:13 +0200
Subject: [PATCH] submit section snippet

---
 .../insert-section-input.element.ts               | 15 ++++++++++-----
 .../insert-section-modal.element.ts               | 10 ++++++++--
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-input.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-input.element.ts
index c23197b2d1..4b0e236761 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-input.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-input.element.ts
@@ -2,6 +2,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { css, html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { UUIBooleanInputElement, UUIInputElement } from '@umbraco-ui/uui';
+import { getAddSectionSnippet, getRenderBodySnippet, getRenderSectionSnippet } from '../../utils';
 
 @customElement('umb-insert-section-checkbox')
 export class UmbInsertSectionCheckboxElement extends UUIBooleanInputElement {
@@ -16,15 +17,18 @@ export class UmbInsertSectionCheckboxElement extends UUIBooleanInputElement {
 	showInput = false;
 
 	@query('uui-input')
-	input!: UUIInputElement;
+	input?: UUIInputElement;
 
 	@query('form')
-	form!: HTMLFormElement;
+	form?: HTMLFormElement;
 
 	@query('uui-checkbox')
-	checkbox!: HTMLFormElement;
+	checkbox?: HTMLFormElement;
 
 	validate() {
+
+		if(!this.form) return true;
+
 		this.form.requestSubmit();
 		return this.form.checkValidity();
 	}
@@ -34,13 +38,14 @@ export class UmbInsertSectionCheckboxElement extends UUIBooleanInputElement {
 	}
 
 	get inputValue() {
-		return this.input.value;
+		return this.input?.value;
 	}
 
 	get isMandatory() {
-		return this.checkbox.checked;
+		return this.checkbox?.checked;
 	}
 
+
 	render() {
 		return html`
 			${super.render()}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-modal.element.ts
index ad2d058f19..7f3bb25f16 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/templating/modals/insert-section-modal/insert-section-modal.element.ts
@@ -7,6 +7,7 @@ import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
 
 import './insert-section-input.element';
 import UmbInsertSectionCheckboxElement from './insert-section-input.element';
+import { getAddSectionSnippet, getRenderBodySnippet, getRenderSectionSnippet } from '../../utils';
 
 export const UMB_MODAL_TEMPLATING_INSERT_SECTION_MODAL = new UmbModalToken(
 	UMB_MODAL_TEMPLATING_INSERT_SECTION_SIDEBAR_ALIAS,
@@ -31,6 +32,9 @@ export default class UmbTemplatingInsertSectionModalElement extends UmbModalBase
 	@state()
 	selectedCheckbox?: UmbInsertSectionCheckboxElement | null = null;
 
+	@state()
+	snippet = '';
+
 	#chooseSection(event: Event) {
 		event.stopPropagation();
 		const target = event.target as UmbInsertSectionCheckboxElement;
@@ -41,6 +45,7 @@ export default class UmbTemplatingInsertSectionModalElement extends UmbModalBase
 		}
 		if (target.checked) {
 			this.selectedCheckbox = target;
+			this.snippet = this.snippetMethods[checkboxes.indexOf(target)](target?.inputValue as string, target?.isMandatory);
 			checkboxes.forEach((checkbox) => {
 				if (checkbox !== target) {
 					checkbox.checked = false;
@@ -53,13 +58,14 @@ export default class UmbTemplatingInsertSectionModalElement extends UmbModalBase
 		this.selectedCheckbox = this.checkboxes[0];
 	}
 
+	snippetMethods = [getRenderBodySnippet, getRenderSectionSnippet, getAddSectionSnippet];
+
 	#close() {
 		this.modalHandler?.reject();
 	}
 
 	#submit() {
-		if(this.selectedCheckbox?.validate())
-		this.modalHandler?.submit({ value: (this.selectedCheckbox?.inputValue as string) ?? '' });
+		if (this.selectedCheckbox?.validate()) this.modalHandler?.submit({ value: this.snippet ?? '' });
 	}
 
 	render() {