Updates sidebar on dashboard

2025-11-02 03:57:52 +00:00 · 2020-02-11 19:21:55 +05:30
parent 30f4c08143
commit 6186d14593
20 changed files with 394 additions and 112 deletions
--- a/app/javascript/dashboard/api/conversations.js
+++ b/app/javascript/dashboard/api/conversations.js
@@ -10,8 +10,8 @@ class ConversationApi extends ApiClient {
    return axios.get(`${this.url}/${conversationID}/labels`);
  }

-  createLabels(conversationID) {
-    return axios.get(`${this.url}/${conversationID}/labels`);
+  updateLabels(conversationID, labels) {
+    return axios.post(`${this.url}/${conversationID}/labels`, { labels });
  }
 }

--- a/app/javascript/dashboard/assets/scss/_mixins.scss
+++ b/app/javascript/dashboard/assets/scss/_mixins.scss
@@ -1,3 +1,5 @@
+@import '~widget/assets/scss/mixins';
+
 //borders
@mixin border-nil() {
  border-color: transparent;
@@ -191,28 +193,42 @@
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-bottom: $size solid $color;
-    } @else if $direction == 'right' {
+  }
+
+  @else if $direction=='right' {
    border-top: $size solid transparent;
    border-bottom: $size solid transparent;
    border-left: $size solid $color;
-    } @else if $direction == 'bottom' {
+  }
+
+  @else if $direction=='bottom' {
    border-top: $size solid $color;
    border-right: $size solid transparent;
    border-left: $size solid transparent;
-    } @else if $direction == 'left' {
+  }
+
+  @else if $direction=='left' {
    border-top: $size solid transparent;
    border-right: $size solid $color;
    border-bottom: $size solid transparent;
-    } @else if $direction == 'top-left' {
+  }
+
+  @else if $direction=='top-left' {
    border-top: $size solid $color;
    border-right: $size solid transparent;
-    } @else if $direction == 'top-right' {
+  }
+
+  @else if $direction=='top-right' {
    border-top: $size solid $color;
    border-left: $size solid transparent;
-    } @else if $direction == 'bottom-left' {
+  }
+
+  @else if $direction=='bottom-left' {
    border-bottom: $size solid $color;
    border-right: $size solid transparent;
-    } @else if $direction == 'bottom-right' {
+  }
+
+  @else if $direction=='bottom-right' {
    border-bottom: $size solid $color;
    border-left: $size solid transparent;
  }
--- a/app/javascript/dashboard/assets/scss/_variables.scss
+++ b/app/javascript/dashboard/assets/scss/_variables.scss
@@ -53,6 +53,16 @@ $color-body: #3C4858;
 $color-heading: #1F2D3D;
 $color-extra-light-blue: #F5F7F9;

+$primary-color: $color-woot;
+$secondary-color: #FF5216;
+$success-color: #13ce66;
+$warning-color: #ffc82c;
+$alert-color: #ff4949;
+
+// Color-palettes
+
+$color-primary-dark: darken($color-woot, 20%);
+
 // Thumbnail
 $thumbnail-radius: 4rem;

@@ -81,3 +91,6 @@ $swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !d

 // Ionicons
 $ionicons-font-path: '~ionicons/fonts';
+
+// Transitions
+$transition-ease-in: all 0.250s ease-in;
--- a/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
+++ b/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
@@ -2,6 +2,12 @@
  margin-bottom: $space-normal;
  min-height: 38px;

+  &.multiselect--active {
+    >.multiselect__tags {
+      border-color: $color-woot;
+    }
+  }
+
  >.multiselect__tags {
    @include margin(0);
    border: 1px solid $color-border;
@@ -13,12 +19,34 @@
    }

    .multiselect__tag {
+
+      $vertical-space: $space-smaller+$space-micro;
      margin-top: $space-one;
+      background: $color-background;
+      color: $color-heading;
+      padding: $vertical-space $space-medium $vertical-space $space-one;
+    }
+
+    .multiselect__tag-icon {
+      line-height: $space-medium + $space-micro;
+
+      &:after {
+        color: $color-primary-dark;
+      }
+
+      &:hover {
+        background: $color-background;
+
+        &:after {
+          color: $color-woot;
+        }
+      }
    }

    .multiselect__input {
      @include ghost-input;
      @include padding($zero);
+      font-size: $font-size-small;

      margin-bottom: $zero;
    }
