chatwoot/app/javascript/dashboard/mixins/conversation/labelMixin.js

import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters({ accountLabels: 'labels/getLabels' }),
    savedLabels() {
      // If conversationLabels is passed as prop, use it
      if (this.conversationLabels)
        return this.conversationLabels.split(',').map(item => item.trim());
      // Otherwise, get labels from store
      return this.$store.getters['conversationLabels/getConversationLabels'](
        this.conversationId
      );
    },
    // TODO - Get rid of this from the mixin
    activeLabels() {
      return this.accountLabels.filter(({ title }) =>
        this.savedLabels.includes(title)
      );
    },
    inactiveLabels() {
      return this.accountLabels.filter(
        ({ title }) => !this.savedLabels.includes(title)
      );
    },
  },
  methods: {
    addLabelToConversation(value) {
      const result = this.activeLabels.map(item => item.title);
      result.push(value.title);
      this.onUpdateLabels(result);
    },
    removeLabelFromConversation(value) {
      const result = this.activeLabels
        .map(label => label.title)
        .filter(label => label !== value);
      this.onUpdateLabels(result);
    },
    async onUpdateLabels(selectedLabels) {
      this.$store.dispatch('conversationLabels/update', {
        conversationId: this.conversationId,
        labels: selectedLabels,
      });
    },
  },
};