From 4429c84b1c651bc21d7c99f616d82459c0aabaa2 Mon Sep 17 00:00:00 2001
From: Douglas Barone <douglasvbarone@gmail.com>
Date: Tue, 7 Jun 2022 16:34:52 +0000
Subject: [PATCH] Add pagination to WifiUsers

---
 server/src/resolvers/Query/wifiUsers.js       | 77 ++++++++-------
 server/src/typeDefs.js                        | 20 ++--
 .../DataTables/UserWifiDevicesDataTable.vue   |  6 +-
 .../DataTables/WifiDevicesDataTable.vue       |  6 +-
 web/src/views/WifiUsers.vue                   | 99 ++++++++++++-------
 5 files changed, 129 insertions(+), 79 deletions(-)

diff --git a/server/src/resolvers/Query/wifiUsers.js b/server/src/resolvers/Query/wifiUsers.js
index 56db13a..5d95cae 100644
--- a/server/src/resolvers/Query/wifiUsers.js
+++ b/server/src/resolvers/Query/wifiUsers.js
@@ -1,46 +1,53 @@
 import prisma from '../../prisma'
 
 // TODO: Add filtering
-export async function wifiUsers(parent, { take = 100, skip = 0, search }) {
+export async function wifiUsers(parent, { take = 10, skip = 0, search }) {
   const mode = 'insensitive'
 
   if (search === null)
     search = undefined
 
-  return prisma.user.findMany({
-    where: {
-      AND: [
-        { wifiDevices: { some: { id: { not: undefined } } } },
-        {
-          OR: [
-            { wifiDevices: { some: { hostname: { contains: search, mode } } } },
-            {
-              wifiDevices: {
-                some: {
-                  accessPoint: {
-                    OR: [
-                      { name: { contains: search, mode } },
-                      { local: { contains: search, mode } },
-                    ]
-                  }
+  const where = {
+    AND: [
+      { wifiDevices: { some: { id: { not: undefined } } } },
+      {
+        OR: [
+          { wifiDevices: { some: { hostname: { contains: search, mode } } } },
+          {
+            wifiDevices: {
+              some: {
+                accessPoint: {
+                  OR: [
+                    { name: { contains: search, mode } },
+                    { local: { contains: search, mode } },
+                  ]
                 }
               }
-            },
-            { wifiDevices: { some: { mac: { contains: search, mode } } } },
-            { wifiDevices: { some: { ip: { contains: search, mode } } } },
-            { displayName: { contains: search, mode } }, ,
-            { sAMAccountName: { contains: search, mode } },
-          ]
-        }
-      ]
-    },
-    include: {
-      wifiDevices: true
-    },
-    orderBy: [
-      { wifiDevices: { _count: 'desc' } },
-      { displayName: 'asc' }],
-    take,
-    skip
-  })
+            }
+          },
+          { wifiDevices: { some: { mac: { contains: search, mode } } } },
+          { wifiDevices: { some: { ip: { contains: search, mode } } } },
+          { displayName: { contains: search, mode } }, ,
+          { sAMAccountName: { contains: search, mode } },
+        ]
+      }
+    ]
+  }
+
+  return {
+    data:
+      prisma.user.findMany({
+        where,
+        include: {
+          wifiDevices: true
+        },
+        orderBy: [
+          { wifiDevices: { _count: 'desc' } },
+          { displayName: 'asc' }],
+        take,
+        skip
+      }),
+
+    total: prisma.user.count({ where })
+  }
 }
diff --git a/server/src/typeDefs.js b/server/src/typeDefs.js
index 6b10773..468de52 100644
--- a/server/src/typeDefs.js
+++ b/server/src/typeDefs.js
@@ -42,7 +42,7 @@ const typeDefs = gql`
     wifiUsers(
       search: String = ""      
       take: Int
-      skip: Int): [User]! @auth(roles: ["superAdmin"])
+      skip: Int): WifiUsersResult! @auth(roles: ["superAdmin"])
 
     "Application Logs"
     logs(
@@ -243,12 +243,6 @@ 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!
@@ -327,6 +321,18 @@ const typeDefs = gql`
     wifiDevices: [WifiDevice]
   }
 
+  "A WiFi Device Search result"
+  type WifiDevicesResult {
+    data: [WifiDevice!]!
+    total: Int!
+  }
+
+  "A WiFi User Search result"
+  type WifiUsersResult {
+    data: [User!]!
+    total: Int!
+  }
+
   "Subnet information"
   type SubnetInfo {
     shortName: String!
diff --git a/web/src/components/DataTables/UserWifiDevicesDataTable.vue b/web/src/components/DataTables/UserWifiDevicesDataTable.vue
index a5af963..56abcbc 100644
--- a/web/src/components/DataTables/UserWifiDevicesDataTable.vue
+++ b/web/src/components/DataTables/UserWifiDevicesDataTable.vue
@@ -108,4 +108,8 @@ export default {
 }
 </script>
 
-<style></style>
+<style>
+td {
+  white-space: nowrap;
+}
+</style>
diff --git a/web/src/components/DataTables/WifiDevicesDataTable.vue b/web/src/components/DataTables/WifiDevicesDataTable.vue
index 3fcf561..3e79420 100644
--- a/web/src/components/DataTables/WifiDevicesDataTable.vue
+++ b/web/src/components/DataTables/WifiDevicesDataTable.vue
@@ -130,4 +130,8 @@ export default {
 }
 </script>
 
-<style></style>
+<style>
+td {
+  white-space: nowrap;
+}
+</style>
diff --git a/web/src/views/WifiUsers.vue b/web/src/views/WifiUsers.vue
index 6a1f3c4..b50e911 100644
--- a/web/src/views/WifiUsers.vue
+++ b/web/src/views/WifiUsers.vue
@@ -1,14 +1,25 @@
 <template>
   <v-container fluid>
-    <v-toolbar flat outlined max-width="400px">
+    <v-toolbar flat outlined>
       <v-text-field
         v-model="search"
         label="Pesquisar"
-        prepend-icon="mdi-account-search"
+        prepend-icon="mdi-devices"
         clearable
         hide-details
         :loading="$apollo.queries.wifiUsers.loading"
       />
+      <v-spacer />
+
+      <v-select
+        v-model="itemsPerPage"
+        class="shrink"
+        :items="[5, 10, 20, 30, 50, 100]"
+        label="Items por página"
+        hide-details
+        outlined
+        dense
+      />
 
       <v-tooltip bottom>
         <span>Atualizar</span>
@@ -48,6 +59,8 @@
     <v-data-iterator
       :loading="$apollo.queries.wifiUsers.loading"
       :items="sortedWifiUsers"
+      hide-default-footer
+      :items-per-page="itemsPerPage"
     >
       <template #loading>
         <v-expansion-panels disabled>
@@ -58,6 +71,7 @@
           </v-expansion-panel>
         </v-expansion-panels>
       </template>
+
       <template #default="{ items }">
         <v-expansion-panels>
           <v-expansion-panel v-for="user in items" :key="user.sAMAccountName">
@@ -98,9 +112,12 @@
         </v-expansion-panels>
       </template>
     </v-data-iterator>
-    <v-alert type="info" outlined dismissible>
-      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>
 <script>
@@ -111,15 +128,22 @@ import UserWifiDevicesDataTable from '../components/DataTables/UserWifiDevicesDa
 export default {
   components: { Avatar, UserWifiDevicesDataTable },
   data: () => ({
-    search: ''
+    search: '',
+    page: 1,
+    itemsPerPage: 10
   }),
   computed: {
     sortedWifiUsers() {
-      return this.wifiUsers?.map(user => ({
+      return this.wifiUsers?.data?.map(user => ({
         ...user,
         ips: user.wifiDevices.reduce((ips, device) => ` ${device.ip}`, ''),
         wifiDevices: user.wifiDevices.sort(a => (a.status == 'ONLINE' ? -1 : 1))
       }))
+    },
+    pagesTotal() {
+      if (this.wifiUsers?.total)
+        return Math.ceil(this.wifiUsers.total / this.itemsPerPage)
+      else return 1
     }
   },
   watch: {
@@ -136,34 +160,37 @@ export default {
     wifiUsers: {
       fetchPolicy: 'cache-and-network',
       query: gql`
-        query wifiUsers($search: String) {
-          wifiUsers(search: $search) {
-            displayName
-            sAMAccountName
-            thumbnailPhoto
-            wifiDevices {
-              mac
-              oui
-              controller
-              hostname
-              firstSeen
-              lastSeen
-              status
-              apName
-              essid
-              ip
-              uptime
-              signalStrength
-              frequency
-              protocol
-              speed
-              usage
-
-              accessPoint {
-                id
-                name
+        query wifiUsers($search: String, $skip: Int, $take: Int) {
+          wifiUsers(search: $search, skip: $skip, take: $take) {
+            total
+            data {
+              displayName
+              sAMAccountName
+              thumbnailPhoto
+              wifiDevices {
+                mac
+                oui
+                controller
                 hostname
-                local
+                firstSeen
+                lastSeen
+                status
+                apName
+                essid
+                ip
+                uptime
+                signalStrength
+                frequency
+                protocol
+                speed
+                usage
+
+                accessPoint {
+                  id
+                  name
+                  hostname
+                  local
+                }
               }
             }
           }
@@ -171,7 +198,9 @@ export default {
       `,
       variables() {
         return {
-          search: this.search
+          search: this.search,
+          skip: this.page * this.itemsPerPage - this.itemsPerPage,
+          take: this.itemsPerPage
         }
       }
     },