feat: optimize ui async code, qeury data and loading ui

src/renderer/views/student-department/student/Student.vue

@@ -2,13 +2,19 @@
 import Table from './components/Table.vue';
 import FunctionBar from './components/FunctionBar.vue';
 import EditModal from './components/EditModal.vue';
+import SkeletonTable from './components/SkeletonTable.vue';
 import { Suspense } from 'vue';
 </script>
 
 <template>
   <FunctionBar />
   <Suspense>
-    <Table />
+    <!--    <template #default>-->
+    <!--      <Table />-->
+    <!--    </template>-->
+    <!--    <template #fallback>-->
+    <SkeletonTable />
+    <!--    </template>-->
   </Suspense>
   <EditModal />
 </template>

src/renderer/views/student-department/student/components/FunctionBar.vue

@@ -12,9 +12,9 @@
         class="bg-base-silver pl-4 rounded-l"
       />
       <input
-        v-model="searchQuery"
+        v-model="studentStore.search.query"
         class="input bg-base-silver max-w-[500px] placeholder:text-black focus:border-transparent"
-        placeholder="Tìm kiếm tên sinh viên"
+        placeholder="Tìm kiếm  sinh viên"
         type="search"
       />
     </div>
@@ -37,19 +37,18 @@ function debounce(fn, delay) {
   };
 }
 
-const searchQuery = ref(studentStore.search.query);
-
 const debouncedSearch = debounce(async (query) => {
-  await studentStore.fetchStudents(query);
+  await studentStore.fetchStudents(query, true);
 }, 500);
 
 watchEffect(() => {
-  debouncedSearch(searchQuery.value);
+  debouncedSearch(studentStore.search.query);
+  console.log(studentStore.search.query);
 });
 watch(
   () => studentStore.search.typeQuery,
   () => {
-    searchQuery.value = '';
+    studentStore.search.query = '';
   }
 );
 </script>

src/renderer/views/student-department/student/components/Row.vue

@@ -0,0 +1,47 @@
+<template>
+  <tr
+    ref="endOftable"
+    class="hover:!bg-secondary-100 cursor-pointer"
+    @click="handleRowClick"
+  >
+    <td>{{ student.id }}</td>
+    <td>{{ student.name }}</td>
+    <td>{{ resolveGender(student.gender) }}</td>
+    <td>{{ student.major.name }}</td>
+    <td>{{ student.priority.name }}</td>
+  </tr>
+</template>
+
+<script lang="ts" setup>
+import { ref, defineProps, defineEmits, onMounted } from 'vue';
+import type { Student } from '../stores/student';
+import { useStudentStore } from '../stores/student';
+
+const studentStore = useStudentStore();
+const props = defineProps({
+  student: Object as () => Student,
+  isLast: Boolean,
+});
+const endOftable = ref(null);
+const emit = defineEmits(['row-click']);
+
+const handleRowClick = () => {
+  emit('row-click', props.student);
+};
+
+const resolveGender = (gender: string) => {
+  return gender === 'male' ? 'Nam' : 'Nữ';
+};
+onMounted(() => {
+  const observer = new IntersectionObserver((entries) => {
+    if (entries[0].isIntersecting && props.isLast) {
+      studentStore.page++;
+      studentStore.fetchStudents(studentStore.search.query, false);
+      observer.unobserve(entries[0].target);
+    }
+  });
+  observer.observe(endOftable.value);
+});
+</script>
+
+<style scoped></style>

src/renderer/views/student-department/student/components/SkeletonTable.vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import Row from './Row.vue';
+</script>
+
+<template>
+  <div class="overflow-x-auto w-full h-[calc(100vh-300px)]">
+    <table class="table table-pin-rows table-zebra">
+      <thead>
+        <tr>
+          <th>MSSV</th>
+          <th>Họ và tên</th>
+          <th>Giới tính</th>
+          <th>Chuyên ngành</th>
+          <th>Đối tượng ưu tiên</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="index in new Array(12).fill(0)" class="skeleton">
+          <td></td>
+          <td></td>
+          <td></td>
+          <td></td>
+          <td></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style scoped></style>

src/renderer/views/student-department/student/components/Table.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="overflow-x-auto w-full h-[calc(100vh-300px)]">
-    <table class="table table-zebra">
+    <table class="table table-pin-rows table-zebra">
       <thead>
         <tr>
           <th>MSSV</th>
@@ -11,25 +11,22 @@
         </tr>
       </thead>
       <tbody>
-        <tr
-          v-for="student in studentStore.students"
+        <Row
+          v-for="(student, index) in studentStore.students"
           :key="student.id"
-          class="hover:!bg-secondary-100 cursor-pointer"
-          @click="() => handleRowClick(student)"
+          :isLast="index === studentStore.students.length - 1"
+          :student="student"
+          @click="handleRowClick"
         >
-          <td>{{ student.id }}</td>
-          <td>{{ student.name }}</td>
-          <td>{{ resolveGender(student.gender) }}</td>
-          <td>{{ student.major.name }}</td>
-          <td>{{ student.priority.name }}</td>
-        </tr>
+        </Row>
       </tbody>
     </table>
   </div>
 </template>
 <script setup>
 import { useStudentStore } from '../stores/student';
 import Table from '../../../training-department/course/components/Table.vue';
+import Row from './Row.vue';
 
 const studentStore = useStudentStore();
 await studentStore.fetchStudents('');
@@ -40,8 +37,5 @@ const handleRowClick = (student) => {
   studentStore.selectStudent(student);
   document.getElementById('edit_modal_student').showModal();
 };
-const resolveGender = (gender) => {
-  return gender === 'male' ? 'Nam' : 'Nữ';
-};
 </script>
 <style scoped></style>

src/renderer/views/student-department/student/stores/student.ts

@@ -65,6 +65,7 @@ export const useStudentStore = defineStore('student', {
     provinces: [] as Province[],
     districts: [] as District[],
     majors: [] as Major[],
+    page: 1,
     errorMessages: {} as Record<string, any>,
     search: {
       query: '',
@@ -75,12 +76,22 @@ export const useStudentStore = defineStore('student', {
     getErrorMessages() {
       return this.errorMessages;
     },
+    getQuery() {
+      return this.search.query;
+    },
   },
   actions: {
-    async fetchStudents(queryString: string) {
+    async fetchStudents(queryString: string, isSeach = false) {
       const query = `?${this.search.typeQuery}=${queryString}`;
-      const response = await axiosClient.get(`/student${query}`);
-      this.students = response.data;
+      if (isSeach) {
+        this.page = 1;
+        this.students = [];
+      }
+      const response = await axiosClient.get(
+        `/student${query}&page=${this.page}`
+      );
+
+      this.students.push(...response.data);
     },
 
     async getPriorities() {
@@ -103,9 +114,7 @@ export const useStudentStore = defineStore('student', {
       const response = await axiosClient.get(
         `/province/district/${provinceId}`
       );
-
       this.districts = response.data;
-      console.log(this.districts);
     },
     async updateStudent(student: Partial<Student>) {
       try {