feat: Contact filter preview (#10516)

# Pull Request Template

## Description

**Screenshots**
<img width="986" alt="image"
src="https://github.com/user-attachments/assets/8df44237-ec51-45d3-aed3-518cded42f5d">

<img width="986" alt="image"
src="https://github.com/user-attachments/assets/2213ce2e-2461-41f0-a05a-0f955a4d7e3a">

**Story**
<img width="992" alt="image"
src="https://github.com/user-attachments/assets/f8e25fe2-11e8-4b9b-8d0b-357f9b7b6e39">
This commit is contained in:
Sivin Varghese
2024-12-02 16:22:05 +05:30
committed by GitHub
parent e95680e800
commit 0ab7accd3f
19 changed files with 313 additions and 12 deletions

View File

@@ -54,9 +54,9 @@ const emit = defineEmits([
</script>
<template>
<header class="sticky top-0 z-10 px-6 xl:px-0">
<header class="sticky top-0 z-10">
<div
class="flex items-center justify-between w-full h-20 gap-2 mx-auto max-w-[960px]"
class="flex items-center justify-between w-full h-20 px-6 gap-2 mx-auto max-w-[960px]"
>
<span class="text-xl font-medium truncate text-n-slate-12">
{{ headerTitle }}

View File

@@ -176,7 +176,6 @@ const closeAdvanceFiltersModal = () => {
};
const clearFilters = async () => {
await store.dispatch('contacts/clearContactFilters');
emit('clearFilters');
};

View File

@@ -0,0 +1,29 @@
<script setup>
import { useI18n } from 'vue-i18n';
import { useMapGetter } from 'dashboard/composables/store';
import ActiveFilterPreview from 'dashboard/components-next/filter/ActiveFilterPreview.vue';
const emit = defineEmits(['clearFilters']);
const { t } = useI18n();
const appliedFilters = useMapGetter('contacts/getAppliedContactFiltersV4');
</script>
<template>
<ActiveFilterPreview
:applied-filters="appliedFilters"
:max-visible-filters="2"
:more-filters-label="
t('CONTACTS_LAYOUT.FILTER.ACTIVE_FILTERS.MORE_FILTERS', {
count: appliedFilters.length - 2,
})
"
:clear-button-label="
t('CONTACTS_LAYOUT.FILTER.ACTIVE_FILTERS.CLEAR_FILTERS')
"
class="max-w-[960px] px-6"
@clear-filters="emit('clearFilters')"
/>
</template>