From 94c9c335d4e9f582ed5332d6b55b74f45f21f66f Mon Sep 17 00:00:00 2001
From: Douglas Barone <douglasvbarone@gmail.com>
Date: Thu, 31 Mar 2022 10:42:19 -0400
Subject: [PATCH] Added client filter

---
 web/src/views/AccessPoints/index.vue  |  1 +
 web/src/views/AccessPoints/single.vue | 27 +++++++++++++++++++++++++++
 2 files changed, 28 insertions(+)

diff --git a/web/src/views/AccessPoints/index.vue b/web/src/views/AccessPoints/index.vue
index b841fe7..0e9823a 100644
--- a/web/src/views/AccessPoints/index.vue
+++ b/web/src/views/AccessPoints/index.vue
@@ -76,6 +76,7 @@
             rounded
             :elevation="0"
             :color="loadColor(item.clients) + ' lighten-5'"
+            light
             @click="navigateToAccessPoint(item)"
           >
             <v-icon left :color="loadColor(item.clients)">
diff --git a/web/src/views/AccessPoints/single.vue b/web/src/views/AccessPoints/single.vue
index 577f5c1..74d6c70 100644
--- a/web/src/views/AccessPoints/single.vue
+++ b/web/src/views/AccessPoints/single.vue
@@ -12,6 +12,14 @@
           <small> ({{ accessPoint.ip }}) </small>
           <ApIcon class="mr-1" :controller="accessPoint.controller" />
           <v-spacer />
+          <v-text-field
+            v-model="filter"
+            label="Filtro"
+            prepend-inner-icon="mdi-magnify"
+            single-line
+            hide-details
+          />
+
           <v-btn icon @click="showDialog = false">
             <v-icon>mdi-close</v-icon>
           </v-btn>
@@ -21,8 +29,10 @@
             sort-by="name"
             :items="accessPoint.wifiDevices"
             :headers="headers"
+            :search="filter"
             dense
             :footer-props="{ itemsPerPageOptions: [15, 25, 50, 100, 150] }"
+            :custom-filter="customFilter"
           >
             <template #[`item.user`]="{ item: { user } }">
               <span v-if="user">
@@ -52,9 +62,11 @@ export default {
   components: { Avatar, ApIcon },
   data: () => ({
     showDialog: true,
+    filter: '',
     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' }
@@ -62,9 +74,23 @@ export default {
   }),
   watch: {
     showDialog() {
+      this.filter = ''
       this.$router.push({ name: 'access-points' })
     }
   },
+  methods: {
+    customFilter(value, search, item) {
+      if (typeof value === 'string')
+        return value.toLowerCase().includes(search.toLowerCase())
+
+      if (typeof value === 'object')
+        return Object.keys(value).some(
+          key =>
+            typeof value[key] === 'string' &&
+            value[key].toLowerCase().includes(search.toLowerCase())
+        )
+    }
+  },
   apollo: {
     accessPoint: {
       cachePolicy: 'cache-and-network',
@@ -90,6 +116,7 @@ export default {
               mac
               uptime
               lastSeen
+              ip
               user {
                 displayName
                 sAMAccountName