RR displayed properly, Dummy RR vue component

packages/frontend/src/components/ListItemCommit.vue

@@ -24,27 +24,36 @@
       </v-list-item-subtitle>
     </v-list-item-content>
 
-    <v-list-item-action>
+    <v-list-item-action v-if="receivedUsersAll.length>0">
       <p class="text-end mt-2 mb-0">
-        <v-list-item-title>Received</v-list-item-title>
+        <!-- Can be also "Received X times" -->
+        <v-list-item-title>Last received</v-list-item-title>
       </p>
       <v-list-item-subtitle class="mt-2 caption">
         <p>
           by
-          <b>{{ commit.authorName }}</b>
+          <b>{{ receivedUsersAll[0].userId }}</b>
           &nbsp;
-          <timeago :datetime="commit.createdAt"></timeago>
+          <timeago :datetime="receivedUsersAll[0].time"></timeago>
         </p>
       </v-list-item-subtitle>
     </v-list-item-action>
 
     <v-list-item-action class="pl-4 pt-0 mt-0">
+      <div>
+      <!-- Fix avatar size for small views (e.g. Stream home) -->
       <user-avatar
-        :id="commit.authorId"
-        :avatar="commit.authorAvatar"
-        :name="commit.authorName"
-        :size="40"
-      />
+          v-for="user in receivedUsersUnique.slice(0, 4)"
+          :id="user"
+          :key="user"
+          :avatar="user.avatar"
+          :size="40" 
+          :name="user.name"
+        />
+        <v-avatar v-if="receivedUsersUnique.length > 4" size="30" color="grey">
+          <span class="white--text">+{{ receivedUsersUnique.length - 4 }}</span>
+        </v-avatar>
+        </div>
     </v-list-item-action>
 
     <v-list-item-action>
@@ -60,17 +69,19 @@
             {{ commit.branchName }}
           </v-chip>
         </span>
+        <!-- Suggestion to move commit SourceApp to the left -->
         <source-app-avatar :application-name="commit.sourceApplication" />
       </div>
     </v-list-item-action>
     <br />
-    {{ activity ? uniqueUsersThatReceived : 'loading' }}
+    
   </v-list-item>
 </template>
 <script>
 import gql from 'graphql-tag'
 import UserAvatar from './UserAvatar'
 import SourceAppAvatar from './SourceAppAvatar'
+//import userByIdQuery from '../graphql/userById.gql'
 
 export default {
   components: { UserAvatar, SourceAppAvatar },
@@ -106,12 +117,29 @@ export default {
         if (!this.streamId || !this.commit) return true
         return false
       }
+    },
+    userById: {
+      query: userByIdQuery,
+      variables() {
+        return {
+          id: this.id
+        }
+      },
+      skip() {
+        return !this.loggedIn
+      },
+
+      update: (data) => {
+        return data.user
+      }
     }
   },
   data() {
     return {
       activity: null,
-      uniqueUsersThatReceived: []
+      receivedUsersAll: [],
+      receivedNamesAll: [],
+      receivedUsersUnique: []
     }
   },
   computed: {
@@ -131,10 +159,12 @@ export default {
   },
   watch: {
     activity(val) {
-      console.log(val.items)
+      //console.log(val.items)
       let set = new Set()
       val.items.forEach((item) => set.add(item.userId))
-      this.uniqueUsersThatReceived = Array.from( set )
+      this.receivedUsersUnique = Array.from( set )
+      this.receivedUsersAll = val.items
+      let arr = new Array()
     }
   },
   methods: {

packages/frontend/src/components/ReceivedReceiptAvatar.vue

@@ -0,0 +1,102 @@
+<template>
+  <div style="display: inline-block">
+    <v-menu v-if="loggedIn" offset-x open-on-hover>
+      <template #activator="{ on, attrs }">
+        <v-avatar
+          v-if="userById"
+          class="ma-1"
+          color="grey lighten-3"
+          :size="size"
+          v-bind="attrs"
+          v-on="on"
+         
+        >
+          <v-img v-if="avatar" :src="avatar" />
+          <v-img v-else :src="`https://robohash.org/` + id + `.png?size=40x40`" />
+        </v-avatar>
+        <v-avatar v-else class="ma-1" :size="size" v-bind="attrs" v-on="on">
+          <v-img contain src="/logo.svg"></v-img>
+        </v-avatar>
+      </template>
+      <v-card v-if="userById" style="width: 200px" :to="isSelf ? '/profile' : '/profile/' + id">
+        <v-card-text v-if="!$apollo.loading" class="text-center">
+          <v-avatar class="my-4" color="grey lighten-3" :size="40">
+            <v-img v-if="avatar" :src="avatar" />
+            <v-img v-else :src="`https://robohash.org/` + id + `.png?size=40x40`" />
+          </v-avatar>
+          
+          <!-- Uncomment when email verification is in place -->
+          <!-- <div v-if="userById.verified" class="mb-1">
+            <v-chip color="primary" small>
+              <v-icon small class="mr-2">mdi-shield</v-icon>
+              verified email
+            </v-chip>
+          </div> -->
+
+          <div>
+            <b>{{ userById.name }}</b>
+          </div>
+          <div class="caption">
+          {{ userById.company }}
+          <br/>
+          {{ userById.bio ? 'Bio: ' + userById.bio : ''}}
+          </div>
+        </v-card-text>
+      </v-card>
+      <v-card v-else>
+        <v-card-text class="text-xs">
+          <b>Speckle Ghost</b>
+          <br />
+          This user no longer exists.
+        </v-card-text>
+      </v-card>
+    </v-menu>
+    <v-avatar v-else class="ma-1" color="grey lighten-3" :size="size">
+      <v-img v-if="avatar" :src="avatar" />
+      <v-img v-else :src="`https://robohash.org/` + id + `.png?size=40x40`" />
+    </v-avatar>
+  </div>
+</template>
+<script>
+import userByIdQuery from '../graphql/userById.gql'
+
+export default {
+  props: {
+    avatar: String,
+    name: String,
+    size: {
+      type: Number,
+      default: 42
+    },
+    id: {
+      type: String,
+      default: null
+    }
+  },
+  computed: {
+    isSelf() {
+      return this.id === localStorage.getItem('uuid')
+    },
+    loggedIn() {
+      return localStorage.getItem('uuid') !== null
+    }
+  },
+  apollo: {
+    userById: {
+      query: userByIdQuery,
+      variables() {
+        return {
+          id: this.id
+        }
+      },
+      skip() {
+        return !this.loggedIn
+      },
+
+      update: (data) => {
+        return data.user
+      }
+    }
+  }
+}
+</script>