Skip to content

Commit 29d3613

Browse files
rockstarr-programmerrrockstarr-programmerr
committed
add exercise when create classroom
1 parent b9a0275 commit 29d3613

File tree

6 files changed

+211
-35
lines changed

6 files changed

+211
-35
lines changed

‎src/layouts/LayoutClassroomTeacher.vue

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
<template>
22
<LayoutDefault>
33
<v-container>
4+
<v-breadcrumbs :items="breadcrumbs"></v-breadcrumbs>
5+
46
<v-progress-circular
57
v-if="loading"
68
indeterminate
79
color="primary"
810
></v-progress-circular>
911

1012
<div v-else-if="classroom !== undefined">
11-
<v-breadcrumbs :items="breadcrumbs"></v-breadcrumbs>
12-
1313
<v-row
1414
justify="space-between"
1515
align="center"
@@ -31,7 +31,7 @@
3131
mdi-dots-vertical
3232
</v-icon>
3333
</template>
34-
<v-list>
34+
<v-list dense>
3535
<v-list-item
3636
link
3737
:to="{
@@ -43,15 +43,15 @@
4343
<v-icon>mdi-pencil-outline</v-icon>
4444
</v-list-item-icon>
4545
<v-list-item-content>
46-
<v-list-item-title>Edit</v-list-item-title>
46+
<v-list-item-title class="mr-3">Edit</v-list-item-title>
4747
</v-list-item-content>
4848
</v-list-item>
4949
<v-list-item @click="confirmDelete = true">
5050
<v-list-item-icon>
5151
<v-icon>mdi-delete-outline</v-icon>
5252
</v-list-item-icon>
5353
<v-list-item-content>
54-
<v-list-item-title>Delete</v-list-item-title>
54+
<v-list-item-title class="mr-3">Delete</v-list-item-title>
5555
</v-list-item-content>
5656
</v-list-item>
5757
</v-list>
@@ -64,6 +64,24 @@
6464
v-text="classroom.description"
6565
></p>
6666

67+
<div
68+
v-if="classroom.reading_exercises.length === 0"
69+
class="my-5 error--text"
70+
>
71+
<v-icon color="error" class="mr-3">
72+
mdi-alert-outline
73+
</v-icon>
74+
You haven't added any reading exercises to this classroom yet.
75+
<router-link
76+
:to="{
77+
name: 'ClassroomExercisesReading',
78+
params: { pk: classroom.pk }
79+
}"
80+
>
81+
Add exercises
82+
</router-link>
83+
</div>
84+
6785
<v-tabs>
6886
<v-tab
6987
v-for="tab of tabs"

‎src/store/classroom.ts

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -139,9 +139,22 @@ export const classroom: Module<ClassroomState, RootState> = {
139139
})
140140
},
141141

