github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

fix(nc-gui): add search option in dropdown

pull/8836/head
Ramesh Mane 5 months ago
parent
15b8e4172c
commit
46e8e59a74
3 changed files with 328 additions and 203 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      packages/nc-gui/assets/nc-icons/chevron-up-down.svg
  2. 523
      packages/nc-gui/components/workspace/AuditLogs.vue
  3. 2
      packages/nc-gui/utils/iconUtils.ts

6
packages/nc-gui/assets/nc-icons/chevron-up-down.svg
Unescape View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" class="flex-none">
<path d="M12 6L8 2L4 6" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"
class="up" />
<path d=" M4 10L8 14L12 10" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round"
stroke-linejoin="round" class="down" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 410 B

523
packages/nc-gui/components/workspace/AuditLogs.vue
Unescape View File

@ -1,5 +1,6 @@
<script setup lang="ts">
import { Empty } from 'ant-design-vue'
import type { VNodeRef } from '@vue/runtime-core'
import type { AuditType, WorkspaceUserType } from 'nocodb-sdk'
import {
AuditOperationSubTypes,
@ -68,6 +69,14 @@ const auditDropdowns = ref({
user: false,
})
const auditDropdownsSearch = ref({
type: '',
base: '',
user: '',
})
console.log('changing')
const auditTypeOptions = computed(() => {
return Object.values(AuditOperationTypes)
.filter((type) => allowedAuditOperationTypes.includes(type as AuditOperationTypes))
@ -154,6 +163,27 @@ onMounted(async () => {
await loadAudits(currentPage.value, currentLimit.value)
}
})
watchEffect(() => {
console.log('auditDropdownsSearch', auditDropdownsSearch.value)
})
watch(
auditDropdownsSearch,
() => {
console.log('fdlsa', auditDropdownsSearch.value)
},
{ deep: true },
)
const focusUserSearchRef: VNodeRef = (el) => {
return el && auditDropdowns.value.user && el?.focus?.()
}
const focusBaseSearchRef: VNodeRef = (el) => {
return el && auditDropdowns.value.base && el?.focus?.()
}
const focusTypeSearchRef: VNodeRef = (el) => {
return el && auditDropdowns.value.type && el?.focus?.()
}
</script>
<template>
@ -187,248 +217,335 @@ onMounted(async () => {
@keydown.enter.exact="loadAudits"
>
<template #prefix>
<GeneralIcon icon="search" class="mr-2 h-4 w-4 text-gray-500 group-hover:text-black" />
<GeneralIcon icon="search" class="mr-1 h-4 w-4 text-gray-500 group-hover:text-black" />
</template>
<template #suffix>
<GeneralIcon
v-if="auditLogsQuery.search && auditLogsQuery.search.length > 0"
icon="close"
class="ml-2 h-4 w-4 text-gray-500 group-hover:text-black"
class="ml-1 h-4 w-4 text-gray-500 group-hover:text-black"
data-testid="nc-audit-logs-clear-search"
@click="auditLogsQuery.search = undefined"
/>
</template>
</a-input>
</form>
<div class="flex items-stretch border-1 border-gray-200 rounded-lg overflow-hidden h-8">
<NcDropdown v-model:visible="auditDropdowns.type">
<NcButton type="secondary" size="small" class="!border-none !rounded-none">
<div class="!w-[106px] flex items-center justify-between gap-2">
<div class="max-w-[120px] truncate text-sm !leading-5">
Type: {{ auditOperationTypeLabels[auditLogsQuery.type] || 'All' }}
</div>
<GeneralIcon icon="arrowDown" class="flex-none h-4 w-4" />
<NcDropdown
v-if="collaborators?.length"
v-model:visible="auditDropdowns.user"
@update:visible="
(value) => {
if (value) {
auditDropdownsSearch.user = ''
}
}
"
>
<NcButton type="secondary" size="small">
<div class="flex items-center gap-2">
<div class="max-w-[120px] truncate text-sm !leading-5">
User:
<span :class="{ 'text-brand-500': auditLogsQuery.user }">
{{
(auditLogsQuery.user &&
(collaboratorsMap.get(auditLogsQuery.user)?.display_name ||
collaboratorsMap
.get(auditLogsQuery.user)
?.email?.slice(0, collaboratorsMap.get(auditLogsQuery.user)?.email.indexOf('@')))) ||
'All'
}}
</span>
</div>
</NcButton>
<template #overlay>
<NcMenu
class="w-[256px]"
@click="
() => {
auditDropdowns.type = false
<GeneralIcon icon="arrowDown" class="flex-none h-4 w-4" />
</div>
</NcButton>
loadAudits()
}
"
>
<NcMenuItem class="!children:w-full" @click="auditLogsQuery.type = undefined">
<div class="w-full flex items-center justify-between gap-3">
<span class="flex-1"> All Types </span>
<GeneralIcon v-if="!auditLogsQuery.type" icon="check" class="flex-none text-primary w-4 h-4" />
</div>
</NcMenuItem>
<NcDivider />
<NcMenuItem
v-for="type in auditTypeOptions"
:key="type.value"
class="!children:w-full"
@click="
() => {
auditLogsQuery.type = type.value
auditLogsQuery.subType = undefined
}
"
<template #overlay>
<div class="w-[256px]">
<div class="px-2 py-2" @click.stop>
<a-input
v-model:value="auditDropdownsSearch.user"
type="text"
:ref="focusUserSearchRef"
autocomplete="off"
class="nc-input-sm nc-input-shadow"
placeholder="Search"
data-testid="nc-audit-dropdown-user-search-input"
>
<div class="w-full flex items-center justify-between gap-3">
<div class="flex-1 flex items-center gap-2 max-w-[calc(100%_-_28px)]">
{{ type.label }}
</div>
<GeneralIcon v-if="auditLogsQuery.type === type.value" icon="check" class="flex-none text-primary w-4 h-4" />
</div>
</NcMenuItem>
</NcMenu>
</template>
</NcDropdown>
<NcDropdown v-model:visible="auditDropdowns.subType" placement="bottomRight">
<NcButton type="secondary" size="small" class="!border-none !rounded-none">
<div class="!w-[146px] flex items-center justify-between gap-2">
<div class="truncate text-sm !leading-5">
Sub-Type:
{{ auditLogsQuery.subType ? auditOperationSubTypeLabels[auditLogsQuery.subType] : 'All' }}
</div>
<GeneralIcon icon="arrowDown" class="flex-none h-4 w-4" />
<template #prefix>
<GeneralIcon icon="search" class="mr-1 h-4 w-4 text-gray-500 group-hover:text-black" />
</template>
<template #suffix>
<GeneralIcon
v-if="auditDropdownsSearch.user.length > 0"
icon="close"
class="ml-1 h-4 w-4 text-gray-500 group-hover:text-black"
data-testid="nc-audit-logs-clear-search"
@click="auditDropdownsSearch.user = ''"
/>
</template>
</a-input>
</div>
</NcButton>
<template #overlay>
<NcMenu
class="w-[256px]"
class="w-full max-h-[360px] nc-scrollbar-thin"
@click="
() => {
auditDropdowns.subType = false
auditDropdowns.user = false
loadAudits()
}
"
>
<NcMenuItem class="!children:w-full" @click="auditLogsQuery.subType = undefined">
<div class="w-full flex items-center justify-between gap-3">
<span class="flex-1"> All SubTypes </span>
<GeneralIcon v-if="!auditLogsQuery.subType" icon="check" class="flex-none text-primary w-4 h-4" />
</div>
</NcMenuItem>
<NcDivider />
<NcMenuItem
v-for="subType in auditSubTypeOptions"
:key="subType.value"
class="!children:w-full"
@click="auditLogsQuery.subType = subType.value"
class="!children:w-full ant-dropdown-menu-item ant-dropdown-menu-item-only-child sticky top-0"
@click="auditLogsQuery.user = undefined"
>
<div class="w-full flex items-center justify-between gap-3">
<div class="flex-1 flex items-center gap-2 max-w-[calc(100%_-_28px)]">
{{ subType.label }}
</div>
<GeneralIcon
v-if="auditLogsQuery.subType === subType.value"
icon="check"
class="flex-none text-primary w-4 h-4"
/>
<span class="flex-1 text-gray-800"> All Users </span>
<GeneralIcon v-if="!auditLogsQuery.user" icon="check" class="flex-none text-primary w-4 h-4" />
</div>
</NcMenuItem>
<NcDivider />
<template v-for="(coll, index) of collaborators" :key="index">
<NcMenuItem
v-if="
coll.email?.includes(auditDropdownsSearch.user.toLowerCase()) ||
coll.display_name?.includes(auditDropdownsSearch.user.toLowerCase())
"
class="!children:w-full ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
@click="auditLogsQuery.user = coll.email"
>
<div class="w-full flex items-center justify-between gap-3">
<div v-if="coll?.email" class="w-full flex gap-3 items-center max-w-[calc(100%_-_28px)]">
<GeneralUserIcon :email="coll?.email" size="base" class="flex-none" />
<div class="flex-1 flex flex-col max-w-[calc(100%_-_44px)]">
<div class="w-full flex gap-3">
<span class="text-sm text-gray-800 capitalize font-semibold truncate">
{{ coll?.display_name || coll?.email?.slice(0, coll?.email.indexOf('@')) }}
</span>
</div>
<span class="text-xs text-gray-600 truncate">
{{ coll?.email }}
</span>
</div>
</div>
<template v-else>{{ coll.email }} </template>
<GeneralIcon
v-if="auditLogsQuery.user === coll.email"
icon="check"
class="flex-none text-primary w-4 h-4"
/>
</div>
</NcMenuItem>
</template>
</NcMenu>
</template>
</NcDropdown>
</div>
<NcDropdown v-if="basesList?.length" v-model:visible="auditDropdowns.base">
</div>
</template>
</NcDropdown>
<NcDropdown
v-if="basesList?.length"
v-model:visible="auditDropdowns.base"
@update:visible="
(value) => {
if (value) {
auditDropdownsSearch.base = ''
}
}
"
>
<NcButton type="secondary" size="small">
<div class="flex items-center gap-2">
<div class="max-w-[120px] truncate text-sm !leading-5">
Base: {{ (auditLogsQuery.base && bases.get(auditLogsQuery.base)?.title) || 'All' }}
Base:
<span :class="{ 'text-brand-500': auditLogsQuery.base }">
{{ (auditLogsQuery.base && bases.get(auditLogsQuery.base)?.title) || 'All' }}
</span>
</div>
<GeneralIcon icon="arrowDown" class="flex-none h-4 w-4" />
</div>
</NcButton>
<template #overlay>
<NcMenu
class="w-[256px]"
@click="
() => {
auditDropdowns.base = false
loadAudits()
}
"
>
<NcMenuItem
class="!children:w-full"
<div class="w-[256px]">
<div class="px-2 pt-2" @click.stop>
<a-input
v-model:value="auditDropdownsSearch.base"
type="text"
:ref="focusBaseSearchRef"
autocomplete="off"
class="nc-input-sm nc-input-shadow"
placeholder="Search"
data-testid="nc-audit-dropdown-base-search-input"
>
<template #prefix>
<GeneralIcon icon="search" class="mr-1 h-4 w-4 text-gray-500 group-hover:text-black" />
</template>
<template #suffix>
<GeneralIcon
v-if="auditDropdownsSearch.user.length > 0"
icon="close"
class="ml-1 h-4 w-4 text-gray-500 group-hover:text-black"
data-testid="nc-audit-logs-clear-search"
@click="auditDropdownsSearch.user = ''"
/>
</template>
</a-input>
</div>
<NcMenu
class="w-full max-h-[360px] nc-scrollbar-thin"
@click="
() => {
auditLogsQuery.base = undefined
auditLogsQuery.sourceId = undefined
auditDropdowns.base = false
loadAudits()
}
"
>
<div class="w-full flex items-center justify-between gap-3">
<span class="flex-1"> All Bases </span>
<GeneralIcon v-if="!auditLogsQuery.base" icon="check" class="flex-none text-primary w-4 h-4" />
</div>
</NcMenuItem>
<NcDivider />
<template v-for="(base, index) of basesList" :key="index">
<NcMenuItem
v-if="base?.sources?.[0]?.enabled"
class="!children:w-full"
class="!children:w-full ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
@click="
() => {
auditLogsQuery.base = base.id
auditLogsQuery.sourceId = base?.sources?.[0]?.id
auditLogsQuery.base = undefined
auditLogsQuery.sourceId = undefined
}
"
>
<div class="w-full flex items-center justify-between gap-3">
<div class="flex-1 flex items-center gap-2 max-w-[calc(100%_-_28px)]">
<GeneralProjectIcon
:color="base?.meta?.iconColor"
:type="base?.type || 'database'"
class="nc-view-icon w-4 h-4 flex-none"
/>
<NcTooltip class="max-w-full truncate" placement="top">
<template #title> {{ base.title }}</template>
{{ base.title }}
</NcTooltip>
</div>
<GeneralIcon v-if="auditLogsQuery.base === base.id" icon="check" class="flex-none text-primary w-4 h-4" />
<span class="flex-1 text-gray-800"> All Bases </span>
<GeneralIcon v-if="!auditLogsQuery.base" icon="check" class="flex-none text-primary w-4 h-4" />
</div>
</NcMenuItem>
</template>
</NcMenu>
<NcDivider />
<template v-for="(base, index) of basesList" :key="index">
<NcMenuItem
v-if="
base?.sources?.[0]?.enabled && base.title?.toLowerCase()?.includes(auditDropdownsSearch.base.toLowerCase())
"
class="!children:w-full ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
@click="
() => {
auditLogsQuery.base = base.id
auditLogsQuery.sourceId = base?.sources?.[0]?.id
}
"
>
<div class="w-full flex items-center justify-between gap-3">
<div class="flex-1 flex items-center gap-2 max-w-[calc(100%_-_28px)]">
<GeneralProjectIcon
:color="base?.meta?.iconColor"
:type="base?.type || 'database'"
class="nc-view-icon w-4 h-4 flex-none"
/>
<NcTooltip class="max-w-full truncate text-gray-800" placement="top" show-on-truncate-only>
<template #title> {{ base.title }}</template>
{{ base.title }}
</NcTooltip>
</div>
<GeneralIcon v-if="auditLogsQuery.base === base.id" icon="check" class="flex-none text-primary w-4 h-4" />
</div>
</NcMenuItem>
</template>
</NcMenu>
</div>
</template>
</NcDropdown>
<NcDropdown v-if="collaborators?.length" v-model:visible="auditDropdowns.user">
<NcDropdown
v-model:visible="auditDropdowns.type"
@update:visible="
(value) => {
if (value) {
auditDropdownsSearch.type = ''
}
}
"
>
<NcButton type="secondary" size="small">
<div class="flex items-center gap-2">
<div class="!w-[106px] flex items-center justify-between gap-2">
<div class="max-w-[120px] truncate text-sm !leading-5">
User:
{{
(auditLogsQuery.user &&
(collaboratorsMap.get(auditLogsQuery.user)?.display_name ||
collaboratorsMap
.get(auditLogsQuery.user)
?.email?.slice(0, collaboratorsMap.get(auditLogsQuery.user)?.email.indexOf('@')))) ||
'All'
}}
Type:
<span :class="{ 'text-brand-500': auditLogsQuery.type }">
{{ auditLogsQuery.type ? auditOperationTypeLabels[auditLogsQuery.type] : 'All' }}
</span>
</div>
<GeneralIcon icon="arrowDown" class="flex-none h-4 w-4" />
</div>
</NcButton>
<template #overlay>
<NcMenu
class="w-[256px]"
@click="
() => {
auditDropdowns.user = false
loadAudits()
}
"
>
<NcMenuItem class="!children:w-full" @click="auditLogsQuery.user = undefined">
<div class="w-full flex items-center justify-between gap-3">
<span class="flex-1"> All Users </span>
<GeneralIcon v-if="!auditLogsQuery.user" icon="check" class="flex-none text-primary w-4 h-4" />
</div>
</NcMenuItem>
<NcDivider />
<NcMenuItem
v-for="(coll, index) of collaborators"
:key="index"
class="!children:w-full"
@click="auditLogsQuery.user = coll.email"
<div class="w-[256px]">
<div class="px-2 pt-2" @click.stop>
<a-input
v-model:value="auditDropdownsSearch.type"
type="text"
:ref="focusTypeSearchRef"
autocomplete="off"
class="nc-input-sm nc-input-shadow"
placeholder="Search"
data-testid="nc-audit-dropdown-type-search-input"
>
<template #prefix>
<GeneralIcon icon="search" class="mr-1 h-4 w-4 text-gray-500 group-hover:text-black" />
</template>
<template #suffix>
<GeneralIcon
v-if="auditDropdownsSearch.type.length > 0"
icon="close"
class="ml-1 h-4 w-4 text-gray-500 group-hover:text-black"
data-testid="nc-audit-logs-clear-search"
@click="auditDropdownsSearch.type = ''"
/>
</template>
</a-input>
</div>
<NcMenu
class="w-full max-h-[360px] nc-scrollbar-thin"
@click="
() => {
auditDropdowns.type = false
loadAudits()
}
"
>
<div class="w-full flex items-center justify-between gap-3">
<div v-if="coll?.email" class="w-full flex gap-3 items-center max-w-[calc(100%_-_28px)]">
<GeneralUserIcon :email="coll?.email" size="base" class="flex-none" />
<div class="flex-1 flex flex-col max-w-[calc(100%_-_44px)]">
<div class="w-full flex gap-3">
<span class="text-sm text-gray-800 capitalize font-semibold truncate">
{{ coll?.display_name || coll?.email?.slice(0, coll?.email.indexOf('@')) }}
</span>
</div>
<span class="text-xs text-gray-600 truncate">
{{ coll?.email }}
</span>
</div>
<NcMenuItem
class="!children:w-full ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
@click="auditLogsQuery.type = undefined"
>
<div class="w-full flex items-center justify-between gap-3">
<span class="flex-1 text-gray-800"> All Types </span>
<GeneralIcon v-if="!auditLogsQuery.type" icon="check" class="flex-none text-primary w-4 h-4" />
</div>
<template v-else>{{ coll.email }} </template>
</NcMenuItem>
<NcDivider />
<template v-for="type in auditTypeOptions" :key="type.value">
<NcMenuItem
v-if="type.label.toLowerCase().includes(auditDropdownsSearch.type.toLowerCase())"
class="!children:w-full ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
@click="
() => {
auditLogsQuery.type = type.value
auditLogsQuery.subType = undefined
}
"
>
<div class="w-full flex items-center justify-between gap-3">
<div class="flex-1 flex items-center gap-2 max-w-[calc(100%_-_28px)] text-gray-800">
{{ type.label }}
</div>
<GeneralIcon v-if="auditLogsQuery.user === coll.email" icon="check" class="flex-none text-primary w-4 h-4" />
</div>
</NcMenuItem>
</NcMenu>
<GeneralIcon
v-if="auditLogsQuery.type === type.value"
icon="check"
class="flex-none text-primary w-4 h-4"
/>
</div>
</NcMenuItem>
</template>
</NcMenu>
</div>
</template>
</NcDropdown>
</div>
@ -438,46 +555,32 @@ onMounted(async () => {
<div class="nc-audit-logs-table table h-full">
<div class="thead sticky top-0">
<div class="tr">
<div class="th cell-user">
<div class="th cell-user !hover:bg-gray-100" @click="toggleOrderBy('user')">
<div class="flex items-center gap-3">
<div class="flex-1">User</div>
<button class="!p-0 flex flex-col" @click="toggleOrderBy('user')">
<GeneralIcon
icon="arrowUp"
class="flex-none h-4 w-4"
:class="{
'!text-brand-500': auditLogsQuery.orderBy?.user === 'asc',
}"
/>
<NcButton type="text" size="xs" class="!p-0">
<GeneralIcon
icon="arrowDown"
class="flex-none h-4 w-4"
icon="chevronUpDown"
:class="{
'!text-brand-500': auditLogsQuery.orderBy?.user === 'desc',
'sort-asc': auditLogsQuery.orderBy?.user === 'asc',
'sort-desc': auditLogsQuery.orderBy?.user === 'desc',
}"
/>
</button>
</NcButton>
</div>
</div>
<div class="th cell-timestamp">
<div class="th cell-timestamp !hover:bg-gray-100" @click="toggleOrderBy('created_at')">
<div class="flex items-center gap-3">
<div class="flex-1">Time stamp</div>
<button class="!p-0 flex flex-col" @click="toggleOrderBy('created_at')">
<GeneralIcon
icon="arrowUp"
class="flex-none h-4 w-4"
:class="{
'!text-brand-500': auditLogsQuery.orderBy?.created_at === 'asc',
}"
/>
<NcButton type="text" size="xs" class="!p-0">
<GeneralIcon
icon="arrowDown"
class="flex-none h-4 w-4"
icon="chevronUpDown"
:class="{
'!text-brand-500': auditLogsQuery.orderBy?.created_at === 'desc',
'sort-asc': auditLogsQuery.orderBy?.created_at === 'asc',
'sort-desc': auditLogsQuery.orderBy?.created_at === 'desc',
}"
/>
</button>
</NcButton>
</div>
</div>
<div class="th cell-base">Base</div>
@ -761,4 +864,18 @@ onMounted(async () => {
.cell-header {
@apply uppercase text-tiny font-semibold text-gray-500;
}
:deep(.nc-button) {
svg.sort-asc path.up {
@apply !stroke-brand-500;
}
svg.sort-desc path.down {
@apply !stroke-brand-500;
}
}
:deep(.nc-menu-item::after) {
content: none;
}
:deep(.ant-menu.nc-menu) {
@apply !pt-0;
}
</style>

2
packages/nc-gui/utils/iconUtils.ts
Unescape View File

@ -114,6 +114,7 @@ import NcCommentHere from '~icons/nc-icons/comment-here'
import NcAddDataSource from '~icons/nc-icons/add-data-source'
import NcDatabaseIcon from '~icons/nc-icons/database'
import NcChevronDown from '~icons/nc-icons/chevron-down'
import NcChevronUpDown from '~icons/nc-icons/chevron-up-down'
import NcTrash from '~icons/nc-icons/trash'
import NcPencil from '~icons/nc-icons/pencil'
import NcRename from '~icons/nc-icons/rename'
@ -634,6 +635,7 @@ export const iconMap = {
maximizeAll: NcMaximizeAll,
ncDrag: NcDrag,
refresh: NcRefresh,
chevronUpDown: NcChevronUpDown,
}
export const getMdiIcon = (type: string): any => {

Write Preview
Loading…
Cancel
Save