From 79d005e11fbdb0587ffff2f437721218fb29bade Mon Sep 17 00:00:00 2001
From: Elizabeth Danzberger <lizzy7128@tutanota.de>
Date: Thu, 15 Aug 2024 14:38:02 -0400
Subject: feat(templates): add support for checkboxes in template filler

Signed-off-by: Elizabeth Danzberger <lizzy7128@tutanota.de>
---
 apps/files/src/components/TemplateFiller.vue       | 30 ++++++---
 .../TemplateFiller/TemplateCheckboxField.vue       | 68 +++++++++++++++++++
 .../TemplateFiller/TemplateRichTextField.vue       | 77 ++++++++++++++++++++++
 .../TemplateFiller/TemplateTextField.vue           | 67 -------------------
 4 files changed, 165 insertions(+), 77 deletions(-)
 create mode 100644 apps/files/src/components/TemplateFiller/TemplateCheckboxField.vue
 create mode 100644 apps/files/src/components/TemplateFiller/TemplateRichTextField.vue
 delete mode 100644 apps/files/src/components/TemplateFiller/TemplateTextField.vue

(limited to 'apps/files/src')

diff --git a/apps/files/src/components/TemplateFiller.vue b/apps/files/src/components/TemplateFiller.vue
index 926bcdd4dfd..bd3c28d585f 100644
--- a/apps/files/src/components/TemplateFiller.vue
+++ b/apps/files/src/components/TemplateFiller.vue
@@ -9,11 +9,8 @@
 			<form>
 				<h3>{{ t('files', 'Fill template fields') }}</h3>
 
-				<!-- We will support more than just text fields in the future -->
 				<div v-for="field in fields" :key="field.index">
-					<TemplateTextField v-if="field.type == 'rich-text'"
-						:field="field"
-						@input="trackInput" />
+					<component :is="getFieldComponent(field.type)" :field="field" @input="trackInput" />
 				</div>
 			</form>
 		</div>
@@ -29,11 +26,12 @@
 	</NcModal>
 </template>
 
-<script lang="ts">
+<script>
 import { defineComponent } from 'vue'
 import { NcModal, NcButton, NcLoadingIcon } from '@nextcloud/vue'
 import { translate as t } from '@nextcloud/l10n'
