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">
2024-12-02 16:22:05 +05:30
parent e95680e800
commit 0ab7accd3f
19 changed files with 313 additions and 12 deletions
@@ -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>