diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue index ea5c63ebc..0b4880264 100644 --- a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue +++ b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue @@ -62,6 +62,7 @@ const segmentsQuery = ref({}); const appliedFilters = useMapGetter('contacts/getAppliedContactFiltersV4'); const contactAttributes = useMapGetter('attributes/getContactAttributes'); +const labels = useMapGetter('labels/getLabels'); const hasActiveSegments = computed( () => props.activeSegment && props.segmentsId !== 0 ); @@ -215,6 +216,7 @@ const setParamsForEditSegmentModal = () => { countries, filterTypes: contactFilterItems, allCustomAttributes: useSnakeCase(contactAttributes.value), + labels: labels.value || [], }; }; diff --git a/app/javascript/dashboard/components-next/filter/ActiveFilterPreview.vue b/app/javascript/dashboard/components-next/filter/ActiveFilterPreview.vue index 959d95ccc..38b3d72db 100644 --- a/app/javascript/dashboard/components-next/filter/ActiveFilterPreview.vue +++ b/app/javascript/dashboard/components-next/filter/ActiveFilterPreview.vue @@ -34,14 +34,17 @@ const formatOperatorLabel = operator => { }; const formatFilterValue = value => { + // Case 1: null, undefined, empty string if (!value) return ''; + + // Case 2: array → map each item, use name if present, else the item itself if (Array.isArray(value)) { - return value.join(', '); + return value.map(item => item?.name ?? item).join(', '); } - if (typeof value === 'object' && value.name) { - return value.name; - } - return value; + + // Case 3: object with a "name" property → return name + // Case 4: primitive (string, number, etc.) → return as is + return value?.name ?? value; }; @@ -66,6 +69,7 @@ const formatFilterValue = value => {