Add pagination to WifiDevices view

server/src/resolvers/Query/wifiDevices.js

@@ -1,13 +1,12 @@
 import prisma from '../../prisma'
 
-export async function wifiDevices(parent, { take = 100, skip = 0, search }) {
+export async function wifiDevices(parent, { take = 50, skip = 0, search }) {
   const mode = 'insensitive'
 
-  if (search === null)
-    search = undefined
+  if (!search)
+    search = ''
 
-  return prisma.wifiDevice.findMany({
-    where: {
+  const where = {
     OR: [
       { hostname: { contains: search, mode } },
       { mac: { contains: search, mode } },
@@ -19,10 +18,18 @@ export async function wifiDevices(parent, { take = 100, skip = 0, search }) {
       { user: { displayName: { contains: search, mode } } },
       { user: { sAMAccountName: { contains: search, mode } } }
     ]
-    },
-    orderBy: [{ lastSeen: 'desc' }, { hostname: 'asc' }],
+  }
+
+  return {
+    total: prisma.wifiDevice.count({
+      where
+    }),
+    data: prisma.wifiDevice.findMany({
+      where,
+      orderBy: [{ lastSeen: 'desc' }, { ip: 'asc' }],
       include: { user: true, accessPoint: true },
       take,
       skip
     })
+  }
 }

server/src/typeDefs.js

@@ -36,7 +36,7 @@ const typeDefs = gql`
       search: String = ""      
       take: Int
       skip: Int
-    ): [WifiDevice]! @auth(roles: ["superAdmin"])
+    ): WifiDevicesResult! @auth(roles: ["superAdmin"])
 
     "Users that uses the Wi-Fi"
     wifiUsers(
@@ -243,6 +243,12 @@ const typeDefs = gql`
     usage: Int
   }
 
+  "A WiFi Device Search result"
+  type WifiDevicesResult {
+    data: [WifiDevice!]!
+    total: Int!
+  }
+
   "A user that is on the Wi-Fi network reach"
   type UserPresence {
     id: ID!

web/src/views/WifiDevices.vue

@@ -47,11 +47,34 @@
       no total.
     </div>
 
-    <ClientsDataTable :wifi-devices="computedWifiDevices" paginate />
+    <v-toolbar flat>
+      <v-pagination
+        v-model="page"
+        class="my-4"
+        :length="pagesTotal"
+        :total-visible="7"
+      />
+      <v-spacer />
+      <v-select
+        v-model="itemsPerPage"
+        class="shrink"
+        :items="[5, 15, 30, 50, 100]"
+        label="Items por página"
+        hide-details
+        outlined
+        dense
+      />
+    </v-toolbar>
+    <v-progress-linear :indeterminate="$apollo.queries.wifiDevices.loading" />
 
-    <v-alert type="info" outlined dismissible>
-      São exibidos apenas os 100 primeiros resultados da pesquisa
-    </v-alert>
+    <ClientsDataTable :wifi-devices="computedWifiDevices" />
+
+    <v-pagination
+      v-model="page"
+      class="my-4"
+      :length="pagesTotal"
+      :total-visible="7"
+    />
   </v-container>
 </template>
 
@@ -64,13 +87,12 @@ export default {
   components: { ClientsDataTable },
   data: () => ({
     search: '',
-    itemsPerPage: 10,
-    itemsPerPageArray: [15, 30, 60, 120],
-    page: 1
+    page: 1,
+    itemsPerPage: 15
   }),
   computed: {
     computedWifiDevices() {
-      return this.wifiDevices?.map(device => ({
+      return this.wifiDevices?.data.map(device => ({
         ...device,
         hostname: device.hostname || 'Desconhecido',
         displayName: device.user?.displayName || 'Não autenticado',
@@ -79,10 +101,17 @@ export default {
         ip: device.ip == 'Unknown' ? 'Sem endereço IP' : device.ip,
         essid: device.essid
       }))
+    },
+    pagesTotal() {
+      if (this.wifiDevices?.total)
+        return Math.ceil(this.wifiDevices.total / this.itemsPerPage)
+      else return 1
     }
   },
   watch: {
     search(newValue) {
+      this.page = 1
+
       if (!newValue) this.$router.push({ query: {} })
       else if (this.$route.query.search != newValue)
         this.$router.push({ query: { search: newValue } })
@@ -96,8 +125,10 @@ export default {
       fetchPolicy: 'cache-and-network',
       pollInterval: 10000,
       query: gql`
-        query wifiDevices($search: String) {
-          wifiDevices(search: $search) {
+        query wifiDevices($search: String, $skip: Int, $take: Int) {
+          wifiDevices(search: $search, skip: $skip, take: $take) {
+            total
+            data {
               accessPoint {
                 name
                 hostname
@@ -122,10 +153,13 @@ export default {
               }
             }
           }
+        }
       `,
       variables() {
         return {
-          search: this.search
+          search: this.search,
+          skip: this.page * this.itemsPerPage - this.itemsPerPage,
+          take: this.itemsPerPage
         }
       }
     },