Use Fullscreendialog for Statistics page

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

 <template>
-  <div class="d-flex" style="gap: 4em">
-    <!-- TODO: header (close, title, print) -->
-    <!-- TODO: flex-grow-1 does a little & flex-shrink-1 does nothing -->
-    <div class="flex-grow-1">
-      <!-- school-term-select -->
-      <school-term-field v-model="schoolTerm" :enable-create="false" />
-      <!-- documentations for person list -->
-      <c-r-u-d-iterator
-        i18n-key="TODO"
-        :gql-query="gqlQuery"
-        :gql-additional-query-args="gqlQueryArgs"
-        :enable-create="false"
-        :enable-edit="false"
-        :elevated="false"
-      >
-        <template #additionalActions>
-          <v-btn-toggle
-            v-model="mode"
-            mandatory
-            color="secondary"
-            rounded
-            dense
-          >
-            <v-btn outlined :value="MODE.PARTICIPATIONS">
-              {{ $t("alsijil.coursebook.absences.absences") }}
-            </v-btn>
-            <v-btn outlined :value="MODE.PERSONAL_NOTES">
-              {{ $t("alsijil.personal_notes.personal_notes") }}
-            </v-btn>
-          </v-btn-toggle>
-        </template>
-        <template #default="{ items }">
-          <v-list-item v-for="item in items" :key="item.id" ripple>
-            <v-list-item-content>
-              <v-list-item-title>
-                <!-- date & timeslot -->
-                <time
-                  :datetime="item.relatedDocumentation.datetimeStart"
-                  class="text-no-wrap"
-                >
-                  {{
-                    $d(
-                      $parseISODate(item.relatedDocumentation.datetimeStart),
-                      "short",
-                    )
-                  }}
-                </time>
+  <fullscreen-dialog-page>
+    <div class="d-flex" style="gap: 4em">
+      <!-- TODO: header (close, title, print) -->
+      <!-- TODO: flex-grow-1 does a little & flex-shrink-1 does nothing -->
+      <div class="flex-grow-1">
+        <!-- school-term-select -->
+        <school-term-field v-model="schoolTerm" :enable-create="false" />
+        <!-- documentations for person list -->
+        <c-r-u-d-iterator
+          i18n-key="TODO"
+          :gql-query="gqlQuery"
+          :gql-additional-query-args="gqlQueryArgs"
+          :enable-create="false"
+          :enable-edit="false"
+          :elevated="false"
+        >
+          <template #additionalActions>
+            <v-btn-toggle
+              v-model="mode"
+              mandatory
+              color="secondary"
+              rounded
+              dense
+            >
+              <v-btn outlined :value="MODE.PARTICIPATIONS">
+                {{ $t("alsijil.coursebook.absences.absences") }}
+              </v-btn>
+              <v-btn outlined :value="MODE.PERSONAL_NOTES">
+                {{ $t("alsijil.personal_notes.personal_notes") }}
+              </v-btn>
+            </v-btn-toggle>
+          </template>
+          <template #default="{ items }">
+            <v-list-item v-for="item in items" :key="item.id" ripple>
+              <v-list-item-content>
+                <v-list-item-title>
+                  <!-- date & timeslot -->
+                  <time
+                    :datetime="item.relatedDocumentation.datetimeStart"
+                    class="text-no-wrap"
+                  >
+                    {{
+                      $d(
+                        $parseISODate(item.relatedDocumentation.datetimeStart),
+                        "short",
+                      )
+                    }}
+                  </time>
 
