From a7addcb88f22e2ed46b3d2379424f3f41535cd9d Mon Sep 17 00:00:00 2001
From: Elizabeth Danzberger <lizzy7128@tutanota.de>
Date: Tue, 16 Jul 2024 15:56:18 -0400
Subject: [PATCH] fix(vue): Begin implementing template filler component

Signed-off-by: Elizabeth Danzberger <lizzy7128@tutanota.de>
---
 apps/files/src/components/TemplateFiller.vue  | 63 ++++++++++++++++---
 .../TemplateFiller/TemplateTextField.vue      | 11 ++++
 apps/files/src/views/TemplatePicker.vue       |  2 +-
 3 files changed, 65 insertions(+), 11 deletions(-)
 create mode 100644 apps/files/src/components/TemplateFiller/TemplateTextField.vue

diff --git a/apps/files/src/components/TemplateFiller.vue b/apps/files/src/components/TemplateFiller.vue
index 6f0988d0dc9..80902a4afff 100644
--- a/apps/files/src/components/TemplateFiller.vue
+++ b/apps/files/src/components/TemplateFiller.vue
@@ -4,33 +4,76 @@
 -->
 
 <template>
-	<NcDialog name="Fill Template">
-		{{ fields }}
-	</NcDialog>
+	<NcModal>
+		<div class="template-field-modal__content">
+			<form @submit.prevent.stop="onSubmit">
+				<h3>{{ t('files', 'Fill template fields') }}</h3>
+
+				<!-- break these out into template field components -->
+			</form>
+		</div>
+
+		<div class="template-field-modal__buttons">
+			<NcButton aria-label="Submit button"
+				type="primary">
+				{{ t('files', 'Submit') }}
+			</NcButton>
+		</div>
+	</NcModal>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-import { NcDialog } from '@nextcloud/vue'
+import { NcModal, NcButton } from '@nextcloud/vue'
+import { translate as t } from '@nextcloud/l10n'
 
 export default defineComponent({
 	name: 'TemplateFiller',
 
 	components: {
-		NcDialog,
+		NcModal,
+		NcButton,
 	},
 
 	props: {
 		fields: {
 			type: Array,
-			default: [],
+			default: () => [],
 		},
 	},
 
-	methods: {},
+	data() {
+		return {
+			someText: '',
+		}
+	},
+
+	methods: {
+		t,
+		onSubmit() {},
+	},
 })
 </script>
 
-<style scoped>
-	
-</style>
\ No newline at end of file
+<style lang="scss" scoped>
+$modal-margin: calc(var(--default-grid-baseline) * 6);
+
+.template-field-modal__content {
+	padding: $modal-margin;
+
+	& 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;
+	margin: $modal-margin;
+	margin-top: 0;
+}
+</style>
diff --git a/apps/files/src/components/TemplateFiller/TemplateTextField.vue b/apps/files/src/components/TemplateFiller/TemplateTextField.vue
new file mode 100644
index 00000000000..f1bed8703a7
--- /dev/null
+++ b/apps/files/src/components/TemplateFiller/TemplateTextField.vue
@@ -0,0 +1,11 @@
+<template>
+	<div />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+	name: 'TemplateTextField',
+})
+</script>
diff --git a/apps/files/src/views/TemplatePicker.vue b/apps/files/src/views/TemplatePicker.vue
index 6c26771a240..6d6e8c43ebd 100644
--- a/apps/files/src/views/TemplatePicker.vue
+++ b/apps/files/src/views/TemplatePicker.vue
@@ -214,7 +214,7 @@ export default defineComponent({
 
 			if (this.selectedTemplate?.fields) {
 				spawnDialog(TemplateFiller, {
-					fields: this.selectedTemplate?.fields
+					fields: this.selectedTemplate?.fields,
 				})
 
 				return