From 18a46374f0b2985f6d2a3e3768f980a96b800c70 Mon Sep 17 00:00:00 2001
From: Douglas Barone <douglasvbarone@gmail.com>
Date: Fri, 18 Dec 2020 09:27:47 -0400
Subject: [PATCH] Fix transition

---
 web/src/views/UserPresence.vue | 155 ++++++++++++++++-----------------
 1 file changed, 77 insertions(+), 78 deletions(-)

diff --git a/web/src/views/UserPresence.vue b/web/src/views/UserPresence.vue
index d15f6d9..d4f2755 100644
--- a/web/src/views/UserPresence.vue
+++ b/web/src/views/UserPresence.vue
@@ -50,90 +50,90 @@
         </v-scale-transition>
       </div>
 
-      <transition-group
+      <div
         v-if="
           !$apollo.queries.userPresence.loading || pagedUserPresences.length
         "
-        name="scale-transition"
-        tag="div"
-        class="layout row row--dense wrap"
-        mode="out-in"
       >
-        <v-col
-          v-for="userPresence in pagedUserPresences"
-          :key="userPresence.id"
-          cols="12"
-          sm="6"
-          md="4"
-          lg="3"
-        >
-          <v-card
-            outlined
-            class="border-highlight light-shadow"
-            :class="{
-              online: userPresence.status == 'ONLINE',
-              recent: userPresence.status == 'RECENT'
-            }"
+        <v-fade-transition class="layout row row--dense wrap" group>
+          <v-col
+            v-for="userPresence in pagedUserPresences"
+            :key="userPresence.id"
+            cols="12"
+            sm="6"
+            md="4"
+            lg="3"
           >
-            <v-list three-line>
-              <v-list-item>
-                <v-list-item-avatar size="52px" style="overflow: visible">
-                  <v-badge
-                    :color="color(userPresence.status)"
-                    bottom
-                    offset-x="18px"
-                    offset-y="18px"
-                  >
-                    <Avatar :src="userPresence.thumbnailPhoto" size="52px" />
-                  </v-badge>
-                </v-list-item-avatar>
+            <v-card
+              outlined
+              class="border-highlight light-shadow"
+              :class="{
+                online: userPresence.status == 'ONLINE',
+                recent: userPresence.status == 'RECENT'
+              }"
+            >
+              <v-list three-line>
+                <v-list-item>
+                  <v-list-item-avatar size="52px" style="overflow: visible">
+                    <v-badge
+                      :color="color(userPresence.status)"
+                      bottom
+                      offset-x="18px"
+                      offset-y="18px"
+                    >
+                      <Avatar :src="userPresence.thumbnailPhoto" size="52px" />
+                    </v-badge>
+                  </v-list-item-avatar>
 
-                <v-list-item-content>
-                  <v-list-item-title>
-                    {{ userPresence.displayName }}
-                  </v-list-item-title>
+                  <v-list-item-content>
+                    <v-list-item-title>
+                      {{ userPresence.displayName }}
+                    </v-list-item-title>
 
-                  <template v-if="userPresence.status == 'ONLINE'">
-                    <v-list-item-subtitle>
-                      <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.apName }}
-                      </span>
-                    </v-list-item-subtitle>
-                  </template>
+                    <template v-if="userPresence.status == 'ONLINE'">
+                      <v-list-item-subtitle>
+                        <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.apName }}
+                        </span>
+                      </v-list-item-subtitle>
+                    </template>
 
-                  <template v-if="userPresence.status == 'RECENT'">
-                    <v-list-item-subtitle>
-                      <span class="font-weight-medium">Visto recentemente</span>
-                    </v-list-item-subtitle>
-                    <v-list-item-subtitle>
-                      Próximo ao AP
-                      <span class="font-weight-medium">
-                        {{ userPresence.apName }}
-                      </span>
-                    </v-list-item-subtitle>
-                  </template>
+                    <template v-if="userPresence.status == 'RECENT'">
+                      <v-list-item-subtitle>
+                        <span class="font-weight-medium"
+                          >Visto recentemente</span
+                        >
+                      </v-list-item-subtitle>
+                      <v-list-item-subtitle>
+                        Próximo ao AP
+                        <span class="font-weight-medium">
+                          {{ userPresence.apName }}
+                        </span>
+                      </v-list-item-subtitle>
+                    </template>
 
-                  <template v-if="userPresence.status == 'OFFLINE'">
-                    <v-list-item-subtitle>
-                      <span class="font-weight-medium">Off-line</span>
-                    </v-list-item-subtitle>
-                    <v-list-item-subtitle>
-                      <span class="font-weight-medium">
-                        Visto
-                        {{ userPresence.lastSeen | from }}
-                      </span>
-                    </v-list-item-subtitle>
-                  </template>
-                </v-list-item-content>
-              </v-list-item>
-            </v-list>
-          </v-card>
-        </v-col>
-      </transition-group>
+                    <template v-if="userPresence.status == 'OFFLINE'">
+                      <v-list-item-subtitle>
+                        <span class="font-weight-medium">Off-line</span>
+                      </v-list-item-subtitle>
+                      <v-list-item-subtitle>
+                        <span class="font-weight-medium">
+                          Visto
+                          {{ userPresence.lastSeen | from }}
+                        </span>
+                      </v-list-item-subtitle>
+                    </template>
+                  </v-list-item-content>
+                </v-list-item>
+              </v-list>
+            </v-card>
+          </v-col>
+        </v-fade-transition>
+      </div>
 
       <div v-else>
         <div class="layout row row--dense wrap">
@@ -156,7 +156,6 @@
           </v-col>
         </div>
       </div>
-
       <v-alert
         v-if="!pagedUserPresences.length && search"
         icon="mdi-account-search"
@@ -166,7 +165,7 @@
         Sua pesquisa não encontrou nenhum usuário.
       </v-alert>
 
-      <v-footer class="mt-6 light-shadow" outlined rounded>
+      <v-footer class="mt-6 light-shadow" absolute>
         <span v-if="$vuetify.breakpoint.mdAndUp">
           Ordenando por <em>"visto por último"</em>
         </span>
@@ -239,7 +238,7 @@ export default {
   },
   apollo: {
     userPresence: {
-      fetchPolicy: 'cache-and-network',
+      // fetchPolicy: 'cache-and-network',
       query: gql`
         query($search: String = "") {
           userPresence(search: $search) {