looking good

Author: rockstarr-programmerr

src/api/classroom.ts

@@ -1,7 +1,8 @@
 import Vue from 'vue'
-import { ClassroomListRes, ClassroomDetailRes, ClassroomCreateReq, AddStudentReq, RemoveStudentReq, AddReadingExercisesReq, RemoveReadingExercisesReq } from '@/interfaces/api/classroom'
+import { ClassroomListRes, ClassroomDetailRes, ClassroomCreateReq, AddStudentReq, RemoveStudentReq, AddReadingExercisesReq, RemoveReadingExercisesReq, ReadingExerciseReportRes } from '@/interfaces/api/classroom'
 import { Classroom } from '@/interfaces/classroom'
 import { endpoints, replacePk } from './endpoints'
+import { User } from '@/interfaces/user'
 
 export const classroom = {
   async list (): Promise<ClassroomListRes> {
@@ -38,5 +39,15 @@ export const classroom = {
   async removeReadingExercises (pk: Classroom['pk'], payload: RemoveReadingExercisesReq[]): Promise<void> {
     const endpoint = replacePk(endpoints.classroom.removeReadingExercises, pk)
     await Vue.axios.post(endpoint, payload)
+  },
+
+  async getStudentReport (classroomPk: Classroom['pk'], studentPk: User['pk']): Promise<ReadingExerciseReportRes[]> {
+    const endpoint = replacePk(endpoints.classroom.studentReadingReport, classroomPk)
+    const res = await Vue.axios.get(endpoint, {
+      params: {
+        student: studentPk
+      }
+    })
+    return res.data
   }
 }

src/api/endpoints.ts

@@ -16,7 +16,8 @@ export const endpoints = {
     addStudents: '/classroom/classrooms/<pk>/add-students/',
     removeStudents: '/classroom/classrooms/<pk>/remove-students/',
     addReadingExercises: '/classroom/classrooms/<pk>/add-reading-exercises/',
-    removeReadingExercises: '/classroom/classrooms/<pk>/remove-reading-exercises/'
+    removeReadingExercises: '/classroom/classrooms/<pk>/remove-reading-exercises/',
+    studentReadingReport: '/classroom/classrooms/<pk>/student-reading-report/'
   },
   readingExercise: {
     list: '/classroom/reading-exercises/',

src/interfaces/api/classroom.ts

@@ -1,4 +1,4 @@
-import { Classroom } from '../classroom'
+import { Classroom, ReadingExerciseReport } from '../classroom'
 import { PaginatedRes } from './common'
 
 export declare interface ClassroomDetailRes extends Classroom {}
@@ -29,3 +29,5 @@ export declare interface AddReadingExercisesReq {
 export declare interface RemoveReadingExercisesReq {
   pk: number;
 }
+
+export declare interface ReadingExerciseReportRes extends ReadingExerciseReport {}

src/interfaces/classroom.ts

@@ -1,3 +1,4 @@
+import { ClassroomReadingExercise } from './reading-exercise';
 import { User } from './user'
 
 export declare interface Classroom {
@@ -7,5 +8,26 @@ export declare interface Classroom {
   description: string;
   teacher: User;
   students: User[];
-  reading_exercises: number[];
+  reading_exercises: ClassroomReadingExercise[];
+}
+
+
+export declare interface ReadingSubmissionResult {
+  question_number: number;
+  submitted_answer: string;
+  possible_answers: string[];
+  is_correct: boolean;
+}
+
+export declare interface ReadingExerciseReport {
+  exercise: string;
+  passage_1_total: number;
+  passage_2_total: number;
+  passage_3_total: number;
+  total: number;
+  band_score: number;
+  submitted: boolean;
+  passage_1_detail: ReadingSubmissionResult[];
+  passage_2_detail: ReadingSubmissionResult[];
+  passage_3_detail: ReadingSubmissionResult[];
 }

src/interfaces/reading-exercise.ts

@@ -4,3 +4,8 @@ export declare interface ReadingExercise {
   identifier: string;
   content: string;
 }
+
+export declare interface ClassroomReadingExercise {
+  pk: number;
+  identifier: string;
+}

src/layouts/LayoutClassroomStudent.vue

@@ -0,0 +1,109 @@
+<template>
+  <LayoutDefault>
+    <v-container>
+      <v-progress-circular
+        v-if="loading"
+        indeterminate
+        color="primary"
+      ></v-progress-circular>
+
+      <div v-else-if="classroom !== undefined">
+        <v-breadcrumbs :items="breadcrumbs"></v-breadcrumbs>
+
+        <h1 v-text="classroom.name"></h1>
+        <v-divider></v-divider>
+        <p v-text="classroom.description"></p>  <!-- TODO: multiline -->
+
+        <v-tabs>
+          <v-tab
+            v-for="tab of tabs"
+            :key="tab.text"
+            v-text="tab.text"
+            link
+            :to="tab.to"
+          ></v-tab>
+        </v-tabs>
+
+        <router-view v-if="classroomFound" class="mt-5"></router-view>
+      </div>
+    </v-container>
+  </LayoutDefault>
+</template>
+
+<script lang="ts">
+import { Classroom } from '@/interfaces/classroom'
+import { unexpectedExc } from '@/utils'
+import { Vue, Component } from 'vue-property-decorator'
+import { mapMutations, mapState } from 'vuex'
+import LayoutDefault from './LayoutDefault.vue'
+
+@Component({
+  components: {
+    LayoutDefault
+  },
+  computed: {
+    ...mapState('classroom', {
+      classroom: 'currentClassroom'
+    })
+  },
+  methods: {
+    ...mapMutations('classroom', {
+      setCurrentClassroom: 'SET_CURRENT_CLASSROOM'
+    })
+  }
+})
+export default class LayoutClassroomStudent extends Vue {
+  // eslint-disable-next-line no-undef
+  [key: string]: unknown
+
+  classroom!: Classroom
+  setCurrentClassroom!: CallableFunction
+
+  get breadcrumbs (): unknown[] {
+    if (this.classroom === undefined) return []
+    return [
+      { text: 'Home', to: { name: 'Home' }, exact: true },
+      { text: 'Classrooms', to: { name: 'ClassroomList' }, exact: true },
+      { text: this.classroom.name, disabled: true }
+    ]
+  }
+
+  get pk (): string {
+    return this.$route.params.pk
+  }
+
+  get loading (): boolean {
+    return this.classroom === undefined
+  }
+
+  created (): void {
+    this.setClassroom()
+  }
+
+  classroomFound = false
+
+  setClassroom (): void {
+    this.$store.dispatch('classroom/detail', this.pk)
+      .then(() => {
+        this.classroomFound = true
+      })
+      .catch(unexpectedExc)
+  }
+
+  tabs = [
+    { text: 'Reading exercises', to: { name: 'ClassroomExercisesReading' } },
+    { text: 'Listening exercises', to: { name: 'ClassroomExercisesListening' } }
+  ]
+
+  // @ts-expect-error: don't care
+  // eslint-disable-next-line
+  beforeRouteLeave (to, from, next): void {
+    this.setCurrentClassroom(undefined)
+    next()
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/router/index.ts

@@ -3,6 +3,7 @@ import VueRouter, { RouteConfig } from 'vue-router'
 
 import LayoutNoAppbar from '../layouts/LayoutNoAppbar.vue'
 import LayoutClassroomTeacher from '../layouts/LayoutClassroomTeacher.vue'
+import LayoutClassroomStudent from '../layouts/LayoutClassroomStudent.vue'
 
 import Home from '../views/Home.vue'
 import Auth from '../views/auth/Auth.vue'
@@ -56,7 +57,8 @@ const routes: Array<RouteConfig> = [
       component: ClassroomOverview,
       props: castToNumber('pk'),
       meta: {
-        teacherLayout: LayoutClassroomTeacher
+        teacherLayout: LayoutClassroomTeacher,
+        studentLayout: LayoutClassroomStudent
       }
     },
     {
@@ -65,7 +67,8 @@ const routes: Array<RouteConfig> = [
       component: ClassroomStudents,
       props: castToNumber('pk'),
       meta: {
-        teacherLayout: LayoutClassroomTeacher
+        teacherLayout: LayoutClassroomTeacher,
+        studentLayout: LayoutClassroomStudent
       }
     },
     {
@@ -74,7 +77,8 @@ const routes: Array<RouteConfig> = [
       component: ClassroomExercisesReading,
       props: castToNumber('pk'),
       meta: {
-        teacherLayout: LayoutClassroomTeacher
+        teacherLayout: LayoutClassroomTeacher,
+        studentLayout: LayoutClassroomStudent
       }
     },
     {
@@ -83,7 +87,8 @@ const routes: Array<RouteConfig> = [
       component: ClassroomExercisesListening,
       props: castToNumber('pk'),
       meta: {
-        teacherLayout: LayoutClassroomTeacher
+        teacherLayout: LayoutClassroomTeacher,
+        studentLayout: LayoutClassroomStudent
       }
     }
   ]),

src/store/account.ts

@@ -24,7 +24,9 @@ export const account: Module<AccountState, RootState> = {
     loggedInUser: state => state.loggedInUser,
     hasUserInfo: state => state.loggedInUser !== undefined,
     accessToken: state => state.accessToken,
-    refreshToken: state => state.refreshToken
+    refreshToken: state => state.refreshToken,
+    isTeacher: state => state.loggedInUser !== undefined && state.loggedInUser.user_type === 'teacher',
+    isStudent: state => state.loggedInUser !== undefined && state.loggedInUser.user_type === 'student'
   },
 
   mutations: {

src/store/classroom.ts

@@ -53,19 +53,23 @@ export const classroom: Module<ClassroomState, RootState> = {
       state.currentClassroom.students.splice(index, 1)
     },
 
-    ADD_READING_EXERCISES_TO_CURRENT_CLASSROOM (state, exercisePk) {
+    ADD_READING_EXERCISES_TO_CURRENT_CLASSROOM (state, exercise) {
       if (state.currentClassroom !== undefined) {
-        if (!state.currentClassroom.reading_exercises.includes(exercisePk)) {
-          state.currentClassroom.reading_exercises.push(exercisePk)
+        const existingPks = state.currentClassroom.reading_exercises.map(exercise => exercise.pk)
+        if (!existingPks.includes(exercise.pk)) {
+          state.currentClassroom.reading_exercises.push({
+            pk: exercise.pk,
+            identifier: exercise.identifier
+          })
         }
       }
     },
 
     REMOVE_READING_EXERCISES_FROM_CURRENT_CLASSROOM (state, pkToRemove) {
       if (state.currentClassroom === undefined) return
       let index = 0
-      for (const pk of state.currentClassroom.reading_exercises) {
-        if (pk === pkToRemove) break
+      for (const exercise of state.currentClassroom.reading_exercises) {
+        if (exercise.pk === pkToRemove) break
         index++
       }
       state.currentClassroom.reading_exercises.splice(index, 1)
@@ -113,7 +117,7 @@ export const classroom: Module<ClassroomState, RootState> = {
       if (state.currentClassroom === undefined) return
       await Api.classroom.addReadingExercises(state.currentClassroom.pk, payload)
       payload.forEach(exercise => {
-        commit('ADD_READING_EXERCISES_TO_CURRENT_CLASSROOM', exercise.pk)
+        commit('ADD_READING_EXERCISES_TO_CURRENT_CLASSROOM', exercise)
       })
     },
 

src/views/Home.vue

@@ -16,16 +16,41 @@
 
 <script lang="ts">
 import { Vue, Component } from 'vue-property-decorator'
+import { mapGetters } from 'vuex'
 
-@Component
+@Component({
+  computed: {
+    ...mapGetters('account', [
+      'isTeacher',
+      'isStudent'
+    ])
+  }
+})
 export default class Home extends Vue {
   breadcrumbs = [
     { text: 'Home', to: { name: 'Home' } }
   ]
 
-  links = [
-    { text: 'Classrooms', to: { name: 'ClassroomList' } },
-    { text: 'Reading exercises', to: { name: 'ReadingExerciseList' } }
-  ]
+  isTeacher!: boolean
+  isStudent!: boolean
+
+  created (): void {
+    if (this.isStudent) {
+      this.$router.push({ name: 'ClassroomList' })
+    }
+  }
+
+  // eslint-disable-next-line
+  get links () {
+    const links = [
+      { text: 'Classrooms', to: { name: 'ClassroomList' } }
+    ]
+    if (this.isTeacher) {
+      links.push(
+        { text: 'Reading exercises', to: { name: 'ReadingExerciseList' } }
+      )
+    }
+    return links
+  }
 }
 </script>