CourseBook.js

import {CHANGES, SAVED, UPDATING} from "../../alsijil/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 v-slot="{ result: { loading, error, data } }">
        <!-- Error -->
        <message-box v-if="error" type="error">An error occurred</message-box>
    
        <!-- Result -->
        <div v-else-if="data" class="result apollo">
          <update-indicator @manual-update="updateManually()" ref="indicator" :status="status"></update-indicator>
          <v-subheader>{{ data.lesson.subject.name }}</v-subheader>
          <v-row v-if="data.lessonDocumentations.length > 0">
            <v-col v-for="item in data.lessonDocumentations" cols="12" v-bind:key="item.id">
              <lesson-documentation
                v-bind:key="item.id"
                :id="item.id"
                :groups="data.lesson.groups"
                :excuse-types="data.excuseTypes"
                :extra-marks="data.extraMarks"
                :period="item.period"
                 
                :personal-notes="item.personalNotes"
                @change-personal-notes="processDataChange"
                 
                :date="item.date"
                @change-date="processDataChange"
                 
                :topic="item.topic"
                @change-topic="processDataChange"
                 
                :homework="item.homework"
                @change-homework="processDataChange"
                 
                :group-note="item.groupNote"
                @change-group-note="processDataChange"
              ></lesson-documentation>
            </v-col>
          </v-row>
          <message-box v-else type="info">No coursebook for you :(</message-box>
        </div>
        <!-- No result or Loading -->
        <div v-else>
          <v-progress-circular
            indeterminate
            color="primary"
            class="ma-auto"
          ></v-progress-circular>
        </div>
  </template>
</ApolloQuery>`
}