have fun

Author: rockstarr-programmerr

src/views/classroom/ClassroomOverview.vue

@@ -1,16 +1,34 @@
 <template>
   <div>
-    ClassroomOverview
+    <component
+      :is="component"
+      :student-pk="studentPk"
+      @detail="goToDetail($event)"
+    ></component>
   </div>
 </template>
 
 <script lang="ts">
+import { User } from '@/interfaces/user'
 import { Vue, Component } from 'vue-property-decorator'
+import ClassroomOverviewStudentList from './ClassroomOverviewStudentList.vue'
+import ClassroomOverviewStudentDetail from './ClassroomOverviewStudentDetail.vue'
 
-@Component
+@Component({
+  components: {
+    ClassroomOverviewStudentList,
+    ClassroomOverviewStudentDetail
+  }
+})
 export default class ClassroomOverview extends Vue {
-  // eslint-disable-next-line no-undef
-  [key: string]: unknown
+  component = ClassroomOverviewStudentList
+
+  studentPk: User['pk'] | null = null
+
+  goToDetail (studentPk: User['pk']): void {
+    this.studentPk = studentPk
+    this.component = ClassroomOverviewStudentDetail
+  }
 }
 </script>
 

src/views/classroom/ClassroomOverviewStudentDetail.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    {{ studentPk }}
+  </div>
+</template>
+
+<script lang="ts">
+import { Classroom } from '@/interfaces/classroom'
+import { Vue, Component, Prop } from 'vue-property-decorator'
+import { mapState } from 'vuex'
+
+@Component({
+  computed: {
+    ...mapState('classroom', {
+      classroom: 'currentClassroom'
+    })
+  }
+})
+export default class ClassroomOverviewStudentDetail extends Vue {
+  @Prop(Number) readonly studentPk!: number
+
+  classroom!: Classroom
+
+  get students (): Classroom['students'] {
+    return this.classroom.students
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/views/classroom/ClassroomOverviewStudentList.vue

@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <v-list>
+      <v-list-item
+        v-for="student of students"
+        :key="student.pk"
+        @click="$emit('detail', student.pk)"
+      >
+        <v-list-item-content>
+          <v-list-item-title>
+            {{ student.name }}
+          </v-list-item-title>
+          <v-list-item-subtitle>
+            {{ student.email }}
+          </v-list-item-subtitle>
+        </v-list-item-content>
+      </v-list-item>
+    </v-list>
+  </div>
+</template>
+
+<script lang="ts">
+import { Classroom } from '@/interfaces/classroom'
+import { Vue, Component } from 'vue-property-decorator'
+import { mapState } from 'vuex'
+
+@Component({
+  computed: {
+    ...mapState('classroom', {
+      classroom: 'currentClassroom'
+    })
+  }
+})
+export default class ClassroomOverviewStudentList extends Vue {
+  classroom!: Classroom
+
+  get students (): Classroom['students'] {
+    return this.classroom.students
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/views/classroom/ReadingExerciseSubmitResult.vue

@@ -104,6 +104,19 @@
               </v-simple-table>
             </v-card-text>
           </v-card>
+
+          <v-btn
+            color="primary"
+            link
+            :to="{
+              name: 'ClassroomExercisesReading',
+              params: {
+                pk: classroom.pk
+              }
+            }"
+          >
+            Back to classroom
+          </v-btn>
         </v-col>
       </v-row>
     </div>