Add search query

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">

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',

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',

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">
+              <div class="ml-1">
-                <v-row>
+                <v-badge color="grey darken-1" bottom left offset-y="12">
-                  <v-col class="shrink mr-2">
+                  <template #badge>
-                    <v-badge
+                    <small>
-                      color="grey darken-1"
+                      {{
-                      bottom
-                      offset-y="10"
-                      :content="
                         user.wifiDevices
                           .filter(wifiDevice => wifiDevice.status != 'ONLINE')
                           .length.toString()
-                      "
+                      }}
-                    >
+                    </small>
-                      <v-badge
+                  </template>
-                        color="green darken-1"
+                  <v-badge color="green darken-1" top left offset-y="12">
-                        top
+                    <template #badge>
-                        offset-y="10"
+                      <small>
-                        :content="
+                        {{
                           user.wifiDevices
                             .filter(wifiDevice => wifiDevice.status == 'ONLINE')
                             .length.toString()
-                        "
+                        }}
-                      >
+                      </small>
-                        <v-icon>mdi-cellphone-wireless</v-icon>
+                    </template>
-                      </v-badge>
+                    <avatar left size="28" :src="user.thumbnailPhoto" />
-                    </v-badge>
+                  </v-badge>
-                  </v-col>
+                </v-badge>
-                  <v-col>
+                {{ user.displayName }} ({{ user.sAMAccountName }})
-                    <avatar size="24" left :src="user.thumbnailPhoto" />
+              </div>
-                    {{ user.displayName }} ({{ user.sAMAccountName }})
-                  </v-col>
-                </v-row>
-              </v-container>
             </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',