Migrate another component

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

@@ -2,7 +2,7 @@
   <div class="page-form__page">
     <form
       class="page-form"
-      @submit.prevent="$emit('save')"
+      @submit.prevent="submit"
     >
       <div class="page-form__content">
         <h1
@@ -20,10 +20,15 @@
   </div>
 </template>
 
-<script>
-export default {
-  props: ['title'],
-};
+<script setup lang="ts">
+defineProps<{
+  title: string
+}>()
+
+const emit = defineEmits(['save'])
+const submit = () => {
+  emit('save')
+}
 </script>
 
 <style scoped lang="scss">

client/src/components/rooms/RoomForm.vue

@@ -2,7 +2,7 @@
   <page-form
     class="room-form"
     title="Neuer Raum"
-    @save="$emit('save', localRoom)"
+    @save="emit('save', localRoom)"
   >
     <page-form-input
       label="Titel"
@@ -40,53 +40,37 @@
   </page-form>
 </template>
 
-<script>
-import ColorChooser from '@/components/ColorChooser.vue';
-import PageForm from '@/components/page-form/PageForm.vue';
-import PageFormInput from '@/components/page-form/PageFormInput.vue';
+<script setup lang="ts">
+import ColorChooser from '@/components/ColorChooser.vue'
+import PageForm from '@/components/page-form/PageForm.vue'
+import PageFormInput from '@/components/page-form/PageFormInput.vue'
+import {onBeforeUnmount, ref} from 'vue'
+import {useStore} from 'vuex'
 
-import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
+const props = defineProps<{
+  room: any
+}>()
 
-export default {
-  props: ['room'],
+const emit = defineEmits(['save'])
 
-  components: {
-    ColorChooser,
-    PageForm,
-    PageFormInput,
-  },
+const localRoom = ref(Object.assign({}, props.room))
 
-  data() {
-    return {
-      localRoom: Object.assign({}, this.room),
-      me: {},
-    };
-  },
+const updateColor = (newColor: string) => {
+  localRoom.value.appearance = newColor
+  store.dispatch('setSpecialContainerClass', newColor)
+}
 
-  created() {
-    this.$store.dispatch('setSpecialContainerClass', this.localRoom.appearance);
-  },
+const updateTitle = (title: string) => {
+  localRoom.value.title = title
+}
 
-  beforeUnmount() {
-    this.$store.dispatch('setSpecialContainerClass', '');
-  },
+const store = useStore()
 
-  methods: {
-    updateColor(newColor) {
-      this.localRoom.appearance = newColor;
-      this.$store.dispatch('setSpecialContainerClass', newColor);
-    },
-    updateTitle(title) {
-      this.localRoom.title = title;
-    },
-  },
+store.dispatch('setSpecialContainerClass', localRoom.value.appearance)
 
-  apollo: {
-    me: {
-      query: ME_QUERY,
-    },
-  },
-};
+onBeforeUnmount(() => {
+  store.dispatch('setSpecialContainerClass', '')
+})
 </script>
 
 <style scoped lang="scss">