diff --git a/app/javascript/dashboard/components-next/filter/ConditionRow.vue b/app/javascript/dashboard/components-next/filter/ConditionRow.vue index 1d53a3af2..b9b2d780c 100644 --- a/app/javascript/dashboard/components-next/filter/ConditionRow.vue +++ b/app/javascript/dashboard/components-next/filter/ConditionRow.vue @@ -103,6 +103,12 @@ const validationError = computed(() => { ); }); +const inputFieldType = computed(() => { + if (inputType.value === 'date') return 'date'; + if (inputType.value === 'number') return 'number'; + return 'text'; +}); + const resetModelOnAttributeKeyChange = newAttributeKey => { /** * Resets the filter values and operator when the attribute key changes. This ensures that @@ -182,7 +188,7 @@ defineExpose({ validate }); diff --git a/app/javascript/dashboard/components-next/filter/provider.js b/app/javascript/dashboard/components-next/filter/provider.js index f6d078d76..7fd600da9 100644 --- a/app/javascript/dashboard/components-next/filter/provider.js +++ b/app/javascript/dashboard/components-next/filter/provider.js @@ -164,8 +164,8 @@ export function useConversationFilterContext() { value: CONVERSATION_ATTRIBUTES.DISPLAY_ID, attributeName: t('FILTER.ATTRIBUTES.CONVERSATION_IDENTIFIER'), label: t('FILTER.ATTRIBUTES.CONVERSATION_IDENTIFIER'), - inputType: 'plainText', - datatype: 'number', + inputType: 'number', + dataType: 'number', filterOperators: containmentOperators.value, attributeModel: 'standard', }, @@ -179,7 +179,7 @@ export function useConversationFilterContext() { id: campaign.id, name: campaign.title, })), - datatype: 'number', + dataType: 'number', filterOperators: presenceOperators.value, attributeModel: 'standard', }, diff --git a/app/javascript/dashboard/components-next/input/Input.vue b/app/javascript/dashboard/components-next/input/Input.vue index f20c43449..f4bf5a94f 100644 --- a/app/javascript/dashboard/components-next/input/Input.vue +++ b/app/javascript/dashboard/components-next/input/Input.vue @@ -55,7 +55,12 @@ const inputOutlineClass = computed(() => { }); const handleInput = event => { - emit('update:modelValue', event.target.value); + let value = event.target.value; + // Convert to number if type is number and value is not empty + if (props.type === 'number' && value !== '') { + value = Number(value); + } + emit('update:modelValue', value); emit('input', event); }; @@ -114,7 +119,7 @@ onMounted(() => { ? max : undefined " - class="block w-full reset-base text-sm h-10 !px-3 !py-2.5 !mb-0 outline outline-1 border-none border-0 outline-offset-[-1px] rounded-lg bg-n-alpha-black2 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 disabled:cursor-not-allowed disabled:opacity-50 text-n-slate-12 transition-all duration-500 ease-in-out" + class="block w-full reset-base text-sm h-10 !px-3 !py-2.5 !mb-0 outline outline-1 border-none border-0 outline-offset-[-1px] rounded-lg bg-n-alpha-black2 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 disabled:cursor-not-allowed disabled:opacity-50 text-n-slate-12 transition-all duration-500 ease-in-out [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none" @input="handleInput" @focus="handleFocus" @blur="handleBlur" diff --git a/app/javascript/dashboard/store/modules/conversations/helpers/filterHelpers.js b/app/javascript/dashboard/store/modules/conversations/helpers/filterHelpers.js index 3f1c32059..3d627e3ef 100644 --- a/app/javascript/dashboard/store/modules/conversations/helpers/filterHelpers.js +++ b/app/javascript/dashboard/store/modules/conversations/helpers/filterHelpers.js @@ -64,11 +64,13 @@ const getValueFromConversation = (conversation, attributeKey) => { switch (attributeKey) { case 'status': case 'priority': - case 'display_id': case 'labels': case 'created_at': case 'last_activity_at': return conversation[attributeKey]; + case 'display_id': + // Frontend uses 'id' but backend expects 'display_id' + return conversation.display_id || conversation.id; case 'assignee_id': return conversation.meta?.assignee?.id; case 'inbox_id': diff --git a/app/javascript/dashboard/store/modules/conversations/helpers/specs/filterHelpers.spec.js b/app/javascript/dashboard/store/modules/conversations/helpers/specs/filterHelpers.spec.js index b36128819..096481c69 100644 --- a/app/javascript/dashboard/store/modules/conversations/helpers/specs/filterHelpers.spec.js +++ b/app/javascript/dashboard/store/modules/conversations/helpers/specs/filterHelpers.spec.js @@ -247,7 +247,7 @@ describe('filterHelpers', () => { // Text search tests - display_id it('should match conversation with equal_to operator for display_id', () => { - const conversation = { display_id: '12345' }; + const conversation = { id: '12345' }; const filters = [ { attribute_key: 'display_id', @@ -260,7 +260,7 @@ describe('filterHelpers', () => { }); it('should match conversation with contains operator for display_id', () => { - const conversation = { display_id: '12345' }; + const conversation = { id: '12345' }; const filters = [ { attribute_key: 'display_id', @@ -273,7 +273,7 @@ describe('filterHelpers', () => { }); it('should not match conversation with does_not_contain operator for display_id', () => { - const conversation = { display_id: '12345' }; + const conversation = { id: '12345' }; const filters = [ { attribute_key: 'display_id', @@ -286,7 +286,7 @@ describe('filterHelpers', () => { }); it('should match conversation with does_not_contain operator when value is not present', () => { - const conversation = { display_id: '12345' }; + const conversation = { id: '12345' }; const filters = [ { attribute_key: 'display_id', @@ -989,7 +989,7 @@ describe('filterHelpers', () => { it('should handle empty string values in conversation', () => { const conversation = { - display_id: '', + id: '', }; const filters = [ {