Upload New File

Solution3.vue

+<template>
+  <q-page>
+    <div class = "q-pa-md">
+      <q-table
+        v-model:pagination="pagination"
+        :loading="loading"
+        :rows = "lessons"
+        :columns = "columns"
+        :rows-per-page-options="[5, 10, 15]"
+        @request="handleRequest"
+      />
+    </div>
+  </q-page>
+</template>
+<script>
+import { defineComponent, ref } from 'vue'
+import axios from 'axios'
+
+export default defineComponent({
+  name : 'TableLessons',
+  setup(){
+    const loading = ref(true)
+    const lessons = ref([])
+    const pagination = ref({
+      sortBy: 'ruz_auditorium',
+      descending: false,
+      page: 1,
+      rowsPerPage: 15,
+      rowsNumber: 0
+    })
+    const columns = [
+      {name:'ruz_auditorium', label:'Auditorium', field: 'ruz_auditorium', align: 'left'},
+      {name:'ruz_begin_lesson', label:'Beginning of the lesson', field: 'ruz_begin_lesson', align: 'left'},
+      {name:'ruz_date', label:'Date', field: 'ruz_date', align: 'left'},
+      {name:'ruz_day_of_week_string', label:'Day of week', field: 'ruz_day_of_week_string', align: 'left'},
+      {name:'ruz_end_lesson', label:'End of the lesson', field: 'ruz_end_lesson', align: 'left'},
+      {name:'ruz_discipline', label:'Discipline', field: 'ruz_discipline', align: 'left'},
+      {name:'ruz_kind_of_work', label:'Kind of work', field: 'ruz_kind_of_work', align: 'left'},
+      {name:'ruz_lecturer', label:'Lecturer', field: 'ruz_lecturer', align: 'left'},
+      {name:'ruz_lecturer_email', label:'Lecturer email', field: 'ruz_lecturer_email', align: 'left'},
+      {name:'ruz_lecturer_rank', label:'Lecturer rank', field: 'ruz_lecturer_rank', align: 'left'},
+      {name:'ruz_lecturer_title', label:'Lecturer title', field: 'ruz_lecturer_title', align: 'left'},
+      {name:'ruz_parentschedule', label:'Parentschedule', field: 'ruz_parentschedule', align: 'left'}
+    ]
+
+    const fetchLessons = ( page = 0, page_size = 15)=>{
+      axios.get('https://constructor.auditory.ru/epi/api/v1/lessons',{
+        params: { page: page, page_size:page_size }
+      })
+        .then(response=> {
+          lessons.value = response.data.lessons
+          pagination.value.page = page
+          pagination.value.rowsPerPage = page_size
+          pagination.value.rowsNumber = response.data.total
+        })
+        .finally(()=> {
+            loading.value = false
+        })
+    }
+
+    const handleRequest = (props) => {
+      console.log(props)
+      fetchLessons(props.pagination.page)
+      //fetchLessons(props.pagination.rowsPerPage)
+    }
+
+
+    fetchLessons()
+    return {
+      handleRequest,
+      pagination,
+      loading,
+      lessons,
+      columns
+    }
+  }
+})
+</script>