From da6bab178996afb359ddad5051ea058e0e772762 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 26 Oct 2022 15:47:19 +0200
Subject: [PATCH] Fix some more cypress tests

---
 .../e2e/frontend/rooms/room-page.spec.js      |   1 +
 .../content-block-form/ContentFormSection.vue | 122 ++++-----
 .../src/components/content-forms/TipTap.vue   | 241 ++++++++----------
 .../components/instruments/FilterEntry.vue    |   3 +
 .../components/instruments/FilterGroup.vue    | 123 ++++-----
 client/src/components/portfolio/ShareLink.vue |   6 +-
 client/src/components/rooms/RoomForm.vue      | 144 ++++++-----
 client/src/mixins/room.js                     |   2 +-
 client/src/pages/portfolio/project.vue        |   2 +-
 client/src/pages/rooms/editRoomEntry.vue      | 149 +++++------
 client/src/pages/rooms/newRoomEntry.vue       | 133 +++++-----
 11 files changed, 462 insertions(+), 464 deletions(-)

diff --git a/client/cypress/e2e/frontend/rooms/room-page.spec.js b/client/cypress/e2e/frontend/rooms/room-page.spec.js
index cd8e768b..54ecd1fc 100644
--- a/client/cypress/e2e/frontend/rooms/room-page.spec.js
+++ b/client/cypress/e2e/frontend/rooms/room-page.spec.js
@@ -27,6 +27,7 @@ describe('The Room Page (Teacher)', () => {
     AddRoomEntry: {
       addRoomEntry: {
         roomEntry: {
+          slug: 'entry-slug',
           title: entryTitle,
           contents: [
             {
diff --git a/client/src/components/content-block-form/ContentFormSection.vue b/client/src/components/content-block-form/ContentFormSection.vue
index e903b628..2379f2ef 100644
--- a/client/src/components/content-block-form/ContentFormSection.vue
+++ b/client/src/components/content-block-form/ContentFormSection.vue
@@ -1,8 +1,13 @@
 <template>
   <div class="content-form-section">
     <h2 class="content-form-section__heading">
-      <component class="content-form-section__icon" :is="icon" />
-      <span class="content-form-section__title" data-cy="content-form-section-title">{{ title }}</span>
+      <component
+        class="content-form-section__icon"
+        :is="icon"
+      /> <span
+        class="content-form-section__title"
+        data-cy="content-form-section-title"
+      >{{ title }}</span>
     </h2>
 
     <content-element-actions
@@ -22,73 +27,74 @@
 </template>
 
 <script lang="ts">
-import formElementIcons from '@/components/ui/form-element-icons.js';
-import ContentElementActions from '@/components/content-block-form/ContentElementActions.vue';
-import { ActionOptions } from '@/@types';
+  import {defineComponent} from "vue";
+  import formElementIcons from '@/components/ui/form-element-icons.js';
+  import ContentElementActions from '@/components/content-block-form/ContentElementActions.vue';
+  import {ActionOptions} from "@/@types";
 
-export default {
-  props: {
-    title: {
-      type: String,
-      default: '',
+  export default defineComponent({
+    props: {
+      title: {
+        type: String,
+        default: ''
+      },
+      icon: {
+        type: String,
+        default: ''
+      },
+      actions: {
+        type: Object as () => ActionOptions,
+        default: () => {}
+      }
     },
-    icon: {
-      type: String,
-      default: '',
-    },
-    actions: {
-      type: Object as () => ActionOptions,
-      default: () => {},
-    },
-  },
-  components: {
-    ContentElementActions,
-    ...formElementIcons,
-  },
-};
+    components: {
+      ContentElementActions,
+      ...formElementIcons
+    }
+  });
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import '~styles/helpers';
 
-.content-form-section {
-  @include default-box-shadow;
-  border-radius: $default-border-radius;
-  padding: $small-spacing $medium-spacing;
-  margin-bottom: $medium-spacing;
+  .content-form-section {
+    @include default-box-shadow;
+    border-radius: $default-border-radius;
+    padding: $small-spacing $medium-spacing;
+    margin-bottom: $medium-spacing;
 
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-template-rows: auto;
-  grid-template-areas: 'h a' 'c c';
-  align-items: center;
-  grid-row-gap: $medium-spacing;
-
-  &__heading {
-    display: flex;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: auto;
+    grid-template-areas: 'h a' 'c c';
     align-items: center;
-    grid-area: h;
-    margin-bottom: 0;
-  }
+    grid-row-gap: $medium-spacing;
 
-  &__actions {
-    grid-area: a;
-    justify-self: end;
-  }
+    &__heading {
+      display: flex;
+      align-items: center;
+      grid-area: h;
+      margin-bottom: 0;
+    }
 
-  &__title {
-    @include heading-3;
-    margin-bottom: 0;
-  }
+    &__actions {
+      grid-area: a;
+      justify-self: end;
+    }
 
-  &__icon {
-    width: 28px;
-    height: 28px;
-    margin-right: $small-spacing;
-  }
+    &__title {
+      @include heading-3;
+      margin-bottom: 0;
+    }
 
-  &__content {
-    grid-area: c;
+    &__icon {
+      width: 28px;
+      height: 28px;
+      margin-right: $small-spacing;
+    }
+
+    &__content {
+      grid-area: c;
+    }
   }
-}
 </style>
diff --git a/client/src/components/content-forms/TipTap.vue b/client/src/components/content-forms/TipTap.vue
index 2d40b157..4ceb1e9d 100644
--- a/client/src/components/content-forms/TipTap.vue
+++ b/client/src/components/content-forms/TipTap.vue
@@ -1,31 +1,20 @@
 <template>
   <div class="tip-tap">
-    <editor-content class="tip-tap__editor-wrapper" :editor="editor" />
+    <editor-content
+      class="tip-tap__editor-wrapper"
+      :editor="editor"
+    />
 
-    <toggle :bordered="false" :checked="isList" label="Als Liste formatieren" @input="toggleList" />
+    <toggle
+      :bordered="false"
+      :checked="isList"
+      label="Als Liste formatieren"
+      @input="toggleList"
+    />
   </div>
 </template>
 
 <script lang="ts">
-<<<<<<< HEAD
-import Vue, { PropType } from 'vue';
-import { Editor, EditorContent } from '@tiptap/vue-2';
-import Document from '@tiptap/extension-document';
-import Paragraph from '@tiptap/extension-paragraph';
-import Text from '@tiptap/extension-text';
-import BulletList from '@tiptap/extension-bullet-list';
-import ListItem from '@tiptap/extension-list-item';
-import Toggle from '@/components/ui/Toggle.vue';
-||||||| parent of a423cfde (Apply code changes from migration guide for Vue 3)
-  import Vue, {PropType} from 'vue';
-  import {Editor, EditorContent} from "@tiptap/vue-2";
-  import Document from '@tiptap/extension-document';
-  import Paragraph from '@tiptap/extension-paragraph';
-  import Text from '@tiptap/extension-text';
-  import BulletList from '@tiptap/extension-bullet-list';
-  import ListItem from '@tiptap/extension-list-item';
-  import Toggle from "@/components/ui/Toggle.vue";
-=======
   import {PropType, defineComponent} from 'vue';
   import {Editor, EditorContent} from "@tiptap/vue-3";
   import Document from '@tiptap/extension-document';
@@ -34,143 +23,125 @@ import Toggle from '@/components/ui/Toggle.vue';
   import BulletList from '@tiptap/extension-bullet-list';
   import ListItem from '@tiptap/extension-list-item';
   import Toggle from "@/components/ui/Toggle.vue";
->>>>>>> a423cfde (Apply code changes from migration guide for Vue 3)
 
-interface Data {
-  editor: Editor | undefined;
-}
-interface Value {
-  text: string;
-}
+  interface Data {
+    editor: Editor | undefined;
+  }
+  interface Value {
+    text: string;
+  }
 
-<<<<<<< HEAD
-export default Vue.extend({
-  props: {
-    value: {
-      type: Object as PropType<Value>,
-      validator(value: Value) {
-        return Object.prototype.hasOwnProperty.call(value, 'text');
-      },
-    },
-  },
-
-  components: {
-    Toggle,
-    EditorContent,
-  },
-
-  data(): Data {
-    return {
-      editor: undefined,
-    };
-  },
-
-  computed: {
-    isList(): boolean {
-      return this.editor?.isActive('bulletList') || false;
-    },
-    text(): string {
-      return this.value.text;
-    },
-  },
-
-  watch: {
-    value({ text }: Value) {
-      const editor = this.editor as Editor; // editor is always initialized on mount, cast it
-      const isSame = editor.getHTML() === text;
-
-      if (isSame) {
-        return;
-      }
-
-      editor.commands.setContent(text, false);
-    },
-  },
-
-  mounted() {
-    this.editor = new Editor({
-      editorProps: {
-        attributes: {
-          class: 'tip-tap__editor',
-||||||| parent of a423cfde (Apply code changes from migration guide for Vue 3)
-  export default Vue.extend({
-    props: {
-      value: {
-        type: Object as PropType<Value>,
-        validator(value: Value) {
-          return Object.prototype.hasOwnProperty.call(value, 'text');
-=======
   export default defineComponent({
     props: {
       value: {
         type: Object as PropType<Value>,
         validator: (value: Value) => {
           return Object.prototype.hasOwnProperty.call(value, 'text');
->>>>>>> a423cfde (Apply code changes from migration guide for Vue 3)
         },
       },
-      content: this.text,
-      extensions: [Document, Paragraph, Text, BulletList, ListItem],
-      onUpdate: () => {
-        const text = (this.editor as Editor).getHTML();
-        this.$emit('input', text);
-        this.$emit('change-text', text);
+    },
+
+    components: {
+      Toggle,
+      EditorContent
+    },
+
+    data(): Data {
+      return {
+        editor: undefined,
+      };
+    },
+
+    computed: {
+      isList(): boolean {
+        return this.editor?.isActive('bulletList') || false;
       },
-<<<<<<< HEAD
-    });
-  },
-
-  beforeDestroy() {
-    this.editor?.destroy();
-  },
-
-  methods: {
-    toggleList() {
-      const editor = this.editor as Editor;
-      editor.chain().selectAll().toggleBulletList().run();
-||||||| parent of a423cfde (Apply code changes from migration guide for Vue 3)
-      text(): string {
-        return this.value.text;
-      }
-=======
       text(): string {
         return this.value?.text || '';
       }
->>>>>>> a423cfde (Apply code changes from migration guide for Vue 3)
     },
-  },
-});
+
+    watch: {
+      value({text}: Value) {
+        const editor = this.editor as Editor; // editor is always initialized on mount, cast it
+        const isSame = editor.getHTML() === text;
+
+        if (isSame) {
+          return;
+        }
+
+        editor.commands.setContent(text, false);
+      }
+    },
+
+    mounted() {
+      this.editor = new Editor({
+        editorProps: {
+          attributes: {
+            class: 'tip-tap__editor'
+          }
+        },
+        content: this.text,
+        extensions: [
+          Document,
+          Paragraph,
+          Text,
+          BulletList,
+          ListItem
+        ],
+        onUpdate: () => {
+          const text=(this.editor as Editor).getHTML();
+          this.$emit('input', text);
+          this.$emit('change-text', text);
+        }
+      });
+    },
+
+    beforeUnmount() {
+      this.editor?.destroy();
+    },
+
+    methods: {
+      toggleList() {
+        const editor = this.editor as Editor;
+        editor.chain().selectAll().toggleBulletList().run();
+      },
+    }
+  });
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import '~styles/helpers';
 
-.tip-tap {
-  &__editor-wrapper {
-    margin-bottom: $medium-spacing;
-  }
 
-  :deep(.tip-tap__editor) {
-    @include inputstyle;
-    flex-direction: column;
-    min-height: 150px;
-  }
+  .tip-tap {
 
-  :deep(ul) {
-    padding-left: $medium-spacing;
-    list-style: initial;
-  }
+    &__editor-wrapper {
+      margin-bottom: $medium-spacing;
+    }
 
-  :deep(li) {
-    @include inputfont;
-  }
+    /deep/ &__editor {
+      @include inputstyle;
+      flex-direction: column;
+      min-height: 150px;
+    }
 
-  :deep(div) {
-    @include inputfont;
-  }
+    /deep/ ul {
+      padding-left: $medium-spacing;
+      list-style: initial;
+    }
 
-  :deep(p) {
-    @include inputfont;
+    /deep/ li {
+      @include inputfont;
+    }
+
+    /deep/ div {
+      @include inputfont;
+    }
+
+    /deep/ p {
+      @include inputfont;
+    }
   }
-}
 </style>
+
diff --git a/client/src/components/instruments/FilterEntry.vue b/client/src/components/instruments/FilterEntry.vue
index 5cee2075..363813f6 100644
--- a/client/src/components/instruments/FilterEntry.vue
+++ b/client/src/components/instruments/FilterEntry.vue
@@ -4,6 +4,7 @@
     class="filter-entry"
     data-cy="filter-entry"
     :style="categoryStyle"
+    @click="$emit('filter')"
   >
     <span class="filter-entry__text">{{ text }}</span>
     <span
@@ -48,6 +49,8 @@
       ChevronRight,
     },
 
+    emits: ['filter'],
+
     apollo: {
       instrumentFilter: {
         query: INSTRUMENT_FILTER_QUERY,
diff --git a/client/src/components/instruments/FilterGroup.vue b/client/src/components/instruments/FilterGroup.vue
index a786e1d8..52b04f25 100644
--- a/client/src/components/instruments/FilterGroup.vue
+++ b/client/src/components/instruments/FilterGroup.vue
@@ -7,7 +7,7 @@
       :category="category"
       :is-category="true"
       :id="category.id"
-      @click="setCategoryFilter(category.id)"
+      @filter="setCategoryFilter(category.id)"
     />
     <div class="filter-group__children">
       <filter-entry
@@ -17,83 +17,84 @@
         v-for="type in types"
         :id="type.id"
         :key="type.id"
-        @click="setFilter(`type:${type.id}`)"
+        @filter="setFilter(`type:${type.id}`)"
       />
     </div>
   </div>
 </template>
 
 <script>
-import FilterEntry from '@/components/instruments/FilterEntry';
+  import {defineComponent} from 'vue';
+  import FilterEntry from '@/components/instruments/FilterEntry';
 
-import SET_FILTER_MUTATION from 'gql/local/mutations/setInstrumentFilter.gql';
-import INSTRUMENT_FILTER_QUERY from 'gql/local/instrumentFilter.gql';
+  import SET_FILTER_MUTATION from 'gql/local/mutations/setInstrumentFilter.gql';
+  import INSTRUMENT_FILTER_QUERY from 'gql/local/instrumentFilter.gql';
 
-export default {
-  props: {
-    title: {
-      type: String,
-      default: '',
-    },
-    types: {
-      type: Array,
-      default: () => [],
-    },
-    category: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  components: {
-    FilterEntry,
-  },
-
-  apollo: {
-    instrumentFilter: {
-      query: INSTRUMENT_FILTER_QUERY,
-    },
-  },
-
-  data() {
-    return {
-      instrumentFilter: {
-        currentFilter: '',
+  export default defineComponent({
+    props: {
+      title: {
+        type: String,
+        default: '',
       },
-    };
-  },
-  inheritAttrs: false,
+      types: {
+        type: Array,
+        default: () => [],
+      },
+      category: {
+        type: Object,
+        default: () => ({}),
+      },
+    },
+    components: {
+      FilterEntry,
+    },
 
-  methods: {
-    setCategoryFilter(category) {
-      if (category) {
-        this.setFilter(`category:${category}`);
-      } else {
-        this.setFilter(``);
+    apollo: {
+      instrumentFilter: {
+        query: INSTRUMENT_FILTER_QUERY
       }
     },
-    setFilter(filter) {
-      this.$apollo.mutate({
-        mutation: SET_FILTER_MUTATION,
-        variables: {
-          filter,
-        },
-      });
-    },
+
+    data() {
+      return {
+        instrumentFilter: {
+          currentFilter: ''
+        }
+      };
   },
-};
+    inheritAttrs: false,
+
+    methods: {
+      setCategoryFilter(category) {
+        if (category) {
+          this.setFilter(`category:${category}`);
+        } else {
+          this.setFilter(``);
+        }
+      },
+      setFilter(filter) {
+        this.$apollo.mutate({
+          mutation: SET_FILTER_MUTATION,
+          variables: {
+            filter
+          }
+        });
+      }
+    },
+  });
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import '~styles/helpers';
 
-.filter-group {
-  border-bottom: 1px solid $color-silver;
-  padding: $medium-spacing 0;
-  display: flex;
-  flex-direction: column;
+  .filter-group {
+    border-bottom: 1px solid $color-silver;
+    padding: $medium-spacing 0;
+    display: flex;
+    flex-direction: column;
 
-  &__children {
-    padding-left: $medium-spacing;
+    &__children {
+      padding-left: $medium-spacing;
+    }
   }
-}
 </style>
diff --git a/client/src/components/portfolio/ShareLink.vue b/client/src/components/portfolio/ShareLink.vue
index 6d6f3b76..ca10f078 100644
--- a/client/src/components/portfolio/ShareLink.vue
+++ b/client/src/components/portfolio/ShareLink.vue
@@ -1,5 +1,8 @@
 <template>
-  <a class="share-icon">
+  <a
+    class="share-icon"
+    @click="$emit('share')"
+  >
     <share-icon class="share-icon__icon" />
     <span class="share-icon__text">
       <template v-if="!final">Mit Lehrperson teilen</template>
@@ -19,6 +22,7 @@
         default: false,
       },
     },
+    emits: ['share'],
     components: {ShareIcon},
   };
 </script>
diff --git a/client/src/components/rooms/RoomForm.vue b/client/src/components/rooms/RoomForm.vue
index f7d186dd..63a1aed9 100644
--- a/client/src/components/rooms/RoomForm.vue
+++ b/client/src/components/rooms/RoomForm.vue
@@ -1,99 +1,107 @@
 <template>
-  <page-form class="room-form" title="Neuer Raum" @save="$emit('save', localRoom)">
-    <page-form-input label="Titel" v-model="localRoom.title" />
+  <page-form
+    class="room-form"
+    title="Neuer Raum"
+    @save="$emit('save', localRoom)"
+  >
+    <page-form-input
+      label="Titel"
+      v-model="localRoom.title"
+    />
 
-    <page-form-input label="Beschreibung" type="textarea" v-model="localRoom.description" />
+    <page-form-input
+      label="Beschreibung"
+      type="textarea"
+      v-model="localRoom.description"
+    />
 
-    <h2 class="room-form__property-heading">Farbe</h2>
-    <color-chooser :selected-color="localRoom.appearance" @input="updateColor" />
+    <h2 class="room-form__property-heading">
+      Farbe
+    </h2>
+    <color-chooser
+      :selected-color="localRoom.appearance"
+      @input="updateColor"
+    />
     <template #footer>
-      <button type="submit" data-cy="room-form-save" class="button button--primary room-form__save-button">
+      <button
+        type="submit"
+        data-cy="room-form-save"
+        class="button button--primary room-form__save-button"
+      >
         Speichern
       </button>
-<<<<<<< HEAD
-      <router-link to="/rooms" tag="button" class="button"> Abbrechen </router-link>
-||||||| parent of c96f9b5b (Remove obsolete tag attributes)
-      <router-link
-        to="/rooms"
-        tag="button"
-        class="button"
-      >
-        Abbrechen
-      </router-link>
-=======
       <router-link
         to="/rooms"
         class="button"
       >
         Abbrechen
       </router-link>
->>>>>>> c96f9b5b (Remove obsolete tag attributes)
     </template>
   </page-form>
 </template>
 
 <script>
-import ColorChooser from '@/components/ColorChooser';
-import PageForm from '@/components/page-form/PageForm';
-import PageFormInput from '@/components/page-form/PageFormInput';
+  import ColorChooser from '@/components/ColorChooser';
+  import PageForm from '@/components/page-form/PageForm';
+  import PageFormInput from '@/components/page-form/PageFormInput';
 
-import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
+  import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
 
-export default {
-  props: ['room'],
+  export default {
+    props: ['room'],
 
-  components: {
-    ColorChooser,
-    PageForm,
-    PageFormInput,
-  },
-
-  data() {
-    return {
-      localRoom: Object.assign({}, this.room),
-      me: {},
-    };
-  },
-
-  created() {
-    this.$store.dispatch('setSpecialContainerClass', this.localRoom.appearance);
-  },
-
-  beforeDestroy() {
-    this.$store.dispatch('setSpecialContainerClass', '');
-  },
-
-  methods: {
-    updateColor(newColor) {
-      this.localRoom.appearance = newColor;
-      this.$store.dispatch('setSpecialContainerClass', newColor);
+    components: {
+      ColorChooser,
+      PageForm,
+      PageFormInput
     },
-  },
 
-  apollo: {
-    me: {
-      query: ME_QUERY,
+    data() {
+      return {
+        localRoom: Object.assign({}, this.room),
+        me: {}
+      };
     },
-  },
-};
+
+    created() {
+      this.$store.dispatch('setSpecialContainerClass', this.localRoom.appearance);
+    },
+
+    beforeUnmount() {
+      this.$store.dispatch('setSpecialContainerClass', '');
+    },
+
+    methods: {
+      updateColor(newColor) {
+        this.localRoom.appearance = newColor;
+        this.$store.dispatch('setSpecialContainerClass', newColor);
+      }
+    },
+
+    apollo: {
+      me: {
+        query: ME_QUERY,
+      }
+    },
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.room-form {
-  &__property-heading {
-    @include page-form-input-heading;
-  }
+  .room-form {
+    &__property-heading {
+      @include page-form-input-heading;
+    }
 
-  &__input,
-  &__textarea {
-    width: 100%;
-    margin-bottom: 35px;
-  }
+    &__input,
+    &__textarea {
+      width: 100%;
+      margin-bottom: 35px;
+    }
 
-  &__save-button {
-    margin-right: 15px;
+    &__save-button {
+      margin-right: 15px;
+    }
   }
-}
 </style>
diff --git a/client/src/mixins/room.js b/client/src/mixins/room.js
index b30d8964..e8a3be98 100644
--- a/client/src/mixins/room.js
+++ b/client/src/mixins/room.js
@@ -13,7 +13,7 @@ export default {
     RoomActions,
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     this.$store.dispatch('setSpecialContainerClass', '');
   },
 
diff --git a/client/src/pages/portfolio/project.vue b/client/src/pages/portfolio/project.vue
index 966eb8a8..470a4238 100644
--- a/client/src/pages/portfolio/project.vue
+++ b/client/src/pages/portfolio/project.vue
@@ -8,7 +8,7 @@
           :final="project.final"
           data-cy="project-share-link"
           class="project__share"
-          @click="updateProjectShareState(project.slug, !project.final)"
+          @share="updateProjectShareState(project.slug, !project.final)"
         />
 
         <project-actions :share-buttons="false" class="project__more" :slug="project.slug" v-if="canEdit" />
diff --git a/client/src/pages/rooms/editRoomEntry.vue b/client/src/pages/rooms/editRoomEntry.vue
index 403cbc88..57ef63e8 100644
--- a/client/src/pages/rooms/editRoomEntry.vue
+++ b/client/src/pages/rooms/editRoomEntry.vue
@@ -1,109 +1,110 @@
 <template>
-  <content-block-form :content-block="roomEntry" :features="features" v-if="roomEntry.id" @save="save" @back="goBack" />
+  <content-block-form
+    :content-block="roomEntry"
+    :features="features"
+    v-if="roomEntry.id"
+    @save="save"
+    @back="goBack"
+  />
 </template>
 
 <script>
-import Vue from 'vue';
+  import {defineComponent} from 'vue';
 
-import ROOM_ENTRY_QUERY from 'gql/queries/roomEntryQuery.gql';
-import ROOM_ENTRY_FRAGMENT from 'gql/fragments/roomEntryParts.gql';
-import UPDATE_ROOM_ENTRY_MUTATION from 'gql/mutations/rooms/updateRoomEntry.gql';
+  import ROOM_ENTRY_QUERY from 'gql/queries/roomEntryQuery.gql';
+  import ROOM_ENTRY_FRAGMENT from 'gql/fragments/roomEntryParts.gql';
+  import UPDATE_ROOM_ENTRY_MUTATION from 'gql/mutations/rooms/updateRoomEntry.gql';
 
-import ContentBlockForm from '@/components/content-block-form/ContentBlockForm';
-import { ROOMS_FEATURE_SET } from '@/consts/features.consts';
-import { ROOM_PAGE } from '@/router/room.names';
+  import ContentBlockForm from '@/components/content-block-form/ContentBlockForm';
+  import {ROOMS_FEATURE_SET} from '@/consts/features.consts';
+  import {ROOM_PAGE} from '@/router/room.names';
 
-export default Vue.extend({
-  props: {
-    slug: {
-      type: String,
-      required: true,
-    },
-    entrySlug: {
-      type: String,
-      required: true,
-    },
-  },
-
-  components: {
-    ContentBlockForm,
-  },
-
-  data() {
-    return {
-      features: ROOMS_FEATURE_SET,
-      roomEntry: {
-        title: '',
-        contents: [],
-      },
-    };
-  },
-
-  apollo: {
-    roomEntry: {
-      query: ROOM_ENTRY_QUERY,
-      variables() {
-        return {
-          slug: this.entrySlug,
-        };
+  export default defineComponent( {
+    props: {
+      slug: {
+        type: String,
+        required: true
       },
+      entrySlug: {
+        type: String,
+        required: true
+      }
     },
-  },
 
-  methods: {
-    goBack() {
-      this.$router.push({
-        name: ROOM_PAGE,
-        params: {
-          slug: this.slug,
+    components: {
+      ContentBlockForm,
+    },
+
+    data() {
+      return {
+        features: ROOMS_FEATURE_SET,
+        roomEntry: {
+          title: '',
+          contents: [],
         },
-      });
-    },
-    save({ title, contents }) {
-      const entry = {
-        slug: this.roomEntry.slug,
-        title,
-        contents,
       };
-      this.$apollo
-        .mutate({
+    },
+
+    apollo: {
+      roomEntry: {
+        query: ROOM_ENTRY_QUERY,
+        variables() {
+          return {
+            slug: this.entrySlug
+          };
+        }
+      }
+    },
+
+    methods: {
+      goBack() {
+        this.$router.push({
+          name: ROOM_PAGE,
+          params: {
+            slug: this.slug
+          }
+        });
+      },
+      save({title, contents}) {
+        const entry = {
+          slug: this.roomEntry.slug,
+          title,
+          contents,
+        };
+        this.$apollo.mutate({
           mutation: UPDATE_ROOM_ENTRY_MUTATION,
           variables: {
             input: {
               roomEntry: entry,
-            },
-          },
-          update: (
-            store,
-            {
-              data: {
-                updateRoomEntry: { roomEntry },
-              },
             }
-          ) => {
+          },
+          update: (store, {data: {updateRoomEntry: {roomEntry}}}) => {
             try {
               const fragment = ROOM_ENTRY_FRAGMENT;
               const id = store.identify(roomEntry);
-              const cachedEntry = store.readQuery({ fragment, id });
+              const cachedEntry = store.readQuery({fragment, id});
               const data = Object.assign({}, cachedEntry, roomEntry);
               store.writeFragment({
                 id,
                 fragment,
-                data,
+                data
               });
             } catch (e) {
               // Query did not exist in the cache, and apollo throws a generic Error. Do nothing
             }
-          },
-        })
-        .then(() => {
+          }
+        }).then(() => {
           this.goBack();
         });
+
+      }
     },
-  },
-});
+  } );
+
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import '~styles/helpers';
+
+
 </style>
diff --git a/client/src/pages/rooms/newRoomEntry.vue b/client/src/pages/rooms/newRoomEntry.vue
index ec4c20bd..6880a17f 100644
--- a/client/src/pages/rooms/newRoomEntry.vue
+++ b/client/src/pages/rooms/newRoomEntry.vue
@@ -1,104 +1,107 @@
 <template>
-  <content-block-form :content-block="roomEntry" :features="features" @save="save" @back="goBack" />
+  <content-block-form
+    :content-block="roomEntry"
+    :features="features"
+    @save="save"
+    @back="goBack"
+  />
 </template>
 
 <script>
-import Vue from 'vue';
+  import {defineComponent} from 'vue';
 
-import NEW_ROOM_ENTRY_MUTATION from 'gql/mutations/rooms/addRoomEntry.gql';
-import ROOM_ENTRIES_QUERY from '@/graphql/gql/queries/roomEntriesQuery.gql';
+  import NEW_ROOM_ENTRY_MUTATION from 'gql/mutations/rooms/addRoomEntry.gql';
+  import ROOM_ENTRIES_QUERY from '@/graphql/gql/queries/roomEntriesQuery.gql';
 
-import ContentBlockForm from '@/components/content-block-form/ContentBlockForm';
-import { ROOMS_FEATURE_SET } from '@/consts/features.consts';
-import { ROOM_PAGE } from '@/router/room.names';
+  import ContentBlockForm from '@/components/content-block-form/ContentBlockForm';
+  import {ROOMS_FEATURE_SET} from '@/consts/features.consts';
+  import {ROOM_PAGE} from '@/router/room.names';
 
-export default Vue.extend({
-  props: {
-    slug: {
-      type: String,
-      required: true,
+  export default defineComponent( {
+    props: {
+      slug: {
+        type: String,
+        required: true
+      }
     },
-  },
 
-  components: {
-    ContentBlockForm,
-  },
+    components: {
+      ContentBlockForm,
+    },
 
-  data() {
-    return {
-      features: ROOMS_FEATURE_SET,
-      roomEntry: {
-        title: '',
-        contents: [],
-      },
-    };
-  },
-
-  methods: {
-    goBack() {
-      this.$router.push({
-        name: ROOM_PAGE,
-        params: {
-          slug: this.slug,
+    data() {
+      return {
+        features: ROOMS_FEATURE_SET,
+        roomEntry: {
+          title: '',
+          contents: [],
         },
-      });
-    },
-    save({ title, contents }) {
-      const entry = {
-        title,
-        contents,
-        roomSlug: this.slug,
       };
-      this.$apollo
-        .mutate({
+    },
+
+    methods: {
+      goBack() {
+        this.$router.push({
+          name: ROOM_PAGE,
+          params: {
+            slug: this.slug
+          }
+        });
+      },
+      save({title, contents}) {
+        const entry = {
+          title,
+          contents,
+          roomSlug: this.slug
+        };
+        this.$apollo.mutate({
           mutation: NEW_ROOM_ENTRY_MUTATION,
           variables: {
             input: {
               roomEntry: entry,
-            },
-          },
-          update: (
-            store,
-            {
-              data: {
-                addRoomEntry: { roomEntry },
-              },
             }
-          ) => {
+          },
+          update: (store, {data: {addRoomEntry: {roomEntry}}}) => {
             try {
               const query = ROOM_ENTRIES_QUERY;
-              const variables = { slug: this.slug };
-              const { room } = store.readQuery({ query, variables });
+              const variables = {slug: this.slug};
+              const {room} = store.readQuery({query, variables});
               if (room && room.roomEntries) {
-                const newEdge = {
+                const newEdge ={
                   node: roomEntry,
-                  __typename: 'RoomEntryNodeEdge',
+                  __typename: 'RoomEntryNodeEdge'
                 };
-                const edges = [newEdge, ...room.roomEntries.edges];
+                const edges = [
+                  newEdge,
+                  ...room.roomEntries.edges
+                ];
                 const data = {
                   room: {
                     ...room,
                     roomEntries: {
                       ...room.roomEntries,
-                      edges,
-                    },
-                  },
+                      edges
+                    }
+                  }
                 };
-                store.writeQuery({ query, variables, data });
+                store.writeQuery({query, variables, data});
               }
             } catch (e) {
               // Query did not exist in the cache, and apollo throws a generic Error. Do nothing
             }
-          },
-        })
-        .then(() => {
+          }
+        }).then(() => {
           this.goBack();
         });
+
+      }
     },
-  },
-});
+  } );
+
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import '~styles/helpers';
+
+
 </style>