fix(vue): Begin implementing template filler component

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

diff --git a/apps/files/src/components/TemplateFiller.vue b/apps/files/src/components/TemplateFiller.vue
index 6f0988d0dc993b2c0bc062ff75fdb45e1d1dc628..80902a4afff9d5fb2aeccf1e5c93951a5707cebb 100644 (file)
--- 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 (file)
index 0000000..f1bed87
--- /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 6c26771a24079549ead94d7ab7fedb6479af5dda..6d6e8c43ebd2c2f9620f2e1a1633800ea3359069 100644 (file)
--- 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