多维表格
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

442 lines
13 KiB

<script lang="ts" setup>
import { type TableType, ViewLockType, type ViewType, type ViewTypes } from 'nocodb-sdk'
import type { WritableComputedRef } from '@vue/reactivity'
import { LockType, isDefaultBase as _isDefaultBase } from '#imports'
interface Props {
view: ViewType
table: TableType
onValidate: (view: ViewType) => boolean | string
}
interface Emits {
(event: 'update:view', data: Record<string, any>): void
(event: 'selectIcon', icon: string): void
(event: 'changeView', view: Record<string, any>): void
(event: 'rename', view: ViewType, title: string | undefined): void
(event: 'delete', view: ViewType): void
(
event: 'openModal',
data: { type: ViewTypes; title?: string; copyViewId?: string; groupingFieldColumnId?: string; coverImageColumnId?: string },
): void
}
const props = defineProps<Props>()
const emits = defineEmits<Emits>()
const vModel = useVModel(props, 'view', emits) as WritableComputedRef<
ViewType & { alias?: string; is_default: boolean; created_by?: string }
>
const { $e } = useNuxtApp()
const { t } = useI18n()
const { isMobileMode, user } = useGlobal()
const { isUIAllowed } = useRoles()
const base = inject(ProjectInj, ref())
const { activeView } = storeToRefs(useViewsStore())
const { getMeta } = useMetas()
const { meta: metaKey, control } = useMagicKeys()
const { basesUser } = storeToRefs(useBases())
const table = computed(() => props.table)
const injectedTable = ref(table.value)
provide(ActiveViewInj, vModel)
provide(MetaInj, injectedTable)
const isLocked = inject(IsLockedInj, ref(false))
const isDefaultBase = computed(() => {
if (base.value?.sources?.length === 1) return true
const source = base.value?.sources?.find((b) => b.id === vModel.value.source_id)
if (!source) return false
return _isDefaultBase(source)
})
const { openViewDescriptionDialog: _openViewDescriptionDialog } = inject(TreeViewInj)!
Nc feat: header revamp (#9204) * fix(nc-gui): update topbar breadcrumb divider * feat(nc-gui): custom list component setup * fix(nc-gui): update reload view data tooltip * feat(nc-gui): custom list component * feat(nc-gui): add table list menu * fix(nc-gui): small changes * fix(nc-gui): add bases list dropdown * fix(nc-gui): show chevron icon in mobile view * feat(nc-gui): add view list dropdown in topbar * fix(nc-gui): auto scroll selected list option on open dropdown * feat(nc-gui): add typedocs for each fun from custom list component * chore(nc-gui): add typedocs for new functions * fix(nc-gui): view search issue on default view * fix(nc-gui): reset selected option hover state on search input * fix(nc-gui): font weight issue * fix(nc-gui): show reload data topbar option * fix(nc-gui): change view action menu position * fix(nc-gui): font weight issue * feat(nc-gui): create new table/view from topbar * fix(nc-gui): update other page headers * fix(nc-gui): project view header * fix(nc-gui): update admin panel workspaces page header * fix(nc-gui): admin panel base/workspace user page header * fix(nc-gui): admin panel scroll issue * fix(nc-gui): update project home page * fix(nc-gui): table list scroll issue * chore(nc-gui): lint * fix(nc-gui): reset breadcrumb btn hover state on open dropdown * fix(nc-gui): review changes * fix(nc-gui): use slash icon instead of text * fix(nc-gui): pr review changes * fix(nc-gui): details tab height issue * fix(nc-gui): add user account pages breadcrumb * fix(nc-gui): hide rename view option * fix(nc-gui): disable scrollIntoView on base rename * fix(nc-gui): on rename view select text * fix(nc-gui): user menu overflow issue if sidebar baselist is scrollable * feat(nc-gui): use virtual scrolling for NcList component * fix(nc-gui): reduce chevron icon opacity * chore(nc-gui): lint * fix(nc-gui): ai review changes * fix(nc-gui): view rename input focus issue * fix(nc-gui): topbar width issue * fix(nc-gui): udpate toolbar height * fix(nc-gui): update chevron icon from breadcrumb * fix(nc-gui): update breadcrumb icon size * fix(nc-gui): add min width for breadcrumb * fix(nc-gui): add topbar bottom border * fix(nc-gui): details tab heigth and alignment issue * fix(nc-gui): hide basename and show only icon * fix(nc-gui): update NcList component * fix(nc-gui): update admin panel header * fix(nc-gui): add header in account settings pages * fix(nc-gui): add account pages header oss * fix(nc-gui): udpate max width * chore(nc-gui): lint * fix(nc-gui(: reduce topbar top padding * fix(nc-gui): typo error * fix(nc-gui): review changes * fix(nc-gui): review changes * fix(nc-gui): slash icon conflict * fix(nc-gui): review changes * fix(nc-gui): remove chevron icon & add list wrapper div to control height * fix(nc-gui): ncList keyboard navigation issue * chore(nc-gui): lint
4 months ago
const input = ref<HTMLInputElement>()
const isDropdownOpen = ref(false)
const isEditing = ref(false)
/** Is editing the view name enabled */
/** Helper to check if editing was disabled before the view navigation timeout triggers */
const isStopped = ref(false)
/** Original view title when editing the view name */
const _title = ref<string | undefined>()
const showViewNodeTooltip = ref(true)
const isViewOwner = computed(() => {
return vModel.value?.owned_by === user.value?.id
})
const idUserMap = computed(() => {
return (basesUser.value.get(base.value?.id) || []).reduce((acc, user) => {
acc[user.id] = user
acc[user.email] = user
return acc
}, {} as Record<string, any>)
})
/** Debounce click handler, so we can potentially enable editing view name {@see onDblClick} */
const onClick = useDebounceFn(() => {
emits('changeView', vModel.value)
}, 250)
const handleOnClick = () => {
if (isEditing.value || isStopped.value) return
const cmdOrCtrl = isMac() ? metaKey.value : control.value
if (cmdOrCtrl) {
emits('changeView', vModel.value)
} else {
onClick()
}
}
Nc feat: header revamp (#9204) * fix(nc-gui): update topbar breadcrumb divider * feat(nc-gui): custom list component setup * fix(nc-gui): update reload view data tooltip * feat(nc-gui): custom list component * feat(nc-gui): add table list menu * fix(nc-gui): small changes * fix(nc-gui): add bases list dropdown * fix(nc-gui): show chevron icon in mobile view * feat(nc-gui): add view list dropdown in topbar * fix(nc-gui): auto scroll selected list option on open dropdown * feat(nc-gui): add typedocs for each fun from custom list component * chore(nc-gui): add typedocs for new functions * fix(nc-gui): view search issue on default view * fix(nc-gui): reset selected option hover state on search input * fix(nc-gui): font weight issue * fix(nc-gui): show reload data topbar option * fix(nc-gui): change view action menu position * fix(nc-gui): font weight issue * feat(nc-gui): create new table/view from topbar * fix(nc-gui): update other page headers * fix(nc-gui): project view header * fix(nc-gui): update admin panel workspaces page header * fix(nc-gui): admin panel base/workspace user page header * fix(nc-gui): admin panel scroll issue * fix(nc-gui): update project home page * fix(nc-gui): table list scroll issue * chore(nc-gui): lint * fix(nc-gui): reset breadcrumb btn hover state on open dropdown * fix(nc-gui): review changes * fix(nc-gui): use slash icon instead of text * fix(nc-gui): pr review changes * fix(nc-gui): details tab height issue * fix(nc-gui): add user account pages breadcrumb * fix(nc-gui): hide rename view option * fix(nc-gui): disable scrollIntoView on base rename * fix(nc-gui): on rename view select text * fix(nc-gui): user menu overflow issue if sidebar baselist is scrollable * feat(nc-gui): use virtual scrolling for NcList component * fix(nc-gui): reduce chevron icon opacity * chore(nc-gui): lint * fix(nc-gui): ai review changes * fix(nc-gui): view rename input focus issue * fix(nc-gui): topbar width issue * fix(nc-gui): udpate toolbar height * fix(nc-gui): update chevron icon from breadcrumb * fix(nc-gui): update breadcrumb icon size * fix(nc-gui): add min width for breadcrumb * fix(nc-gui): add topbar bottom border * fix(nc-gui): details tab heigth and alignment issue * fix(nc-gui): hide basename and show only icon * fix(nc-gui): update NcList component * fix(nc-gui): update admin panel header * fix(nc-gui): add header in account settings pages * fix(nc-gui): add account pages header oss * fix(nc-gui): udpate max width * chore(nc-gui): lint * fix(nc-gui(: reduce topbar top padding * fix(nc-gui): typo error * fix(nc-gui): review changes * fix(nc-gui): review changes * fix(nc-gui): slash icon conflict * fix(nc-gui): review changes * fix(nc-gui): remove chevron icon & add list wrapper div to control height * fix(nc-gui): ncList keyboard navigation issue * chore(nc-gui): lint
4 months ago
const focusInput = () => {
setTimeout(() => {
input.value?.focus()
input.value?.select()
})
}
/** Enable editing view name on dbl click */
function onDblClick() {
if (isMobileMode.value) return
if (!isUIAllowed('viewCreateOrEdit')) return
if (!isEditing.value) {
isEditing.value = true
_title.value = vModel.value.title
$e('c:view:rename', { view: vModel.value?.type })
Nc feat: header revamp (#9204) * fix(nc-gui): update topbar breadcrumb divider * feat(nc-gui): custom list component setup * fix(nc-gui): update reload view data tooltip * feat(nc-gui): custom list component * feat(nc-gui): add table list menu * fix(nc-gui): small changes * fix(nc-gui): add bases list dropdown * fix(nc-gui): show chevron icon in mobile view * feat(nc-gui): add view list dropdown in topbar * fix(nc-gui): auto scroll selected list option on open dropdown * feat(nc-gui): add typedocs for each fun from custom list component * chore(nc-gui): add typedocs for new functions * fix(nc-gui): view search issue on default view * fix(nc-gui): reset selected option hover state on search input * fix(nc-gui): font weight issue * fix(nc-gui): show reload data topbar option * fix(nc-gui): change view action menu position * fix(nc-gui): font weight issue * feat(nc-gui): create new table/view from topbar * fix(nc-gui): update other page headers * fix(nc-gui): project view header * fix(nc-gui): update admin panel workspaces page header * fix(nc-gui): admin panel base/workspace user page header * fix(nc-gui): admin panel scroll issue * fix(nc-gui): update project home page * fix(nc-gui): table list scroll issue * chore(nc-gui): lint * fix(nc-gui): reset breadcrumb btn hover state on open dropdown * fix(nc-gui): review changes * fix(nc-gui): use slash icon instead of text * fix(nc-gui): pr review changes * fix(nc-gui): details tab height issue * fix(nc-gui): add user account pages breadcrumb * fix(nc-gui): hide rename view option * fix(nc-gui): disable scrollIntoView on base rename * fix(nc-gui): on rename view select text * fix(nc-gui): user menu overflow issue if sidebar baselist is scrollable * feat(nc-gui): use virtual scrolling for NcList component * fix(nc-gui): reduce chevron icon opacity * chore(nc-gui): lint * fix(nc-gui): ai review changes * fix(nc-gui): view rename input focus issue * fix(nc-gui): topbar width issue * fix(nc-gui): udpate toolbar height * fix(nc-gui): update chevron icon from breadcrumb * fix(nc-gui): update breadcrumb icon size * fix(nc-gui): add min width for breadcrumb * fix(nc-gui): add topbar bottom border * fix(nc-gui): details tab heigth and alignment issue * fix(nc-gui): hide basename and show only icon * fix(nc-gui): update NcList component * fix(nc-gui): update admin panel header * fix(nc-gui): add header in account settings pages * fix(nc-gui): add account pages header oss * fix(nc-gui): udpate max width * chore(nc-gui): lint * fix(nc-gui(: reduce topbar top padding * fix(nc-gui): typo error * fix(nc-gui): review changes * fix(nc-gui): review changes * fix(nc-gui): slash icon conflict * fix(nc-gui): review changes * fix(nc-gui): remove chevron icon & add list wrapper div to control height * fix(nc-gui): ncList keyboard navigation issue * chore(nc-gui): lint
4 months ago
nextTick(() => {
focusInput()
})
}
}
/** Handle keydown on input field */
function onKeyDown(event: KeyboardEvent) {
if (event.key === 'Escape') {
onKeyEsc(event)
} else if (event.key === 'Enter') {
onKeyEnter(event)
}
}
/** Rename view when enter is pressed */
function onKeyEnter(event: KeyboardEvent) {
event.stopImmediatePropagation()
event.preventDefault()
onRename()
}
/** Disable renaming view when escape is pressed */
function onKeyEsc(event: KeyboardEvent) {
event.stopImmediatePropagation()
event.preventDefault()
onCancel()
}
onKeyStroke('Enter', (event) => {
if (isEditing.value) {
onKeyEnter(event)
}
})
const onRenameMenuClick = () => {
if (isMobileMode.value || !isUIAllowed('viewCreateOrEdit')) return
if (!isEditing.value) {
isEditing.value = true
_title.value = vModel.value.title
$e('c:view:rename', { view: vModel.value?.type })
Nc feat: header revamp (#9204) * fix(nc-gui): update topbar breadcrumb divider * feat(nc-gui): custom list component setup * fix(nc-gui): update reload view data tooltip * feat(nc-gui): custom list component * feat(nc-gui): add table list menu * fix(nc-gui): small changes * fix(nc-gui): add bases list dropdown * fix(nc-gui): show chevron icon in mobile view * feat(nc-gui): add view list dropdown in topbar * fix(nc-gui): auto scroll selected list option on open dropdown * feat(nc-gui): add typedocs for each fun from custom list component * chore(nc-gui): add typedocs for new functions * fix(nc-gui): view search issue on default view * fix(nc-gui): reset selected option hover state on search input * fix(nc-gui): font weight issue * fix(nc-gui): show reload data topbar option * fix(nc-gui): change view action menu position * fix(nc-gui): font weight issue * feat(nc-gui): create new table/view from topbar * fix(nc-gui): update other page headers * fix(nc-gui): project view header * fix(nc-gui): update admin panel workspaces page header * fix(nc-gui): admin panel base/workspace user page header * fix(nc-gui): admin panel scroll issue * fix(nc-gui): update project home page * fix(nc-gui): table list scroll issue * chore(nc-gui): lint * fix(nc-gui): reset breadcrumb btn hover state on open dropdown * fix(nc-gui): review changes * fix(nc-gui): use slash icon instead of text * fix(nc-gui): pr review changes * fix(nc-gui): details tab height issue * fix(nc-gui): add user account pages breadcrumb * fix(nc-gui): hide rename view option * fix(nc-gui): disable scrollIntoView on base rename * fix(nc-gui): on rename view select text * fix(nc-gui): user menu overflow issue if sidebar baselist is scrollable * feat(nc-gui): use virtual scrolling for NcList component * fix(nc-gui): reduce chevron icon opacity * chore(nc-gui): lint * fix(nc-gui): ai review changes * fix(nc-gui): view rename input focus issue * fix(nc-gui): topbar width issue * fix(nc-gui): udpate toolbar height * fix(nc-gui): update chevron icon from breadcrumb * fix(nc-gui): update breadcrumb icon size * fix(nc-gui): add min width for breadcrumb * fix(nc-gui): add topbar bottom border * fix(nc-gui): details tab heigth and alignment issue * fix(nc-gui): hide basename and show only icon * fix(nc-gui): update NcList component * fix(nc-gui): update admin panel header * fix(nc-gui): add header in account settings pages * fix(nc-gui): add account pages header oss * fix(nc-gui): udpate max width * chore(nc-gui): lint * fix(nc-gui(: reduce topbar top padding * fix(nc-gui): typo error * fix(nc-gui): review changes * fix(nc-gui): review changes * fix(nc-gui): slash icon conflict * fix(nc-gui): review changes * fix(nc-gui): remove chevron icon & add list wrapper div to control height * fix(nc-gui): ncList keyboard navigation issue * chore(nc-gui): lint
4 months ago
nextTick(() => {
focusInput()
})
}
}
/** Rename a view */
async function onRename() {
isDropdownOpen.value = false
if (!isEditing.value) return
Nc Fix: UI improvements - left sidebar (#8244) * fix(nc-gui); update toolbar menu text grom GroupBy to Group * fix(nc-gui): move sidebar base, table expand icon to the right side * fix(nc-gui): sidebar base, table, view menu options padding issue * fix(nc-gui): add background color for row on hover in grid view * fix(nc-gui): reduce width of index column * fix(nc-gui): on hover grid row bg opacity issue * fix(nc-gui): reduce font size and grid cell height * fix(nc-gui): sidebar view menu alignment issue on mobile screen * fix(nc-gui): reduce font size * fix(nc-gui): set column default width to 180px * fix(nc-gui): keep only sidebar changes & revert all other changes * fix(nc-gui): change table icon * fix(nc-gui): trim base, table, view title while saving it * fix(nc-gui): increate left sidebar max width * fix(nc-gui): show truncated base/table/view name until standard end * fix(nc-gui): oss sidebar base menu options alignment issue * fix(nc-gui): use valid classname * fix(nc-gui): sidebar external db source menu ui fixes * fix(nc-gui): small changes * chore(nc-gui): lint * fix(nc-gui): pw test fail issue * fix(nc-gui): trim title while creating base, table, view * fix(nc-gui): some of the sidebar pw test fail issues * fix(test): sidebar test fail issue * fix(test): projectCollaboration test fail issue * fix(nc-gui): change font size of view menu option view mode chip text * fix(nc-gui): grayed out create view dropdown plus icon color * fix(nc-gui): grayed out table icon and reduce width of default view context menu * fix(nc-gui): remove copyright text from user menu * fix(nc-gui): chevron icon and show/hide sidebar icon should be gray in color
8 months ago
if (_title.value) {
_title.value = _title.value.trim()
}
const isValid = props.onValidate({ ...vModel.value, title: _title.value! })
if (isValid !== true) {
message.error(isValid)
onCancel()
return
}
if (vModel.value.title === '' || vModel.value.title === _title.value) {
onCancel()
return
}
const originalTitle = vModel.value.title
vModel.value.title = _title.value || ''
emits('rename', vModel.value, originalTitle)
onStopEdit()
}
const openViewDescriptionDialog = (view: ViewType) => {
isDropdownOpen.value = false
_openViewDescriptionDialog(view)
}
/** Cancel renaming view */
function onCancel() {
if (!isEditing.value) return
// vModel.value.title = _title || ''
onStopEdit()
}
/** Stop editing view name, timeout makes sure that view navigation (click trigger) does not pick up before stop is done */
function onStopEdit() {
isStopped.value = true
isEditing.value = false
_title.value = ''
setTimeout(() => {
isStopped.value = false
}, 250)
}
const onDelete = () => {
isDropdownOpen.value = false
emits('delete', vModel.value)
}
const viewModeInfo = computed(() => {
switch (vModel.value?.lock_type) {
case ViewLockType.Collaborative:
return t(viewLockIcons[ViewLockType.Collaborative]?.title)
case ViewLockType.Personal:
return `${t(viewLockIcons[ViewLockType.Personal]?.title)} ${
isViewOwner.value
? `(${t('general.you')})`
: vModel.value?.owned_by && idUserMap.value[vModel.value.owned_by]
? `(${idUserMap.value[vModel.value.owned_by]?.display_name || idUserMap.value[vModel.value.owned_by]?.email})`
: ''
}`
case ViewLockType.Locked:
if (!vModel.value?.meta?.lockedByUserId || !idUserMap.value[vModel.value?.meta?.lockedByUserId]) {
return t(viewLockIcons[ViewLockType.Locked]?.title)
}
return t('title.lockedByUser', {
user:
idUserMap.value[vModel.value?.meta?.lockedByUserId]?.id === user.value?.id
? t('general.you')
: idUserMap.value[vModel.value?.meta?.lockedByUserId]?.display_name ||
idUserMap.value[vModel.value?.meta?.lockedByUserId]?.email,
})
default:
return t(viewLockIcons[ViewLockType.Collaborative]?.title)
}
})
watch(isDropdownOpen, async () => {
if (!isDropdownOpen.value) return
injectedTable.value = (await getMeta(table.value.id!)) as any
})
</script>
<template>
<a-menu-item
class="nc-sidebar-node !min-h-7 !max-h-7 !my-0.5 select-none group text-gray-700 !flex !items-center hover:(!bg-gray-200 !text-gray-700) cursor-pointer"
:class="{
Nc Fix: UI improvements - left sidebar (#8244) * fix(nc-gui); update toolbar menu text grom GroupBy to Group * fix(nc-gui): move sidebar base, table expand icon to the right side * fix(nc-gui): sidebar base, table, view menu options padding issue * fix(nc-gui): add background color for row on hover in grid view * fix(nc-gui): reduce width of index column * fix(nc-gui): on hover grid row bg opacity issue * fix(nc-gui): reduce font size and grid cell height * fix(nc-gui): sidebar view menu alignment issue on mobile screen * fix(nc-gui): reduce font size * fix(nc-gui): set column default width to 180px * fix(nc-gui): keep only sidebar changes & revert all other changes * fix(nc-gui): change table icon * fix(nc-gui): trim base, table, view title while saving it * fix(nc-gui): increate left sidebar max width * fix(nc-gui): show truncated base/table/view name until standard end * fix(nc-gui): oss sidebar base menu options alignment issue * fix(nc-gui): use valid classname * fix(nc-gui): sidebar external db source menu ui fixes * fix(nc-gui): small changes * chore(nc-gui): lint * fix(nc-gui): pw test fail issue * fix(nc-gui): trim title while creating base, table, view * fix(nc-gui): some of the sidebar pw test fail issues * fix(test): sidebar test fail issue * fix(test): projectCollaboration test fail issue * fix(nc-gui): change font size of view menu option view mode chip text * fix(nc-gui): grayed out create view dropdown plus icon color * fix(nc-gui): grayed out table icon and reduce width of default view context menu * fix(nc-gui): remove copyright text from user menu * fix(nc-gui): chevron icon and show/hide sidebar icon should be gray in color
8 months ago
'!pl-13.5 !xs:(pl-12)': isDefaultBase,
'!pl-19 ': !isDefaultBase,
}"
:data-testid="`view-sidebar-view-${vModel.alias || vModel.title}`"
@dblclick.stop="onDblClick"
@click.prevent="handleOnClick"
>
<NcTooltip
:tooltip-style="{ width: '240px', zIndex: '1049' }"
:overlay-inner-style="{ width: '240px' }"
trigger="hover"
placement="right"
:disabled="isEditing || isDropdownOpen || !showViewNodeTooltip"
>
<template #title>
<div class="flex flex-col gap-3">
<div>
<div class="text-[10px] leading-[14px] text-gray-300 uppercase mb-1">{{ $t('labels.viewName') }}</div>
<div class="text-small leading-[18px]">{{ vModel.alias || vModel.title }}</div>
</div>
<div v-if="vModel?.created_by && idUserMap[vModel?.created_by]">
<div class="text-[10px] leading-[14px] text-gray-300 uppercase mb-1">{{ $t('labels.createdBy') }}</div>
<div class="text-xs">
{{
idUserMap[vModel?.created_by]?.id === user?.id
? $t('general.you')
: idUserMap[vModel?.created_by]?.display_name || idUserMap[vModel?.created_by]?.email
}}
</div>
</div>
<div>
<div class="text-[10px] leading-[14px] text-gray-300 uppercase mb-1">{{ $t('labels.viewMode') }}</div>
<div class="text-xs flex items-start gap-2">
{{ viewModeInfo }}
</div>
</div>
</div>
</template>
<div v-e="['a:view:open', { view: vModel.type }]" class="text-sm flex items-center w-full gap-1" data-testid="view-item">
<div
v-e="['c:view:emoji-picker']"
class="flex min-w-6"
:data-testid="`view-sidebar-drag-handle-${vModel.alias || vModel.title}`"
@mouseenter="showViewNodeTooltip = false"
@mouseleave="showViewNodeTooltip = true"
>
<LazyGeneralEmojiPicker
class="nc-table-icon"
:emoji="props.view?.meta?.icon"
size="small"
:clearable="true"
:readonly="isMobileMode || !isUIAllowed('viewCreateOrEdit')"
@emoji-selected="emits('selectIcon', $event)"
>
<template #default>
<GeneralViewIcon :meta="props.view" class="nc-view-icon w-4 !text-[16px]"></GeneralViewIcon>
</template>
</LazyGeneralEmojiPicker>
</div>
<a-input
v-if="isEditing"
ref="input"
v-model:value="_title"
class="!bg-transparent !border-0 !ring-0 !outline-transparent !border-transparent !pl-0 !flex-1 mr-4"
:class="{
'font-medium !text-brand-600': activeView?.id === vModel.id,
}"
@blur="onRename"
@keydown.stop="onKeyDown($event)"
/>
<NcTooltip
v-else
class="nc-sidebar-node-title text-ellipsis overflow-hidden select-none max-w-full"
:class="{
'w-full': ![ViewLockType.Locked, ViewLockType.Personal].includes(vModel?.lock_type!)
}"
show-on-truncate-only
disabled
>
<template #title> {{ vModel.alias || vModel.title }}</template>
<div
data-testid="sidebar-view-title"
4 weeks ago
:class="{
'font-medium text-brand-600': activeView?.id === vModel.id,
4 weeks ago
}"
:style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
>
{{ vModel.alias || vModel.title }}
</div>
</NcTooltip>
<div v-if="!isEditing && [LockType.Locked, ViewLockType.Personal].includes(vModel?.lock_type)" class="flex-1 flex">
<component
:is="viewLockIcons[vModel.lock_type].icon"
class="ml-1 flex-none w-3.5 h-3.5"
:class="{
'text-brand-400': vModel?.lock_type === ViewLockType.Personal && isViewOwner,
'text-gray-400': !(vModel?.lock_type === ViewLockType.Personal && isViewOwner),
}"
/>
</div>
<template v-if="!isEditing && !isLocked">
<NcTooltip
v-if="vModel.description?.length"
placement="bottom"
@mouseenter="showViewNodeTooltip = false"
@mouseleave="showViewNodeTooltip = true"
>
<template #title>
{{ vModel.description }}
</template>
<NcButton type="text" class="!hover:bg-transparent" size="xsmall">
<GeneralIcon icon="info" class="!w-3.5 !h-3.5 nc-info-icon group-hover:opacity-100 text-gray-600 opacity-0" />
</NcButton>
</NcTooltip>
<NcDropdown v-model:visible="isDropdownOpen" overlay-class-name="!rounded-lg">
<NcButton
v-e="['c:view:option']"
type="text"
size="xxsmall"
class="nc-sidebar-node-btn invisible !group-hover:(visible opacity-100) nc-sidebar-view-node-context-btn"
:class="{
'!visible !opacity-100': isDropdownOpen,
}"
@click.stop="isDropdownOpen = !isDropdownOpen"
@dblclick.stop
@mouseenter="showViewNodeTooltip = false"
@mouseleave="showViewNodeTooltip = true"
>
<GeneralIcon icon="threeDotHorizontal" class="text-xl w-4.75" />
</NcButton>
<template #overlay>
<SmartsheetToolbarViewActionMenu
:data-testid="`view-sidebar-view-actions-${vModel.alias || vModel.title}`"
:view="vModel"
:table="table"
in-sidebar
@close-modal="isDropdownOpen = false"
@rename="onRenameMenuClick"
@delete="onDelete"
@description-update="openViewDescriptionDialog(vModel)"
/>
</template>
</NcDropdown>
</template>
</div>
</NcTooltip>
</a-menu-item>
</template>