Sync data with server

server/src/resolvers/Query/wifiDevices.js

@@ -1,6 +1,6 @@
 import prisma from '../../prisma'
 
-export async function wifiDevices(parent, { take = 50, skip = 0, search }) {
+export async function wifiDevices(parent, { take = 50, skip = 0, search, sortBy, sortDesc }) {
   const mode = 'insensitive'
 
   if (!search)
@@ -26,7 +26,7 @@ export async function wifiDevices(parent, { take = 50, skip = 0, search }) {
     }),
     data: prisma.wifiDevice.findMany({
       where,
-      orderBy: [{ lastSeen: 'desc' }, { ip: 'asc' }],
+      orderBy: [{ [sortBy || 'hostname']: sortDesc ? 'desc' : 'asc' }, { ip: 'asc' }],
       include: { user: true, accessPoint: true },
       take,
       skip

server/src/typeDefs.js

@@ -36,6 +36,8 @@ const typeDefs = gql`
       search: String = ""      
       take: Int
       skip: Int
+      sortBy: WifiDevicesResultSortBy = "signalStrength"
+      sortDesc: Boolean = false
     ): WifiDevicesResult! @auth(roles: ["superAdmin"])
 
     "Users that uses the Wi-Fi"
@@ -397,6 +399,24 @@ const typeDefs = gql`
     local: String
     notes: String
   }
+
+  enum WifiDevicesResultSortBy{
+    mac
+    hostname
+    firstSeen
+    lastSeen
+    essid
+    ip
+    uptime
+    apName
+    status
+
+    signalStrength
+    frequency
+    protocol
+    speed
+    usage    
+  }
 `
 
 export { typeDefs }

web/src/components/DataTables/WifiDevicesDataTable.vue

@@ -1,13 +1,17 @@
 <template>
   <div>
     <v-data-table
-      sort-by="signalStrength"
+      v-bind="$attrs"
       :items="wifiDevices"
       :headers="headers"
       :search="filter"
       :hide-default-footer="!paginate"
       :disable-pagination="!paginate"
       no-data-text="Nenhum cliente conectado à este AP"
+      calculate-widths
+      :loading="loading"
+      @update:sort-by="$emit('update:sort-by', $event)"
+      @update:sort-desc="$emit('update:sort-desc', $event)"
     >
       <template #[`item.user`]="{ item: { user } }">
         <div v-if="user" class="d-flex">
@@ -38,7 +42,7 @@
       </template>
 
       <template #[`item.uptime`]="{ item: { uptime } }">
-        <small class="text-no-wrap"> {{ uptime | durationFromSeconds }}</small>
+        <small> {{ uptime | durationFromSeconds }}</small>
       </template>
 
       <template #[`item.signalStrength`]="{ item: { signalStrength } }">
@@ -50,7 +54,7 @@
       </template>
 
       <template #[`item.usage`]="{ item: { usage } }">
-        <span class="text-no-wrap"> {{ usage | bytes }}</span>
+        <span> {{ usage | bytes }}</span>
       </template>
 
       <template #[`item.protocol`]="{ item: { protocol } }">
@@ -69,7 +73,7 @@
             params: { id: item.accessPoint.id }
           }"
         >
-          <small class="text-no-wrap">
+          <small>
             {{ item.accessPoint.name || item.accessPoint.hostname }}
           </small>
         </router-link>
@@ -99,29 +103,30 @@ export default {
     paginate: {
       type: Boolean,
       default: false
+    },
+    loading: {
+      type: Boolean,
+      default: false
     }
   },
   data: () => ({
-    availableHeaders: [
+    headers: [
       { text: 'Hostname', value: 'hostname' },
       { text: 'MAC', value: 'mac' },
       { text: 'IP', value: 'ip' },
       { text: 'ESSID', value: 'essid' },
       { text: 'Uptime', value: 'uptime' },
-      { text: 'Usuário', value: 'user' },
+      { text: 'Usuário', value: 'user', sortable: false },
       { text: 'Sinal', value: 'signalStrength' },
       { text: 'Frequência', value: 'frequency', align: 'end' },
       { text: 'Protocolo', value: 'protocol' },
       { text: 'Velocidade', value: 'speed', align: 'end' },
       { text: 'Uso', value: 'usage', align: 'end' },
       { text: 'Access Point', value: 'apName' }
-    ]
+    ],
+    sortBy: 'hostname',
+    sortDesc: false
   }),
-  computed: {
-    headers() {
-      return this.availableHeaders
-    }
-  },
   methods: {
     setClipboard(text) {
       navigator.clipboard.writeText(text)

web/src/views/WifiDevices.vue

@@ -7,8 +7,9 @@
         prepend-icon="mdi-devices"
         clearable
         hide-details
-        :loading="$apollo.queries.wifiDevices.loading"
+        :loading="$apollo.queries.wifiDevices.loading && !!search"
       />
+
       <v-spacer />
 
       <v-select
@@ -58,9 +59,12 @@
       no total.
     </div>
 
-    <v-progress-linear :indeterminate="$apollo.queries.wifiDevices.loading" />
-
-    <WifiDevicesDataTable :wifi-devices="computedWifiDevices" />
+    <WifiDevicesDataTable
+      :wifi-devices="computedWifiDevices"
+      :loading="$apollo.queries.wifiDevices.loading"
+      :sort-by.sync="sortBy"
+      :sort-desc.sync="sortDesc"
+    />
 
     <v-pagination
       v-model="page"
@@ -81,7 +85,9 @@ export default {
   data: () => ({
     search: '',
     page: 1,
-    itemsPerPage: 10
+    itemsPerPage: 10,
+    sortBy: 'signalStrength',
+    sortDesc: false
   }),
   computed: {
     computedWifiDevices() {
@@ -118,8 +124,20 @@ export default {
       fetchPolicy: 'cache-and-network',
       pollInterval: 10000,
       query: gql`
-        query wifiDevices($search: String, $skip: Int, $take: Int) {
-          wifiDevices(search: $search, skip: $skip, take: $take) {
+        query wifiDevices(
+          $search: String
+          $skip: Int
+          $take: Int
+          $sortBy: WifiDevicesResultSortBy
+          $sortDesc: Boolean
+        ) {
+          wifiDevices(
+            search: $search
+            skip: $skip
+            take: $take
+            sortBy: $sortBy
+            sortDesc: $sortDesc
+          ) {
             total
             data {
               accessPoint {
@@ -153,7 +171,9 @@ export default {
         return {
           search: this.search,
           skip: this.page * this.itemsPerPage - this.itemsPerPage,
-          take: this.itemsPerPage
+          take: this.itemsPerPage,
+          sortBy: this.sortBy,
+          sortDesc: this.sortDesc
         }
       }
     },

web/src/views/WifiUsers.vue

@@ -7,8 +7,9 @@
         prepend-icon="mdi-devices"
         clearable
         hide-details
-        :loading="$apollo.queries.wifiUsers.loading"
+        :loading="$apollo.queries.wifiUsers.loading && !!search"
       />
+
       <v-spacer />
 
       <v-select
@@ -97,7 +98,7 @@
                         }}
                       </small>
                     </template>
-                    <avatar left size="28" :src="user.thumbnailPhoto" />
+                    <Avatar left size="32" :src="user.thumbnailPhoto" />
                   </v-badge>
                 </v-badge>
                 {{ user.displayName }} ({{ user.sAMAccountName }})