Add pagination to WifiDevices view

server/src/resolvers/Query/wifiDevices.js

@@ -1,28 +1,35 @@
 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)
+  if (!search)
-    search = undefined
+    search = ''
 
-  return prisma.wifiDevice.findMany({
+  const where = {
-    where: {
+    OR: [
-      OR: [
+      { hostname: { contains: search, mode } },
-        { hostname: { contains: search, mode } },
+      { mac: { contains: search, mode } },
-        { mac: { contains: search, mode } },
+      { ip: { contains: search, mode } },
-        { ip: { contains: search, mode } },
+      { apName: { contains: search, mode } },
-        { apName: { contains: search, mode } },
+      { essid: { contains: search, mode } },
-        { essid: { contains: search, mode } },
+      { oui: { contains: search, mode } },
-        { oui: { contains: search, mode } },
+      { controller: { contains: search, mode } },
-        { controller: { contains: search, mode } },
+      { user: { displayName: { contains: search, mode } } },
-        { user: { displayName: { contains: search, mode } } },
+      { user: { sAMAccountName: { contains: search, mode } } }
-        { user: { sAMAccountName: { contains: search, mode } } }
+    ]
-      ]
+  }
-    },
+
-    orderBy: [{ lastSeen: 'desc' }, { hostname: 'asc' }],
+  return {
-    include: { user: true, accessPoint: true },
+    total: prisma.wifiDevice.count({
-    take,
+      where
-    skip
+    }),
-  })
+    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>
+    <ClientsDataTable :wifi-devices="computedWifiDevices" />
-      São exibidos apenas os 100 primeiros resultados da pesquisa
+
-    </v-alert>
+    <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,
+    page: 1,
-    itemsPerPageArray: [15, 30, 60, 120],
+    itemsPerPage: 15
-    page: 1
   }),
   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,36 +125,41 @@ export default {
       fetchPolicy: 'cache-and-network',
       pollInterval: 10000,
       query: gql`
-        query wifiDevices($search: String) {
+        query wifiDevices($search: String, $skip: Int, $take: Int) {
-          wifiDevices(search: $search) {
+          wifiDevices(search: $search, skip: $skip, take: $take) {
-            accessPoint {
+            total
-              name
+            data {
+              accessPoint {
+                name
+                hostname
+                local
+              }
+              id
               hostname
-              local
+              essid
-            }
+              mac
-            id
+              uptime
-            hostname
+              lastSeen
-            essid
+              ip
-            mac
+              signalStrength
-            uptime
+              frequency
-            lastSeen
+              protocol
-            ip
+              speed
-            signalStrength
+              usage
-            frequency
+              user {
-            protocol
+                displayName
-            speed
+                sAMAccountName
-            usage
+                thumbnailPhoto
-            user {
+              }
-              displayName
-              sAMAccountName
-              thumbnailPhoto
             }
           }
         }
       `,
       variables() {
         return {
-          search: this.search
+          search: this.search,
+          skip: this.page * this.itemsPerPage - this.itemsPerPage,
+          take: this.itemsPerPage
         }
       }
     },