From b39d610dbc5460f8fc7e36a24c9b25d654c134d7 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 20 Apr 2023 11:16:50 +0200
Subject: [PATCH] Migrate another component

---
 client/src/components/page-form/PageForm.vue | 15 +++--
 client/src/components/rooms/RoomForm.vue     | 64 ++++++++------------
 2 files changed, 34 insertions(+), 45 deletions(-)

diff --git a/client/src/components/page-form/PageForm.vue b/client/src/components/page-form/PageForm.vue
index c8adbb9a..9ae76eaa 100644
--- a/client/src/components/page-form/PageForm.vue
+++ b/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">
diff --git a/client/src/components/rooms/RoomForm.vue b/client/src/components/rooms/RoomForm.vue
index 31b4adcd..b177337e 100644
--- a/client/src/components/rooms/RoomForm.vue
+++ b/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">