Add school-term-select & crud-iterator to StatisticsForPersonPage

The latter is not integrated yet.

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

 <template>
-  <!-- header (close, title, print) -->
-  <!-- school-term-select -->
-  <!-- documentations statistics list -->
-  <statistics-for-person-card
-    :compact="false"
-    :person="{ id: personId }"
-    :school-term="{ id: schoolTermId }"
-  />
+  <div class="d-flex" style="gap: 4em">
+    <!-- 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 statistics list -->
+      <c-r-u-d-iterator
+        >
+      </c-r-u-d-iterator>
+    </div>
+    <statistics-for-person-card
+      class="flex-shrink-1"
+      :compact="false"
+      :person="{ id: personId }"
+      :school-term="{ id: schoolTerm }"
+      />
+  </div>
 </template>
 
 <script>
+import SchoolTermField from "aleksis.core/components/school_term/SchoolTermField.vue";
+import CRUDIterator from "aleksis.core/components/generic/CRUDIterator.vue";
 import StatisticsForPersonCard from "./StatisticsForPersonCard.vue";
 
 export default {
   name: "StatisticsForPersonPage",
   components: {
+    SchoolTermField,
+    CRUDIterator,
     StatisticsForPersonCard,
   },
   props: {
@@ -28,5 +42,10 @@ export default {
       required: true,
     },
   },
+  data() {
+    return {
+      schoolTerm: this.schoolTermId,
+    };
+  },
 };
 </script>