mirror of https://github.com/nocodb/nocodb
Muhammed Mustafa
1 year ago
9 changed files with 1080 additions and 180 deletions
@ -0,0 +1,127 @@
|
||||
<script setup lang="ts"> |
||||
import type { ViewType } from 'nocodb-sdk' |
||||
import { ViewTypes } from 'nocodb-sdk' |
||||
|
||||
const { $e } = useNuxtApp() |
||||
|
||||
const router = useRouter() |
||||
|
||||
const { refreshCommandPalette } = useCommandPalette() |
||||
const viewsStore = useViewsStore() |
||||
const { views } = storeToRefs(viewsStore) |
||||
const { loadViews } = viewsStore |
||||
|
||||
const table = inject(SidebarTableInj)! |
||||
|
||||
const isOpen = ref(false) |
||||
|
||||
function onOpenModal({ |
||||
title = '', |
||||
type, |
||||
copyViewId, |
||||
groupingFieldColumnId, |
||||
}: { |
||||
title?: string |
||||
type: ViewTypes |
||||
copyViewId?: string |
||||
groupingFieldColumnId?: string |
||||
}) { |
||||
isOpen.value = false |
||||
|
||||
const isDlgOpen = ref(true) |
||||
|
||||
const { close } = useDialog(resolveComponent('DlgViewCreate'), { |
||||
'modelValue': isDlgOpen, |
||||
title, |
||||
type, |
||||
'tableId': table.value.id, |
||||
'selectedViewId': copyViewId, |
||||
groupingFieldColumnId, |
||||
'views': views, |
||||
'onUpdate:modelValue': closeDialog, |
||||
'onCreated': async (view: ViewType) => { |
||||
closeDialog() |
||||
|
||||
refreshCommandPalette() |
||||
|
||||
await loadViews() |
||||
|
||||
router.push({ params: { viewTitle: view.id || '' } }) |
||||
|
||||
$e('a:view:create', { view: view.type }) |
||||
}, |
||||
}) |
||||
|
||||
function closeDialog() { |
||||
isOpen.value = false |
||||
|
||||
close(1000) |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<NcDropdown v-model:isOpen="isOpen" @click.stop="isOpen = !isOpen"> |
||||
<slot /> |
||||
<template #overlay> |
||||
<NcMenu class="max-w-48"> |
||||
<div class="py-2 px-4 text-gray-500 text-sm">New View</div> |
||||
<NcMenuItem @click="onOpenModal({ type: ViewTypes.GRID })"> |
||||
<div class="item"> |
||||
<div class="item-inner"> |
||||
<GeneralViewIcon :meta="{ type: ViewTypes.GRID }" /> |
||||
<div>Grid</div> |
||||
</div> |
||||
|
||||
<GeneralIcon class="plus" icon="plus" /> |
||||
</div> |
||||
</NcMenuItem> |
||||
|
||||
<NcMenuItem @click="onOpenModal({ type: ViewTypes.FORM })"> |
||||
<div class="item"> |
||||
<div class="item-inner"> |
||||
<GeneralViewIcon :meta="{ type: ViewTypes.FORM }" /> |
||||
<div>Form</div> |
||||
</div> |
||||
|
||||
<GeneralIcon class="plus" icon="plus" /> |
||||
</div> |
||||
</NcMenuItem> |
||||
<NcMenuItem @click="onOpenModal({ type: ViewTypes.GALLERY })"> |
||||
<div class="item"> |
||||
<div class="item-inner"> |
||||
<GeneralViewIcon :meta="{ type: ViewTypes.GALLERY }" /> |
||||
<div>Gallery</div> |
||||
</div> |
||||
|
||||
<GeneralIcon class="plus" icon="plus" /> |
||||
</div> |
||||
</NcMenuItem> |
||||
<NcMenuItem @click="onOpenModal({ type: ViewTypes.KANBAN })"> |
||||
<div class="item"> |
||||
<div class="item-inner"> |
||||
<GeneralViewIcon :meta="{ type: ViewTypes.KANBAN }" /> |
||||
<div>Kanban</div> |
||||
</div> |
||||
|
||||
<GeneralIcon class="plus" icon="plus" /> |
||||
</div> |
||||
</NcMenuItem> |
||||
</NcMenu> |
||||
</template> |
||||
</NcDropdown> |
||||
</template> |
||||
|
||||
<style lang="scss" scoped> |
||||
.item { |
||||
@apply flex flex-row items-center w-36 justify-between; |
||||
} |
||||
|
||||
.item-inner { |
||||
@apply flex flex-row items-center gap-x-1.75; |
||||
} |
||||
|
||||
.plus { |
||||
@apply text-brand-400; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,392 @@
|
||||
<script lang="ts" setup> |
||||
import type { ViewType } from 'nocodb-sdk' |
||||
import { ViewTypes } from 'nocodb-sdk' |
||||
import type { SortableEvent } from 'sortablejs' |
||||
import Sortable from 'sortablejs' |
||||
import type { Menu as AntMenu } from 'ant-design-vue' |
||||
import { |
||||
extractSdkResponseErrorMsg, |
||||
message, |
||||
onMounted, |
||||
parseProp, |
||||
ref, |
||||
resolveComponent, |
||||
useApi, |
||||
useCommandPalette, |
||||
useDialog, |
||||
useNuxtApp, |
||||
useRouter, |
||||
useUndoRedo, |
||||
viewTypeAlias, |
||||
watch, |
||||
} from '#imports' |
||||
|
||||
interface Emits { |
||||
(event: 'openModal', data: { type: ViewTypes; title?: string; copyViewId?: string; groupingFieldColumnId?: string }): void |
||||
|
||||
(event: 'deleted'): void |
||||
} |
||||
|
||||
const emits = defineEmits<Emits>() |
||||
const project = inject(ProjectInj)! |
||||
const table = inject(SidebarTableInj)! |
||||
|
||||
const { $e } = useNuxtApp() |
||||
|
||||
const isDefaultBase = computed(() => { |
||||
const base = project.value?.bases?.find((b) => b.id === table.value.base_id) |
||||
|
||||
return base?.is_meta |
||||
}) |
||||
|
||||
const { viewsByTable, activeView } = storeToRefs(useViewsStore()) |
||||
|
||||
const views = computed(() => viewsByTable.value.get(table.value.id!)?.filter((v) => !v.is_default) ?? []) |
||||
|
||||
const { api } = useApi() |
||||
|
||||
const router = useRouter() |
||||
|
||||
const { refreshCommandPalette } = useCommandPalette() |
||||
|
||||
const { addUndo, defineModelScope } = useUndoRedo() |
||||
|
||||
/** Selected view(s) for menu */ |
||||
const selected = ref<string[]>([]) |
||||
|
||||
/** dragging renamable view items */ |
||||
const dragging = ref(false) |
||||
|
||||
const menuRef = ref<typeof AntMenu>() |
||||
|
||||
const isMarked = ref<string | false>(false) |
||||
|
||||
/** Watch currently active view, so we can mark it in the menu */ |
||||
watch(activeView, (nextActiveView) => { |
||||
if (nextActiveView && nextActiveView.id) { |
||||
selected.value = [nextActiveView.id] |
||||
} |
||||
}) |
||||
|
||||
/** shortly mark an item after sorting */ |
||||
function markItem(id: string) { |
||||
isMarked.value = id |
||||
setTimeout(() => { |
||||
isMarked.value = false |
||||
}, 300) |
||||
} |
||||
|
||||
/** validate view title */ |
||||
function validate(view: ViewType) { |
||||
if (!view.title || view.title.trim().length < 0) { |
||||
return 'View name is required' |
||||
} |
||||
|
||||
if (views.value.some((v) => v.title === view.title && v.id !== view.id)) { |
||||
return 'View name should be unique' |
||||
} |
||||
|
||||
return true |
||||
} |
||||
|
||||
let sortable: Sortable |
||||
|
||||
function onSortStart(evt: SortableEvent) { |
||||
evt.stopImmediatePropagation() |
||||
evt.preventDefault() |
||||
dragging.value = true |
||||
} |
||||
|
||||
async function onSortEnd(evt: SortableEvent, undo = false) { |
||||
if (!undo) { |
||||
evt.stopImmediatePropagation() |
||||
evt.preventDefault() |
||||
dragging.value = false |
||||
} |
||||
|
||||
if (views.value.length < 2) return |
||||
|
||||
const { newIndex = 0, oldIndex = 0 } = evt |
||||
|
||||
if (newIndex === oldIndex) return |
||||
|
||||
if (!undo) { |
||||
addUndo({ |
||||
redo: { |
||||
fn: async () => { |
||||
const ord = sortable.toArray() |
||||
const temp = ord.splice(oldIndex, 1) |
||||
ord.splice(newIndex, 0, temp[0]) |
||||
sortable.sort(ord) |
||||
await onSortEnd(evt, true) |
||||
}, |
||||
args: [], |
||||
}, |
||||
undo: { |
||||
fn: async () => { |
||||
const ord = sortable.toArray() |
||||
const temp = ord.splice(newIndex, 1) |
||||
ord.splice(oldIndex, 0, temp[0]) |
||||
sortable.sort(ord) |
||||
await onSortEnd({ ...evt, oldIndex: newIndex, newIndex: oldIndex }, true) |
||||
}, |
||||
args: [], |
||||
}, |
||||
scope: defineModelScope({ view: activeView.value }), |
||||
}) |
||||
} |
||||
|
||||
const children = evt.to.children as unknown as HTMLLIElement[] |
||||
|
||||
const previousEl = children[newIndex - 1] |
||||
const nextEl = children[newIndex + 1] |
||||
|
||||
const currentItem = views.value.find((v) => v.id === evt.item.id) |
||||
|
||||
if (!currentItem || !currentItem.id) return |
||||
|
||||
const previousItem = (previousEl ? views.value.find((v) => v.id === previousEl.id) : {}) as ViewType |
||||
const nextItem = (nextEl ? views.value.find((v) => v.id === nextEl.id) : {}) as ViewType |
||||
|
||||
let nextOrder: number |
||||
|
||||
// set new order value based on the new order of the items |
||||
if (views.value.length - 1 === newIndex) { |
||||
nextOrder = parseFloat(String(previousItem.order)) + 1 |
||||
} else if (newIndex === 0) { |
||||
nextOrder = parseFloat(String(nextItem.order)) / 2 |
||||
} else { |
||||
nextOrder = (parseFloat(String(previousItem.order)) + parseFloat(String(nextItem.order))) / 2 |
||||
} |
||||
|
||||
const _nextOrder = !isNaN(Number(nextOrder)) ? nextOrder : oldIndex |
||||
|
||||
currentItem.order = _nextOrder |
||||
|
||||
await api.dbView.update(currentItem.id, { order: _nextOrder }) |
||||
|
||||
markItem(currentItem.id) |
||||
|
||||
$e('a:view:reorder') |
||||
} |
||||
|
||||
const initSortable = (el: HTMLElement) => { |
||||
if (sortable) sortable.destroy() |
||||
|
||||
sortable = new Sortable(el, { |
||||
// handle: '.nc-drag-icon', |
||||
ghostClass: 'ghost', |
||||
onStart: onSortStart, |
||||
onEnd: onSortEnd, |
||||
}) |
||||
} |
||||
|
||||
onMounted(() => menuRef.value && initSortable(menuRef.value.$el)) |
||||
|
||||
/** Navigate to view by changing url param */ |
||||
function changeView(view: ViewType) { |
||||
const routeName = 'index-typeOrId-projectId-index-index-viewId-viewTitle' |
||||
if ( |
||||
router.currentRoute.value.query && |
||||
router.currentRoute.value.query.page && |
||||
router.currentRoute.value.query.page === 'fields' |
||||
) { |
||||
router.push({ |
||||
name: routeName, |
||||
params: { viewTitle: view.id || '', viewId: table.value.id, projectId: project.value.id }, |
||||
query: router.currentRoute.value.query, |
||||
}) |
||||
} else { |
||||
router.push({ name: routeName, params: { viewTitle: view.id || '', viewId: table.value.id, projectId: project.value.id } }) |
||||
} |
||||
|
||||
if (view.type === ViewTypes.FORM && selected.value[0] === view.id) { |
||||
// reload the page if the same form view is clicked |
||||
// router.go(0) |
||||
// fix me: router.go(0) reloads entire page. need to reload only the form view |
||||
router |
||||
.replace({ name: routeName, query: { reload: 'true' }, params: { viewId: table.value.id, projectId: project.value.id } }) |
||||
.then(() => { |
||||
router.replace({ name: routeName, query: {}, params: { viewId: table.value.id, projectId: project.value.id } }) |
||||
}) |
||||
} |
||||
} |
||||
|
||||
/** Rename a view */ |
||||
async function onRename(view: ViewType, originalTitle?: string, undo = false) { |
||||
try { |
||||
await api.dbView.update(view.id!, { |
||||
title: view.title, |
||||
order: view.order, |
||||
}) |
||||
|
||||
await router.replace({ |
||||
params: { |
||||
viewTitle: view.id, |
||||
}, |
||||
}) |
||||
|
||||
refreshCommandPalette() |
||||
|
||||
if (!undo) { |
||||
addUndo({ |
||||
redo: { |
||||
fn: (v: ViewType, title: string) => { |
||||
const tempTitle = v.title |
||||
v.title = title |
||||
onRename(v, tempTitle, true) |
||||
}, |
||||
args: [view, view.title], |
||||
}, |
||||
undo: { |
||||
fn: (v: ViewType, title: string) => { |
||||
const tempTitle = v.title |
||||
v.title = title |
||||
onRename(v, tempTitle, true) |
||||
}, |
||||
args: [view, originalTitle], |
||||
}, |
||||
scope: defineModelScope({ view: activeView.value }), |
||||
}) |
||||
} |
||||
|
||||
// View renamed successfully |
||||
// message.success(t('msg.success.viewRenamed')) |
||||
} catch (e: any) { |
||||
message.error(await extractSdkResponseErrorMsg(e)) |
||||
} |
||||
} |
||||
|
||||
/** Open delete modal */ |
||||
function openDeleteDialog(view: ViewType) { |
||||
const isOpen = ref(true) |
||||
|
||||
const { close } = useDialog(resolveComponent('DlgViewDelete'), { |
||||
'modelValue': isOpen, |
||||
'view': view, |
||||
'onUpdate:modelValue': closeDialog, |
||||
'onDeleted': () => { |
||||
closeDialog() |
||||
|
||||
emits('deleted') |
||||
|
||||
refreshCommandPalette() |
||||
if (activeView.value === view) { |
||||
// return to the default view |
||||
router.replace({ |
||||
params: { |
||||
viewTitle: views.value[0].id, |
||||
}, |
||||
}) |
||||
} |
||||
}, |
||||
}) |
||||
|
||||
function closeDialog() { |
||||
isOpen.value = false |
||||
|
||||
close(1000) |
||||
} |
||||
} |
||||
|
||||
const setIcon = async (icon: string, view: ViewType) => { |
||||
try { |
||||
// modify the icon property in meta |
||||
view.meta = { |
||||
...parseProp(view.meta), |
||||
icon, |
||||
} |
||||
|
||||
api.dbView.update(view.id as string, { |
||||
meta: view.meta, |
||||
}) |
||||
|
||||
$e('a:view:icon:sidebar', { icon }) |
||||
} catch (e: any) { |
||||
message.error(await extractSdkResponseErrorMsg(e)) |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<DashboardTreeViewCreateViewBtn :overlay-class-name="isDefaultBase ? '!left-18 !min-w-42' : '!left-25 !min-w-42'"> |
||||
<NcButton |
||||
type="text" |
||||
size="xsmall" |
||||
class="!w-full !py-0 !h-7 !text-gray-500 !hover:(bg-transparent font-normal text-brand-500) !font-normal !text-sm" |
||||
:centered="false" |
||||
> |
||||
<GeneralIcon |
||||
icon="plus" |
||||
class="mr-2" |
||||
:class="{ |
||||
'ml-18.75': isDefaultBase, |
||||
'ml-24.25': !isDefaultBase, |
||||
}" |
||||
/> |
||||
<span class="text-sm">New View</span> |
||||
</NcButton> |
||||
</DashboardTreeViewCreateViewBtn> |
||||
|
||||
<a-menu |
||||
ref="menuRef" |
||||
:class="{ dragging }" |
||||
class="nc-views-menu flex flex-col w-full !border-r-0 !bg-inherit" |
||||
:selected-keys="selected" |
||||
> |
||||
<DashboardTreeViewViewsNode |
||||
v-for="view of views" |
||||
:id="view.id" |
||||
:key="view.id" |
||||
:view="view" |
||||
:on-validate="validate" |
||||
class="nc-view-item !rounded-md !px-0.75 !py-0.5 w-full transition-all ease-in duration-100" |
||||
:class="{ |
||||
'bg-gray-200': isMarked === view.id, |
||||
'active': activeView?.id === view.id, |
||||
[`nc-${view.type ? viewTypeAlias[view.type] : undefined || view.type}-view-item`]: true, |
||||
}" |
||||
:data-view-id="view.id" |
||||
@change-view="changeView" |
||||
@open-modal="$emit('openModal', $event)" |
||||
@delete="openDeleteDialog" |
||||
@rename="onRename" |
||||
@select-icon="setIcon($event, view)" |
||||
/> |
||||
</a-menu> |
||||
</template> |
||||
|
||||
<style lang="scss"> |
||||
.nc-views-menu { |
||||
.ghost, |
||||
.ghost > * { |
||||
@apply !pointer-events-none; |
||||
} |
||||
|
||||
&.dragging { |
||||
.nc-icon { |
||||
@apply !hidden; |
||||
} |
||||
|
||||
.nc-view-icon { |
||||
@apply !block; |
||||
} |
||||
} |
||||
|
||||
.ant-menu-item:not(.sortable-chosen) { |
||||
@apply color-transition; |
||||
} |
||||
|
||||
.ant-menu-title-content { |
||||
@apply !w-full; |
||||
} |
||||
|
||||
.sortable-chosen { |
||||
@apply !bg-gray-200; |
||||
} |
||||
|
||||
.active { |
||||
@apply !bg-primary-selected font-medium; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,296 @@
|
||||
<script lang="ts" setup> |
||||
import type { VNodeRef } from '@vue/runtime-core' |
||||
import type { KanbanType, ViewType, ViewTypes } from 'nocodb-sdk' |
||||
import type { WritableComputedRef } from '@vue/reactivity' |
||||
import { IsLockedInj, inject, message, onKeyStroke, useDebounceFn, useNuxtApp, useRoles, useVModel } from '#imports' |
||||
|
||||
interface Props { |
||||
view: ViewType |
||||
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 }): void |
||||
} |
||||
|
||||
const props = defineProps<Props>() |
||||
|
||||
const emits = defineEmits<Emits>() |
||||
|
||||
const vModel = useVModel(props, 'view', emits) as WritableComputedRef<ViewType & { alias?: string; is_default: boolean }> |
||||
|
||||
const { $e } = useNuxtApp() |
||||
|
||||
const { isUIAllowed } = useRoles() |
||||
|
||||
const { activeViewTitleOrId } = storeToRefs(useViewsStore()) |
||||
|
||||
const project = inject(ProjectInj, ref()) |
||||
|
||||
const activeView = inject(ActiveViewInj, ref()) |
||||
|
||||
const isLocked = inject(IsLockedInj, ref(false)) |
||||
|
||||
const { rightSidebarState } = storeToRefs(useSidebarStore()) |
||||
|
||||
const isDefaultBase = computed(() => { |
||||
const base = project.value?.bases?.find((b) => b.id === vModel.value.base_id) |
||||
|
||||
return base?.is_meta |
||||
}) |
||||
|
||||
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>() |
||||
|
||||
/** Debounce click handler, so we can potentially enable editing view name {@see onDblClick} */ |
||||
const onClick = useDebounceFn(() => { |
||||
if (isEditing.value || isStopped.value) return |
||||
|
||||
emits('changeView', vModel.value) |
||||
}, 250) |
||||
|
||||
/** Enable editing view name on dbl click */ |
||||
function onDblClick() { |
||||
if (!isUIAllowed('viewCreateOrEdit')) return |
||||
|
||||
if (!isEditing.value) { |
||||
isEditing.value = true |
||||
_title.value = vModel.value.title |
||||
$e('c:view:rename', { view: vModel.value?.type }) |
||||
} |
||||
} |
||||
|
||||
/** 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 focusInput: VNodeRef = (el) => (el as HTMLInputElement)?.focus() |
||||
|
||||
/** Duplicate a view */ |
||||
// todo: This is not really a duplication, maybe we need to implement a true duplication? |
||||
function onDuplicate() { |
||||
isDropdownOpen.value = false |
||||
|
||||
emits('openModal', { |
||||
type: vModel.value.type!, |
||||
title: vModel.value.title, |
||||
copyViewId: vModel.value.id, |
||||
groupingFieldColumnId: (vModel.value.view as KanbanType).fk_grp_col_id!, |
||||
}) |
||||
|
||||
$e('c:view:copy', { view: vModel.value.type }) |
||||
} |
||||
|
||||
/** Delete a view */ |
||||
async function onDelete() { |
||||
isDropdownOpen.value = false |
||||
|
||||
emits('delete', vModel.value) |
||||
} |
||||
|
||||
/** Rename a view */ |
||||
async function onRename() { |
||||
isDropdownOpen.value = false |
||||
if (!isEditing.value) return |
||||
|
||||
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() |
||||
} |
||||
|
||||
/** 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) |
||||
} |
||||
|
||||
watch(rightSidebarState, () => { |
||||
if (rightSidebarState.value === 'peekCloseEnd') { |
||||
isDropdownOpen.value = false |
||||
} |
||||
}) |
||||
|
||||
function onRef(el: HTMLElement) { |
||||
if (activeViewTitleOrId.value === vModel.value.id) { |
||||
nextTick(() => { |
||||
setTimeout(() => { |
||||
el?.scrollIntoView({ block: 'center', inline: 'center' }) |
||||
}, 1000) |
||||
}) |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<a-menu-item |
||||
class="!min-h-7 !max-h-7 !mb-0.25 select-none group text-gray-700 !flex !items-center !mt-0 hover:(!bg-gray-200 !text-gray-900) cursor-pointer" |
||||
:class="{ |
||||
'!pl-18': isDefaultBase, |
||||
'!pl-23.5': !isDefaultBase, |
||||
}" |
||||
:data-testid="`view-sidebar-view-${vModel.alias || vModel.title}`" |
||||
@dblclick.stop="onDblClick" |
||||
@click="onClick" |
||||
> |
||||
<div |
||||
:ref="onRef" |
||||
v-e="['a:view:open', { view: vModel.type }]" |
||||
class="text-sm flex items-center w-full gap-1" |
||||
data-testid="view-item" |
||||
> |
||||
<div class="flex min-w-6" :data-testid="`view-sidebar-drag-handle-${vModel.alias || vModel.title}`"> |
||||
<LazyGeneralEmojiPicker |
||||
class="nc-table-icon" |
||||
:emoji="props.view?.meta?.icon" |
||||
size="small" |
||||
:clearable="true" |
||||
@emoji-selected="emits('selectIcon', $event)" |
||||
> |
||||
<template #default> |
||||
<GeneralViewIcon :meta="props.view" class="nc-view-icon"></GeneralViewIcon> |
||||
</template> |
||||
</LazyGeneralEmojiPicker> |
||||
</div> |
||||
|
||||
<a-input |
||||
v-if="isEditing" |
||||
:ref="focusInput" |
||||
v-model:value="_title" |
||||
class="!bg-transparent !border-0 !ring-0 !outline-transparent !border-transparent" |
||||
:class="{ |
||||
'font-medium': activeView?.id === vModel.id, |
||||
}" |
||||
@blur="onRename" |
||||
@keydown.stop="onKeyDown($event)" |
||||
/> |
||||
|
||||
<div |
||||
v-else |
||||
class="capitalize text-ellipsis overflow-hidden select-none w-full" |
||||
data-testid="sidebar-view-title" |
||||
:class="{ |
||||
'font-medium': activeView?.id === vModel.id, |
||||
}" |
||||
:style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }" |
||||
> |
||||
{{ vModel.alias || vModel.title }} |
||||
</div> |
||||
|
||||
<div class="flex-1" /> |
||||
|
||||
<template v-if="!isEditing && !isLocked && isUIAllowed('viewCreateOrEdit')"> |
||||
<NcDropdown v-model:visible="isDropdownOpen" overlay-class-name="!rounded-lg"> |
||||
<NcButton |
||||
type="text" |
||||
size="xxsmall" |
||||
class="nc-sidebar-node-btn invisible !group-hover:visible" |
||||
:class="{ |
||||
'!visible': isDropdownOpen, |
||||
}" |
||||
@click.stop="isDropdownOpen = !isDropdownOpen" |
||||
> |
||||
<GeneralIcon icon="threeDotHorizontal" class="text-xl w-4.75" /> |
||||
</NcButton> |
||||
|
||||
<template #overlay> |
||||
<NcMenu class="min-w-27" :data-testid="`view-sidebar-view-actions-${vModel.alias || vModel.title}`"> |
||||
<NcMenuItem @click.stop="onDblClick"> |
||||
<GeneralIcon icon="edit" /> |
||||
Rename |
||||
</NcMenuItem> |
||||
<NcMenuItem @click.stop="onDuplicate"> |
||||
<GeneralIcon icon="copy" /> |
||||
Duplicate |
||||
</NcMenuItem> |
||||
|
||||
<NcDivider /> |
||||
|
||||
<template v-if="!vModel.is_default"> |
||||
<NcMenuItem class="!text-red-500" @click.stop="onDelete"> |
||||
<GeneralIcon icon="delete" class="text-sm" /> |
||||
<div class="-ml-0.25">Delete</div> |
||||
</NcMenuItem> |
||||
</template> |
||||
</NcMenu> |
||||
</template> |
||||
</NcDropdown> |
||||
</template> |
||||
</div> |
||||
</a-menu-item> |
||||
</template> |
||||
Loading…
Reference in new issue