Pagination

client/src/components/Pages/StatisticsPage.vue

@@ -48,7 +48,25 @@
         <button id="reset-search" class="reset-button" @click="resetSearch">Сброс</button>
       </div>
     </Filters>
-    <StatisticsTable v-if="selectedType === 'table'" :info="statisticsInfo" v-model:search="search"></StatisticsTable>
+    <div class="col-md-12">
+      <button @click="prevPage">
+        Previous
+      </button>
+      <div class="mb-3">
+        Items per Page:
+        <select v-model="pageSize" @change="handlePageSizeChange($event)">
+          <option v-for="size in pageSizes" :key="size" :value="size">
+            {{ size }}
+          </option>
+        </select>
+      </div>
+      <button @click="nextPage">
+        Next
+      </button>
+  </div>
+    <StatisticsTable v-if="selectedType === 'table'" 
+      :info="statisticsInfo">
+    </StatisticsTable>
     <Chart v-else :info="statisticsInfo"></Chart>
   </Navbar>
 </template>
@@ -97,7 +115,12 @@ export default {
       elementType: '',
       elementName: '',
       startSearch: false,
-      params: {}
+      params: {},
+      page: 1,
+      count: 1,
+      pageSize: 10,
+      pageSizes: [5,10,15,20,25,-1],
+      totalPages: 1,
     };
   },
 
@@ -169,6 +192,26 @@ export default {
   },
 
   methods: {
+    prevPage() {
+      if (this.page != 1){
+        this.page = this.page - 1;
+        this.getStatistics();
+      }
+    },
+
+    nextPage() {
+      if (this.page != this.totalPages){
+        this.page = this.page + 1;
+        this.getStatistics();
+      }
+    },
+
+    handlePageSizeChange(event) {
+      this.pageSize = event.target.value;
+      this.page = 1;
+      this.getStatistics();
+    },
+
     resetBeginDate() {
       this.beginTimestamp = '';
     },
@@ -191,6 +234,7 @@ export default {
       this.eventType = '';
       this.elementType = '';
       this.elementName = '';
+      this.page = 1;
       if (this.startSearch === true) {
         this.getStatistics();
         this.startSearch = false;
@@ -201,14 +245,21 @@ export default {
       this.statisticsInfo = []
       this.params = {}
       const searchParams = {
+        page: this.page,
+        pageSize: this.pageSize,
         student_id: Number(this.ID),
         student_name: this.FIO,
         student_email: this.email,
         course_title: this.course,
         action_type: this.actionType,
         event_type: this.eventType,
         element_type: this.elementType,
-        element_name: this.elementName
+        element_name: this.elementName,
+      }
+
+      this.params = {
+        page: this.page,
+        pageSize:this.pageSize
       }
 
       if (this.beginTimestamp.length === 0 && this.endTimestamp.length === 0) {
@@ -231,13 +282,17 @@ export default {
         }
       }
 
+
       Object.assign(this.params, searchParams)
 
       axios
-          .get(STAT_URL, {params: this.params})
+          .get(STAT_URL, {params: searchParams})
           .then((response) => {
             console.log(response);
-            response.data.forEach(element => {
+            let stats = response.data[0]
+            this.count = response.data[1]
+            this.totalPages = Math.ceil(this.count/this.pageSize)
+            stats.forEach(element => {
               let firstLayer = {
                 FIO: element.student,
                 course: element.course,

client/src/components/Tables/StatisticsTable.vue

@@ -1,12 +1,9 @@
 <template>
-  <v-data-table
+  <v-data-table-virtual
     class="custom-table"
     :headers="headers"
     :items="info"
-    item-value="number"
-    outlined
-    v-model="selected"
-    show-select
+    fixed-header
   >
 
     <template v-slot:[`item.FIO`]="{ item }">
@@ -16,7 +13,7 @@
     <template v-slot:[`item.course`]="{ item }">
       <p align="start">{{ item.course }}</p>
     </template>
-  </v-data-table>
+  </v-data-table-virtual>
 </template>
 
 <script>

server/src/api/endpoints/statistics.py

@@ -23,7 +23,7 @@
     "/",
     status_code=status.HTTP_200_OK,
     response_description="Get statistics",
-    response_model=List[SessionData],
+    response_model=List,
     response_model_by_alias=False
 )
 async def get_all_sessions(params: SessionFilter = Depends()):

server/src/core/modules/database/statistics.py

@@ -11,13 +11,16 @@ def __init__(self, client):
 
     async def get_all_sessions(self, filters: SessionFilter) -> list:
         stats = []
-        query = filters.query()
-        for session in await self.client.statistics.find(query).to_list(length=None):
+        query, pages = filters.query()
+        start = (pages['page']-1)*pages['pageSize']
+        total_rows = await self.client.statistics.count_documents(query)
+        pageSize = total_rows if pages['pageSize'] == -1 else pages['pageSize']
+        for session in await self.client.statistics.find(query).skip(start).limit(pageSize).to_list(length=None):
             session["_id"] = str(session["_id"])
             session["session_id"] = str(session["session_id"])
             session['actions'] = filter_actions(filters, session['actions'])
             stats.append(session)
-        return stats
+        return [stats, total_rows]
 
     async def get_session(self, record_id: str) -> dict:
         stat = await self.client.statistics.find_one({"_id": ObjectId(record_id)})

server/src/models/filter.py

@@ -6,6 +6,8 @@
 
 
 class SessionFilter(BaseModel):
+    page: int
+    pageSize: int
     begin_timestamp: Optional[datetime] = Field(Query(default=None, description="start date"))
     end_timestamp: Optional[datetime] = Field(Query(default=None, description="stop date"))
     student_id: Optional[int] = Field(Query(default=None, description="student moodle id"))
@@ -17,9 +19,14 @@ class SessionFilter(BaseModel):
     element_type: Optional[str] = Field(Query(default=None, description="element type"))
     element_name: Optional[str] = Field(Query(default=None, description="element name"))
 
-    def query(self) -> dict:
+
+    def query(self):
         filter_dict = {}
         action_filter = {}
+        pages = {
+            'page': self.page,
+            'pageSize': self.pageSize
+        }
         if self.begin_timestamp or self.end_timestamp:
             timestamp_filter = {}
             if self.begin_timestamp:
@@ -50,4 +57,4 @@ def query(self) -> dict:
         if self.course_title:
             filter_dict['course'] = {'$regex': self.course_title, '$options': 'i'}
 
-        return filter_dict
+        return filter_dict, pages