Seperate GraphQL query from template and use .vue-style

aleksis/apps/alsijil/assets/components/alsijil/CourseBook.graphql

+query CourseBook($lessonId: ID!) {
+  excuseTypes {
+    name
+    shortName
+  }
+  lesson: lessonsById(id: $lessonId) {
+    groups {
+      name
+      shortName
+      members {
+        id
+        fullName
+      }
+    }
+    subject {
+      name
+    }
+  }
+  lessonDocumentations: lessonDocumentationsByLessonId(id: $lessonId) {
+    id
+    topic
+    homework
+    groupNote
+    period
+    date
+    personalNotes {
+      id
+      person {
+        id
+        fullName
+      }
+      late
+      absent
+      excused
+      excuseType {
+        name
+        shortName
+      }
+      remarks
+      extraMarks {
+        name
+        shortName
+      }
+    }
+  }
+  extraMarks {
+    name
+    shortName
+  }
+}

aleksis/apps/alsijil/assets/components/alsijil/CourseBook.js → aleksis/apps/alsijil/assets/components/alsijil/CourseBook.vue

-import {CHANGES, SAVED, UPDATING} from "../../UpdateStatuses.js";
-
-export default {
-    methods: {
-        processDataChange(event) {
-            this.status = CHANGES;
-            // alert("Probably save the data");
-            console.log(event);
-            setTimeout(() => {
-                this.status = UPDATING;
-            }, 500)
-
-            setTimeout(() => {
-                this.status = SAVED;
-            }, 1000)
-
-        },
-        updateManually(event) {
-            alert("Data sync triggered manually");
-            this.status = UPDATING;
-            setTimeout(() => {
-                this.status = SAVED;
-            }, 500)
-        }
-    },
-    props: ["lessonId"],
-    name: "course-book",
-    data: () => {
-        return {
-            ping: "ping",
-            status: SAVED,
-            // lessonId: 352
-        }
-    },
-    template: `
-    <ApolloQuery
-      :query="gql => gql\`
-        query CourseBook($lessonId: ID!) {
-          excuseTypes {
-            name
-            shortName
-          }
-          lesson: lessonsById(id: $lessonId) {
-            groups {
-              name
-              shortName
-              members {
-                id
-                fullName
-              }
-            }
-            subject {
-              name
-            }
-          }
-          lessonDocumentations: lessonDocumentationsByLessonId(id: $lessonId) {
-            id
-            topic
-            homework
-            groupNote
-            period
-            date
-            personalNotes {
-              id
-              person {
-                id
-                fullName
-              }
-              late
-              absent
-              excused
-              excuseType {
-                name
-                shortName
-              }
-              remarks
-              extraMarks {
-                name
-                shortName
-              }
-            }
-          }
-          extraMarks {
-            name
-            shortName
-          }
-        }
-      \`"
-      :variables="{ lessonId }"
-    >
+<template>
+  <ApolloQuery
+    :query="require('./CourseBook.graphql')"
+    :variables="{ lessonId }"
+  >
     <template v-slot="{ result: { loading, error, data } }">
         <!-- Error -->
         <message-box v-if="error" type="error">An error occurred</message-box>
@@ -133,6 +48,44 @@ export default {
             class="ma-auto"
           ></v-progress-circular>
         </div>
-  </template>
-</ApolloQuery>`
+    </template>
+  </ApolloQuery>
+</template>
+
+<script>
+import {CHANGES, SAVED, UPDATING} from "../../UpdateStatuses.js";
+
+export default {
+    methods: {
+        processDataChange(event) {
+            this.status = CHANGES;
+            // alert("Probably save the data");
+            console.log(event);
+            setTimeout(() => {
+                this.status = UPDATING;
+            }, 500)
+
+            setTimeout(() => {
+                this.status = SAVED;
+            }, 1000)
+
+        },
+        updateManually(event) {
+            alert("Data sync triggered manually");
+            this.status = UPDATING;
+            setTimeout(() => {
+                this.status = SAVED;
+            }, 500)
+        }
+    },
+    props: ["lessonId"],
+    name: "course-book",
+    data: () => {
+        return {
+            ping: "ping",
+            status: SAVED,
+            // lessonId: 352
+        }
+    }
 }
+</script>

aleksis/apps/alsijil/assets/index.js

@@ -3,9 +3,9 @@ import Vue from "vue"
 import UpdateIndicator from "./components/alsijil/UpdateIndicator.js";
 import PersonalNotes from "./components/alsijil/PersonalNotes.js";
 import LessonDocumentation from "./components/alsijil/LessonDocumentation.js";
-import CourseBook from './components/alsijil/CourseBook.js'
+import CourseBook from './components/alsijil/CourseBook.vue'
 
 Vue.component(UpdateIndicator.name, UpdateIndicator);
 Vue.component(PersonalNotes.name, PersonalNotes);
 Vue.component(LessonDocumentation.name, LessonDocumentation);
-Vue.component(CourseBook.name, CourseBook);
\ No newline at end of file
+Vue.component(CourseBook.name, CourseBook);