-import TemplateTextField from './TemplateFiller/TemplateTextField.vue'
+import TemplateRichTextField from './TemplateFiller/TemplateRichTextField.vue'
+import TemplateCheckboxField from './TemplateFiller/TemplateCheckboxField.vue'
 
 export default defineComponent({
 	name: 'TemplateFiller',
@@ -42,7 +40,8 @@ export default defineComponent({
 		NcModal,
 		NcButton,
 		NcLoadingIcon,
-		TemplateTextField,
+		TemplateRichTextField,
+		TemplateCheckboxField,
 	},
 
 	props: {
@@ -65,10 +64,21 @@ export default defineComponent({
 
 	methods: {
 		t,
-		trackInput([value, index]) {
-			this.localFields[index] = {
-				content: value,
+		trackInput({ index, property, value }) {
+			if (!this.localFields[index]) {
+				this.localFields[index] = {}
 			}
+
+			this.localFields[index][property] = value
+		},
+		getFieldComponent(fieldType) {
+			const fieldComponentType = fieldType.split('-')
+				.map((str) => {
+					return str.charAt(0).toUpperCase() + str.slice(1)
+				})
+				.join('')
+
+			return `Template${fieldComponentType}Field`
 		},
 		async submit() {
 			this.loading = true
diff --git a/apps/files/src/components/TemplateFiller/TemplateCheckboxField.vue b/apps/files/src/components/TemplateFiller/TemplateCheckboxField.vue
new file mode 100644
index 00000000000..632944f1bab
--- /dev/null
+++ b/apps/files/src/components/TemplateFiller/TemplateCheckboxField.vue
@@ -0,0 +1,68 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<div class="template-field__checkbox">
+		<NcCheckboxRadioSwitch :id="fieldId"
+			:checked.sync="value"
+			type="switch"
+			@update:checked="input">
+			{{ fieldLabel }}
+		</NcCheckboxRadioSwitch>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
+
+export default defineComponent({
+	name: 'TemplateCheckboxField',
+
+	components: {
+		NcCheckboxRadioSwitch,
+	},
+
+	props: {
+		field: {
+			type: Object,
+			default: () => {},
+		},
+	},
+
+	data() {
+		return {
+			value: this.field.checked ?? false,
+		}
+	},
+
+	computed: {
+		fieldLabel() {
+			const label = this.field.name ?? this.field.alias ?? 'Unknown field'
+
+			return label.charAt(0).toUpperCase() + label.slice(1)
+		},
+		fieldId() {
+			return 'checkbox-field' + this.field.index
+		},
+	},
+
+	methods: {
+		input() {
+			this.$emit('input', {
+				index: this.field.index,
+				property: 'checked',
+				value: this.value,
+			})
+		},
+	},
+})
+</script>
+
+<style lang="scss" scoped>
+.template-field__checkbox {
+  margin: 20px 0;
+}
+</style>
diff --git a/apps/files/src/components/TemplateFiller/TemplateRichTextField.vue b/apps/files/src/components/TemplateFiller/TemplateRichTextField.vue
new file mode 100644
index 00000000000..7246b2743d6
--- /dev/null
+++ b/apps/files/src/components/TemplateFiller/TemplateRichTextField.vue
@@ -0,0 +1,77 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<div class="template-field__text">
+		<label :for="fieldId">
+			{{ fieldLabel }}
+		</label>
+
+		<NcTextField :id="fieldId"
+			type="text"
+			:value.sync="value"
+			:label="fieldLabel"
+			:label-outside="true"
+			:placeholder="field.content"
+			@input="input" />
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { NcTextField } from '@nextcloud/vue'
+
+export default defineComponent({
+	name: 'TemplateRichTextField',
+
+	components: {
+		NcTextField,
+	},
+
+	props: {
+		field: {
+			type: Object,
+			default: () => {},
+		},
+	},
+
+	data() {
+		return {
+			value: '',
+		}
+	},
+
+	computed: {
+		fieldLabel() {
+			const label = this.field.name ?? this.field.alias ?? 'Unknown field'
+
+			return (label.charAt(0).toUpperCase() + label.slice(1))
+		},
+		fieldId() {
+			return 'text-field' + this.field.index
+		},
+	},
+
+	methods: {
+		input() {
+			this.$emit('input', {
+				index: this.field.index,
+				property: 'content',
+				value: this.value,
+			})
+		},
+	},
+})
+</script>
+
+<style lang="scss" scoped>
+.template-field__text {
+	margin: 20px 0;
+
+	label {
+		font-weight: bold;
+	}
+}
+</style>
diff --git a/apps/files/src/components/TemplateFiller/TemplateTextField.vue b/apps/files/src/components/TemplateFiller/TemplateTextField.vue
deleted file mode 100644
index b58e17971c7..00000000000
--- a/apps/files/src/components/TemplateFiller/TemplateTextField.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<!--
-  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
-  - SPDX-License-Identifier: AGPL-3.0-or-later
--->
-
-<template>
-	<div class="template-field__text">
-		<label :for="fieldId">
-			{{ fieldLabel }}
-		</label>
-
-		<NcTextField :id="fieldId"
-			type="text"
-			:value.sync="value"
-			:label="fieldLabel"
-			:label-outside="true"
-			:placeholder="field.content"
-			@input="$emit('input', [value, field.index])" />
-	</div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-import { NcTextField } from '@nextcloud/vue'
-
-export default defineComponent({
-	name: 'TemplateTextField',
-
-	components: {
-		NcTextField,
-	},
-
-	props: {
-		field: {
-			type: Object,
-			default: () => {},
-		},
-	},
-
-	data() {
-		return {
-			value: '',
-		}
-	},
-
-	computed: {
-		fieldLabel() {
-			const label = this.field.name ?? this.field.alias ?? 'Unknown field'
-
-			return (label.charAt(0).toUpperCase() + label.slice(1))
-		},
-		fieldId() {
-			return 'text-field' + this.field.index
-		},
-	},
-})
-</script>
-
-<style lang="scss" scoped>
-.template-field__text {
-	margin: 20px 0;
-
-	label {
-		font-weight: bold;
-	}
-}
-</style>
-- 
cgit v1.2.3