installed device : add pagination and fix search bug

pages/admin/gps/installed-device/index.vue

@@ -59,7 +59,7 @@
       </CCardHeader>
 
       <CCardBody>
-        <el-table :data="filteredItems" :row-class-name="hasUnread" style="width: 100%">
+        <el-table :data="devices" :row-class-name="hasUnread" style="width: 100%" v-loading="loading">
           <el-table-column type="index" label="#"> </el-table-column>
 
           <el-table-column label="مدل" width="150px">
@@ -128,6 +128,17 @@
             </template>
           </el-table-column>
         </el-table>
+        <div style="direction:ltr; textAlign:center; marginTop:20px;">
+          <el-pagination
+            v-if="paginate"
+            background
+            layout="prev, pager, next"
+            :current-page="currentPage"
+            :page-count="totalPages"
+            @current-change="handlePageChange"
+          >
+          </el-pagination>
+        </div>
       </CCardBody>
     </CCard>
   </div>
@@ -139,21 +150,42 @@ export default {
   layout: 'admin',
   async asyncData({ $axios, error, query }) {
     try {
-      const { data } = await $axios.get('/api/admin/gps/register-device')
+      const page = parseInt(query.page) || 1
+      const rows = parseInt(query.rows) || 10
+      
+      const params = {
+        page,
+        rows
+      }
+      if (query.filter) params.filter = query.filter
+      if (query.search) params.search = query.search
+
+      const { data } = await $axios.get('/api/admin/gps/register-device', { params })
 
       return {
-        devices: data.data
+        devices: data.data || [],
+        totalDocuments: data.totalDocuments || 0,
+        totalPages: data.totalPages || 1
       }
     } catch (error) {
       console.log(error)
+      return {
+        devices: [],
+        totalDocuments: 0,
+        totalPages: 1
+      }
     }
   },
   data() {
     return {
       devices: [],
-
       device: {},
-      filterText: ''
+      filterText: this.$route.query?.search || '',
+      loading: false,
+      searchTimeout: null,
+      pageSize: 10,
+      totalDocuments: 0,
+      totalPages: 1
     }
   },
 
@@ -161,35 +193,97 @@ export default {
     config() {
       return this.$config
     },
-    filteredItems() {
-      const filterUsersByType = this.devices.filter(item => {
-        if (this.filterType === 'all') return item
-        // eslint-disable-next-line eqeqeq
-        else if (this.filterType === 'rej') return item.status == 2
-        // eslint-disable-next-line eqeqeq
-        else if (this.filterType === 'accept') return item.status == 1
-        // eslint-disable-next-line eqeqeq
-        else if (this.filterType === 'pend') return item.status == 0
-        else return null
-      })
-      const filterText = this.filterText
-      if (!this.filterText.length) return filterUsersByType
-      else {
-        return this.devices.filter(item => {
-          return item.IMEI.includes(filterText) || item.deviceId.model.includes(filterText)
-        })
-      }
+    currentPage() {
+      return parseInt(this.$route.query?.page) || 1
+    },
+    paginate() {
+      return this.totalPages > 1
     },
     filterType: {
       get() {
-        return this.$route.query?.filter
+        return this.$route.query?.filter || 'all'
       },
       set(val) {
-        this.$router.push({ name: 'admin-gps-installed-device', query: { filter: val } })
+        const query = { ...this.$route.query, filter: val, page: 1 }
+        if (!this.filterText) delete query.search
+        else query.search = this.filterText
+        this.$router.push({ name: 'admin-gps-installed-device', query })
       }
     }
   },
+  watch: {
+    '$route.query': {
+      handler(newQuery, oldQuery) {
+        // Sync filterText with route query
+        if (newQuery.search !== this.filterText) {
+          this.filterText = newQuery.search || ''
+        }
+        // Only fetch if query actually changed (not on initial mount)
+        if (oldQuery && (
+          newQuery.filter !== oldQuery.filter || 
+          newQuery.search !== oldQuery.search ||
+          newQuery.page !== oldQuery.page
+        )) {
+          this.fetchData()
+        }
+      },
+      deep: true,
+      immediate: false
+    },
+    filterText(newVal) {
+      // Debounce search to avoid too many requests
+      if (this.searchTimeout) {
+        clearTimeout(this.searchTimeout)
+      }
+      this.searchTimeout = setTimeout(() => {
+        const query = { ...this.$route.query, page: 1 }
+        if (newVal) {
+          query.search = newVal
+        } else {
+          delete query.search
+        }
+        // Only update route if it's different to avoid unnecessary navigation
+        if (query.search !== this.$route.query.search || query.page !== this.$route.query.page) {
+          this.$router.push({ name: 'admin-gps-installed-device', query })
+        }
+      }, 500) // 500ms debounce
+    }
+  },
   methods: {
+    async fetchData() {
+      this.loading = true
+      try {
+        const page = this.currentPage
+        const params = {
+          page,
+          rows: this.pageSize
+        }
+        if (this.$route.query.filter) params.filter = this.$route.query.filter
+        if (this.$route.query.search) params.search = this.$route.query.search
+
+        const { data } = await this.$axios.get('/api/admin/gps/register-device', { params })
+        this.devices = data.data || []
+        this.totalDocuments = data.totalDocuments || 0
+        this.totalPages = data.totalPages || 1
+      } catch (error) {
+        console.error('Error fetching devices:', error)
+        this.$message({
+          type: 'error',
+          message: 'خطا در دریافت اطلاعات'
+        })
+      } finally {
+        this.loading = false
+      }
+    },
+    handlePageChange(page) {
+      this.$router.push({
+        name: 'admin-gps-installed-device',
+        query: {
+          ...this.$route.query,
+          page
+        }
+      })
+    },
     hasUnread({ row, rowIndex }) {
       return row.status === 0 ? 'unreadMsgInCv' : null
     },
@@ -201,21 +295,21 @@ export default {
             type: 'success',
             message: res.data.msg
           })
-          this.$nuxt.refresh()
+          this.fetchData()
         })
         .catch(err => {
-          if (err.response.data.status === 401) {
+          if (err.response && err.response.data && err.response.data.status === 401) {
             return this.$message({
               type: 'warning',
               message: 'لطفا دوباره وارد حساب خود شوید'
             })
           }
-          if (err.response.status === 422) this.validation = err.response.data.validation
+          if (err.response && err.response.status === 422) this.validation = err.response.data.validation
           else {
             console.log(err)
             return this.$message({
               type: 'warning',
-              message: err.msg
+              message: err.msg || 'خطا در انجام عملیات'
             })
           }
         })