paginate reading exercises

Author: rockstarr-programmerr

src/store/classroom.ts

@@ -153,7 +153,6 @@ export const classroom: Module<ClassroomState, RootState> = {
 
       if (pk === undefined) return
 
-      console.log(payload)
       await Api.classroom.addReadingExercises(pk, payload)
       payload.forEach(exercise => {
         commit('ADD_READING_EXERCISES_TO_CURRENT_CLASSROOM', exercise)

src/views/classroom/ClassroomCreate.vue

@@ -26,13 +26,7 @@
           <p class="font-weight-bold mt-7 mb-0">Add reading exercises</p>
           <p class="caption--text">Choose the exercises you want to use in this class.</p>
 
-          <v-progress-circular
-            v-if="loadingExercises"
-            indeterminate
-            color="primary"
-          ></v-progress-circular>
-
-          <p v-else-if="exercises.length === 0">
+          <p v-if="exercises.length === 0">
             You haven't created any reading exercises yet.
             <router-link :to="{ name: 'ReadingExerciseCreate' }">
               Create now
@@ -57,7 +51,7 @@
 
             <v-row
               no-gutters
-              class="mt-3"
+              class="my-3"
             >
               <v-col
                 v-for="exercise of localExercises"
@@ -72,6 +66,23 @@
                 ></v-checkbox>
               </v-col>
             </v-row>
+
+            <div v-if="readingPagination.next !== null">
+              <v-progress-circular
+                v-if="loadingExercises"
+                indeterminate
+                color="primary"
+                width="2"
+                size="18"
+              ></v-progress-circular>
+              <a
+                v-else
+                href="#"
+                @click="loadMoreReading"
+              >
+                Load more
+              </a>
+            </div>
           </div>
         </div>
 
@@ -98,8 +109,10 @@
 
 <script lang="ts">
 import { AddReadingExercisesReq, ClassroomCreateReq } from '@/interfaces/api/classroom'
+import { PaginatedRes, PaginationQuery } from '@/interfaces/api/common'
 import { ReadingExercise } from '@/interfaces/reading-exercise'
 import { unexpectedExc } from '@/utils'
+import { PAGE_SIZE } from '@/utils/constants'
 import { assertErrCode, status } from '@/utils/status-codes'
 import { Vue, Component } from 'vue-property-decorator'
 import { mapState } from 'vuex'
@@ -111,7 +124,8 @@ declare interface LocalExercise extends ReadingExercise {
 @Component({
   computed: {
     ...mapState('readingExercise', {
-      exercises: 'readingExercises'
+      exercises: 'readingExercises',
+      readingPagination: 'exercisePagination'
     })
   }
 })
@@ -130,21 +144,24 @@ export default class ClassroomCreate extends Vue {
    */
   exercises!: ReadingExercise[]
   localExercises: LocalExercise[] = []
+  readingPagination!: PaginatedRes
   loadingExercises = false
+  page = 1
 
   created (): void {
     this.listExercise()
   }
 
-  listExercise (): void {
+  listExercise (query?: PaginationQuery): void {
     this.loadingExercises = true
 
-    this.$store.dispatch('readingExercise/list')
+    this.$store.dispatch('readingExercise/list', query)
       .then(() => {
-        this.localExercises = this.exercises.map(exercise => ({
+        this.localExercises.push(...this.exercises.map(exercise => ({
           ...exercise,
           isChosen: false
-        }))
+        })))
+        this.page++
       })
       .catch(unexpectedExc)
       .finally(() => {
@@ -155,6 +172,13 @@ export default class ClassroomCreate extends Vue {
   /**
    * Select reading exercises
    */
+  loadMoreReading (): void {
+    this.listExercise({
+      limit: PAGE_SIZE,
+      offset: (this.page - 1) * PAGE_SIZE
+    })
+  }
+
   selectAll (): void {
     this.localExercises.forEach(exercise => { exercise.isChosen = true })
   }

src/views/classroom/ClassroomExercisesReadingTeacher.vue

@@ -6,6 +6,7 @@
     <v-card-subtitle>
       Choose the exercises you want to use in this class.
     </v-card-subtitle>
+
     <v-card-text>
       <v-progress-circular
         v-if="loading"
@@ -38,7 +39,7 @@
 
         <v-row
           no-gutters
-          class="mt-3"
+          class="my-3"
         >
           <v-col
             v-for="exercise of exercises"
@@ -64,24 +65,45 @@
           </v-col>
         </v-row>
 
-        <v-btn
-          color="primary"
-          class="mt-5"
-          :loading="saving"
-          @click="save"
-        >
-          Save
-        </v-btn>
+        <div v-if="pagination.next !== null">
+          <v-progress-circular
+            v-if="loadingMore"
+            indeterminate
+            color="primary"
+            width="2"
+            size="18"
+          ></v-progress-circular>
+          <a
+            v-else
+            href="#"
+            @click="loadMoreReading"
+          >
+            Load more
+          </a>
+        </div>
       </div>
     </v-card-text>
+
+    <v-card-actions>
+      <v-btn
+        color="primary"
+        :loading="saving"
+        @click="save"
+        min-width="110"
+      >
+        Save
+      </v-btn>
+    </v-card-actions>
   </v-card>
 </template>
 
 <script lang="ts">
 import { AddReadingExercisesReq, RemoveReadingExercisesReq } from '@/interfaces/api/classroom'
+import { PaginatedRes, PaginationQuery } from '@/interfaces/api/common'
 import { Classroom } from '@/interfaces/classroom'
 import { ReadingExercise } from '@/interfaces/reading-exercise'
 import { unexpectedExc } from '@/utils'
+import { PAGE_SIZE } from '@/utils/constants'
 import { Vue, Component } from 'vue-property-decorator'
 import { mapState } from 'vuex'
 
@@ -92,42 +114,59 @@ declare interface _Exercise extends ReadingExercise {
 @Component({
   computed: {
     ...mapState('readingExercise', {
-      exercisesFromStore: 'readingExercises'
+      exercisesFromStore: 'readingExercises',
+      pagination: 'exercisePagination'
     }),
     ...mapState('classroom', {
       classroom: 'currentClassroom'
     })
   }
 })
 export default class ClassroomExercisesReadingTeacher extends Vue {
+  // eslint-disable-next-line no-undef
+  [index: string]: unknown
+
   loading = false
+  loadingMore = false
   exercisesFromStore!: ReadingExercise[]
   exercises: _Exercise[] = []
+  pagination!: PaginatedRes
   classroom!: Classroom
+  page = 1
 
   created (): void {
     this.setExercises()
   }
 
-  setExercises (): void {
-    this.loading = true
-    this.$store.dispatch('readingExercise/list')
+  setExercises (query?: PaginationQuery, loadingProp?: string): void {
+    if (loadingProp === undefined) loadingProp = 'loading'
+
+    this[loadingProp] = true
+    this.$store.dispatch('readingExercise/list', query)
       .then(() => {
         const existingPks = this.classroom.reading_exercises.map(exercise => exercise.pk)
-        this.exercises = this.exercisesFromStore.map(exercise => {
+        this.exercises.push(...this.exercisesFromStore.map(exercise => {
           const data = {
             ...exercise,
             isChosen: existingPks.includes(exercise.pk)
           }
           return data
-        })
+        }))
+        this.page++
       })
       .catch(unexpectedExc)
       .finally(() => {
-        this.loading = false
+        this[loadingProp as string] = false
       })
   }
 
+  loadMoreReading (): void {
+    this.setExercises({
+      limit: PAGE_SIZE,
+      offset: (this.page - 1) * PAGE_SIZE
+    }, 'loadingMore')
+  }
+
   saving = false
 
   save (): void {

src/views/classroom/ClassroomStudents.vue

@@ -167,7 +167,6 @@ export default class ClassroomStudents extends Vue {
     const adding = this.$route.query.adding
     if (adding === 'true') {
       this.showAddStudent = true
-      console.log(this.showAddStudent)
     }
   }