Refactor component

client/src/components/content-blocks/assignment/SubmissionForm.vue

@@ -42,79 +42,75 @@
       :shared-msg="sharedMsg"
       :show-reopen="!readOnly"
       v-if="isFinalOrReadOnly"
-      @reopen="$emit('reopen')"
+      @reopen="reopenSubmission"
     />
   </div>
 </template>
 
-<script>
-import { defineAsyncComponent } from 'vue';
-const SubmissionInput = defineAsyncComponent(() => import('@/components/content-blocks/assignment/SubmissionInput'));
-const FinalSubmission = defineAsyncComponent(() => import('@/components/content-blocks/assignment/FinalSubmission'));
-const FileUpload = defineAsyncComponent(() => import('@/components/ui/file-upload/FileUpload'));
+<script setup lang="ts">
+import { defineAsyncComponent, computed } from 'vue';
+export interface Props {
+  userInput: {
+    final: boolean;
+    document: string;
+    text: string;
+  };
+  saved: boolean;
+  placeholder: string;
+  action: string;
+  reopen: Function;
+  document: string;
+  readOnly: boolean;
+  spellcheck: boolean;
+  spellcheckLoading: boolean;
+  sharedMsg: string;
+}
 
-export default {
-  props: {
-    userInput: Object,
-    saved: Boolean,
-    placeholder: String,
-    action: String,
-    reopen: Function,
-    document: String,
-    readOnly: {
-      type: Boolean,
-      default: false,
-    },
-    spellcheck: {
-      type: Boolean,
-      default: false,
-    },
-    spellcheckLoading: {
-      type: Boolean,
-      default: false,
-    },
-    sharedMsg: String,
-  },
+const SubmissionInput = defineAsyncComponent(
+  () => import('@/components/content-blocks/assignment/SubmissionInput.vue')
+);
+const FinalSubmission = defineAsyncComponent(
+  () => import('@/components/content-blocks/assignment/FinalSubmission.vue')
+);
+const FileUpload = defineAsyncComponent(() => import('@/components/ui/file-upload/FileUpload.vue'));
 
-  components: {
-    FileUpload,
-    SubmissionInput,
-    FinalSubmission,
-  },
+const props = withDefaults(defineProps<Props>(), {
+  readOnly: false,
+  speelcheck: false,
+  spellcheckLoading: false,
+});
 
-  computed: {
-    final() {
-      return !!this.userInput && this.userInput.final;
-    },
-    isFinalOrReadOnly() {
-      return this.final || this.readOnly;
-    },
-    allowsDocuments() {
-      return 'document' in this.userInput;
-    },
-    showSpellcheckButton() {
-      return this.spellcheck && process.env.VUE_APP_ENABLE_SPELLCHECK;
-    },
-    spellcheckText() {
-      if (!this.spellcheckLoading) {
-        return 'Rechtschreibung prüfen';
-      } else {
-        return 'Wird geprüft...';
-      }
-    },
-  },
+const final = computed(() => {
+  return !!props.userInput && props.userInput.final;
+});
+const isFinalOrReadOnly = computed(() => {
+  return final.value || props.readOnly;
+});
+const allowsDocuments = computed(() => {
+  return false;
+  //return 'document' in props.userInput;
+});
+const showSpellcheckButton = computed(() => {
+  return props.spellcheck && process.env.VUE_APP_ENABLE_SPELLCHECK;
+});
+const spellcheckText = computed(() => {
+  if (!props.spellcheckLoading) {
+    return 'Rechtschreibung prüfen';
+  } else {
+    return 'Wird geprüft...';
+  }
+});
 
-  methods: {
-    reopenSubmission() {
-      this.$emit('reopen');
-    },
-    saveInput(input) {
-      this.$emit('saveInput', input);
-    },
-    changeDocumentUrl(documentUrl) {
-      this.$emit('changeDocumentUrl', documentUrl);
-    },
-  },
+const emit = defineEmits(['reopen', 'saveInput', 'changeDocumentUrl']);
+
+const reopenSubmission = () => {
+  emit('reopen');
+};
+const saveInput = (input: any) => {
+  emit('saveInput', input);
+};
+const changeDocumentUrl = (documentUrl: string) => {
+  emit('changeDocumentUrl', documentUrl);
 };
 </script>
 

client/src/components/page-form/PageFormInput.vue

@@ -6,12 +6,12 @@
       >{{ label }}</label
     >
     <component
-      :model-value="value"
+      :value="value"
       :class="classes"
       :data-cy="cyId"
       :is="type"
       :id="id"
-      @update:modelValue="$emit('input', $event.target.value)"
+      @input="$emit('input', $event.target.value)"
     />
   </div>
 </template>