Skip to content

Commit b9a0275

Browse files
rockstarr-programmerrrockstarr-programmerr
committed
improve UI
1 parent ad07eec commit b9a0275

File tree

10 files changed

+248
-74
lines changed

10 files changed

+248
-74
lines changed

‎src/components/KLAvatar.vue

Lines changed: 25 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<template>
22
<v-avatar
3-
:color="user.avatar !== null ? 'white' : backgroundColor"
3+
:color="imgSrc !== null ? 'white' : backgroundColor"
44
v-bind="$attrs"
55
>
66
<v-img
7-
v-if="user.avatar !== null"
8-
:src="user.avatar"
9-
:alt="user.name"
7+
v-if="imgSrc !== null"
8+
:src="imgSrc"
9+
:alt="localUser.name"
1010
>
1111
<template #placeholder>
1212
<v-row
@@ -26,7 +26,7 @@
2626
class="white--text"
2727
:style="{ fontSize }"
2828
>
29-
{{ user.name.charAt(0) }}
29+
{{ localUser.name.charAt(0) }}
3030
</span>
3131
</v-avatar>
3232
</template>
@@ -39,18 +39,34 @@ import { mapGetters } from 'vuex'
3939
@Component({
4040
computed: {
4141
...mapGetters({
42-
user: 'account/loggedInUser'
42+
loggedInUser: 'account/loggedInUser'
4343
})
4444
}
4545
})
4646
export default class KLAvatar extends Vue {
47+
@Prop() readonly user!: User | undefined
4748
@Prop({ type: String, default: 'secondary' }) readonly backgroundColor!: string
4849
49-
user!: User
50+
loggedInUser!: User
51+
52+
get localUser (): User {
53+
return this.user || this.loggedInUser
54+
}
55+
56+
get imgSize (): number {
57+
return parseInt(this.$attrs.size || '48')
58+
}
59+
60+
get imgSrc (): string | null {
61+
if (this.imgSize > 64) {
62+
return this.localUser.avatar
63+
} else {
64+
return this.localUser.avatar_thumbnail
65+
}
66+
}
5067
5168
get fontSize (): string {
52-
let imgSize: number | string = this.$attrs.size || '48'
53-
imgSize = parseInt(imgSize) * 0.5
69+
const imgSize = this.imgSize * 0.5
5470
return imgSize.toString() + 'px'
5571
}
5672
}

‎src/interfaces/user.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,6 @@ export declare interface User {
55
email: string;
66
phone_number: string;
77
user_type: 'teacher' | 'student';
8-
avatar: string;
9-
avatar_thumbnail: string;
8+
avatar: string | null;
9+
avatar_thumbnail: string | null;
1010
}

‎src/views/account/ChangePassword.vue

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,6 @@
4646

4747
<script lang="ts">
4848
import { Api } from '@/api'
49-
import { VForm } from '@/interfaces/vuetify'
5049
import { snakeCaseToCamelCase } from '@/utils'
5150
import { assertErrCode, status } from '@/utils/status-codes'
5251
import { Vue, Component } from 'vue-property-decorator'

‎src/views/account/ProfileUpdate.vue

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -91,11 +91,13 @@ export default class ProfileUpdate extends Vue {
9191
if (this.user.avatar !== null) {
9292
Vue.axios.get(this.user.avatar)
9393
.then(res => {
94-
const parts = this.user.avatar.split('/')
95-
const avatarName = parts[parts.length - 1]
96-
const file = new File([res.data], avatarName)
97-
this.avatar = file
98-
this.originalAvatar = file
94+
if (this.user.avatar !== null) {
95+
const parts = this.user.avatar.split('/')
96+
const avatarName = parts[parts.length - 1]
97+
const file = new File([res.data], avatarName)
98+
this.avatar = file
99+
this.originalAvatar = file
100+
}
99101
})
100102
}
101103
}

‎src/views/classroom/ClassroomList.vue

