mirror of
				https://github.com/lingble/chatwoot.git
				synced 2025-10-30 18:47:51 +00:00 
			
		
		
		
	 4c6572c2c9
			
		
	
	4c6572c2c9
	
	
	
		
			
			# 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,
 | |
|   };
 | |
| }
 |