Feature: Add online status to each user (#452)

* Feature: Add online status to each user
* Add OnlineStatusable, add availability status to thumbnail

app/javascript/dashboard/components/widgets/Thumbnail.vue

@@ -16,12 +16,17 @@
       :size="avatarSize"
     />
     <img
-      v-if="badge === 'Channel::FacebookPage'"
+      v-if="badge === 'Channel::FacebookPage' && status !== ''"
       id="badge"
       class="source-badge"
       :style="badgeStyle"
       src="~dashboard/assets/images/fb-badge.png"
     />
+    <div
+      v-else-if="status === 'online'"
+      class="source-badge user--online"
+      :style="statusStyle"
+    ></div>
   </div>
 </template>
 <script>
@@ -41,6 +46,7 @@ export default {
   props: {
     src: {
       type: String,
+      default: '',
     },
     size: {
       type: String,
@@ -52,6 +58,11 @@ export default {
     },
     username: {
       type: String,
+      default: '',
+    },
+    status: {
+      type: String,
+      default: '',
     },
   },
   data() {
@@ -67,6 +78,10 @@ export default {
       const badgeSize = `${this.avatarSize / 3}px`;
       return { width: badgeSize, height: badgeSize };
     },
+    statusStyle() {
+      const statusSize = `${this.avatarSize / 4}px`;
+      return { width: statusSize, height: statusSize };
+    },
   },
   methods: {
     onImgError() {
@@ -78,6 +93,7 @@ export default {
 
 <style lang="scss" scoped>
 @import '~dashboard/assets/scss/variables';
+@import '~dashboard/assets/scss/foundation-settings';
 @import '~dashboard/assets/scss/mixins';
 
 .user-thumbnail-box {
@@ -91,11 +107,21 @@ export default {
   }
 
   .source-badge {
-    bottom: -$space-micro / 2;
+    bottom: -$space-micro;
     height: $space-slab;
     position: absolute;
     right: $zero;
     width: $space-slab;
   }
+
+  .user--online {
+    background: $success-color;
+    border-radius: 50%;
+    bottom: $space-micro;
+
+    &:after {
+      content: ' ';
+    }
+  }
 }
 </style>

app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue

@@ -7,6 +7,7 @@
           size="56px"
           :badge="contact.channel"
           :username="contact.name"
+          :status="contact.availability_status"
         />
         <div class="contact--details">
           <div class="contact--name">

app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue

@@ -26,10 +26,11 @@
                 <!-- Gravtar Image -->
                 <td>
                   <thumbnail
-                    :src="gravatarUrl(agent.email)"
+                    :src="agent.thumbnail"
                     class="columns"
                     :username="agent.name"
                     size="40px"
+                    :status="agent.availability_status"
                   />
                 </td>
                 <!-- Agent Name + Email -->