feat: Add frontend components for filling out template

Signed-off-by: Elizabeth Danzberger <lizzy7128@tutanota.de>

4 files changed, 100 insertions, 25 deletions

diff --git a/apps/files/src/components/TemplateFiller.vue b/apps/files/src/components/TemplateFiller.vue
index 80902a4afff..e66dad24bef 100644
--- a/apps/files/src/components/TemplateFiller.vue
+++ b/apps/files/src/components/TemplateFiller.vue
@@ -4,18 +4,24 @@
 -->
 
 <template>
-	<NcModal>
+	<NcModal :show="show">
 		<div class="template-field-modal__content">
-			<form @submit.prevent.stop="onSubmit">
+			<form>
 				<h3>{{ t('files', 'Fill template fields') }}</h3>
 
-				<!-- break these out into template field components -->
+				<!-- 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" />
+				</div>
 			</form>
 		</div>
 
 		<div class="template-field-modal__buttons">
 			<NcButton aria-label="Submit button"
-				type="primary">
+				type="primary"
+				@click="submit">
 				{{ t('files', 'Submit') }}
 			</NcButton>
 		</div>
@@ -26,6 +32,7 @@
 import { defineComponent } from 'vue'
 import { NcModal, NcButton } from '@nextcloud/vue'
 import { translate as t } from '@nextcloud/l10n'
+import TemplateTextField from './TemplateFiller/TemplateTextField.vue'
 
 export default defineComponent({
 	name: 'TemplateFiller',
@@ -33,6 +40,7 @@ export default defineComponent({
 	components: {
 		NcModal,
 		NcButton,
+		TemplateTextField,
 	},
 
 	props: {
@@ -40,36 +48,45 @@ export default defineComponent({
 			type: Array,
 			default: () => [],
 		},
+		onSubmit: {
+			type: Function,
+			default: async () => {},
+		},
 	},
 
 	data() {
 		return {
-			someText: '',
+			localFields: {},
+			show: true,
 		}
 	},
 
 	methods: {
 		t,
-		onSubmit() {},
+		trackInput([value, index]) {
+			this.localFields[index] = {
+				content: value,
+			}
+		},
+		async submit() {
+			await this.onSubmit(this.localFields)
+			this.show = false
+		},
 	},
 })
 </script>
 
 <style lang="scss" scoped>
-$modal-margin: calc(var(--default-grid-baseline) * 6);
+$modal-margin: calc(var(--default-grid-baseline) * 4);
 
 .template-field-modal__content {
 	padding: $modal-margin;
 
-	& h3 {
+	h3 {
 		text-align: center;
 	}
 }
 
-.template-field-modal__field {
-	margin: calc(var(--default-grid-baseline) * 4) 0;
-}
-
 .template-field-modal__buttons {
 	display: flex;
 	justify-content: flex-end;
diff --git a/apps/files/src/components/TemplateFiller/TemplateTextField.vue b/apps/files/src/components/TemplateFiller/TemplateTextField.vue
index f1bed8703a7..099a8161b4a 100644
--- a/apps/files/src/components/TemplateFiller/TemplateTextField.vue
+++ b/apps/files/src/components/TemplateFiller/TemplateTextField.vue
@@ -1,11 +1,62 @@
 <template>
-	<div />
+	<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>
diff --git a/apps/files/src/services/Templates.js b/apps/files/src/services/Templates.js
index 113e9d1488b..3a0a0fdb809 100644
--- a/apps/files/src/services/Templates.js
+++ b/apps/files/src/services/Templates.js
@@ -17,12 +17,14 @@ export const getTemplates = async function() {
  * @param {string} filePath The new file destination path
  * @param {string} templatePath The template source path
  * @param {string} templateType The template type e.g 'user'
+ * @param {object} templateFields The template fields to fill in (if any)
  */
-export const createFromTemplate = async function(filePath, templatePath, templateType) {
+export const createFromTemplate = async function(filePath, templatePath, templateType, templateFields) {
 	const response = await axios.post(generateOcsUrl('apps/files/api/v1/templates/create'), {
 		filePath,
 		templatePath,
 		templateType,
+		templateFields,
 	})
 	return response.data.ocs.data
 }
diff --git a/apps/files/src/views/TemplatePicker.vue b/apps/files/src/views/TemplatePicker.vue
index 6d6e8c43ebd..8c6b3c4bf02 100644
--- a/apps/files/src/views/TemplatePicker.vue
+++ b/apps/files/src/views/TemplatePicker.vue
@@ -201,9 +201,7 @@ export default defineComponent({
 			this.checked = fileid
 		},
 
-		async onSubmit() {
-			this.loading = true
-
+		async createFile(templateFields) {
 			const currentDirectory = new URL(window.location.href).searchParams.get('dir') || '/'
 
 			// If the file doesn't have an extension, add the default one
@@ -212,19 +210,12 @@ export default defineComponent({
 				this.name = `${this.name}${this.provider?.extension ?? ''}`
 			}
 
-			if (this.selectedTemplate?.fields) {
-				spawnDialog(TemplateFiller, {
-					fields: this.selectedTemplate?.fields,
-				})
-
-				return
-			}
-
 			try {
 				const fileInfo = await createFromTemplate(
 					normalize(`${currentDirectory}/${this.name}`),
 					this.selectedTemplate?.filename as string ?? '',
 					this.selectedTemplate?.templateType as string ?? '',
+					templateFields,
 				)
 				logger.debug('Created new file', fileInfo)
 
@@ -267,6 +258,20 @@ export default defineComponent({
 				this.loading = false
 			}
 		},
+
+		async onSubmit() {
+			this.loading = true
+
+			if (this.selectedTemplate?.fields) {
+				spawnDialog(TemplateFiller, {
+					fields: this.selectedTemplate.fields,
+					onSubmit: this.createFile,
+				})
+
+			} else {
+				await this.createFile()
+			}
+		},
 	},
 })
 </script>