mirror of
				https://github.com/lingble/chatwoot.git
				synced 2025-10-31 19:17:48 +00:00 
			
		
		
		
	 d2eda8bd08
			
		
	
	d2eda8bd08
	
	
	
		
			
			When Vue 3 is used with options API, any assignment to `this.<something>` is converted to a Proxy before assignment. This is fine as long as we are in the options context, problem arises when we access this in a `composable` any mutations on the object doesn't behave correctly as expected, this PR fixes that by moving the `automation` object inside the composable and using it in the options. > Another option to fix such an issue is to make the object non-reactive, like done in places where we have `editorView`, but that wasn't viable here --------- Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
		
			
				
	
	
		
			116 lines
		
	
	
		
			3.3 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
			
		
		
	
	
			116 lines
		
	
	
		
			3.3 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
| import { computed } from 'vue';
 | |
| import { useI18n } from 'vue-i18n';
 | |
| import languages from 'dashboard/components/widgets/conversation/advancedFilterItems/languages';
 | |
| import countries from 'shared/constants/countries';
 | |
| import { useStoreGetters, useMapGetter } from 'dashboard/composables/store';
 | |
| 
 | |
| import {
 | |
|   getActionOptions,
 | |
|   getConditionOptions,
 | |
| } from 'dashboard/helper/automationHelper';
 | |
| 
 | |
| /**
 | |
|  * This is a shared composables that holds utilites used to build dropdown and file options
 | |
|  * @returns {Object} An object containing various automation-related functions and computed properties.
 | |
|  */
 | |
| export default function useAutomationValues() {
 | |
|   const getters = useStoreGetters();
 | |
|   const { t } = useI18n();
 | |
| 
 | |
|   const agents = useMapGetter('agents/getAgents');
 | |
|   const campaigns = useMapGetter('campaigns/getAllCampaigns');
 | |
|   const contacts = useMapGetter('contacts/getContacts');
 | |
|   const inboxes = useMapGetter('inboxes/getInboxes');
 | |
|   const labels = useMapGetter('labels/getLabels');
 | |
|   const teams = useMapGetter('teams/getTeams');
 | |
|   const slaPolicies = useMapGetter('sla/getSLA');
 | |
| 
 | |
|   const booleanFilterOptions = computed(() => [
 | |
|     { id: true, name: t('FILTER.ATTRIBUTE_LABELS.TRUE') },
 | |
|     { id: false, name: t('FILTER.ATTRIBUTE_LABELS.FALSE') },
 | |
|   ]);
 | |
| 
 | |
|   const statusFilterItems = computed(() => {
 | |
|     return {
 | |
|       open: {
 | |
|         TEXT: t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.open.TEXT'),
 | |
|       },
 | |
|       resolved: {
 | |
|         TEXT: t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.resolved.TEXT'),
 | |
|       },
 | |
|       pending: {
 | |
|         TEXT: t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.pending.TEXT'),
 | |
|       },
 | |
|       snoozed: {
 | |
|         TEXT: t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.snoozed.TEXT'),
 | |
|       },
 | |
|       all: {
 | |
|         TEXT: t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.all.TEXT'),
 | |
|       },
 | |
|     };
 | |
|   });
 | |
| 
 | |
|   const statusFilterOptions = computed(() => {
 | |
|     const statusFilters = statusFilterItems.value;
 | |
|     return [
 | |
|       ...Object.keys(statusFilters).map(status => ({
 | |
|         id: status,
 | |
|         name: statusFilters[status].TEXT,
 | |
|       })),
 | |
|       { id: 'all', name: t('CHAT_LIST.FILTER_ALL') },
 | |
|     ];
 | |
|   });
 | |
| 
 | |
|   /**
 | |
|    * Gets the condition dropdown values for a given type.
 | |
|    * @param {string} type - The type of condition.
 | |
|    * @returns {Array} An array of condition dropdown values.
 | |
|    */
 | |
|   const getConditionDropdownValues = type => {
 | |
|     return getConditionOptions({
 | |
|       agents: agents.value,
 | |
|       booleanFilterOptions: booleanFilterOptions.value,
 | |
|       campaigns: campaigns.value,
 | |
|       contacts: contacts.value,
 | |
|       customAttributes: getters['attributes/getAttributes'].value,
 | |
|       inboxes: inboxes.value,
 | |
|       statusFilterOptions: statusFilterOptions.value,
 | |
|       teams: teams.value,
 | |
|       languages,
 | |
|       countries,
 | |
|       type,
 | |
|     });
 | |
|   };
 | |
| 
 | |
|   /**
 | |
|    * Gets the action dropdown values for a given type.
 | |
|    * @param {string} type - The type of action.
 | |
|    * @returns {Array} An array of action dropdown values.
 | |
|    */
 | |
|   const getActionDropdownValues = type => {
 | |
|     return getActionOptions({
 | |
|       agents: agents.value,
 | |
|       labels: labels.value,
 | |
|       teams: teams.value,
 | |
|       slaPolicies: slaPolicies.value,
 | |
|       languages,
 | |
|       type,
 | |
|     });
 | |
|   };
 | |
| 
 | |
|   return {
 | |
|     booleanFilterOptions,
 | |
|     statusFilterItems,
 | |
|     statusFilterOptions,
 | |
|     getConditionDropdownValues,
 | |
|     getActionDropdownValues,
 | |
|     agents,
 | |
|     campaigns,
 | |
|     contacts,
 | |
|     inboxes,
 | |
|     labels,
 | |
|     teams,
 | |
|     slaPolicies,
 | |
|   };
 | |
| }
 |