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

feat: add search to base integrations, filter active connections by search, update subtitles

Browse Source
This commit is contained in:
Ramesh Mane
2026-04-10 09:37:39 +00:00
parent 4f60534dde
commit a00fd60d81
5 changed files with 112 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/nc-gui/components/workspace/integrations/ActiveConnectionsSection.vue
View File

@@ -6,10 +6,12 @@ interface Props {
connections: IntegrationType[]
totalCount: number
maxVisible?: number
searchQuery?: string
}
const props = withDefaults(defineProps<Props>(), {
maxVisible: 6,
searchQuery: '',
})
const emits = defineEmits<{
@@ -37,7 +39,15 @@ const collaboratorsMap = computed<Map<string, (WorkspaceUserType & { id: string
return map
})
const filteredConnections = computed(() => (props.connections || []).filter((i) => IntegrationsType.Sync !== i.type))
const filteredConnections = computed(() => {
const query = props.searchQuery.trim().toLowerCase()
return (props.connections || []).filter((i) => {
if (IntegrationsType.Sync === i.type) return false
if (query && !i.title?.toLowerCase().includes(query)) return false
return true
})
})
const visibleConnections = computed(() => {
return filteredConnections.value.slice(0, props.maxVisible)

2
packages/nc-gui/components/workspace/integrations/ConnectionsTab.vue
View File

@@ -348,7 +348,7 @@ const customRow = (record: Record<string, any>) => ({
<a-input
v-model:value="searchQuery"
type="text"
class="nc-search-integration-input nc-input-sm flex-1"
class="nc-search-integration-input !rounded-lg !py-2 !h-9 flex-1"
:placeholder="`${$t('general.search')} ${$t('general.connections').toLowerCase()}`"
allow-clear
@input="handleSearchConnection"

79
packages/nc-gui/components/workspace/integrations/IntegrationsTab.vue
View File

@@ -338,7 +338,7 @@ watch(activeViewTab, (value) => {
v-if="easterEggToggle"
v-model:value="searchQuery"
type="text"
class="flex-1 nc-input-border-on-value nc-search-integration-input nc-input-sm"
class="flex-1 nc-input-border-on-value nc-search-integration-input !rounded-lg !py-2 !h-9"
placeholder="Search integration"
allow-clear
>
@@ -347,47 +347,47 @@ watch(activeViewTab, (value) => {
</template>
</a-input>
<NcDropdown v-if="easterEggToggle && showFilter" v-model:visible="isOpenFilter" placement="bottomRight">
<NcButton size="small" type="secondary">
<div class="flex items-center gap-2">
<GeneralIcon icon="filter" />
<div
v-if="integrationCategoriesRef.length - categoriesQuery.length"
class="bg-nc-bg-brand text-nc-content-brand p-1 text-xs rounded-md min-w-6"
>
{{ integrationCategoriesRef.length - categoriesQuery.length }}
</div>
</div>
</NcButton>
<NcButton size="medium" type="secondary" class="!px-1 !min-h-9 !min-w-9 !h-9 !w-9">
<div class="flex items-center gap-2">
<GeneralIcon icon="filter" />
<div
v-if="integrationCategoriesRef.length - categoriesQuery.length"
class="bg-nc-bg-brand text-nc-content-brand p-1 text-xs rounded-md min-w-6"
>
{{ integrationCategoriesRef.length - categoriesQuery.length }}
</div>
</div>
</NcButton>
<template #overlay>
<NcList
v-model:value="categoriesQuery"
v-model:open="isOpenFilter"
:list="integrationCategoriesRef"
search-input-placeholder="Search category"
:close-on-select="false"
is-multi-select
variant="medium"
>
<template #listFooter>
<NcDivider class="!mt-0 !mb-2" />
<div class="px-2 mb-2">
<div
class="px-2 py-1.5 flex items-center justify-between gap-2 text-sm font-weight-500 !text-nc-content-brand hover:bg-nc-bg-gray-light rounded-md cursor-pointer"
@click="toggleShowOrHideAllCategory"
>
<div class="flex items-center gap-2">
<GeneralIcon :icon="isVisibleAllCategory ? 'eyeSlash' : 'eye'" />
<div>
{{ isVisibleAllCategory ? $t('general.hideAll') : $t('general.showAll') }}
</div>
</div>
<template #overlay>
<NcList
v-model:value="categoriesQuery"
v-model:open="isOpenFilter"
:list="integrationCategoriesRef"
search-input-placeholder="Search category"
:close-on-select="false"
is-multi-select
variant="medium"
>
<template #listFooter>
<NcDivider class="!mt-0 !mb-2" />
<div class="px-2 mb-2">
<div
class="px-2 py-1.5 flex items-center justify-between gap-2 text-sm font-weight-500 !text-nc-content-brand hover:bg-nc-bg-gray-light rounded-md cursor-pointer"
@click="toggleShowOrHideAllCategory"
>
<div class="flex items-center gap-2">
<GeneralIcon :icon="isVisibleAllCategory ? 'eyeSlash' : 'eye'" />
<div>
{{ isVisibleAllCategory ? $t('general.hideAll') : $t('general.showAll') }}
</div>
</div>
</template></NcList
>
</template>
</NcDropdown>
</div>
</div>
</template></NcList
>
</template>
</NcDropdown>
</div>
</div>
@@ -408,6 +408,7 @@ watch(activeViewTab, (value) => {
v-if="showActiveConnections && !isModal && integrations.length"
:connections="integrations"
:total-count="integrationPaginationData.totalRows || 0"
:search-query="searchQuery"
@view-all="emits('view-all-connections')"
/>
<NcDivider v-if="showActiveConnections && !isModal && integrations.length" />