Chore: Contact Sidebar, conversation cleanup (#908)

- Update sidebar design - Move every contact data to contacts module - Revert go to next conversation feature - Fix issues with new conversation in action cable - Escape HTML content - Broadcast event when conversation.contact changes. Co-authored-by: Sojan <sojan@pepalo.com>
2020-06-02 22:59:02 +05:30
parent 8c52a3a953
commit f78df91dd2
22 changed files with 252 additions and 125 deletions
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue
@@ -1,6 +1,9 @@
 <template>
  <div class="contact-conversation--panel">
-    <contact-details-item :title="$t('CONTACT_PANEL.CONVERSATIONS.TITLE')" />
+    <contact-details-item
+      :title="$t('CONTACT_PANEL.CONVERSATIONS.TITLE')"
+      icon="ion-chatboxes"
+    />
    <div v-if="!uiFlags.isFetching">
      <p v-if="!previousConversations.length" class="no-results">
        {{ $t('CONTACT_PANEL.CONVERSATIONS.NO_RECORDS_FOUND') }}
@@ -75,13 +78,11 @@ export default {
@import '~dashboard/assets/scss/mixins';

 .contact-conversation--panel {
-  padding: $space-normal $space-normal $space-normal $space-medium;
-  padding-top: 0;
+  padding: $space-normal;
 }

 .no-results {
  margin: 0;
  color: $color-gray;
-  padding: 0 $space-small;
 }
 </style>
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactDetailsItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactDetailsItem.vue
@@ -25,7 +25,7 @@ export default {
@import '~dashboard/assets/scss/mixins';

 .conv-details--item {
-  padding-bottom: $space-medium;
+  padding-bottom: $space-normal;

  &:last-child {
    padding-bottom: 0;
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
@@ -7,7 +7,7 @@
      <div class="contact--info">
        <thumbnail
          :src="contact.thumbnail"
-          size="56px"
+          size="64px"
          :badge="contact.channel"
          :username="contact.name"
          :status="contact.availability_status"
@@ -57,14 +57,17 @@
      >
        {{ contact.additional_attributes.description }}
      </div>
+      <div class="contact--actions">
+        <button
+          v-if="!currentChat.muted"
+          class="button small clear contact--mute small-6"
+          @click="mute"
+        >
+          {{ $t('CONTACT_PANEL.MUTE_CONTACT') }}
+        </button>
+      </div>
    </div>
-    <conversation-labels :conversation-id="conversationId" />
-    <contact-conversations
-      v-if="contact.id"
-      :contact-id="contact.id"
-      :conversation-id="conversationId"
-    />
-    <div v-if="browser" class="conversation--details">
+    <div v-if="browser.browser_name" class="conversation--details">
      <contact-details-item
        v-if="browser.browser_name"
        :title="$t('CONTACT_PANEL.BROWSER')"
@@ -90,9 +93,12 @@
        icon="ion-clock"
      />
    </div>
-    <a v-show="!currentChat.muted" class="contact--mute" @click="mute">
-      {{ $t('CONTACT_PANEL.MUTE_CONTACT') }}
-    </a>
+    <conversation-labels :conversation-id="conversationId" />
+    <contact-conversations
+      v-if="contact.id"
+      :contact-id="contact.id"
+      :conversation-id="conversationId"
+    />
  </div>
 </template>

@@ -153,16 +159,16 @@ export default {
      return `${platformName || ''} ${platformVersion || ''}`;
    },
    contactId() {
-      return this.currentConversationMetaData.contact?.id;
+      return this.currentChat.meta?.sender?.id;
    },
    contact() {
      return this.$store.getters['contacts/getContact'](this.contactId);
    },
  },
  watch: {
-    contactId(newContactId, prevContactId) {
-      if (newContactId && newContactId !== prevContactId) {
-        this.$store.dispatch('contacts/show', { id: newContactId });
+    conversationId(newConversationId, prevConversationId) {
+      if (newConversationId && newConversationId !== prevConversationId) {
+        this.$store.dispatch('contacts/show', { id: this.contactId });
      }
    },
  },
@@ -186,11 +192,13 @@ export default {

 .contact--panel {
  @include border-normal-left;
+
+  background: white;
  font-size: $font-size-small;
  overflow-y: auto;
-  background: white;
  overflow: auto;
  position: relative;
+  padding: $space-normal;
 }

 .close-button {
@@ -200,23 +208,29 @@ export default {
  font-size: $font-size-default;
  color: $color-heading;
 }
+
 .contact--profile {
-  padding: $space-medium $space-normal 0 $space-medium;
  align-items: center;
+  padding: $space-medium 0 $space-one;
+
  .user-thumbnail-box {
    margin-right: $space-normal;
  }
 }

 .contact--details {
+  margin-top: $space-small;
+
  p {
    margin-bottom: 0;
  }
 }

 .contact--info {
-  display: flex;
  align-items: center;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
 }

 .contact--name {
@@ -230,10 +244,13 @@ export default {
 .contact--email {
  @include text-ellipsis;

-  color: $color-body;
+  color: $color-gray;
  display: block;
  line-height: $space-medium;
-  text-decoration: underline;
+
+  &:hover {
+    color: $color-woot;
+  }
 }

 .contact--bio {
@@ -241,7 +258,8 @@ export default {
 }

 .conversation--details {
-  padding: $space-two $space-normal $space-two $space-medium;
+  border-top: 1px solid $color-border-light;
+  padding: $space-large $space-normal;
 }

 .conversation--labels {
@@ -259,9 +277,18 @@ export default {
  }
 }

+.contact-conversation--panel {
+  border-top: 1px solid $color-border-light;
+}
+
 .contact--mute {
  color: $alert-color;
  display: block;
  text-align: center;
 }
+
+.contact--actions {
+  display: flex;
+  justify-content: center;
+}
 </style>
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationLabels.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationLabels.vue
@@ -3,40 +3,44 @@
    class="contact-conversation--panel sidebar-labels-wrap"
    :class="hasEditedClass"
  >
-    <div v-if="!conversationUiFlags.isFetching" class="wrap">
-      <div class="contact-conversation--list">
-        <label class="select-tags">
-          {{ $t('CONTACT_PANEL.LABELS.TITLE') }}
-          <multiselect
-            v-model="selectedLabels"
-            :options="savedLabels"
-            :tag-placeholder="$t('CONTACT_PANEL.LABELS.TAG_PLACEHOLDER')"
-            :placeholder="$t('CONTACT_PANEL.LABELS.PLACEHOLDER')"
-            :multiple="true"
-            :taggable="true"
-            hide-selected
-            :show-labels="false"
-            @tag="addLabel"
-          />
-        </label>
-        <div class="row align-middle align-justify">
-          <span v-if="labelUiFlags.isError" class="error">{{
-            $t('CONTACT_PANEL.LABELS.UPDATE_ERROR')
-          }}</span>
-          <button
-            v-if="hasEdited"
-            type="button"
-            class="button nice tiny"
-            @click="onUpdateLabels"
-          >
-            <spinner v-if="labelUiFlags.isUpdating" size="tiny" />
-            {{
-              labelUiFlags.isUpdating
-                ? 'saving...'
-                : $t('CONTACT_PANEL.LABELS.UPDATE_BUTTON')
-            }}
-          </button>
-        </div>
+    <div
+      v-if="!conversationUiFlags.isFetching"
+      class="contact-conversation--list"
+    >
+      <label class="select-tags">
+        <contact-details-item
+          :title="$t('CONTACT_PANEL.LABELS.TITLE')"
+          icon="ion-pricetags"
+        />
+        <multiselect
+          v-model="selectedLabels"
+          :options="savedLabels"
+          :tag-placeholder="$t('CONTACT_PANEL.LABELS.TAG_PLACEHOLDER')"
+          :placeholder="$t('CONTACT_PANEL.LABELS.PLACEHOLDER')"
+          :multiple="true"
+          :taggable="true"
+          hide-selected
+          :show-labels="false"
+          @tag="addLabel"
+        />
+      </label>
+      <div class="row align-middle align-justify">
+        <span v-if="labelUiFlags.isError" class="error">{{
+          $t('CONTACT_PANEL.LABELS.UPDATE_ERROR')
+        }}</span>
+        <button
+          v-if="hasEdited"
+          type="button"
+          class="button nice tiny"
+          @click="onUpdateLabels"
+        >
+          <spinner v-if="labelUiFlags.isUpdating" size="tiny" />
+          {{
+            labelUiFlags.isUpdating
+              ? 'saving...'
+              : $t('CONTACT_PANEL.LABELS.UPDATE_BUTTON')
+          }}
+        </button>
      </div>
    </div>
    <spinner v-else></spinner>
@@ -45,10 +49,12 @@

 <script>
 import { mapGetters } from 'vuex';
+import ContactDetailsItem from './ContactDetailsItem';
 import Spinner from 'shared/components/Spinner';

 export default {
  components: {
+    ContactDetailsItem,
    Spinner,
  },
  props: {
@@ -124,7 +130,7 @@ export default {
@import '~dashboard/assets/scss/mixins';

 .contact-conversation--panel {
-  padding: $space-normal $space-normal $space-normal $space-medium;
+  padding: $space-normal;
 }

 .conversation--label {
@@ -133,12 +139,8 @@ export default {
  font-size: $font-size-small;
  padding: $space-smaller;
 }
-.wrap {
-  margin-top: $space-slab;
-}

 .select-tags {
-  margin-top: $space-small;
  .multiselect {
    &:hover {
      cursor: pointer;
@@ -156,6 +158,7 @@ export default {
 .no-results-wrap {
  padding: 0 $space-small;
 }
+
 .no-results {
  margin: $space-normal 0 0 0;
  color: $color-gray;