From ca6a4b25caae1dc2f6139e1a3ce5faaf04cf07b0 Mon Sep 17 00:00:00 2001
From: magicfelix <felix@felix-zauberer.de>
Date: Mon, 25 Jul 2022 16:59:20 +0200
Subject: [PATCH] Seperate GraphQL query from template and use .vue-style
---
.../components/alsijil/CourseBook.graphql | 50 +++++++
.../alsijil/{CourseBook.js => CourseBook.vue} | 137 ++++++------------
aleksis/apps/alsijil/assets/index.js | 4 +-
3 files changed, 97 insertions(+), 94 deletions(-)
create mode 100644 aleksis/apps/alsijil/assets/components/alsijil/CourseBook.graphql
rename aleksis/apps/alsijil/assets/components/alsijil/{CourseBook.js => CourseBook.vue} (68%)
diff --git a/aleksis/apps/alsijil/assets/components/alsijil/CourseBook.graphql b/aleksis/apps/alsijil/assets/components/alsijil/CourseBook.graphql
new file mode 100644
index 000000000..fcfc56270
--- /dev/null
+++ b/aleksis/apps/alsijil/assets/components/alsijil/CourseBook.graphql
@@ -0,0 +1,50 @@
+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
+ }
+}
diff --git a/aleksis/apps/alsijil/assets/components/alsijil/CourseBook.js b/aleksis/apps/alsijil/assets/components/alsijil/CourseBook.vue
similarity index 68%
rename from aleksis/apps/alsijil/assets/components/alsijil/CourseBook.js
rename to aleksis/apps/alsijil/assets/components/alsijil/CourseBook.vue
index 0bee962a8..633f4b2b6 100644
--- a/aleksis/apps/alsijil/assets/components/alsijil/CourseBook.js
+++ b/aleksis/apps/alsijil/assets/components/alsijil/CourseBook.vue
@@ -1,93 +1,8 @@
-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>
diff --git a/aleksis/apps/alsijil/assets/index.js b/aleksis/apps/alsijil/assets/index.js
index d9a2278f2..0846fd516 100644
--- a/aleksis/apps/alsijil/assets/index.js
+++ b/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);
--
GitLab