142-
async addReadingExercises ({ state, commit }, payload: AddReadingExercisesReq[]): Promise<void> {
143-
if (state.currentClassroom === undefined) return
144-
await Api.classroom.addReadingExercises(state.currentClassroom.pk, payload)
142+
async addReadingExercises (
143+
{ state, commit },
144+
{ classroomPk, payload }: { classroomPk?: number; payload: AddReadingExercisesReq[] }
145+
): Promise<void> {
146+
let pk
147+
148+
if (classroomPk !== undefined) {
149+
pk = classroomPk
150+
} else if (state.currentClassroom !== undefined) {
151+
pk = state.currentClassroom.pk
152+
}
153+
154+
if (pk === undefined) return
155+
156+
console.log(payload)
157+
await Api.classroom.addReadingExercises(pk, payload)
145158
payload.forEach(exercise => {
146159
commit('ADD_READING_EXERCISES_TO_CURRENT_CLASSROOM', exercise)
147160
})

‎src/views/classroom/ClassroomCreate.vue

Lines changed: 144 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,65 @@
2121
label="Description"
2222
></v-textarea>
2323
</v-form>
24+
25+
<div>
26+
<p class="font-weight-bold mt-7 mb-0">Add reading exercises</p>
27+
<p class="caption--text">Choose the exercises you want to use in this class.</p>
28+
29+
<v-progress-circular
30+
v-if="loadingExercises"
31+
indeterminate
32+
color="primary"
33+
></v-progress-circular>
34+
35+
<p v-else-if="exercises.length === 0">
36+
You haven't created any reading exercises yet.
37+
<router-link :to="{ name: 'ReadingExerciseCreate' }">
38+
Create now
39+
</router-link>
40+
</p>
41+
42+
<div v-else>
43+
<v-btn-toggle>
44+
<v-btn
45+
small
46+
@click="selectAll"
47+
>
48+
Select all
49+
</v-btn>
50+
<v-btn
51+
small
52+
@click="unselectAll"
53+
>
54+
Unselect all
55+
</v-btn>
56+
</v-btn-toggle>
57+
58+
<v-row
59+
no-gutters
60+
class="mt-3"
61+
>
62+
<v-col
63+
v-for="exercise of localExercises"
64+
:key="exercise.pk"
65+
cols="3"
66+
>
67+
<v-checkbox
68+
v-model="exercise.isChosen"
69+
:label="exercise.identifier"
70+
dense
71+
hide-details
72+
></v-checkbox>
73+
</v-col>
74+
</v-row>
75+
</div>
76+
</div>
77+
78+
<div>
79+
<p class="font-weight-bold mt-11 mb-0">Add listening exercises</p>
80+
<p>Coming soon</p>
81+
</div>
82+
2483
</v-card-text>
2584

2685
<v-card-actions>
@@ -38,12 +97,24 @@
3897
</template>
3998

4099
<script lang="ts">
41-
import { ClassroomCreateReq } from '@/interfaces/api/classroom'
100+
import { AddReadingExercisesReq, ClassroomCreateReq } from '@/interfaces/api/classroom'
101+
import { ReadingExercise } from '@/interfaces/reading-exercise'
42102
import { unexpectedExc } from '@/utils'
43103
import { assertErrCode, status } from '@/utils/status-codes'
44104
import { Vue, Component } from 'vue-property-decorator'
105+
import { mapState } from 'vuex'
106+
107+
declare interface LocalExercise extends ReadingExercise {
108+
isChosen: boolean
109+
}
45110
46-
@Component
111+
@Component({
112+
computed: {
113+
...mapState('readingExercise', {
114+
exercises: 'readingExercises'
115+
})
116+
}
117+
})
47118
export default class ClassroomCreate extends Vue {
48119
// eslint-disable-next-line no-undef
49120
[key: string]: unknown
@@ -54,43 +125,93 @@ export default class ClassroomCreate extends Vue {
54125
{ text: 'New', to: { name: 'ClassroomCreate' }, exact: true }
55126
]
56127
128+
/**
129+
* Init
130+
*/
131+
exercises!: ReadingExercise[]
132+
localExercises: LocalExercise[] = []
133+
loadingExercises = false
134+
135+
created (): void {
136+
this.listExercise()
137+
}
138+
139+
listExercise (): void {
140+
this.loadingExercises = true
141+
142+
this.$store.dispatch('readingExercise/list')
143+
.then(() => {
144+
this.localExercises = this.exercises.map(exercise => ({
145+
...exercise,
146+
isChosen: false
147+
}))
148+
})
149+
.catch(unexpectedExc)
150+
.finally(() => {
151+
this.loadingExercises = false
152+
})
153+
}
154+
155+
/**
156+
* Select reading exercises
157+
*/
158+
selectAll (): void {
159+
this.localExercises.forEach(exercise => { exercise.isChosen = true })
160+
}
161+
162+
unselectAll (): void {
163+
this.localExercises.forEach(exercise => { exercise.isChosen = false })
164+
}
165+
166+
/**
167+
* Create classroom
168+
*/
169+
57170
loading = false
58171
59172
name = ''
60173
description = ''
61174
62175
nameErrs = []
63176
64-
submit (): void {
177+
async submit (): Promise<void> {
65178
if (this.loading) return
66179
this.loading = true
67180
68-
const payload: ClassroomCreateReq = {
181+
const createClassroomPayload: ClassroomCreateReq = {
69182
name: this.name,
70183
description: this.description
71184
}
72185
73-
this.$store.dispatch('classroom/create', payload)
74-
.then(pk => {
75-
this.$router.push({
76-
name: 'ClassroomOverview',
77-
params: { pk }
78-
})
79-
})
80-
.catch(err => {
81-
if (assertErrCode(err, status.HTTP_400_BAD_REQUEST)) {
82-
const data = err.response.data
83-
Object.entries(data).forEach(([field, errMsgs]) => {
84-
const attr = `${field}Errs`
85-
this[attr] = errMsgs
86-
})
87-
} else {
88-
unexpectedExc(err)
89-
}
186+
try {
187+
const classroomPk = await this.$store.dispatch('classroom/create', createClassroomPayload)
188+
189+
const addExercisesPayload: AddReadingExercisesReq[] = this.localExercises
190+
.filter(exercise => exercise.isChosen)
191+
.map(exercise => ({ pk: exercise.pk }))
192+
193+
await this.$store.dispatch('classroom/addReadingExercises', {
194+
classroomPk,
195+
payload: addExercisesPayload
90196
})
91-
.finally(() => {
92-
this.loading = false
197+
198+
this.$router.push({
199+
name: 'ClassroomOverview',
200+
params: { pk: classroomPk }
93201
})
202+
} catch (err) {
203+
if (assertErrCode(err, status.HTTP_400_BAD_REQUEST)) {
204+
const data = err.response.data
205+
Object.entries(data).forEach(([field, errMsgs]) => {
206+
const attr = `${field}Errs`
207+
this[attr] = errMsgs
208+
})
209+
} else {
210+
unexpectedExc(err)
211+
}
212+
} finally {
213+
this.loading = false
214+
}
94215
}
95216
}
96217
</script>

‎src/views/classroom/ClassroomExercisesReadingTeacher.vue

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,9 @@ export default class ClassroomExercisesReadingTeacher extends Vue {
156156
157157
if (pksToAdd.length === 0) return null
158158
159-
return this.$store.dispatch('classroom/addReadingExercises', pksToAdd)
159+
return this.$store.dispatch('classroom/addReadingExercises', {
160+
payload: pksToAdd
161+
})
160162
}
161163
162164
removeReadingExercise (): Promise<unknown> | null {

‎src/views/classroom/ClassroomOverview.vue

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,24 @@
44
Students list
55
</v-card-title>
66
<v-card-subtitle>
7-
Click to see each student's tracking sheet
7+
<span v-if="students.length > 0">
8+
Click to see each student's tracking sheet
9+
</span>
810
</v-card-subtitle>
911
<v-card-text>
10-
<v-row>
12+
<span v-if="students.length === 0">
13+
This class doesn't have any students yet.
14+
<router-link
15+
:to="{
16+
name: 'ClassroomStudents',
17+
params: { pk: classroom.pk },
18+
query: { adding: 'true' }
19+
}"
20+
>
21+
Add students
22+
</router-link>
23+
</span>
24+
<v-row v-else>
1125
<v-col
1226
v-for="(students, index) of [studentsCol1, studentsCol2]"
1327
:key="index"

‎src/views/classroom/ClassroomStudents.vue

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@
6363
:headers="headers"
6464
:items="students"
6565
:items-per-page="-1"
66-
no-data-text="This class don't have any students yet."
66+
no-data-text="This class doesn't have any students yet."
6767
class="mt-3 elevation-2"
6868
>
6969
<!-- eslint-disable-next-line -->
@@ -159,6 +159,14 @@ export default class ClassroomStudents extends Vue {
159159
return []
160160
}
161161
162+
mounted (): void {
163+
const adding = this.$route.query.adding
164+
if (adding === 'true') {
165+
this.showAddStudent = true
166+
console.log(this.showAddStudent)
167+
}
168+
}
169+
162170
/**
163171
* Students table
164172
*/

0 commit comments

Comments
 (0)