Lines changed: 57 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -30,20 +30,41 @@
3030
class="mt-5"
3131
>
3232
<v-card-subtitle>
33-
Your classrooms
33+
<v-row align="center">
34+
<v-col cols="8">
35+
Your classrooms
36+
</v-col>
37+
<v-col cols="4">
38+
<v-text-field
39+
v-model="searchText"
40+
placeholder="Search"
41+
dense
42+
hide-details
43+
prepend-icon="mdi-magnify"
44+
></v-text-field>
45+
</v-col>
46+
</v-row>
3447
<v-divider class="mt-3"></v-divider>
3548
</v-card-subtitle>
3649
<v-card-text>
37-
<v-list>
38-
<v-list-item
39-
v-for="classroom of classrooms"
40-
:key="classroom.pk"
41-
link
42-
:to="getClassroomLink(classroom)"
50+
<v-row>
51+
<v-col
52+
v-for="(classrooms, index) of [classroomsCol1, classroomsCol2]"
53+
:key="index"
54+
cols="6"
4355
>
44-
<v-list-item-content v-text="classroom.name" />
45-
</v-list-item>
46-
</v-list>
56+
<v-list>
57+
<v-list-item
58+
v-for="classroom of classrooms"
59+
:key="classroom.pk"
60+
link
61+
:to="getClassroomLink(classroom)"
62+
>
63+
<v-list-item-content v-text="classroom.name" />
64+
</v-list-item>
65+
</v-list>
66+
</v-col>
67+
</v-row>
4768
</v-card-text>
4869
</v-card>
4970
</v-container>
@@ -52,7 +73,7 @@
5273
<script lang="ts">
5374
import { Classroom } from '@/interfaces/classroom'
5475
import { unexpectedExc } from '@/utils'
55-
import { Vue, Component } from 'vue-property-decorator'
76+
import { Vue, Component, Watch } from 'vue-property-decorator'
5677
import { Location } from 'vue-router'
5778
import { mapGetters, mapState } from 'vuex'
5879
@@ -80,11 +101,20 @@ export default class ClassroomList extends Vue {
80101
*/
81102
isTeacher!: boolean
82103
classrooms!: Classroom[]
104+
localClassrooms: Classroom[] = []
83105
84106
get noClassrooms (): boolean {
85107
return this.classrooms.length === 0
86108
}
87109
110+
get classroomsCol1 (): Classroom[] {
111+
return this.localClassrooms.slice(0, Math.ceil(this.localClassrooms.length / 2))
112+
}
113+
114+
get classroomsCol2 (): Classroom[] {
115+
return this.localClassrooms.slice(Math.ceil(this.localClassrooms.length / 2))
116+
}
117+
88118
created (): void {
89119
this.listClassroom()
90120
}
@@ -116,11 +146,27 @@ export default class ClassroomList extends Vue {
116146
this.loading = true
117147
118148
this.$store.dispatch('classroom/list')
149+
.then(() => {
150+
this.localClassrooms = this.classrooms
151+
})
119152
.catch(unexpectedExc)
120153
.finally(() => {
121154
this.loading = false
122155
})
123156
}
157+
158+
/**
159+
* Search
160+
*/
161+
searchText = ''
162+
163+
@Watch('searchText')
164+
onSearch (text: string): void {
165+
text = text.toLowerCase()
166+
this.localClassrooms = this.classrooms.filter(
167+
classroom => classroom.name.toLowerCase().indexOf(text) !== -1
168+
)
169+
}
124170
}
125171
</script>
126172

‎src/views/classroom/ClassroomOverview.vue

