From 3395e3a0a963f5a0cbe7a261278ca2a4e7956f2b Mon Sep 17 00:00:00 2001
From: Douglas Barone <douglasvbarone@gmail.com>
Date: Thu, 7 Apr 2022 14:05:17 -0400
Subject: [PATCH] Add search query

---
 web/src/components/NavList.vue |  1 -
 web/src/views/UserPresence.vue | 10 ++++++
 web/src/views/WifiDevices.vue  | 10 ++++++
 web/src/views/WifiUsers.vue    | 61 ++++++++++++++++++----------------
 4 files changed, 53 insertions(+), 29 deletions(-)

diff --git a/web/src/components/NavList.vue b/web/src/components/NavList.vue
index 4532b67..e1b210a 100755
--- a/web/src/components/NavList.vue
+++ b/web/src/components/NavList.vue
@@ -23,7 +23,6 @@
             class="ml-4"
             :to="item.route"
             :disabled="item.disabled"
-            :exact="'exact' in item ? item.exact : true"
             dense
           >
             <v-list-item-icon class="mr-3">
diff --git a/web/src/views/UserPresence.vue b/web/src/views/UserPresence.vue
index 9c2df95..1533857 100644
--- a/web/src/views/UserPresence.vue
+++ b/web/src/views/UserPresence.vue
@@ -290,6 +290,16 @@ export default {
       helpDialog: false
     }
   },
+  watch: {
+    search(newValue) {
+      if (!newValue) this.$router.push({ query: {} })
+      else if (this.$route.query.search != newValue)
+        this.$router.push({ query: { search: newValue } })
+    }
+  },
+  mounted() {
+    this.search = this.$route.query.search || ''
+  },
   apollo: {
     userPresence: {
       // fetchPolicy: 'cache-and-network',
diff --git a/web/src/views/WifiDevices.vue b/web/src/views/WifiDevices.vue
index b4cbf19..4acec43 100644
--- a/web/src/views/WifiDevices.vue
+++ b/web/src/views/WifiDevices.vue
@@ -207,6 +207,16 @@ export default {
     itemsPerPageArray: [15, 30, 60, 120],
     page: 1
   }),
+  watch: {
+    search(newValue) {
+      if (!newValue) this.$router.push({ query: {} })
+      else if (this.$route.query.search != newValue)
+        this.$router.push({ query: { search: newValue } })
+    }
+  },
+  mounted() {
+    this.search = this.$route.query.search || ''
+  },
   apollo: {
     wifiDevices: {
       fetchPolicy: 'cache-and-network',
diff --git a/web/src/views/WifiUsers.vue b/web/src/views/WifiUsers.vue
index 98ba4a1..d2e61a1 100644
--- a/web/src/views/WifiUsers.vue
+++ b/web/src/views/WifiUsers.vue
@@ -42,39 +42,32 @@
         <v-expansion-panels>
           <v-expansion-panel v-for="user in items" :key="user.sAMAccountName">
             <v-expansion-panel-header>
-              <v-container class="ma-0 pa-0">
-                <v-row>
-                  <v-col class="shrink mr-2">
-                    <v-badge
-                      color="grey darken-1"
-                      bottom
-                      offset-y="10"
-                      :content="
+              <div class="ml-1">
+                <v-badge color="grey darken-1" bottom left offset-y="12">
+                  <template #badge>
+                    <small>
+                      {{
                         user.wifiDevices
                           .filter(wifiDevice => wifiDevice.status != 'ONLINE')
                           .length.toString()
-                      "
-                    >
-                      <v-badge
-                        color="green darken-1"
-                        top
-                        offset-y="10"
-                        :content="
+                      }}
+                    </small>
+                  </template>
+                  <v-badge color="green darken-1" top left offset-y="12">
+                    <template #badge>
+                      <small>
+                        {{
                           user.wifiDevices
                             .filter(wifiDevice => wifiDevice.status == 'ONLINE')
                             .length.toString()
-                        "
-                      >
-                        <v-icon>mdi-cellphone-wireless</v-icon>
-                      </v-badge>
-                    </v-badge>
-                  </v-col>
-                  <v-col>
-                    <avatar size="24" left :src="user.thumbnailPhoto" />
-                    {{ user.displayName }} ({{ user.sAMAccountName }})
-                  </v-col>
-                </v-row>
-              </v-container>
+                        }}
+                      </small>
+                    </template>
+                    <avatar left size="28" :src="user.thumbnailPhoto" />
+                  </v-badge>
+                </v-badge>
+                {{ user.displayName }} ({{ user.sAMAccountName }})
+              </div>
             </v-expansion-panel-header>
             <v-expansion-panel-content>
               <v-expansion-panels accordion>
@@ -85,11 +78,13 @@
                   <v-expansion-panel-header>
                     <div>
                       <v-icon
+                        v-if="device.status == 'ONLINE'"
                         left
-                        :color="device.status == 'ONLINE' ? 'green' : ''"
+                        color="green"
                       >
                         mdi-cellphone-wireless
                       </v-icon>
+                      <v-icon v-else left> mdi-cellphone </v-icon>
                       {{ device.hostname || device.mac }} {{ device.oui }}
                     </div>
                   </v-expansion-panel-header>
@@ -220,6 +215,16 @@ export default {
       }))
     }
   },
+  watch: {
+    search(newValue) {
+      if (!newValue) this.$router.push({ query: {} })
+      else if (this.$route.query.search != newValue)
+        this.$router.push({ query: { search: newValue } })
+    }
+  },
+  mounted() {
+    this.search = this.$route.query.search || ''
+  },
   apollo: {
     wifiUsers: {
       fetchPolicy: 'cache-and-network',