Use new queries

aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsForPersonPage.vue

@@ -19,40 +19,34 @@
             <v-list-item-content>
               <v-list-item-title class="d-flex">
                 <!-- date & timeslot -->
-                <time :datetime="item.datetimeStart" class="text-no-wrap">
-                  {{ $d(DateTime.fromISO(item.datetimeStart), "shortDate") }}
+                <time :datetime="item.relatedDocumentation.datetimeStart" class="text-no-wrap">
+                  {{ $d($parseISODate(item.relatedDocumentation.datetimeStart), "shortDate") }}
                 </time>
-                <time :datetime="item.datetimeStart" class="text-no-wrap">
-                  {{ $d(DateTime.fromISO(item.datetimeStart), "shortTime") }}
+                <time :datetime="item.relatedDocumentation.datetimeStart" class="text-no-wrap">
+                  {{ $d($parseISODate(item.relatedDocumentation.datetimeStart), "shortTime") }}
                 </time>
                 <span>-</span>
-                <time :datetime="item.datetimeEnd" class="text-no-wrap">
-                  {{ $d(DateTime.fromISO(item.datetimeEnd), "shortTime") }}
+                <time :datetime="item.relatedDocumentation.datetimeEnd" class="text-no-wrap">
+                  {{ $d($parseISODate(item.relatedDocumentation.datetimeEnd), "shortTime") }}
                 </time>
                 <!-- teacher -->
-                <person-chip :person="item.teacher" no-link />
+                <person-chip v-for="teacher in item.relatedDocumentation.teachers" :person="teacher" no-link />
                 <!-- group -->
                 <div>
                   {{ item.groupShortName }}
                 </div>
                 <!-- subject -->
-                <subject-chip :subject="item.subject" />
+                <subject-chip :subject="item.relatedDocumentation.subject" />
                 <v-spacer />
                 <!-- chips: absences & extraMarks -->
                 <absence-reason-chip
-                  v-for="absence in items.absences"
-                  :key="absence.id"
-                  :absenceReason="absence"
+                  v-if="item.absenceReason"
+                  :absenceReason="item.absenceReason"
+                />
+                <extra-mark-chip
+                  v-if="item.extraMark"
+                  :extra-mark="item.extraMark"
                 />
-                <v-chip
-                  v-for="extraMark in item.extraMarks"
-                  :key="extraMark.id"
-                  :value="extraMark.id"
-                  :color="extraMark.colourBg"
-                  :text-color="extraMark.colourFg"
-                >
-                  {{ extraMark.name }}
-                </v-chip>
               </v-list-item-title>
               <v-list-item-subtitle>
                 {{ item.personalNote }}
@@ -67,24 +61,28 @@
       class="flex-shrink-1"
       :compact="false"
       :person="{ id: personId }"
-      :school-term="{ id: schoolTerm }"
+      :school-term="{ id: schoolTermId }"
     />
   </div>
 </template>
 
 <script>
+import AbsenceReasonChip from "aleksis.apps.kolego/components/AbsenceReasonChip.vue";
 import SchoolTermField from "aleksis.core/components/school_term/SchoolTermField.vue";
 import CRUDIterator from "aleksis.core/components/generic/CRUDIterator.vue";
 import PersonChip from "aleksis.core/components/person/PersonChip.vue";
 import SubjectChip from "aleksis.apps.cursus/components/SubjectChip.vue";
 import StatisticsForPersonCard from "./StatisticsForPersonCard.vue";
 
-import { documentationsByPerson } from "./statistics.graphql";
+import { participationsOfPerson, personalNotesForPerson } from "./statistics.graphql";
 import { DateTime } from "luxon";
+import ExtraMarkChip from "../../extra_marks/ExtraMarkChip.vue";
 
 export default {
   name: "StatisticsForPersonPage",
   components: {
+    ExtraMarkChip,
+    AbsenceReasonChip,
     SchoolTermField,
     CRUDIterator,
     PersonChip,
@@ -104,7 +102,6 @@ export default {
   },
   data() {
     return {
-      schoolTerm: this.schoolTermId,
       gqlQuery: documentationsByPerson,
     };
   },
@@ -115,6 +112,14 @@ export default {
         term: this.schoolTermId,
       };
     },
+    schoolTerm: {
+      get() {
+        return this.schoolTermId;
+      },
+      set(value) {
+        console.log("New SchoolTerm:", value);
+      }
+    },
   },
 };
 </script>