feat: Allow agents to bulk assign labels to conversations (#4854)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

app/javascript/dashboard/components/ChatList.vue

@@ -95,6 +95,7 @@
       @select-all-conversations="selectAllConversations"
       @assign-agent="onAssignAgent"
       @update-conversations="onUpdateConversations"
+      @assign-labels="onAssignLabels"
     />
     <div ref="activeConversation" class="conversations-list">
       <conversation-card
@@ -598,6 +599,21 @@ export default {
         this.showAlert(this.$t('BULK_ACTION.ASSIGN_FAILED'));
       }
     },
+    async onAssignLabels(labels) {
+      try {
+        await this.$store.dispatch('bulkActions/process', {
+          type: 'Conversation',
+          ids: this.selectedConversations,
+          labels: {
+            add: labels,
+          },
+        });
+        this.selectedConversations = [];
+        this.showAlert(this.$t('BULK_ACTION.LABELS.ASSIGN_SUCCESFUL'));
+      } catch (err) {
+        this.showAlert(this.$t('BULK_ACTION.LABELS.ASSIGN_FAILED'));
+      }
+    },
     async onUpdateConversations(status) {
       try {
         await this.$store.dispatch('bulkActions/process', {

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue

@@ -182,7 +182,7 @@ export default {
   }
 
   .container {
-    height: 24rem;
+    max-height: 24rem;
     overflow-y: auto;
     .agent__list-container {
       height: 100%;

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue

@@ -19,11 +19,20 @@
         </span>
       </label>
       <div class="bulk-action__actions flex-between">
+        <woot-button
+          v-tooltip="$t('BULK_ACTION.LABELS.ASSIGN_LABELS')"
+          size="tiny"
+          variant="smooth"
+          color-scheme="secondary"
+          icon="tag"
+          class="margin-right-smaller"
+          @click="toggleLabelActions"
+        />
         <woot-button
           v-tooltip="$t('BULK_ACTION.UPDATE.CHANGE_STATUS')"
           size="tiny"
-          variant="flat"
+          variant="smooth"
-          color-scheme="success"
+          color-scheme="secondary"
           icon="repeat"
           class="margin-right-smaller"
           @click="toggleUpdateActions"
@@ -31,12 +40,19 @@
         <woot-button
           v-tooltip="$t('BULK_ACTION.ASSIGN_AGENT_TOOLTIP')"
           size="tiny"
-          variant="flat"
+          variant="smooth"
           color-scheme="secondary"
           icon="person-assign"
           @click="toggleAgentList"
         />
       </div>
+      <transition name="popover-animation">
+        <label-actions
+          v-if="showLabelActions"
+          @assign="assignLabels"
+          @close="showLabelActions = false"
+        />
+      </transition>
       <transition name="popover-animation">
         <agent-selector
           v-if="showAgentsList"
@@ -68,10 +84,12 @@
 <script>
 import AgentSelector from './AgentSelector.vue';
 import UpdateActions from './UpdateActions.vue';
+import LabelActions from './LabelActions.vue';
 export default {
   components: {
     AgentSelector,
     UpdateActions,
+    LabelActions,
   },
   props: {
     conversations: {
@@ -103,6 +121,7 @@ export default {
     return {
       showAgentsList: false,
       showUpdateActions: false,
+      showLabelActions: false,
     };
   },
   methods: {
@@ -115,12 +134,18 @@ export default {
     updateConversations(status) {
       this.$emit('update-conversations', status);
     },
+    assignLabels(labels) {
+      this.$emit('assign-labels', labels);
+    },
     resolveConversations() {
       this.$emit('resolve-conversations');
     },
     toggleUpdateActions() {
       this.showUpdateActions = !this.showUpdateActions;
     },
+    toggleLabelActions() {
+      this.showLabelActions = !this.showLabelActions;
+    },
     toggleAgentList() {
       this.showAgentsList = !this.showAgentsList;
     },

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue

@@ -0,0 +1,282 @@
+<template>
+  <div v-on-clickaway="onClose" class="labels-container">
+    <div class="triangle">
+      <svg height="12" viewBox="0 0 24 12" width="24">
+        <path
+          d="M20 12l-8-8-12 12"
+          fill="var(--white)"
+          fill-rule="evenodd"
+          stroke="var(--s-50)"
+          stroke-width="1px"
+        />
+      </svg>
+    </div>
+    <div class="header flex-between">
+      <span>{{ $t('BULK_ACTION.LABELS.ASSIGN_LABELS') }}</span>
+      <woot-button
+        size="tiny"
+        variant="clear"
+        color-scheme="secondary"
+        icon="dismiss"
+        @click="onClose"
+      />
+    </div>
+    <div class="labels-list">
+      <header class="labels-list__header">
+        <div class="label-list-search flex-between">
+          <fluent-icon icon="search" class="search-icon" size="16" />
+          <input
+            ref="search"
+            v-model="query"
+            type="search"
+            placeholder="Search"
+            class="label--search_input"
+          />
+        </div>
+      </header>
+      <ul class="labels-list__body">
+        <li
+          v-for="label in filteredLabels"
+          :key="label.id"
+          class="label__list-item"
+        >
+          <label
+            class="item"
+            :class="{ 'label-selected': isLabelSelected(label.title) }"
+          >
+            <input
+              v-model="selectedLabels"
+              type="checkbox"
+              :value="label.title"
+              class="label-checkbox"
+            />
+            <span class="label-title">{{ label.title }}</span>
+            <span
+              class="label-pill"
+              :style="{ backgroundColor: label.color }"
+            />
+          </label>
+        </li>
+      </ul>
+      <footer class="labels-list__footer">
+        <woot-button
+          size="small"
+          color-scheme="primary"
+          :disabled="!selectedLabels.length"
+          @click="$emit('assign', selectedLabels)"
+        >
+          <span>{{ $t('BULK_ACTION.LABELS.ASSIGN_SELECTED_LABELS') }}</span>
+        </woot-button>
+      </footer>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mixin as clickaway } from 'vue-clickaway';
+import { mapGetters } from 'vuex';
+
+export default {
+  mixins: [clickaway],
+  data() {
+    return {
+      query: '',
+      selectedLabels: [],
+    };
+  },
+  computed: {
+    ...mapGetters({ labels: 'labels/getLabels' }),
+    filteredLabels() {
+      return this.labels.filter(label =>
+        label.title.toLowerCase().includes(this.query.toLowerCase())
+      );
+    },
+  },
+  methods: {
+    isLabelSelected(label) {
+      return this.selectedLabels.includes(label);
+    },
+    assignLabels(key) {
+      this.$emit('update', key);
+    },
+    onClose() {
+      this.$emit('close');
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.labels-list {
+  display: flex;
+  flex-direction: column;
+  max-height: 24rem;
+  min-height: auto;
+
+  .labels-list__header {
+    background-color: var(--white);
+    padding: 0 var(--space-one);
+  }
+
+  .labels-list__body {
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--space-one) 0;
+  }
+
+  .labels-list__footer {
+    padding: var(--space-small);
+
+    button {
+      width: 100%;
+    }
+  }
+}
+
+.label-list-search {
+  background-color: var(--s-50);
+  border-radius: var(--border-radius-medium);
+  border: 1px solid var(--s-100);
+  padding: 0 var(--space-one);
+
+  .search-icon {
+    color: var(--s-400);
+  }
+
+  .label--search_input {
+    background-color: transparent;
+    border: 0;
+    font-size: var(--font-size-mini);
+    height: unset;
+    margin: 0;
+  }
+}
+
+.labels-container {
+  background-color: var(--white);
+  border-radius: var(--border-radius-large);
+  border: 1px solid var(--s-50);
+  box-shadow: var(--shadow-dropdown-pane);
+  max-width: 24rem;
+  min-width: 24rem;
+  position: absolute;
+  right: 4.5rem;
+  top: var(--space-larger);
+  transform-origin: top right;
+  width: auto;
+  z-index: var(--z-index-twenty);
+
+  .header {
+    padding: var(--space-one);
+
+    span {
+      font-size: var(--font-size-small);
+      font-weight: var(--font-weight-medium);
+    }
+  }
+
+  .container {
+    max-height: 24rem;
+    overflow-y: auto;
+
+    .label__list-container {
+      height: 100%;
+    }
+    .label-list-search {
+      padding: 0 var(--space-one);
+      border: 1px solid var(--s-100);
+      border-radius: var(--border-radius-medium);
+      background-color: var(--s-50);
+      .search-icon {
+        color: var(--s-400);
+      }
+
+      .label--search_input {
+        border: 0;
+        font-size: var(--font-size-mini);
+        margin: 0;
+        background-color: transparent;
+        height: unset;
+      }
+    }
+  }
+
+  .triangle {
+    display: block;
+    position: absolute;
+    right: 2rem;
+    text-align: left;
+    top: calc(var(--space-slab) * -1);
+    z-index: var(--z-index-one);
+  }
+}
+
+ul {
+  margin: 0;
+  list-style: none;
+}
+
+.labels-placeholder {
+  padding: var(--space-small);
+}
+
+.label__list-item {
+  margin: var(--space-smaller) 0;
+  padding: 0 var(--space-one);
+
+  .item {
+    align-items: center;
+    border-radius: var(--border-radius-medium);
+    cursor: pointer;
+    display: flex;
+    padding: var(--space-smaller) var(--space-one);
+
+    &:hover {
+      background-color: var(--s-50);
+    }
+
+    &.label-selected {
+      background-color: var(--s-50);
+    }
+
+    span {
+      font-size: var(--font-size-small);
+    }
+
+    .label-checkbox {
+      margin: 0 var(--space-one) 0 0;
+    }
+
+    .label-title {
+      flex-grow: 1;
+    }
+
+    .label-pill {
+      background-color: var(--s-50);
+      border-radius: var(--border-radius-medium);
+      height: var(--space-slab);
+      width: var(--space-slab);
+    }
+  }
+}
+
+.search-container {
+  background-color: var(--white);
+  padding: 0 var(--space-one);
+  position: sticky;
+  top: 0;
+  z-index: var(--z-index-twenty);
+}
+
+.actions-container {
+  background-color: var(--white);
+  bottom: 0;
+  padding: var(--space-small);
+  position: sticky;
+  z-index: var(--z-index-twenty);
+
+  button {
+    width: 100%;
+  }
+}
+</style>

app/javascript/dashboard/i18n/locale/en/bulkActions.json

@@ -17,6 +17,13 @@
       "SNOOZE_UNTIL_NEXT_REPLY": "Snooze until next reply",
       "UPDATE_SUCCESFUL": "Conversation status updated successfully.",
       "UPDATE_FAILED": "Failed to update conversations, please try again"
+    },
+    "LABELS": {
+      "ASSIGN_LABELS": "Assign Labels",
+      "NO_LABELS_FOUND": "No labels found for",
+      "ASSIGN_SELECTED_LABELS": "Assign selected labels",
+      "ASSIGN_SUCCESFUL": "Labels assigned successfully",
+      "ASSIGN_FAILED": "Failed to assign labels, please try again"
     }
   }
 }