feat: Ability to add label for contact page (#2350)

* feat: Ability to add label for contact page

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
Co-authored-by: Nithin David Thomas <webofnithin@gmail.com>

app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue

@@ -8,6 +8,7 @@
       v-if="hasContactAttributes"
       :custom-attributes="contact.custom_attributes"
     />
+    <contact-label :contact-id="contact.id" class="contact-labels" />
     <contact-conversations
       v-if="contact.id"
       :contact-id="contact.id"
@@ -20,12 +21,14 @@
 import ContactConversations from 'dashboard/routes/dashboard/conversation/ContactConversations';
 import ContactInfo from 'dashboard/routes/dashboard/conversation/contact/ContactInfo';
 import ContactCustomAttributes from 'dashboard/routes/dashboard/conversation/ContactCustomAttributes';
+import ContactLabel from 'dashboard/routes/dashboard/contacts/components/ContactLabels.vue';
 
 export default {
   components: {
     ContactCustomAttributes,
     ContactConversations,
     ContactInfo,
+    ContactLabel,
   },
   props: {
     contact: {
@@ -61,6 +64,10 @@ export default {
   position: relative;
   border-left: 1px solid var(--color-border);
   padding: var(--space-medium) var(--space-two);
+  
+  .contact-labels {
+    padding-bottom: var(--space-normal);
+  }
 }
 
 .close-button {
@@ -79,10 +86,6 @@ export default {
   padding: 0 var(--space-normal);
 }
 
-.contact-conversation--panel {
-  height: 100%;
-}
-
 .contact--mute {
   color: var(--r-400);
   display: block;

app/javascript/dashboard/routes/dashboard/contacts/components/ContactLabels.vue

@@ -0,0 +1,89 @@
+<template>
+  <label-selector
+    :all-labels="allLabels"
+    :saved-labels="savedLabels"
+    @add="addItem"
+    @remove="removeItem"
+  />
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import LabelSelector from 'dashboard/components/widgets/LabelSelector.vue';
+import alertMixin from 'shared/mixins/alertMixin';
+
+export default {
+  components: { LabelSelector },
+  mixins: [alertMixin],
+  props: {
+    contactId: {
+      type: [String, Number],
+      required: true,
+    },
+  },
+
+  computed: {
+    savedLabels() {
+      const result = this.$store.getters['contactLabels/getContactLabels'](
+        this.contactId
+      );
+      return result.map(value => {
+        return this.allLabels.find(label => label.title === value);
+      });
+    },
+
+    ...mapGetters({
+      labelUiFlags: 'contactLabels/getUIFlags',
+      allLabels: 'labels/getLabels',
+    }),
+  },
+
+  watch: {
+    contactId(newContactId, prevContactId) {
+      if (newContactId && newContactId !== prevContactId) {
+        this.fetchLabels(newContactId);
+      }
+    },
+  },
+
+  mounted() {
+    const { contactId } = this;
+    this.fetchLabels(contactId);
+  },
+
+  methods: {
+    async onUpdateLabels(selectedLabels) {
+      try {
+        await this.$store.dispatch('contactLabels/update', {
+          contactId: this.contactId,
+          labels: selectedLabels,
+        });
+      } catch (error) {
+        this.showAlert(this.$t('CONTACT_PANEL.LABELS.CONTACT.ERROR'));
+      }
+    },
+
+    addItem(value) {
+      const result = this.savedLabels.map(item => item.title);
+      result.push(value.title);
+      this.onUpdateLabels(result);
+    },
+
+    removeItem(value) {
+      const result = this.savedLabels
+        .map(label => label.title)
+        .filter(label => label !== value);
+      this.onUpdateLabels(result);
+    },
+
+    async fetchLabels(contactId) {
+      if (!contactId) {
+        return;
+      }
+      this.$store.dispatch('contactLabels/get', contactId);
+    },
+  },
+};
+</script>
+
+<style></style>

app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue

@@ -5,7 +5,7 @@
       class="contact-conversation--list"
     >
       <contact-details-item
-        :title="$t('CONTACT_PANEL.LABELS.TITLE')"
+        :title="$t('CONTACT_PANEL.LABELS.CONVERSATION.TITLE')"
         icon="ion-pricetags"
         emoji="🏷️"
       />
@@ -30,7 +30,6 @@
               v-if="showSearchDropdownLabel"
               :account-labels="accountLabels"
               :selected-labels="savedLabels"
-              :conversation-id="conversationId"
               @add="addItem"
               @remove="removeItem"
             />
@@ -61,7 +60,7 @@ export default {
   mixins: [clickaway],
   props: {
     conversationId: {
-      type: [String, Number],
+      type: Number,
       required: true,
     },
   },