From c4efe7f1684cc6f2e7bc1c85c42a4b440cb485ea Mon Sep 17 00:00:00 2001
From: Douglas Barone <douglasvbarone@gmail.com>
Date: Mon, 30 Nov 2020 13:51:24 -0400
Subject: [PATCH] Refactor UserPresence view

---
 web/src/components/UserPresenceStatusList.vue | 124 +++++++-----------
 1 file changed, 46 insertions(+), 78 deletions(-)

diff --git a/web/src/components/UserPresenceStatusList.vue b/web/src/components/UserPresenceStatusList.vue
index 72b9315..92fb804 100644
--- a/web/src/components/UserPresenceStatusList.vue
+++ b/web/src/components/UserPresenceStatusList.vue
@@ -1,83 +1,52 @@
 <template>
   <div v-if="!loading">
-    <v-divider />
-    <v-fade-transition group hide-on-leave appear>
-      <v-sheet
-        v-for="userPresence in userPresences"
-        :key="userPresence.user.id"
-      >
-        <v-list three-line>
-          <v-list-item>
-            <v-list-item-avatar size="52px" style="overflow: visible">
-              <v-badge
-                :color="
-                  userPresence.wifiDevices.some(
-                    wifiDevice => wifiDevice.status === 'ONLINE'
-                  )
-                    ? 'green'
-                    : 'grey'
-                "
-                bottom
-                offset-x="18px"
-                offset-y="18px"
-              >
-                <Avatar :src="userPresence.user.thumbnailPhoto" size="52px" />
-              </v-badge>
-            </v-list-item-avatar>
+    <v-list three-line>
+      <v-fade-transition group hide-on-leave appear>
+        <v-list-item
+          v-for="userPresence in userPresences"
+          :key="userPresence.user.id"
+          link
+        >
+          <v-list-item-avatar size="52px" style="overflow: visible">
+            <v-badge
+              :color="
+                userPresence.wifiDevices.some(
+                  wifiDevice => wifiDevice.status === 'ONLINE'
+                )
+                  ? 'green'
+                  : 'grey'
+              "
+              bottom
+              offset-x="18px"
+              offset-y="18px"
+            >
+              <Avatar :src="userPresence.user.thumbnailPhoto" size="52px" />
+            </v-badge>
+          </v-list-item-avatar>
 
-            <v-list-item-content>
-              <v-list-item-title>
-                {{ userPresence.user.displayName }}
-              </v-list-item-title>
-              <v-list-item-subtitle
-                v-if="userPresence.wifiDevices[0].status === 'OFFLINE'"
-              >
-                <span class="font-weight-medium">Off-line.</span>
-                Visto {{ userPresence.wifiDevices[0].lastSeen | from }}
-              </v-list-item-subtitle>
-              <v-list-item-subtitle v-else>
-                <span class="font-weight-medium">On-line</span>
-              </v-list-item-subtitle>
-              <v-list-item-subtitle>
-                Próximo ao AP
-                <span class="font-weight-medium"
-                  >{{ userPresence.wifiDevices[0].apName }}
-                </span>
-                <ApIcon :controller="userPresence.wifiDevices[0].controller" />
-              </v-list-item-subtitle>
-            </v-list-item-content>
-            <v-list-item-icon>
-              <span v-if="$vuetify.breakpoint.smAndUp" class="ml-1">
-                <v-badge
-                  color="green"
-                  bottom
-                  :content="
-                    userPresence.wifiDevices
-                      .filter(wifiDevice => wifiDevice.status === 'ONLINE')
-                      .length.toString()
-                  "
-                >
-                  <v-icon color="green">mdi-wifi</v-icon>
-                </v-badge>
-                <v-badge
-                  class="mx-4"
-                  color="grey"
-                  bottom
-                  :content="
-                    userPresence.wifiDevices
-                      .filter(wifiDevice => wifiDevice.status === 'OFFLINE')
-                      .length.toString()
-                  "
-                >
-                  <v-icon color="grey">mdi-wifi</v-icon>
-                </v-badge>
+          <v-list-item-content>
+            <v-list-item-title>
+              {{ userPresence.user.displayName }}
+            </v-list-item-title>
+            <v-list-item-subtitle
+              v-if="userPresence.wifiDevices[0].status === 'OFFLINE'"
+            >
+              <span class="font-weight-medium">Off-line.</span>
+              Visto {{ userPresence.wifiDevices[0].lastSeen | from }}
+            </v-list-item-subtitle>
+            <v-list-item-subtitle v-else>
+              <span class="font-weight-medium">On-line</span>
+            </v-list-item-subtitle>
+            <v-list-item-subtitle>
+              Próximo ao AP
+              <span class="font-weight-medium"
+                >{{ userPresence.wifiDevices[0].apName }}
               </span>
-            </v-list-item-icon>
-          </v-list-item>
-        </v-list>
-        <v-divider />
-      </v-sheet>
-    </v-fade-transition>
+            </v-list-item-subtitle>
+          </v-list-item-content>
+        </v-list-item>
+      </v-fade-transition>
+    </v-list>
   </div>
   <v-list v-else>
     <v-divider />
@@ -97,11 +66,10 @@
 
 <script>
 import Avatar from './Avatar'
-import ApIcon from './ApIcon'
 
 export default {
   name: 'UserPresenceStatusList',
-  components: { Avatar, ApIcon },
+  components: { Avatar },
   props: {
     userPresences: {
       type: Array,