mirror of
				https://github.com/lingble/chatwoot.git
				synced 2025-11-04 04:57:51 +00:00 
			
		
		
		
	# Pull Request Template ## Description This PR will replace the usage of `conversation/labelMixin` with a composable Fixes https://linear.app/chatwoot/issue/CW-3439/rewrite-conversationlabelmixin-mixin-to-a-composable ## Type of change - [x] New feature (non-breaking change which adds functionality) ## How Has This Been Tested? **Test cases** 1. Add/remove labels from conversation sidebar 2. See labels are showing up dynamically 3. Check add/remove labels working fine with CMD bar 4. Check card labels in conversation card and SLA reports table. ## Checklist: - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my code - [x] I have commented on my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [x] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged and published in downstream modules
		
			
				
	
	
		
			102 lines
		
	
	
		
			2.8 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
			
		
		
	
	
			102 lines
		
	
	
		
			2.8 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
import { computed } from 'vue';
 | 
						|
import { useStore, useStoreGetters } from 'dashboard/composables/store';
 | 
						|
 | 
						|
/**
 | 
						|
 * Composable for managing conversation labels
 | 
						|
 * @returns {Object} An object containing methods and computed properties for conversation labels
 | 
						|
 */
 | 
						|
export function useConversationLabels() {
 | 
						|
  const store = useStore();
 | 
						|
  const getters = useStoreGetters();
 | 
						|
 | 
						|
  /**
 | 
						|
   * The currently selected chat
 | 
						|
   * @type {import('vue').ComputedRef<Object>}
 | 
						|
   */
 | 
						|
  const currentChat = computed(() => getters.getSelectedChat.value);
 | 
						|
 | 
						|
  /**
 | 
						|
   * The ID of the current conversation
 | 
						|
   * @type {import('vue').ComputedRef<number|null>}
 | 
						|
   */
 | 
						|
  const conversationId = computed(() => currentChat.value?.id);
 | 
						|
 | 
						|
  /**
 | 
						|
   * All labels available for the account
 | 
						|
   * @type {import('vue').ComputedRef<Array>}
 | 
						|
   */
 | 
						|
  const accountLabels = computed(() => getters['labels/getLabels'].value);
 | 
						|
 | 
						|
  /**
 | 
						|
   * Labels currently saved to the conversation
 | 
						|
   * @type {import('vue').ComputedRef<Array>}
 | 
						|
   */
 | 
						|
  const savedLabels = computed(() => {
 | 
						|
    return store.getters['conversationLabels/getConversationLabels'](
 | 
						|
      conversationId.value
 | 
						|
    );
 | 
						|
  });
 | 
						|
 | 
						|
  /**
 | 
						|
   * Labels currently active on the conversation
 | 
						|
   * @type {import('vue').ComputedRef<Array>}
 | 
						|
   */
 | 
						|
  const activeLabels = computed(() =>
 | 
						|
    accountLabels.value.filter(({ title }) => savedLabels.value.includes(title))
 | 
						|
  );
 | 
						|
 | 
						|
  /**
 | 
						|
   * Labels available but not active on the conversation
 | 
						|
   * @type {import('vue').ComputedRef<Array>}
 | 
						|
   */
 | 
						|
  const inactiveLabels = computed(() =>
 | 
						|
    accountLabels.value.filter(
 | 
						|
      ({ title }) => !savedLabels.value.includes(title)
 | 
						|
    )
 | 
						|
  );
 | 
						|
 | 
						|
  /**
 | 
						|
   * Updates the labels for the current conversation
 | 
						|
   * @param {string[]} selectedLabels - Array of label titles to be set for the conversation
 | 
						|
   * @returns {Promise<void>}
 | 
						|
   */
 | 
						|
  const onUpdateLabels = async selectedLabels => {
 | 
						|
    await store.dispatch('conversationLabels/update', {
 | 
						|
      conversationId: conversationId.value,
 | 
						|
      labels: selectedLabels,
 | 
						|
    });
 | 
						|
  };
 | 
						|
 | 
						|
  /**
 | 
						|
   * Adds a label to the current conversation
 | 
						|
   * @param {Object} value - The label object to be added
 | 
						|
   * @param {string} value.title - The title of the label to be added
 | 
						|
   */
 | 
						|
  const addLabelToConversation = value => {
 | 
						|
    const result = activeLabels.value.map(item => item.title);
 | 
						|
    result.push(value.title);
 | 
						|
    onUpdateLabels(result);
 | 
						|
  };
 | 
						|
 | 
						|
  /**
 | 
						|
   * Removes a label from the current conversation
 | 
						|
   * @param {string} value - The title of the label to be removed
 | 
						|
   */
 | 
						|
  const removeLabelFromConversation = value => {
 | 
						|
    const result = activeLabels.value
 | 
						|
      .map(label => label.title)
 | 
						|
      .filter(label => label !== value);
 | 
						|
    onUpdateLabels(result);
 | 
						|
  };
 | 
						|
 | 
						|
  return {
 | 
						|
    accountLabels,
 | 
						|
    savedLabels,
 | 
						|
    activeLabels,
 | 
						|
    inactiveLabels,
 | 
						|
    addLabelToConversation,
 | 
						|
    removeLabelFromConversation,
 | 
						|
    onUpdateLabels,
 | 
						|
  };
 | 
						|
}
 |