From 92f9831cc175fc445d0e880663c8c294d37baec0 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 19 Apr 2023 10:07:31 +0200
Subject: [PATCH] Migrate another component to use correct event emitting

---
 .../assignment/SubmissionInput.vue            | 42 +++++++++----------
 .../components/page-form/PageFormInput.vue    |  4 +-
 2 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/client/src/components/content-blocks/assignment/SubmissionInput.vue b/client/src/components/content-blocks/assignment/SubmissionInput.vue
index 1280c269..c51a5769 100644
--- a/client/src/components/content-blocks/assignment/SubmissionInput.vue
+++ b/client/src/components/content-blocks/assignment/SubmissionInput.vue
@@ -9,7 +9,7 @@
       rows="1"
       class="submission-form__textarea"
       v-auto-grow
-      @input="$emit('input', $event.target.value)"
+      @input="input"
     />
     <div
       class="submission-form__save-status submission-form__save-status--saved"
@@ -26,29 +26,27 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
 import { defineAsyncComponent } from 'vue';
-const TickCircleIcon = defineAsyncComponent(() =>
-  import('@/components/icons/TickCircleIcon.vue')
-);
-const LoadingIcon = defineAsyncComponent(() =>
-  import('@/components/icons/LoadingIcon.vue')
-);
+const TickCircleIcon = defineAsyncComponent(() => import('@/components/icons/TickCircleIcon.vue'));
+const LoadingIcon = defineAsyncComponent(() => import('@/components/icons/LoadingIcon.vue'));
 
-export default {
-  props: {
-    inputText: String,
-    saved: Boolean,
-    readonly: Boolean,
-    placeholder: {
-      type: String,
-      default: 'Ergebnis erfassen',
-    },
-  },
-  components: {
-    TickCircleIcon,
-    LoadingIcon,
-  },
+interface Props {
+  inputText: string;
+  saved: boolean;
+  readonly: boolean;
+  placeholder: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  placeholder: 'Ergebnis erfassen',
+});
+
+const emit = defineEmits(['input']);
+
+const input = (e: Event) => {
+  const value = (e.target as HTMLInputElement).value;
+  emit('input', value);
 };
 </script>
 
diff --git a/client/src/components/page-form/PageFormInput.vue b/client/src/components/page-form/PageFormInput.vue
index 82e1a549..cc5ba8bf 100644
--- a/client/src/components/page-form/PageFormInput.vue
+++ b/client/src/components/page-form/PageFormInput.vue
@@ -18,6 +18,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
+import { getUniqueId } from '@/helpers/id';
 
 interface Props {
   label: string;
@@ -35,11 +36,10 @@ const cyId = computed(() => {
   return `page-form-input-${props.label.toLowerCase()}`;
 });
 
-const id = '3'; //todo: make unique id
+const id = getUniqueId(); //todo: make unique id
 
 const input = (e: Event) => {
   const value = (e.target as HTMLInputElement).value;
-  console.log(value);
   emit('input', value);
 };
 </script>