@@ -41,4 +69,50 @@
      top: 60%;
    }
  }
+
+  .multiselect__content .multiselect__option {
+    font-size: $font-size-small;
+    font-weight: $font-weight-normal;
+
+    &.multiselect__option--highlight {
+      font-weight: $font-weight-medium;
+    }
+  }
+}
+
+
+.sidebar-labels-wrap {
+
+  &.has-edited,
+  &:hover {
+    .multiselect {
+      cursor: pointer;
+      margin-top: $space-small;
+
+      >.multiselect__tags {
+        border-color: $color-border;
+      }
+
+      >.multiselect__select {
+        visibility: visible;
+      }
+    }
+  }
+
+  .multiselect {
+
+    >.multiselect__select {
+      visibility: hidden;
+    }
+
+    >.multiselect__tags {
+      border-color: transparent;
+    }
+
+    &.multiselect--active {
+      >.multiselect__tags {
+        border-color: $color-woot;
+      }
+    }
+  }
 }
--- a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
@@ -27,6 +27,15 @@
  >.icon {
    font-size: $font-size-default;
  }
+
+  &.tiny {
+    font-size: $font-size-mini;
+    padding: $space-small $space-slab;
+  }
+
+  &.round {
+    border-radius: $space-larger;
+  }
 }

 .button--fixed-right-top {
--- a/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss
@@ -5,6 +5,7 @@
  @include flex;
  @include flex-align($x: justify, $y: middle);
  @include border-normal-bottom;
+
  // Resolve Button
  .button {
    @include margin(0);
@@ -44,6 +45,7 @@
    .user--name {
      @include margin(0);
      font-size: $font-size-medium;
+      text-transform: capitalize;
    }

    .user--profile__meta {
--- a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
@@ -47,16 +47,19 @@
  @include background-gray;
  @include margin(0);
  @include border-normal-left;
+
  .current-chat {
    @include flex;
    @include full-height;
    flex-direction: column;
    @include flex-align(center, middle);
+
    div {
      @include flex;
      @include full-height;
      flex-direction: column;
      @include flex-align(center, middle);
+
      img {
        @include margin($space-normal);
        width: 10rem;
@@ -147,7 +150,7 @@
      @include flex-align(right, null);

      .wrap {
-        margin-right: $space-small;
+        margin-right: $space-normal;
        text-align: right;
      }

--- a/app/javascript/dashboard/assets/scss/widgets/_tabs.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_tabs.scss
@@ -13,6 +13,7 @@
  .tabs-title {
    a {
      font-size: $font-size-default;
+      font-weight: $font-weight-medium;
      padding-bottom: $space-slab;
      padding-top: $space-slab;
    }
--- a/app/javascript/dashboard/components/widgets/Thumbnail.vue
+++ b/app/javascript/dashboard/components/widgets/Thumbnail.vue
@@ -23,7 +23,7 @@
      src="~dashboard/assets/images/fb-badge.png"
    />
    <div
-      v-else-if="badge === 'Channel::WebWidget' && status === 'online'"
+      v-else-if="status === 'online'"
      class="source-badge user--online"
      :style="statusStyle"
    ></div>
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
@@ -8,7 +8,7 @@
        :username="chat.meta.sender.name"
      />
      <div class="user--profile__meta">
-        <h3 v-if="!isContactPanelOpen" class="user--name text-truncate">
+        <h3 class="user--name text-truncate">
          {{ chat.meta.sender.name }}
        </h3>
        <button
@@ -93,7 +93,9 @@ export default {
      ];
    },
    viewProfileButtonLabel() {
-      return `${this.isContactPanelOpen ? 'Hide' : 'View'}  Profile`;
+      return `${
+        this.isContactPanelOpen ? 'Close' : 'Open'
+      }  Conversation Details`;
    },
  },

--- a/app/javascript/dashboard/i18n/locale/en/contact.json
+++ b/app/javascript/dashboard/i18n/locale/en/contact.json
@@ -1,5 +1,6 @@
 {
  "CONTACT_PANEL": {
+    "CONVERSATION_TITLE": "Conversation Details",
    "BROWSER": "Browser",
    "OS": "Operating System",
    "INITIATED_FROM": "Initiated from",
@@ -10,7 +11,10 @@
    },
    "LABELS": {
      "NO_RECORDS_FOUND": "There are no labels associated to this conversation.",
-      "TITLE": "Labels"
+      "TITLE": "Conversation Labels",
+      "UPDATE_BUTTON": "Update Labels",
+      "ADD_BUTTON": "Add Labels",
+      "UPDATE_ERROR": "Couldn't update labels, try Again 🧐"
    }
  }
 }
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue
@@ -1,13 +1,10 @@
 <template>
  <div class="contact-conversation--panel">
-    <contact-details-item
-      icon="ion-chatbubbles"
-      :title="$t('CONTACT_PANEL.CONVERSATIONS.TITLE')"
-    />
+    <contact-details-item :title="$t('CONTACT_PANEL.CONVERSATIONS.TITLE')" />
    <div v-if="!uiFlags.isFetching">
-      <i v-if="!previousConversations.length">
+      <p v-if="!previousConversations.length" class="no-results">
        {{ $t('CONTACT_PANEL.CONVERSATIONS.NO_RECORDS_FOUND') }}
-      </i>
+      </p>
      <div v-else class="contact-conversation--list">
        <conversation-card
          v-for="conversation in previousConversations"
@@ -78,11 +75,17 @@ export default {
@import '~dashboard/assets/scss/mixins';

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

 .contact-conversation--list {
-  margin-top: -$space-normal;
+  margin-top: $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
@@ -1,9 +1,9 @@
 <template>
  <div class="conv-details--item">
-    <div class="conv-details--item__label">
+    <h4 class="conv-details--item__label">
      <i :class="icon" class="conv-details--item__icon"></i>
      {{ title }}
-    </div>
+    </h4>
    <div v-if="value" class="conv-details--item__value">
      {{ value }}
    </div>
@@ -14,7 +14,7 @@
 export default {
  props: {
    title: { type: String, required: true },
-    icon: { type: String, required: true },
+    icon: { type: String, default: '' },
    value: { type: [String, Number], default: '' },
  },
 };
@@ -32,16 +32,18 @@ export default {
  }

  .conv-details--item__icon {
-    padding-right: $space-micro;
+    padding-right: $space-smaller;
  }

  .conv-details--item__label {
    font-weight: $font-weight-medium;
    margin-bottom: $space-micro;
+    font-size: $font-size-small;
  }

  .conv-details--item__value {
    word-break: break-all;
+    margin-top: $space-slab;
  }
 }
 </style>
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
@@ -48,6 +48,12 @@
        {{ contact.additional_attributes.description }}
      </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">
      <contact-details-item
        v-if="browser.browser_name"
@@ -74,13 +80,6 @@
        icon="ion-clock"
      />
    </div>
-    <contact-conversations
-      v-if="contact.id"
-      :contact-id="contact.id"
-      :conversation-id="conversationId"
-    />
-
-    <conversation-labels :conversation-id="conversationId" />
  </div>
 </template>

@@ -169,9 +168,11 @@ export default {
 }

 .contact--profile {
-  width: 100%;
-  padding: $space-normal $space-medium $zero;
+  padding: $space-normal;
  align-items: center;
+  margin: $space-medium $space-normal 0;
+  @include elegant-card;
+  @include light-shadow;

  .user-thumbnail-box {
    margin-right: $space-normal;
@@ -191,9 +192,10 @@ export default {

 .contact--name {
  @include text-ellipsis;
+  text-transform: capitalize;

  font-weight: $font-weight-bold;
-  font-size: $font-size-default;
+  font-size: $font-size-medium;
 }

 .contact--email {
@@ -210,8 +212,7 @@ export default {
 }

 .conversation--details {
-  padding: $space-medium;
-  width: 100%;
+  padding: $space-two $space-normal;
 }

 .conversation--labels {
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationLabels.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationLabels.vue
@@ -1,21 +1,51 @@
 <template>
-  <div class="contact-conversation--panel">
-    <contact-details-item
-      icon="ion-pricetags"
-      :title="$t('CONTACT_PANEL.LABELS.TITLE')"
-    />
-    <div v-if="!uiFlags.isFetching">
-      <i v-if="!labels.length">
-        {{ $t('CONTACT_PANEL.LABELS.NO_RECORDS_FOUND') }}
-      </i>
-      <div v-else class="contact-conversation--list">
-        <span
-          v-for="label in labels"
-          :key="label"
-          class="conversation--label label primary"
+  <div
+    class="contact-conversation--panel sidebar-labels-wrap"
+    :class="hasEditedClass"
  >
-          {{ label }}
-        </span>
+    <div v-if="!conversationUiFlags.isFetching" class="wrap">
+      <div class="contact-conversation--list">
+        <label class="select-tags">
+          {{ $t('CONTACT_PANEL.LABELS.TITLE') }}
+          <p v-if="!savedLabels.length && !showLabelInput" class="no-results">
+            {{ $t('CONTACT_PANEL.LABELS.NO_RECORDS_FOUND') }}
+            <button
+              type="button success"
+              class="button nice tiny"
+              @click="showLabelBox"
+            >
+              {{ $t('CONTACT_PANEL.LABELS.ADD_BUTTON') }}
+            </button>
+          </p>
+          <multiselect
+            v-if="showLabelInput || savedLabels.length"
+            v-model="selectedLabels"
+            :options="savedLabels"
+            tag-placeholder="Add this as new tag"
+            placeholder="Search or add a tag"
+            :multiple="true"
+            :taggable="true"
+            @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>
    </div>
    <spinner v-else></spinner>
@@ -24,12 +54,11 @@

 <script>
 import { mapGetters } from 'vuex';
-import Spinner from 'shared/components/Spinner.vue';
-import ContactDetailsItem from './ContactDetailsItem.vue';
+import Spinner from 'shared/components/Spinner';
+import ConversationAPI from '../../../api/conversations';

 export default {
  components: {
-    ContactDetailsItem,
    Spinner,
  },
  props: {
@@ -38,25 +67,75 @@ export default {
      required: true,
    },
  },
+  data() {
+    return {
+      isSearching: false,
+      selectedLabels: [],
+      showLabelInput: false,
+    };
+  },
  computed: {
-    labels() {
-      return this.$store.getters['conversationLabels/getConversationLabels'](
-        this.conversationId
+    hasEdited() {
+      if (this.selectedLabels.length !== this.savedLabels.length) {
+        return true;
+      }
+      const isSame = this.selectedLabels.every(label =>
+        this.savedLabels.includes(label)
      );
+      return !isSame;
+    },
+    savedLabels() {
+      const saved = this.$store.getters[
+        'conversationLabels/getConversationLabels'
+      ](this.conversationId);
+      return saved;
+    },
+    hasEditedClass() {
+      return this.hasEdited ? 'has-edited' : '';
    },
    ...mapGetters({
-      uiFlags: 'contactConversations/getUIFlags',
+      conversationUiFlags: 'contactConversations/getUIFlags',
+      labelUiFlags: 'conversationLabels/getUIFlags',
    }),
  },
  watch: {
    conversationId(newConversationId, prevConversationId) {
      if (newConversationId && newConversationId !== prevConversationId) {
-        this.$store.dispatch('conversationLabels/get', newConversationId);
+        this.$store
+          .dispatch('conversationLabels/get', newConversationId)
+          .then(() => {
+            this.selectedLabels = [...this.savedLabels];
+          });
      }
    },
  },
  mounted() {
-    this.$store.dispatch('conversationLabels/get', this.conversationId);
+    this.$store
+      .dispatch('conversationLabels/get', this.conversationId)
+      .then(() => {
+        this.selectedLabels = [...this.savedLabels];
+      });
+  },
+  methods: {
+    addLabel(label) {
+      this.selectedLabels = [...this.selectedLabels, label];
+    },
+    asyncSearchLabels(query) {
+      this.isSearching = true;
+      ConversationAPI(query).then(response => {
+        this.countries = response;
+        this.isLoading = false;
+      });
+    },
+    onUpdateLabels() {
+      this.$store.dispatch('conversationLabels/update', {
+        conversationId: this.conversationId,
+        labels: this.selectedLabels,
+      });
+    },
+    showLabelBox() {
+      this.showLabelInput = true;
+    },
  },
 };
 </script>
@@ -66,12 +145,7 @@ export default {
@import '~dashboard/assets/scss/mixins';

 .contact-conversation--panel {
-  @include border-normal-top;
-  padding: $space-medium;
-}
-
-.contact-conversation--list {
-  margin-top: -$space-normal;
+  padding: $space-normal;
 }

 .conversation--label {
@@ -80,4 +154,36 @@ 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;
+    }
+    transition: $transition-ease-in;
+    margin-bottom: 0;
+  }
+}
+
+.button {
+  margin-top: $space-small;
+  margin-left: auto;
+}
+
+.no-results {
+  margin: $space-normal 0 0 0;
+  color: $color-gray;
+  padding: 0 $space-small;
+  font-weight: $font-weight-normal;
+}
+
+.error {
+  color: $alert-color;
+  font-size: $font-size-mini;
+  font-weight: $font-weight-medium;
+}
 </style>
--- a/app/javascript/dashboard/store/modules/conversationLabels.js
+++ b/app/javascript/dashboard/store/modules/conversationLabels.js
@@ -6,6 +6,8 @@ const state = {
  records: {},
  uiFlags: {
    isFetching: false,
+    isUpdating: false,
+    isError: false,
  },
 };

@@ -38,6 +40,30 @@ export const actions = {
      });
    }
  },
+  update: async ({ commit }, { conversationId, labels }) => {
+    commit(types.default.SET_CONVERSATION_LABELS_UI_FLAG, {
+      isUpdating: true,
+    });
+    try {
+      const response = await ConversationAPI.updateLabels(
+        conversationId,
+        labels
+      );
+      commit(types.default.SET_CONVERSATION_LABELS, {
+        id: conversationId,
+        data: response.data.payload,
+      });
+      commit(types.default.SET_CONVERSATION_LABELS_UI_FLAG, {
+        isUpdating: false,
+        isError: false,
+      });
+    } catch (error) {
+      commit(types.default.SET_CONVERSATION_LABELS_UI_FLAG, {
+        isUpdating: false,
+        isError: true,
+      });
+    }
+  },
 };

 export const mutations = {
--- a/app/javascript/shared/components/Spinner.vue
+++ b/app/javascript/shared/components/Spinner.vue
@@ -1,7 +1,16 @@
 <template>
-  <span class="spinner small"></span>
+  <span class="spinner" :class="size"></span>
 </template>
-
+<script>
+export default {
+  props: {
+    size: {
+      type: String,
+      default: 'small',
+    },
+  },
+};
+</script>
 <style scoped lang="scss">
@import '~widget/assets/scss/variables';

@@ -39,7 +48,7 @@
  vertical-align: middle;

  &.message {
-    padding: $space-normal;
+    padding: $space-one;
    top: 0;
    left: 0;
    margin: 0 auto;
@@ -63,5 +72,17 @@
      margin-top: -$space-small;
    }
  }
+
+  &.tiny {
+    width: $space-one;
+    height: $space-one;
+    padding: 0 $space-smaller;
+
+    &:before {
+      width: $space-one;
+      height: $space-one;
+      margin-top: -$space-small + $space-micro;
+    }
+  }
 }
 </style>
--- a/app/javascript/widget/assets/scss/_mixins.scss
+++ b/app/javascript/widget/assets/scss/_mixins.scss
@@ -1,5 +1,5 @@
 // scss-lint:disable PseudoElement SpaceBeforeBrace VendorPrefix
-$shadow-color-1: rgba(50, 50, 93, 0.2);
+$shadow-color-1: rgba(50, 50, 93, 0.08);
 $shadow-color-2: rgba(0, 0, 0, 0.07);
 $shadow-color-3: rgba(50, 50, 93, .08);
 $shadow-color-4: rgba(0, 0, 0, .05);
--- a/app/javascript/widget/assets/scss/sdk.js
+++ b/app/javascript/widget/assets/scss/sdk.js
@@ -101,10 +101,10 @@ export const SDK_CSS = ` .woot-widget-holder {
    width: 400px !important;
    min-height: 250px !important;
    max-height: 590px !important;
-    -o-border-radius: 8px !important;
-    -moz-border-radius: 8px !important;
-    -webkit-border-radius: 8px !important;
-    border-radius: 8px !important;
+    -o-border-radius: 16px !important;
+    -moz-border-radius: 16px !important;
+    -webkit-border-radius: 16px !important;
+    border-radius: 16px !important;
  }
 }

--- a/app/javascript/widget/components/GroupedAvatars.vue
+++ b/app/javascript/widget/components/GroupedAvatars.vue
@@ -4,7 +4,6 @@
      <Thumbnail
        size="24px"
        :username="user.name"
-        status="online"
        :src="user.avatar"
        has-border
      />