Add pagination to WifiUsers

server/src/resolvers/Query/wifiUsers.js

@@ -1,14 +1,13 @@
 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: {
+  const where = {
     AND: [
       { wifiDevices: { some: { id: { not: undefined } } } },
       {
@@ -33,7 +32,12 @@ export async function wifiUsers(parent, { take = 100, skip = 0, search }) {
         ]
       }
     ]
-    },
+  }
+
+  return {
+    data:
+      prisma.user.findMany({
+        where,
         include: {
           wifiDevices: true
         },
@@ -42,5 +46,8 @@ export async function wifiUsers(parent, { take = 100, skip = 0, search }) {
           { displayName: 'asc' }],
         take,
         skip
-  })
+      }),
+
+    total: prisma.user.count({ where })
+  }
 }

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!

web/src/components/DataTables/UserWifiDevicesDataTable.vue

@@ -108,4 +108,8 @@ export default {
 }
 </script>
 
-<style></style>
+<style>
+td {
+  white-space: nowrap;
+}
+</style>

web/src/components/DataTables/WifiDevicesDataTable.vue

@@ -130,4 +130,8 @@ export default {
 }
 </script>
 
-<style></style>
+<style>
+td {
+  white-space: nowrap;
+}
+</style>

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,8 +160,10 @@ export default {
     wifiUsers: {
       fetchPolicy: 'cache-and-network',
       query: gql`
-        query wifiUsers($search: String) {
-          wifiUsers(search: $search) {
+        query wifiUsers($search: String, $skip: Int, $take: Int) {
+          wifiUsers(search: $search, skip: $skip, take: $take) {
+            total
+            data {
               displayName
               sAMAccountName
               thumbnailPhoto
@@ -168,10 +194,13 @@ export default {
               }
             }
           }
+        }
       `,
       variables() {
         return {
-          search: this.search
+          search: this.search,
+          skip: this.page * this.itemsPerPage - this.itemsPerPage,
+          take: this.itemsPerPage
         }
       }
     },