clone/nocodb
1
0
Fork 0
mirror of https://github.com/nocodb/nocodb.git synced 2026-05-01 17:47:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: show active filter as dismissible pill in base list modal

Browse Source
This commit is contained in:
Ramesh Mane
2026-02-20 10:35:33 +00:00
parent e714e26df3
commit 35e5045933
1 changed files with 43 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
packages/nc-gui/components/workspace/BaseListModal/BasesHeader.vue
View File

@@ -43,9 +43,15 @@ const activeFilterIcon = computed(() => {
return selectedFilter.value?.icon || 'ncList'
})
const isFilterActive = computed(() => props.activeFilter !== 'all')
const onFilterChange = (value: string) => {
emit('update:activeFilter', value as FilterType)
}
const clearFilter = () => {
emit('update:activeFilter', 'all')
}
</script>
<template>
@@ -57,12 +63,19 @@ const onFilterChange = (value: string) => {
<span class="font-normal text-nc-content-gray-muted">({{ baseCount }})</span>
</div>
<!-- Active filter pill -->
<div v-if="isFilterActive" class="nc-filter-pill" @click.stop>
<GeneralIcon :icon="activeFilterIcon" class="w-3.5 h-3.5" />
<span class="text-bodyDefaultSm font-medium">{{ selectedFilter?.label }}</span>
<GeneralIcon icon="close" class="nc-filter-pill-close w-3.5 h-3.5 cursor-pointer" @click="clearFilter" />
</div>
<!-- Filter Dropdown - Desktop -->
<NcListDropdown v-model:is-open="isFilterDropdownOpen" :default-slot-wrapper="false" placement="bottomRight">
<NcListDropdown v-if="!isFilterActive" v-model:is-open="isFilterDropdownOpen" :default-slot-wrapper="false" placement="bottomRight">
<NcButton size="small" type="secondary">
<div class="flex items-center gap-1">
<GeneralIcon :icon="activeFilterIcon" class="w-4 h-4" />
<span class="text-bodyDefaultSm">{{ selectedFilter?.label }}</span>
<GeneralIcon icon="ncList" class="w-4 h-4" />
<span class="text-bodyDefaultSm">{{ $t('activity.allBases') }}</span>
<GeneralIcon
icon="chevronDown"
class="w-4 h-4 transition-transform"
@@ -112,13 +125,20 @@ const onFilterChange = (value: string) => {
</template>
</a-input>
<!-- Filter Dropdown - Compact (shows icon only when search focused) -->
<NcListDropdown v-model:is-open="isFilterDropdownOpen" :default-slot-wrapper="false" placement="bottomRight">
<!-- Active filter pill - Compact -->
<div v-if="isFilterActive" class="nc-filter-pill flex-none" @click.stop>
<GeneralIcon :icon="activeFilterIcon" class="w-3.5 h-3.5" />
<span class="text-bodyDefaultSm font-medium max-w-20 truncate">{{ selectedFilter?.label }}</span>
<GeneralIcon icon="close" class="nc-filter-pill-close w-3.5 h-3.5 cursor-pointer" @click="clearFilter" />
</div>
<!-- Filter Dropdown - Compact -->
<NcListDropdown v-if="!isFilterActive" v-model:is-open="isFilterDropdownOpen" :default-slot-wrapper="false" placement="bottomRight">
<NcButton size="small" type="secondary" class="flex-none">
<div class="flex items-center gap-1">
<GeneralIcon :icon="activeFilterIcon" class="w-4 h-4" />
<GeneralIcon icon="ncList" class="w-4 h-4" />
<template v-if="(!isSearchFocused && !vSearchQuery) || !isMobileMode">
<span class="max-w-20 truncate">{{ selectedFilter?.label }}</span>
<span class="max-w-20 truncate">{{ $t('activity.allBases') }}</span>
<GeneralIcon
icon="chevronDown"
class="w-4 h-4 transition-transform"
@@ -148,3 +168,19 @@ const onFilterChange = (value: string) => {
</template>
</div>
</template>
<style scoped lang="scss">
.nc-filter-pill {
@apply flex items-center gap-1.5 px-2 py-1 rounded-full
bg-nc-bg-brand-soft text-nc-content-brand text-xs font-medium
border-1 border-nc-border-brand;
.nc-filter-pill-close {
@apply rounded-full opacity-70 transition-opacity;
&:hover {
@apply opacity-100;
}
}
}
</style>