From 46cbfa9acc4353cfcc1f9b6f08f38c20ada336ae Mon Sep 17 00:00:00 2001
From: Douglas Barone <douglasvbarone@gmail.com>
Date: Mon, 6 Jun 2022 20:44:39 +0000
Subject: [PATCH] Add pagination to WifiDevices view

---
 server/src/resolvers/Query/wifiDevices.js | 51 ++++++------
 server/src/typeDefs.js                    |  8 +-
 web/src/views/WifiDevices.vue             | 96 +++++++++++++++--------
 3 files changed, 101 insertions(+), 54 deletions(-)

diff --git a/server/src/resolvers/Query/wifiDevices.js b/server/src/resolvers/Query/wifiDevices.js
index 02975fe..ea6e9ff 100644
--- a/server/src/resolvers/Query/wifiDevices.js
+++ b/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)
-    search = undefined
+  if (!search)
+    search = ''
 
-  return prisma.wifiDevice.findMany({
-    where: {
-      OR: [
-        { hostname: { contains: search, mode } },
-        { mac: { contains: search, mode } },
-        { ip: { contains: search, mode } },
-        { apName: { contains: search, mode } },
-        { essid: { contains: search, mode } },
-        { oui: { contains: search, mode } },
-        { controller: { contains: search, mode } },
-        { user: { displayName: { contains: search, mode } } },
-        { user: { sAMAccountName: { contains: search, mode } } }
-      ]
-    },
-    orderBy: [{ lastSeen: 'desc' }, { hostname: 'asc' }],
-    include: { user: true, accessPoint: true },
-    take,
-    skip
-  })
+  const where = {
+    OR: [
+      { hostname: { contains: search, mode } },
+      { mac: { contains: search, mode } },
+      { ip: { contains: search, mode } },
+      { apName: { contains: search, mode } },
+      { essid: { contains: search, mode } },
+      { oui: { contains: search, mode } },
+      { controller: { contains: search, mode } },
+      { user: { displayName: { contains: search, mode } } },
+      { user: { sAMAccountName: { contains: search, mode } } }
+    ]
+  }
+
+  return {
+    total: prisma.wifiDevice.count({
+      where
+    }),
+    data: prisma.wifiDevice.findMany({
+      where,
+      orderBy: [{ lastSeen: 'desc' }, { ip: 'asc' }],
+      include: { user: true, accessPoint: true },
+      take,
+      skip
+    })
+  }
 }
diff --git a/server/src/typeDefs.js b/server/src/typeDefs.js
index 2681333..6b10773 100644
--- a/server/src/typeDefs.js
+++ b/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!
diff --git a/web/src/views/WifiDevices.vue b/web/src/views/WifiDevices.vue
index 6876ca4..af70bfc 100644
--- a/web/src/views/WifiDevices.vue
+++ b/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,36 +125,41 @@ export default {
       fetchPolicy: 'cache-and-network',
       pollInterval: 10000,
       query: gql`
-        query wifiDevices($search: String) {
-          wifiDevices(search: $search) {
-            accessPoint {
-              name
+        query wifiDevices($search: String, $skip: Int, $take: Int) {
+          wifiDevices(search: $search, skip: $skip, take: $take) {
+            total
+            data {
+              accessPoint {
+                name
+                hostname
+                local
+              }
+              id
               hostname
-              local
-            }
-            id
-            hostname
-            essid
-            mac
-            uptime
-            lastSeen
-            ip
-            signalStrength
-            frequency
-            protocol
-            speed
-            usage
-            user {
-              displayName
-              sAMAccountName
-              thumbnailPhoto
+              essid
+              mac
+              uptime
+              lastSeen
+              ip
+              signalStrength
+              frequency
+              protocol
+              speed
+              usage
+              user {
+                displayName
+                sAMAccountName
+                thumbnailPhoto
+              }
             }
           }
         }
       `,
       variables() {
         return {
-          search: this.search
+          search: this.search,
+          skip: this.page * this.itemsPerPage - this.itemsPerPage,
+          take: this.itemsPerPage
         }
       }
     },