Merge pull request #22 from mctekk/feat/clickable-header

Add visits instead of days

Author: jesusantguerrero

src/components/chat/messager.vue

@@ -26,7 +26,7 @@
           :is-sender="isSender(message)"
           :show-sender="channel.type == 'public'"
           :is-read="isRead(message)"
-          :previous-message="index > 0 ? messages[index -1 ] : {}"
+          :previous-message="index > 0 ? messages[index - 1] : {}"
           :members="members"
           :message="message"
         >
@@ -167,27 +167,31 @@ export default {
     },
 
     updateMembers() {
-        this.channel.getMembers().then(members => {
-            this.members = members.map(member => {
-                member.userAttributes = {};
-                return member;
-            });
-
-            members.map(member => {
-                member.getUser().then(user => {
-                    const index = this.members.findIndex(localMember => localMember.identity.toLowerCase() == member.state.identity.toLowerCase())
-                    if (index >= 0) {
-                        const userAttributes =  user.attributes;
-                        this.$set(this.members[index], 'userAttributes', userAttributes)
-                    }
-                });
-            })
+      this.channel.getMembers().then(members => {
+        this.members = members.map(member => {
+          member.userAttributes = {};
+          return member;
         });
+
+        members.map(member => {
+          member.getUser().then(user => {
+            const index = this.members.findIndex(
+              localMember =>
+                localMember.identity.toLowerCase() ==
+                member.state.identity.toLowerCase()
+            );
+            if (index >= 0) {
+              const userAttributes = user.attributes;
+              this.$set(this.members[index], "userAttributes", userAttributes);
+            }
+          });
+        });
+      });
     },
 
     async getDescription() {
       this.updateMembers();
-       return await this.channel.getAttributes().then(attributes => {
+      return await this.channel.getAttributes().then(attributes => {
         this.description = attributes.description;
       });
     },
@@ -196,23 +200,23 @@ export default {
     },
 
     sendMessage(message, attributes = {}) {
-        if (message.includes("/destroy")) {
-            this.channel.delete().then(function(channel) {
-                console.log('Deleted channel: ' + channel.sid);
-            });;
-            this.clearMessageForm()
-            return
-        }
+      if (message.includes("/destroy")) {
+        this.channel.delete().then(function(channel) {
+          console.log("Deleted channel: " + channel.sid);
+        });
+        this.clearMessageForm();
+        return;
+      }
       if (message.trim()) {
         this.channel.sendMessage(message, attributes);
-        this.clearMessageForm()
+        this.clearMessageForm();
       }
     },
 
     clearMessageForm() {
-        setTimeout(() => {
-          this.formData.message = "";
-        });
+      setTimeout(() => {
+        this.formData.message = "";
+      });
     },
 
     listenTyping(e) {
@@ -226,12 +230,12 @@ export default {
     },
 
     scrollToBottom(behavior) {
-        this.$nextTick(() => {
+      this.$nextTick(() => {
         const el = this.$refs.MessageContainer;
-            if (el) {
-                el.scrollTo({ top: el.scrollHeight, behavior });
-            }
-        })
+        if (el) {
+          el.scrollTo({ top: el.scrollHeight, behavior });
+        }
+      });
     },
 
     removeActiveChannelListeners() {
@@ -242,6 +246,10 @@ export default {
     },
 
     getMessages() {
+      this.getMessagesFunc();
+    },
+
+    getMessagesFunc() {
       this.channel.getMessages(30).then(page => {
         this.messages = page.items || [];
         this.scrollToBottom();
@@ -286,62 +294,61 @@ export default {
 
 <style lang="scss">
 .message-list {
-    position: relative;
-    flex: 1 1 0;
-    order: 2;
-
-    &__body {
-        padding: 0.75rem 1.25rem;
-        width: fit-content;
-        border-radius: 1rem;
-        border-top-left-radius: 0;
-        width: 100%;
-    }
+  position: relative;
+  flex: 1 1 0;
+  order: 2;
+
+  &__body {
+    padding: 0.75rem 1.25rem;
+    width: fit-content;
+    border-radius: 1rem;
+    border-top-left-radius: 0;
+    width: 100%;
+  }
 
-    &__body.padding-0 {
-        padding: 0 0 0 0;
-    }
+  &__body.padding-0 {
+    padding: 0 0 0 0;
+  }
 
-    &__item {
-        margin: 15px;
-        width: fit-content;
-        padding: 0 1rem;
+  &__item {
+    margin: 15px;
+    width: fit-content;
+    padding: 0 1rem;
 
     &.message-sender {
-        right: 0;
-        margin-left: auto;
-
-        .message-list__body {
-            border-radius: 1rem;
-            border-top-right-radius: 0;
-        }
+      right: 0;
+      margin-left: auto;
 
+      .message-list__body {
+        border-radius: 1rem;
+        border-top-right-radius: 0;
+      }
     }
 
     a {
-        color: #eee;
-        text-decoration: underline;
+      color: #eee;
+      text-decoration: underline;
     }
 
     .me {
-        font-weight: bold;
-    }
+      font-weight: bold;
     }
+  }
 
-    &__text {
-        white-space: pre-wrap;
-    }
+  &__text {
+    white-space: pre-wrap;
+  }
 
-    .message-container {
-        position: absolute;
-        top: 0;
-        z-index: 100;
-        display: block;
-        width: 100%;
-        height: 100%;
-        overflow-x: hidden;
-        overflow-y: scroll;
-    }
+  .message-container {
+    position: absolute;
+    top: 0;
+    z-index: 100;
+    display: block;
+    width: 100%;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: scroll;
+  }
 }
 
 .message-toolbar {

src/components/chat/profile-image.vue

@@ -35,7 +35,9 @@ export default {
       border-radius: 50%;
   }
 
-  &::after {
+
+
+  &.status-active::after {
     content: "";
     background: green;
     width: 14px;

src/components/chat/side-list-item.vue

@@ -17,8 +17,7 @@
         <i class="fas fa-history"></i>
       </div>
       <div class="title-indicators" v-else>
-        <span> {{ daysActive() }} Days </span>
-        <i class="fa fa-calendar"></i>
+        <span> {{ visits() }} Visits </span>
       </div>
     </div>
 
@@ -78,6 +77,7 @@ export default {
         if (this.channel.attributes && data.lead_id == this.channel.attributes.lead_id) {
             this.$set(this.channel.attributes, "chrono_start_date", data.chrono_start_date);
             this.$set(this.channel.attributes, "is_chrono_running", data.is_chrono_running)
+            this.$set(this.channel.attributes, "visits", data.visits)
             this.watchTime();
         }
     });
@@ -176,8 +176,8 @@ export default {
       this.trackTime(this.channel.attributes);
     },
 
-    daysActive() {
-      return Tracker.daysPassed(this.channel.attributes.lead_created_at || this.channel.dateCreated);
+    visits() {
+      return Number(this.channel.attributes.visits || this.channel.visitis  || 0);
     },
 
     trackTime(formData) {

src/components/chat/side.vue

@@ -166,7 +166,7 @@ export default {
   },
   methods: {
     updateMembers(channel) {
-      channel.getMembers().then((members) => {
+      channel.getMembers().then(members => {
         this.$set(this.channelData[channel.sid], "members", members);
 
         members.map((member, index) => {
@@ -248,23 +248,16 @@ export default {
     async updateUnread(channel) {
       let unreadMessages = 0;
       const sender = await this.getSender(channel);
-      const isDifferentChannel =
-        !this.activeChannel || this.activeChannel.sid != channel.sid;
-      if (
-        this.channelData[channel.sid].lastMessage &&
-        sender &&
-        isDifferentChannel
-      ) {
-        unreadMessages =
-          this.channelData[channel.sid].lastMessage.index -
-            sender.lastConsumedMessageIndex || 0;
+      const isDifferentChannel = !this.activeChannel || this.activeChannel.sid != channel.sid;
+      if ( this.channelData[channel.sid].lastMessage && sender && isDifferentChannel ) {
+         //   If the message doesnt come from him
+          if (this.channelData[channel.sid].lastMessage.author !== sender.identity) {
+            unreadMessages = this.channelData[channel.sid].lastMessage.index - sender.lastConsumedMessageIndex || 0;
+            this.$set(this.channelData[channel.sid], "unreadMessages", unreadMessages);
+            return unreadMessages;
+          }
       }
-      this.$set(
-        this.channelData[channel.sid],
-        "unreadMessages",
-        unreadMessages
-      );
-      return unreadMessages;
+
     },
   },
 };