exercise reports list

Author: rockstarr-programmerr

src/layouts/LayoutClassroomStudent.vue

@@ -12,7 +12,10 @@
 
         <h1 v-text="classroom.name"></h1>
         <v-divider></v-divider>
-        <p v-text="classroom.description"></p>  <!-- TODO: multiline -->
+        <p
+          class="mt-5"
+          v-text="classroom.description"
+        ></p>  <!-- TODO: multiline -->
 
         <v-tabs>
           <v-tab

src/layouts/LayoutClassroomTeacher.vue

@@ -12,7 +12,10 @@
 
         <h1 v-text="classroom.name"></h1>
         <v-divider></v-divider>
-        <p v-text="classroom.description"></p>  <!-- TODO: multiline -->
+        <p
+          class="mt-5"
+          v-text="classroom.description"
+        ></p>  <!-- TODO: multiline -->
 
         <v-tabs>
           <v-tab

src/store/index.ts

@@ -3,6 +3,7 @@ import Vuex from 'vuex'
 import { account } from './account'
 import { classroom } from './classroom'
 import { readingExercise } from './reading-exercises'
+import { readingReport } from './reading-reports'
 
 Vue.use(Vuex)
 
@@ -20,6 +21,7 @@ export default new Vuex.Store({
   modules: {
     account,
     classroom,
-    readingExercise
+    readingExercise,
+    readingReport
   }
 })

src/store/reading-reports.ts

@@ -0,0 +1,40 @@
+import { Api } from '@/api'
+import { Classroom, ReadingExerciseReport } from '@/interfaces/classroom'
+import { ReadingExercise } from '@/interfaces/reading-exercise'
+import { User } from '@/interfaces/user'
+import { Module } from 'vuex'
+import { RootState } from './index'
+
+declare interface ReadingReportState {
+  reports: ReadingExerciseReport[];
+  currentReport?: ReadingExerciseReport;
+}
+
+export const readingReport: Module<ReadingReportState, RootState> = {
+  namespaced: true,
+
+  state: {
+    reports: [],
+    currentReport: undefined
+  },
+
+  mutations: {
+    SET_REPORTS (state, reports) {
+      state.reports = reports
+    },
+
+    SET_CURRENT_REPORT (state, exerciseID: ReadingExercise['identifier']) {
+      state.currentReport = state.reports.find(report => report.exercise === exerciseID)
+    }
+  },
+
+  actions: {
+    async getReports (
+      { commit },
+      { classroomPk, studentPk }: { classroomPk: Classroom['pk'], studentPk: User['pk'] }
+    ): Promise<void> {
+      const data = await Api.classroom.getStudentReport(classroomPk, studentPk)
+      commit('SET_REPORTS', data)
+    }
+  }
+}

src/views/classroom/ClassroomExercisesReadingStudent.vue

@@ -1,29 +1,52 @@
 <template>
   <div>
-    <p v-if="exercises.length === 0">
+    <v-progress-circular
+      v-if="loading"
+      indeterminate
+      color="primary"
+    ></v-progress-circular>
+
+    <p v-else-if="reports.length === 0">
       This classroom don't have any reading exercises. Perhaps your teacher forgot to add them?
     </p>
 
     <div v-else>
-      <p>Click on an exercise to start doing.</p>
-
       <v-simple-table>
         <thead>
           <tr>
-            <td>Exercise</td>
-            <td>Passage 1</td>
-            <td>Passage 2</td>
-            <td>Passage 3</td>
-            <td>Total</td>
-            <td>Band score</td>
+            <th>Exercise</th>
+            <th>Passage 1</th>
+            <th>Passage 2</th>
+            <th>Passage 3</th>
+            <th>Total</th>
+            <th>Band score</th>
+            <th></th>
           </tr>
         </thead>
         <tbody>
           <tr
-            v-for="exercise of exercises"
-            :key="exercise.pk"
+            v-for="report of reports"
+            :key="report.pk"
           >
-            <td>{{ exercise.identifier }}</td>
+            <td>{{ report.exercise }}</td>
+            <template v-if="!report.submitted">
+              <td colspan="5">
+                Not submitted
+              </td>
+              <td class="text-center">
+                Start
+              </td>
+            </template>
+            <template v-else>
+              <td>{{ report.passage_1_total }}</td>
+              <td>{{ report.passage_2_total }}</td>
+              <td>{{ report.passage_3_total }}</td>
+              <td>{{ report.total }}</td>
+              <td>{{ report.band_score }}</td>
+              <td class="text-center">
+                Detail
+              </td>
+            </template>
           </tr>
         </tbody>
       </v-simple-table>
@@ -32,24 +55,45 @@
 </template>
 
 <script lang="ts">
-import { Classroom } from '@/interfaces/classroom'
-import { ClassroomReadingExercise } from '@/interfaces/reading-exercise'
+import { Classroom, ReadingExerciseReport } from '@/interfaces/classroom'
+import { User } from '@/interfaces/user'
+import { unexpectedExc } from '@/utils'
 import { Vue, Component } from 'vue-property-decorator'
 import { mapState } from 'vuex'
 
 @Component({
   computed: {
+    ...mapState('account', {
+      user: 'loggedInUser'
+    }),
     ...mapState('classroom', {
       classroom: 'currentClassroom'
-    })
+    }),
+    ...mapState('readingReport', [
+      'reports'
+    ])
   }
 })
 export default class ClassroomExercisesReadingStudent extends Vue {
+  user!: User
   classroom!: Classroom
+  reports!: ReadingExerciseReport[]
+
+  loading = false
+
+  created (): void {
+    this.loading = true
+
+    const payload = {
+      classroomPk: this.classroom.pk,
+      studentPk: this.user.pk
+    }
 
-  get exercises (): ClassroomReadingExercise[] {
-    if (this.classroom === undefined) return []
-    return this.classroom.reading_exercises
+    this.$store.dispatch('readingReport/getReports', payload)
+      .catch(unexpectedExc)
+      .finally(() => {
+        this.loading = false
+      })
   }
 }
 </script>