Feat: Assign conversations to teams. (#1849)

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

@@ -4,6 +4,43 @@
       <i class="ion-chevron-right" />
     </span>
     <contact-info :contact="contact" :channel-type="channelType" />
+    <div class="conversation--actions">
+      <h4 class="sub-block-title">
+        {{ $t('CONVERSATION_SIDEBAR.DETAILS_TITLE') }}
+      </h4>
+      <div class="multiselect-wrap--small">
+        <label class="multiselect__label">
+          {{ $t('CONVERSATION_SIDEBAR.ASSIGNEE_LABEL') }}
+        </label>
+        <multiselect
+          v-model="assignedAgent"
+          :options="agentsList"
+          label="name"
+          track-by="id"
+          deselect-label=""
+          select-label=""
+          selected-label=""
+          :placeholder="$t('CONVERSATION_SIDEBAR.SELECT.PLACEHOLDER')"
+          :allow-empty="true"
+        />
+      </div>
+      <div class="multiselect-wrap--small">
+        <label class="multiselect__label">
+          {{ $t('CONVERSATION_SIDEBAR.TEAM_LABEL') }}
+        </label>
+        <multiselect
+          v-model="assignedTeam"
+          :options="teamsList"
+          label="name"
+          track-by="id"
+          deselect-label=""
+          select-label=""
+          selected-label=""
+          :placeholder="$t('CONVERSATION_SIDEBAR.SELECT.PLACEHOLDER')"
+          :allow-empty="true"
+        />
+      </div>
+    </div>
     <div v-if="browser.browser_name" class="conversation--details">
       <contact-details-item
         v-if="location"
@@ -67,6 +104,7 @@
 
 <script>
 import { mapGetters } from 'vuex';
+import alertMixin from 'shared/mixins/alertMixin';
 
 import ContactConversations from './ContactConversations.vue';
 import ContactDetailsItem from './ContactDetailsItem.vue';
@@ -83,6 +121,7 @@ export default {
     ContactInfo,
     ConversationLabels,
   },
+  mixins: [alertMixin],
   props: {
     conversationId: {
       type: [Number, String],
@@ -96,6 +135,8 @@ export default {
   computed: {
     ...mapGetters({
       currentChat: 'getSelectedChat',
+      agents: 'agents/getVerifiedAgents',
+      teams: 'teams/getTeams',
     }),
     currentConversationMetaData() {
       return this.$store.getters[
@@ -159,6 +200,46 @@ export default {
     contact() {
       return this.$store.getters['contacts/getContact'](this.contactId);
     },
+    agentsList() {
+      return [{ id: 0, name: 'None' }, ...this.agents];
+    },
+    teamsList() {
+      return [{ id: 0, name: 'None' }, ...this.teams];
+    },
+    assignedAgent: {
+      get() {
+        return this.currentChat.meta.assignee;
+      },
+      set(agent) {
+        const agentId = agent ? agent.id : 0;
+        this.$store.dispatch('setCurrentChatAssignee', agent);
+        this.$store
+          .dispatch('assignAgent', {
+            conversationId: this.currentChat.id,
+            agentId,
+          })
+          .then(() => {
+            this.showAlert(this.$t('CONVERSATION.CHANGE_AGENT'));
+          });
+      },
+    },
+    assignedTeam: {
+      get() {
+        return this.currentChat.meta.team;
+      },
+      set(team) {
+        const teamId = team ? team.id : 0;
+        this.$store.dispatch('setCurrentChatTeam', team);
+        this.$store
+          .dispatch('assignTeam', {
+            conversationId: this.currentChat.id,
+            teamId,
+          })
+          .then(() => {
+            this.showAlert(this.$t('CONVERSATION.CHANGE_TEAM'));
+          });
+      },
+    },
   },
   watch: {
     conversationId(newConversationId, prevConversationId) {
@@ -191,12 +272,10 @@ export default {
 
 <style lang="scss" scoped>
 @import '~dashboard/assets/scss/variables';
-@import '~dashboard/assets/scss/mixins';
 
 .contact--panel {
-  @include border-normal-left;
-
   background: white;
+  border-left: 1px solid var(--color-border);
   font-size: $font-size-small;
   overflow-y: auto;
   overflow: auto;
@@ -246,4 +325,16 @@ export default {
   flex-direction: column;
   justify-content: center;
 }
+
+.sub-block-title {
+  margin-bottom: var(--space-small);
+}
+
+.conversation--actions {
+  padding: 0 var(--space-normal) var(--space-small);
+}
+
+.multiselect__label {
+  margin-bottom: var(--space-smaller);
+}
 </style>