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