Skip to content

Commit 5742c9f

Browse files
rockstarr-programmerrrockstarr-programmerr
committed
student detail report
1 parent 7946daa commit 5742c9f

10 files changed

+344
-216
lines changed

‎src/api/account.ts

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import Vue from 'vue'
2-
import { endpoints } from './endpoints'
2+
import { endpoints, replacePk } from './endpoints'
33
import {
44
LoginReq, LoginRes,
55
MyInfoRes,
6-
RegisterTeacherReq, RegisterTeacherRes, TokenRefreshReq, TokenRefreshRes
6+
RegisterTeacherReq, RegisterTeacherRes, TokenRefreshReq, TokenRefreshRes, UserDetailRes
77
} from '@/interfaces/api/account'
8+
import { User } from '@/interfaces/user'
89

910
export const account = {
1011
async registerTeacher (reqBody: RegisterTeacherReq): Promise<RegisterTeacherRes> {
@@ -25,5 +26,11 @@ export const account = {
2526
async getMyInfo (): Promise<MyInfoRes> {
2627
const res = await Vue.axios.get(endpoints.account.me.myInfo)
2728
return res.data
29+
},
30+
31+
async userDetail (pk: User['pk']): Promise<UserDetailRes> {
32+
const endpoint = replacePk(endpoints.account.users.detail, pk)
33+
const res = await Vue.axios.get(endpoint)
34+
return res.data
2835
}
2936
}

‎src/api/endpoints.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ export const endpoints = {
33
users: {
44
login: '/account/users/login/',
55
tokenRefresh: '/account/users/token-refresh/',
6-
registerTeacher: '/account/users/register-teacher/'
6+
registerTeacher: '/account/users/register-teacher/',
7+
detail: '/account/users/<pk>/'
78
},
89
me: {
910
myInfo: '/account/me/'

‎src/interfaces/api/account.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,3 +33,5 @@ export declare interface RegisterTeacherRes {
3333
}
3434

3535
export declare interface MyInfoRes extends User {}
36+
37+
export declare interface UserDetailRes extends User {}

‎src/router/index.ts

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import Http404 from '../views/http/Http404.vue'
1212
import ClassroomList from '../views/classroom/ClassroomList.vue'
1313
import ClassroomCreate from '../views/classroom/ClassroomCreate.vue'
1414
import ClassroomOverview from '../views/classroom/ClassroomOverview.vue'
15+
import ClassroomOverviewStudentReport from '../views/classroom/ClassroomOverviewStudentReport.vue'
1516
import ClassroomStudents from '../views/classroom/ClassroomStudents.vue'
1617
import ClassroomExercisesReading from '../views/classroom/ClassroomExercisesReading.vue'
1718
import ClassroomExercisesListening from '../views/classroom/ClassroomExercisesListening.vue'
@@ -59,8 +60,16 @@ const routes: Array<RouteConfig> = [
5960
component: ClassroomOverview,
6061
props: castToNumber(['pk']),
6162
meta: {
62-
teacherLayout: LayoutClassroomTeacher,
63-
studentLayout: LayoutClassroomStudent
63+
teacherLayout: LayoutClassroomTeacher
64+
}
65+
},
66+
{
67+
path: '/:pk/overview/:studentPk',
68+
name: 'ClassroomOverviewStudentReport',
69+
component: ClassroomOverviewStudentReport,
70+
props: castToNumber(['pk', 'studentPk']),
71+
meta: {
72+
teacherLayout: LayoutClassroomTeacher
6473
}
6574
},
6675
{
@@ -69,8 +78,7 @@ const routes: Array<RouteConfig> = [
6978
component: ClassroomStudents,
7079
props: castToNumber(['pk']),
7180
meta: {
72-
teacherLayout: LayoutClassroomTeacher,
73-
studentLayout: LayoutClassroomStudent
81+
teacherLayout: LayoutClassroomTeacher
7482
}
7583
},
7684
{
@@ -90,10 +98,10 @@ const routes: Array<RouteConfig> = [
9098
props: castToNumber(['pk', 'exercisePk'])
9199
},
92100
{
93-
path: '/:pk/reading-exercises/:exercisePk/result',
101+
path: '/:pk/reading-exercises/:exercisePk/result/:studentPk',
94102
name: 'ReadingExerciseSubmitResult',
95103
component: ReadingExerciseSubmitResult,
96-
props: castToNumber(['pk', 'exercisePk'])
104+
props: castToNumber(['pk', 'exercisePk', 'studentPk'])
97105
},
98106
{
99107
path: '/:pk/listening-exercises',

‎src/views/classroom/ClassroomOverview.vue

Lines changed: 42 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,56 @@
11
<template>
2-
<div>
3-
<component
4-
:is="component"
5-
:student-pk="studentPk"
6-
@detail="goToDetail($event)"
7-
></component>
8-
</div>
2+
<v-card>
3+
<v-card-title>
4+
Students list
5+
</v-card-title>
6+
<v-card-subtitle>
7+
Click to see each student's tracking sheet
8+
</v-card-subtitle>
9+
<v-card-text>
10+
<v-list>
11+
<v-list-item
12+
v-for="student of students"
13+
:key="student.pk"
14+
link
15+
:to="{
16+
name: 'ClassroomOverviewStudentReport',
17+
params: {
18+
pk: classroom.pk,
19+
studentPk: student.pk
20+
}
21+
}"
22+
>
23+
<v-list-item-content>
24+
<v-list-item-title>
25+
{{ student.name }}
26+
</v-list-item-title>
27+
<v-list-item-subtitle>
28+
{{ student.email }}
29+
</v-list-item-subtitle>
30+
</v-list-item-content>
31+
</v-list-item>
32+
</v-list>
33+
</v-card-text>
34+
</v-card>
935
</template>
1036

1137
<script lang="ts">
12-
import { User } from '@/interfaces/user'
1338
import { Vue, Component } from 'vue-property-decorator'
14-
import ClassroomOverviewStudentList from './ClassroomOverviewStudentList.vue'
15-
import ClassroomOverviewStudentDetail from './ClassroomOverviewStudentDetail.vue'
39+
import { mapState } from 'vuex'
40+
import { Classroom } from '@/interfaces/classroom'
1641
1742
@Component({
18-
components: {
19-
ClassroomOverviewStudentList,
20-
ClassroomOverviewStudentDetail
43+
computed: {
44+
...mapState('classroom', {
45+
classroom: 'currentClassroom'
46+
})
2147
}
2248
})
2349
export default class ClassroomOverview extends Vue {
24-
component = ClassroomOverviewStudentList
50+
classroom!: Classroom
2551
26-
studentPk: User['pk'] | null = null
27-
28-
goToDetail (studentPk: User['pk']): void {
29-
this.studentPk = studentPk
30-
this.component = ClassroomOverviewStudentDetail
52+
get students (): Classroom['students'] {
53+
return this.classroom.students
3154
}
3255
}
3356
</script>

‎src/views/classroom/ClassroomOverviewStudentDetail.vue

Lines changed: 0 additions & 32 deletions
This file was deleted.

‎src/views/classroom/ClassroomOverviewStudentList.vue

Lines changed: 0 additions & 45 deletions
This file was deleted.

‎src/views/classroom/ClassroomOverviewStudentReport.vue

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
<template>
2+
<div>
3+
<v-progress-circular
4+
v-if="loading"
5+
indeterminate
6+
color="primary"
7+
></v-progress-circular>
8+
9+
<p v-else-if="reports.length === 0">
10+
No reports for this student.
11+
</p>
12+
13+
<div v-else>
14+
<v-card>
15+
<v-card-title>
16+
<span v-if="student !== null">{{ student.name }}</span>
17+
</v-card-title>
18+
<v-card-subtitle>
19+
<span v-if="student !== null">{{ student.email }}</span>
20+
</v-card-subtitle>
21+
<v-card-text>
22+
<v-simple-table>
23+
<thead>
24+
<tr>
25+
<th>Exercise</th>
26+
<th>Passage 1</th>
27+
<th>Passage 2</th>
28+
<th>Passage 3</th>
29+
<th>Total</th>
30+
<th>Band score</th>
31+
</tr>
32+
</thead>
33+
<tbody>
34+
<tr
35+
v-for="report of reports"
36+
:key="report.pk"
37+
class="cursor-pointer"
38+
@click="$router.push({
39+
name: 'ReadingExerciseSubmitResult',
40+
params: {
41+
pk: classroom.pk,
42+
exercisePk: report.exercise.pk,
43+
studentPk
44+
}
45+
})"
46+
>
47+
<td>{{ report.exercise.identifier }}</td>
48+
<template v-if="!report.submitted">
49+
<td colspan="6">
50+
Not submitted
51+
</td>
52+
</template>
53+
<template v-else>
54+
<td>{{ report.passage_1_total }}</td>
55+
<td>{{ report.passage_2_total }}</td>
56+
<td>{{ report.passage_3_total }}</td>
57+
<td>{{ report.total }}</td>
58+
<td>{{ report.band_score }}</td>
59+
</template>
60+
</tr>
61+
</tbody>
62+
</v-simple-table>
63+
</v-card-text>
64+
</v-card>
65+
</div>
66+
</div>
67+
</template>
68+
69+
<script lang="ts">
70+
import { Api } from '@/api'
71+
import { GetStudentReportReq } from '@/interfaces/api/classroom'
72+
import { Classroom, ReadingExerciseReport } from '@/interfaces/classroom'
73+
import { User } from '@/interfaces/user'
74+
import { unexpectedExc } from '@/utils'
75+
import { Vue, Component, Prop } from 'vue-property-decorator'
76+
import { mapState } from 'vuex'
77+
78+
@Component({
79+
computed: {
80+
...mapState('classroom', {
81+
classroom: 'currentClassroom'
82+
})
83+
}
84+
})
85+
export default class ClassroomOverviewStudentReport extends Vue {
86+
@Prop(Number) readonly pk!: number
87+
@Prop(Number) readonly studentPk!: number
88+
89+
classroom!: Classroom
90+
reports: ReadingExerciseReport[] = []
91+
student: User | null = null
92+
loading = false
93+
94+
created (): void {
95+
this.setReports()
96+
this.setStudent()
97+
}
98+
99+
setReports (): void {
100+
this.loading = true
101+
102+
const params: GetStudentReportReq = {
103+
student_pk: this.studentPk,
104+
show_detail: false
105+
}
106+
107+
Api.classroom.getStudentReport(this.classroom.pk, params)
108+
.then(data => {
109+
this.reports = data
110+
})
111+
.catch(unexpectedExc)
112+
.finally(() => {
113+
this.loading = false
114+
})
115+
}
116+
117+
setStudent (): void {
118+
Api.account.userDetail(this.studentPk)
119+
.then(data => {
120+
this.student = data
121+
})
122+
.catch(unexpectedExc)
123+
}
124+
}
125+
</script>
126+
127+
<style scoped lang="scss">
128+
129+
</style>

0 commit comments

Comments
 (0)