-                <time
-                  :datetime="item.relatedDocumentation.datetimeStart"
-                  class="text-no-wrap"
-                >
-                  {{
-                    $d(
-                      $parseISODate(item.relatedDocumentation.datetimeStart),
-                      "shortTime",
-                    )
-                  }}
-                </time>
-                <span>-</span>
-                <time
-                  :datetime="item.relatedDocumentation.datetimeEnd"
-                  class="text-no-wrap"
-                >
-                  {{
-                    $d(
-                      $parseISODate(item.relatedDocumentation.datetimeEnd),
-                      "shortTime",
-                    )
-                  }}
-                </time>
-                <!-- teacher -->
-                <person-chip
-                  v-for="teacher in item.relatedDocumentation.teachers"
-                  :key="teacher.id"
-                  :person="teacher"
-                  no-link
-                  small
+                  <time
+                    :datetime="item.relatedDocumentation.datetimeStart"
+                    class="text-no-wrap"
+                  >
+                    {{
+                      $d(
+                        $parseISODate(item.relatedDocumentation.datetimeStart),
+                        "shortTime",
+                      )
+                    }}
+                  </time>
+                  <span>-</span>
+                  <time
+                    :datetime="item.relatedDocumentation.datetimeEnd"
+                    class="text-no-wrap"
+                  >
+                    {{
+                      $d(
+                        $parseISODate(item.relatedDocumentation.datetimeEnd),
+                        "shortTime",
+                      )
+                    }}
+                  </time>
+                  <!-- teacher -->
+                  <person-chip
+                    v-for="teacher in item.relatedDocumentation.teachers"
+                    :key="teacher.id"
+                    :person="teacher"
+                    no-link
+                    small
+                  />
+                  <!-- group -->
+                  <span>
+                    {{ item.groupShortName }}
+                  </span>
+                  <!-- subject -->
+                  <subject-chip
+                    :subject="item.relatedDocumentation.subject"
+                    small
+                  />
+                </v-list-item-title>
+                <v-list-item-subtitle>
+                  {{ item.note }}
+                </v-list-item-subtitle>
+              </v-list-item-content>
+              <v-list-item-action>
+                <!-- chips: absences & extraMarks -->
+                <absence-reason-chip
+                  v-if="item.absenceReason"
+                  :absenceReason="item.absenceReason"
                 />
-                <!-- group -->
-                <span>
-                  {{ item.groupShortName }}
-                </span>
-                <!-- subject -->
-                <subject-chip
-                  :subject="item.relatedDocumentation.subject"
-                  small
+                <extra-mark-chip
+                  v-if="item.extraMark"
+                  :extra-mark="item.extraMark"
                 />
-              </v-list-item-title>
-              <v-list-item-subtitle>
-                {{ item.note }}
-              </v-list-item-subtitle>
-            </v-list-item-content>
-            <v-list-item-action>
-              <!-- chips: absences & extraMarks -->
-              <absence-reason-chip
-                v-if="item.absenceReason"
-                :absenceReason="item.absenceReason"
-              />
-              <extra-mark-chip
-                v-if="item.extraMark"
-                :extra-mark="item.extraMark"
-              />
-            </v-list-item-action>
-          </v-list-item>
-          <v-divider></v-divider>
-        </template>
-      </c-r-u-d-iterator>
+              </v-list-item-action>
+            </v-list-item>
+            <v-divider></v-divider>
+          </template>
+        </c-r-u-d-iterator>
+      </div>
+      <statistics-for-person-card
+        class="flex-shrink-1"
+        :compact="false"
+        :person="{ id: personId }"
+        :school-term="{ id: schoolTermId }"
+      />
     </div>
-    <statistics-for-person-card
-      class="flex-shrink-1"
-      :compact="false"
-      :person="{ id: personId }"
-      :school-term="{ id: schoolTermId }"
-    />
-  </div>
+  </fullscreen-dialog-page>
 </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 FullscreenDialogPage from "aleksis.core/components/generic/dialogs/FullscreenDialogPage.vue";
 import PersonChip from "aleksis.core/components/person/PersonChip.vue";
 import SubjectChip from "aleksis.apps.cursus/components/SubjectChip.vue";
 import StatisticsForPersonCard from "./StatisticsForPersonCard.vue";
@@ -144,6 +147,7 @@ export default {
     AbsenceReasonChip,
     SchoolTermField,
     CRUDIterator,
+    FullscreenDialogPage,
     PersonChip,
     SubjectChip,
     StatisticsForPersonCard,