pagination classroom and exercise

Author: rockstarr-programmerr

src/api/classroom.ts

@@ -2,10 +2,13 @@ import Vue from 'vue'
 import { ClassroomListRes, ClassroomDetailRes, ClassroomCreateReq, AddStudentReq, RemoveStudentReq, AddReadingExercisesReq, RemoveReadingExercisesReq, ReadingExerciseReportRes, GetStudentReportReq, ClassroomUpdateReq, ResendPasswordEmailReq } from '@/interfaces/api/classroom'
 import { Classroom } from '@/interfaces/classroom'
 import { endpoints, replacePk } from './endpoints'
+import { PaginationQuery } from '@/interfaces/api/common'
 
 export const classroom = {
-  async list (): Promise<ClassroomListRes> {
-    const res = await Vue.axios.get(endpoints.classroom.classroomList)
+  async list (query?: PaginationQuery): Promise<ClassroomListRes> {
+    const res = await Vue.axios.get(endpoints.classroom.classroomList, {
+      params: query
+    })
     return res.data
   },
 

src/api/reading-exercise.ts

@@ -2,10 +2,13 @@ import Vue from 'vue'
 import { ReadingExerciseCreateReq, ReadingExerciseDetailRes, ReadingExerciseListRes, ReadingExerciseSubmitAnswersReq, ReadingExerciseUpdateReq } from '@/interfaces/api/reading-exercise'
 import { ReadingExercise } from '@/interfaces/reading-exercise'
 import { endpoints, replacePk } from './endpoints'
+import { PaginationQuery } from '@/interfaces/api/common'
 
 export const readingExercise = {
-  async list (): Promise<ReadingExerciseListRes> {
-    const res = await Vue.axios.get(endpoints.readingExercise.list)
+  async list (query: PaginationQuery): Promise<ReadingExerciseListRes> {
+    const res = await Vue.axios.get(endpoints.readingExercise.list, {
+      params: query
+    })
     return res.data
   },
 

src/interfaces/api/common.ts

@@ -4,3 +4,8 @@ export declare interface PaginatedRes {
   previous: string | null;
   results?: unknown[];
 }
+
+export declare interface PaginationQuery {
+  limit: number;
+  offset: number;
+}

src/mixins/pagination-mixin.ts

@@ -0,0 +1,26 @@
+import { PaginatedRes, PaginationQuery } from '@/interfaces/api/common'
+import { PAGE_SIZE } from '@/utils/constants'
+import Vue from 'vue'
+import { Component, Watch } from 'vue-property-decorator'
+
+@Component
+export class PaginationMixin extends Vue {
+  page = 1
+  pagination!: PaginatedRes
+
+  get paginationLength (): number {
+    return Math.ceil(this.pagination.count / PAGE_SIZE)
+  }
+
+  getList (query?: PaginationQuery): void {
+    throw Error('You must implement `getList` function when using `PaginationMixin`')
+  }
+
+  @Watch('page')
+  onPageChange (page: number) {
+    this.getList({
+      limit: PAGE_SIZE,
+      offset: (page - 1) * PAGE_SIZE
+    })
+  }
+}

src/store/classroom.ts

@@ -1,6 +1,6 @@
 import { Api } from '@/api'
 import { AddReadingExercisesReq, AddStudentReq, ClassroomCreateReq, ClassroomUpdateReq, RemoveReadingExercisesReq, RemoveStudentReq } from '@/interfaces/api/classroom'
-import { PaginatedRes } from '@/interfaces/api/common'
+import { PaginatedRes, PaginationQuery } from '@/interfaces/api/common'
 import { Classroom } from '@/interfaces/classroom'
 import { Module } from 'vuex'
 import { RootState } from './index'
@@ -90,8 +90,8 @@ export const classroom: Module<ClassroomState, RootState> = {
   },
 
   actions: {
-    async list ({ commit }): Promise<void> {
-      const data = await Api.classroom.list()
+    async list ({ commit }, query?: PaginationQuery): Promise<void> {
+      const data = await Api.classroom.list(query)
       const classrooms = data.results
       const pagination: PaginatedRes = { ...data }
       delete pagination.results

src/store/reading-exercises.ts

@@ -1,5 +1,5 @@
 import { Api } from '@/api'
-import { PaginatedRes } from '@/interfaces/api/common'
+import { PaginatedRes, PaginationQuery } from '@/interfaces/api/common'
 import { ReadingExerciseCreateReq, ReadingExerciseUpdateReq } from '@/interfaces/api/reading-exercise'
 import { ReadingQuestionCreateReq, ReadingQuestionUpdateReq } from '@/interfaces/api/reading-question'
 import { ReadingExercise } from '@/interfaces/reading-exercise'
@@ -74,8 +74,8 @@ export const readingExercise: Module<ReadingExerciseState, RootState> = {
   },
 
   actions: {
-    async list ({ commit }): Promise<void> {
-      const data = await Api.readingExercise.list()
+    async list ({ commit }, query: PaginationQuery): Promise<void> {
+      const data = await Api.readingExercise.list(query)
       const readingExercises = data.results
       const pagination: PaginatedRes = { ...data }
       delete pagination.results

src/utils/constants.ts

@@ -0,0 +1 @@
+export const PAGE_SIZE = 2

src/views/classroom/ClassroomList.vue

@@ -46,6 +46,7 @@
         </v-row>
         <v-divider class="mt-3"></v-divider>
       </v-card-subtitle>
+
       <v-card-text>
         <v-row>
           <v-col
@@ -66,28 +67,40 @@
           </v-col>
         </v-row>
       </v-card-text>
+
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-pagination
+          v-model="page"
+          :length="paginationLength"
+          total-visible="7"
+        ></v-pagination>
+      </v-card-actions>
     </v-card>
   </v-container>
 </template>
 
 <script lang="ts">
+import { PaginationQuery } from '@/interfaces/api/common'
 import { Classroom } from '@/interfaces/classroom'
 import { unexpectedExc } from '@/utils'
-import { Vue, Component, Watch } from 'vue-property-decorator'
+import { Mixins, Component, Watch } from 'vue-property-decorator'
 import { Location } from 'vue-router'
 import { mapGetters, mapState } from 'vuex'
+import { PaginationMixin } from '@/mixins/pagination-mixin'
 
 @Component({
   computed: {
     ...mapState('classroom', [
-      'classrooms'
+      'classrooms',
+      'pagination'
     ]),
     ...mapGetters('account', [
       'isTeacher'
     ])
   }
 })
-export default class ClassroomList extends Vue {
+export default class ClassroomList extends Mixins(PaginationMixin) {
   // eslint-disable-next-line no-undef
   [key: string]: unknown
 
@@ -116,7 +129,7 @@ export default class ClassroomList extends Vue {
   }
 
   created (): void {
-    this.listClassroom()
+    this.getList()
   }
 
   getClassroomLink (classroom: Classroom): Location {
@@ -142,10 +155,10 @@ export default class ClassroomList extends Vue {
    */
   loading = true
 
-  listClassroom (): void {
+  getList (query?: PaginationQuery): void {
     this.loading = true
 
-    this.$store.dispatch('classroom/list')
+    this.$store.dispatch('classroom/list', query)
       .then(() => {
         this.localClassrooms = this.classrooms
       })

src/views/reading-exercise/ReadingExerciseList.vue

@@ -77,24 +77,36 @@
           </v-col>
         </v-row>
       </v-card-text>
+
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-pagination
+          v-model="page"
+          :length="paginationLength"
+          total-visible="7"
+        ></v-pagination>
+      </v-card-actions>
     </v-card>
   </v-container>
 </template>
 
 <script lang="ts">
+import { PaginationQuery } from '@/interfaces/api/common'
 import { ReadingExercise } from '@/interfaces/reading-exercise'
+import { PaginationMixin } from '@/mixins/pagination-mixin'
 import { unexpectedExc } from '@/utils'
-import { Vue, Component, Watch } from 'vue-property-decorator'
+import { Component, Watch, Mixins } from 'vue-property-decorator'
 import { mapState } from 'vuex'
 
 @Component({
   computed: {
     ...mapState('readingExercise', {
-      exercises: 'readingExercises'
+      exercises: 'readingExercises',
+      pagination: 'exercisePagination'
     })
   }
 })
-export default class ReadingExerciseList extends Vue {
+export default class ReadingExerciseList extends Mixins(PaginationMixin) {
   // eslint-disable-next-line no-undef
   [key: string]: unknown
 
@@ -114,7 +126,7 @@ export default class ReadingExerciseList extends Vue {
   }
 
   created (): void {
-    this.listExercise()
+    this.getList()
   }
 
   get exercisesCol1 (): ReadingExercise[] {
@@ -130,10 +142,10 @@ export default class ReadingExerciseList extends Vue {
    */
   loading = false
 
-  listExercise (): void {
+  getList (query?: PaginationQuery): void {
     this.loading = true
 
-    this.$store.dispatch('readingExercise/list')
+    this.$store.dispatch('readingExercise/list', query)
       .then(() => {
         this.localExercises = this.exercises
       })