Lines changed: 45 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -7,29 +7,40 @@
77
Click to see each student's tracking sheet
88
</v-card-subtitle>
99
<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-
}"
10+
<v-row>
11+
<v-col
12+
v-for="(students, index) of [studentsCol1, studentsCol2]"
13+
:key="index"
14+
cols="6"
2215
>
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>
16+
<v-list>
17+
<v-list-item
18+
v-for="student of students"
19+
:key="student.pk"
20+
link
21+
:to="{
22+
name: 'ClassroomOverviewStudentReport',
23+
params: {
24+
pk: classroom.pk,
25+
studentPk: student.pk
26+
}
27+
}"
28+
>
29+
<v-list-item-avatar>
30+
<KLAvatar :user="student" />
31+
</v-list-item-avatar>
32+
<v-list-item-content>
33+
<v-list-item-title>
34+
{{ student.name }}
35+
</v-list-item-title>
36+
<v-list-item-subtitle>
37+
{{ student.email }}
38+
</v-list-item-subtitle>
39+
</v-list-item-content>
40+
</v-list-item>
41+
</v-list>
42+
</v-col>
43+
</v-row>
3344
</v-card-text>
3445
</v-card>
3546
</template>
@@ -38,12 +49,16 @@
3849
import { Vue, Component } from 'vue-property-decorator'
3950
import { mapState } from 'vuex'
4051
import { Classroom } from '@/interfaces/classroom'
52+
import KLAvatar from '@/components/KLAvatar.vue'
4153
4254
@Component({
4355
computed: {
4456
...mapState('classroom', {
4557
classroom: 'currentClassroom'
4658
})
59+
},
60+
components: {
61+
KLAvatar
4762
}
4863
})
4964
export default class ClassroomOverview extends Vue {
@@ -52,6 +67,14 @@ export default class ClassroomOverview extends Vue {
5267
get students (): Classroom['students'] {
5368
return this.classroom.students
5469
}
70+
71+
get studentsCol1 (): Classroom['students'] {
72+
return this.students.slice(0, Math.ceil(this.students.length / 2))
73+
}
74+
75+
get studentsCol2 (): Classroom['students'] {
76+
return this.students.slice(Math.ceil(this.students.length / 2))
77+
}
5578
}
5679
</script>
5780

‎src/views/classroom/ClassroomOverviewStudentReport.vue

Lines changed: 29 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,35 @@
1212

1313
<div v-else>
1414
<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>
15+
<v-row
16+
align="center"
17+
no-gutters
18+
class="fill-height ma-0"
19+
>
20+
<v-col cols="auto">
21+
<v-btn
22+
icon
23+
large
24+
class="ml-3"
25+
@click="$router.push({
26+
name: 'ClassroomOverview',
27+
params: { pk: classroom.pk }
28+
})"
29+
>
30+
<v-icon>
31+
mdi-arrow-left
32+
</v-icon>
33+
</v-btn>
34+
</v-col>
35+
<v-col cols="auto">
36+
<v-card-title>
37+
<span v-if="student !== null">{{ student.name }}</span>
38+
</v-card-title>
39+
<v-card-subtitle>
40+
<span v-if="student !== null">{{ student.email }}</span>
41+
</v-card-subtitle>
42+
</v-col>
43+
</v-row>
2144
<v-card-text>
2245
<v-row>
2346
<v-col cols="6">

‎src/views/reading-exercise/ReadingExerciseDetail.vue

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,14 +32,19 @@
3232
cols="6"
3333
class="exercise-row"
3434
>
35-
<router-link
35+
<v-btn
36+
link
37+
depressed
3638
:to="{
3739
name: 'ReadingExerciseUpdate',
3840
params: { pk: exercise.pk }
3941
}"
4042
>
43+
<v-icon left>
44+
mdi-pencil-outline
45+
</v-icon>
4146
Edit exercise
42-
</router-link>
47+
</v-btn>
4348
<div v-html="exercise.content"></div>
4449
</v-col>
4550
<v-col
@@ -58,14 +63,19 @@
5863
</router-link>
5964
</span>
6065
<div v-else>
61-
<router-link
66+
<v-btn
67+
link
68+
depressed
6269
:to="{
6370
name: 'ReadingExerciseEditAnswers',
6471
params: { pk: exercise.pk }
6572
}"
6673
>
74+
<v-icon left>
75+
mdi-pencil-outline
76+
</v-icon>
6777
Edit answers
68-
</router-link>
78+
</v-btn>
6979
<v-row>
7080
<v-col cols="4">
7181
<v-list dense>

0 commit comments

Comments
 (0)