mirror of https://github.com/nocodb/nocodb
braks
2 years ago
5 changed files with 558 additions and 457 deletions
@ -1,457 +0,0 @@
|
||||
<script setup lang="ts"> |
||||
import type { FormType, GalleryType, GridType, KanbanType } from 'nocodb-sdk' |
||||
import { ViewTypes } from 'nocodb-sdk' |
||||
import { notification } from 'ant-design-vue' |
||||
import { inject, onKeyStroke, provide, ref, useApi, useDebounceFn, useNuxtApp, useTabs, useViews, watch } from '#imports' |
||||
import { ActiveViewInj, MetaInj, ViewListInj } from '~/context' |
||||
import { extractSdkResponseErrorMsg, viewIcons } from '~/utils' |
||||
import MdiPlusIcon from '~icons/mdi/plus' |
||||
import MdiTrashCan from '~icons/mdi/trash-can' |
||||
import MdiContentCopy from '~icons/mdi/content-copy' |
||||
import MdiXml from '~icons/mdi/xml' |
||||
import MdiHook from '~icons/mdi/hook' |
||||
import MdiHeartsCard from '~icons/mdi/cards-heart' |
||||
import MdiShieldLockOutline from '~icons/mdi/shield-lock-outline' |
||||
import type { TabItem } from '~/composables/useTabs' |
||||
import { TabType } from '~/composables/useTabs' |
||||
|
||||
const meta = inject(MetaInj, ref()) |
||||
|
||||
const activeView = inject(ActiveViewInj, ref()) |
||||
|
||||
const { $e } = useNuxtApp() |
||||
|
||||
const { addTab } = useTabs() |
||||
|
||||
const { views, loadViews } = useViews(meta) |
||||
|
||||
const { api } = useApi() |
||||
|
||||
provide(ViewListInj, views) |
||||
|
||||
/** Sidebar visible */ |
||||
const drawerOpen = inject('navDrawerOpen', ref(false)) |
||||
|
||||
/** Watch current views and on change set the next active view */ |
||||
watch( |
||||
views, |
||||
(nextViews) => { |
||||
if (nextViews.length) { |
||||
activeView.value = nextViews[0] |
||||
} |
||||
}, |
||||
{ immediate: true }, |
||||
) |
||||
|
||||
const isView = ref(false) |
||||
|
||||
/** Is editing the view name enabled */ |
||||
let isEditing = $ref<number | null>(null) |
||||
|
||||
/** Helper to check if editing was disabled before the view navigation timeout triggers */ |
||||
let isStopped = $ref(false) |
||||
|
||||
/** Original view title when editing the view name */ |
||||
let originalTitle = $ref<string | undefined>() |
||||
|
||||
/** View type to create from modal */ |
||||
let viewCreateType = $ref<ViewTypes>() |
||||
|
||||
/** View title to create from modal (when duplicating) */ |
||||
const viewCreateTitle = $ref('') |
||||
|
||||
/** is view creation modal open */ |
||||
let modalOpen = $ref(false) |
||||
|
||||
/** Selected view(s) for menu */ |
||||
const selected = ref<string[]>([]) |
||||
|
||||
const validate = (value?: string) => { |
||||
if (!value || value.trim().length < 0) { |
||||
return 'View name is required' |
||||
} |
||||
|
||||
if ((unref(views) || []).every((v1) => ((v1 as GridType | KanbanType | GalleryType).alias || v1.title) !== value)) { |
||||
return 'View name should be unique' |
||||
} |
||||
|
||||
return true |
||||
} |
||||
|
||||
/** Watch currently active view so we can mark it in the menu */ |
||||
watch(activeView, (nextActiveView) => { |
||||
const _nextActiveView = nextActiveView as GridType | FormType | KanbanType |
||||
|
||||
if (_nextActiveView && _nextActiveView.id) { |
||||
selected.value = [_nextActiveView.id] |
||||
} |
||||
}) |
||||
|
||||
/** Open view creation modal */ |
||||
function openModal(type: ViewTypes) { |
||||
modalOpen = true |
||||
viewCreateType = type |
||||
} |
||||
|
||||
/** Handle view creation */ |
||||
function onCreate(view: GridType | FormType | KanbanType | GalleryType) { |
||||
views.value?.push(view) |
||||
activeView.value = view |
||||
modalOpen = false |
||||
} |
||||
|
||||
// todo: fix view type, alias is missing for some reason? |
||||
/** Navigate to view and add new tab if necessary */ |
||||
function changeView(view: { id: string; alias?: string; title?: string; type: ViewTypes }) { |
||||
activeView.value = view |
||||
|
||||
const tabProps: TabItem = { |
||||
id: view.id, |
||||
title: (view.alias ?? view.title) || '', |
||||
type: TabType.VIEW, |
||||
} |
||||
|
||||
addTab(tabProps) |
||||
} |
||||
|
||||
/** Debounce click handler, so we can potentially enable editing view name {@see onDblClick} */ |
||||
const onClick = useDebounceFn((view) => { |
||||
if (isEditing !== null || isStopped) return |
||||
|
||||
changeView(view) |
||||
}, 250) |
||||
|
||||
/** Enable editing view name on dbl click */ |
||||
function onDblClick(index: number) { |
||||
if (isEditing === null) { |
||||
isEditing = index |
||||
originalTitle = views.value[index].title |
||||
} |
||||
} |
||||
|
||||
/** Handle keydown on input field */ |
||||
function onKeyDown(event: KeyboardEvent, index: number) { |
||||
if (event.key === 'Escape') { |
||||
onKeyEsc(event, index) |
||||
} else if (event.key === 'Enter') { |
||||
onKeyEnter(event, index) |
||||
} |
||||
} |
||||
|
||||
/** Rename view when enter is pressed */ |
||||
function onKeyEnter(event: KeyboardEvent, index: number) { |
||||
event.stopImmediatePropagation() |
||||
event.preventDefault() |
||||
|
||||
onRename(index) |
||||
} |
||||
|
||||
/** Disable renaming view when escape is pressed */ |
||||
function onKeyEsc(event: KeyboardEvent, index: number) { |
||||
event.stopImmediatePropagation() |
||||
event.preventDefault() |
||||
|
||||
onCancel(index) |
||||
} |
||||
|
||||
onKeyStroke('Enter', (event) => { |
||||
if (isEditing !== null) { |
||||
onKeyEnter(event, isEditing) |
||||
} |
||||
}) |
||||
|
||||
function setInputRef(el: HTMLInputElement) { |
||||
if (el) el.focus() |
||||
} |
||||
|
||||
/** Duplicate a view */ |
||||
// todo: This is not really a duplication, maybe we need to implement a true duplication? |
||||
function onDuplicate(index: number) { |
||||
const view: any = views.value[index] |
||||
|
||||
openModal(view.type) |
||||
|
||||
$e('c:view:copy', { view: view.type }) |
||||
} |
||||
|
||||
/** Delete a view */ |
||||
async function onDelete(index: number) { |
||||
const view: any = views.value[index] |
||||
|
||||
try { |
||||
await api.dbView.delete(view.id) |
||||
|
||||
notification.success({ |
||||
message: 'View deleted successfully', |
||||
duration: 3, |
||||
}) |
||||
|
||||
await loadViews() |
||||
} catch (e: any) { |
||||
notification.error({ |
||||
message: await extractSdkResponseErrorMsg(e), |
||||
duration: 3, |
||||
}) |
||||
} |
||||
|
||||
// telemetry event |
||||
$e('a:view:delete', { view: view.type }) |
||||
} |
||||
|
||||
/** Rename a view */ |
||||
async function onRename(index: number) { |
||||
if (isEditing === null) return |
||||
|
||||
const view = views.value[index] |
||||
|
||||
const valid = validate(view?.title) |
||||
|
||||
if (valid !== true) { |
||||
notification.error({ |
||||
message: valid, |
||||
duration: 2, |
||||
}) |
||||
} |
||||
|
||||
if (view.title === '' || view.title === originalTitle) { |
||||
onCancel(index) |
||||
return |
||||
} |
||||
|
||||
try { |
||||
// todo typing issues, order and id do not exist on all members of ViewTypes (Kanban, Gallery, Form, Grid) |
||||
await api.dbView.update((view as any).id, { |
||||
title: view.title, |
||||
order: (view as any).order, |
||||
}) |
||||
|
||||
notification.success({ |
||||
message: 'View renamed successfully', |
||||
duration: 3, |
||||
}) |
||||
} catch (e: any) { |
||||
notification.error({ |
||||
message: await extractSdkResponseErrorMsg(e), |
||||
duration: 3, |
||||
}) |
||||
} |
||||
|
||||
onStopEdit() |
||||
} |
||||
|
||||
/** Cancel renaming view */ |
||||
function onCancel(index: number) { |
||||
if (isEditing === null) return |
||||
|
||||
views.value[index].title = originalTitle |
||||
onStopEdit() |
||||
} |
||||
|
||||
/** Stop editing view name, timeout makes sure that view navigation (click trigger) does not pick up before stop is done */ |
||||
function onStopEdit() { |
||||
isStopped = true |
||||
isEditing = null |
||||
originalTitle = '' |
||||
|
||||
setTimeout(() => { |
||||
isStopped = false |
||||
}, 250) |
||||
} |
||||
|
||||
function onApiSnippet() { |
||||
// get API snippet |
||||
$e('a:view:api-snippet') |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<a-layout-sider class="shadow" :width="drawerOpen ? 0 : 250"> |
||||
<div class="flex flex-col h-full"> |
||||
<a-menu class="flex-1 max-h-50vh overflow-y-scroll scrollbar-thin-primary" :selected-keys="selected"> |
||||
<h3 class="pt-3 px-3 text-xs font-semibold">{{ $t('objects.views') }}</h3> |
||||
|
||||
<a-menu-item |
||||
v-for="(view, i) of views" |
||||
:key="view.id" |
||||
class="group !flex !items-center !my-0" |
||||
@dblclick="onDblClick(i)" |
||||
@click="onClick(view)" |
||||
> |
||||
<div v-t="['a:view:open', { view: view.type }]" class="text-xs flex items-center w-full gap-2"> |
||||
<component :is="viewIcons[view.type].icon" :class="`text-${viewIcons[view.type].color}`" /> |
||||
|
||||
<a-input |
||||
v-if="isEditing === i" |
||||
:ref="setInputRef" |
||||
v-model:value="view.title" |
||||
@blur="onCancel(i)" |
||||
@keydown="onKeyDown($event, i)" |
||||
/> |
||||
<div v-else>{{ view.alias || view.title }}</div> |
||||
|
||||
<div class="flex-1" /> |
||||
|
||||
<template v-if="isEditing !== i"> |
||||
<div class="flex items-center gap-1"> |
||||
<a-tooltip placement="left"> |
||||
<template #title> |
||||
{{ $t('activity.copyView') }} |
||||
</template> |
||||
|
||||
<MdiContentCopy class="hidden group-hover:block text-gray-500" @click.stop="onDuplicate(i)" /> |
||||
</a-tooltip> |
||||
|
||||
<a-popconfirm |
||||
v-if="!view.is_default" |
||||
placement="left" |
||||
:title="$t('msg.info.deleteProject')" |
||||
:ok-text="$t('general.yes')" |
||||
:cancel-text="$t('general.no')" |
||||
@confirm="onDelete(i)" |
||||
> |
||||
<a-tooltip placement="left"> |
||||
<template #title> |
||||
{{ $t('activity.deleteView') }} |
||||
</template> |
||||
|
||||
<MdiTrashCan class="hidden group-hover:block text-red-500" @click.stop /> |
||||
</a-tooltip> |
||||
</a-popconfirm> |
||||
</div> |
||||
</template> |
||||
</div> |
||||
</a-menu-item> |
||||
</a-menu> |
||||
|
||||
<a-menu class="flex-1 flex flex-col"> |
||||
<a-divider class="my-2" /> |
||||
|
||||
<h3 class="px-3 text-xs font-semibold flex items-center gap-4"> |
||||
{{ $t('activity.createView') }} |
||||
<a-tooltip> |
||||
<template #title> |
||||
{{ $t('msg.info.onlyCreator') }} |
||||
</template> |
||||
<MdiShieldLockOutline class="text-pink-500" /> |
||||
</a-tooltip> |
||||
</h3> |
||||
|
||||
<a-menu-item key="grid" class="group !flex !items-center !my-0 !h-[30px]" @click="openModal(ViewTypes.GRID)"> |
||||
<a-tooltip placement="left"> |
||||
<template #title> |
||||
{{ $t('msg.info.addView.grid') }} |
||||
</template> |
||||
|
||||
<div class="text-xs flex items-center h-full w-full gap-2"> |
||||
<component :is="viewIcons[ViewTypes.GRID].icon" :class="`text-${viewIcons[ViewTypes.GRID].color}`" /> |
||||
|
||||
<div>{{ $t('objects.viewType.grid') }}</div> |
||||
|
||||
<div class="flex-1" /> |
||||
|
||||
<MdiPlusIcon class="group-hover:text-primary" /> |
||||
</div> |
||||
</a-tooltip> |
||||
</a-menu-item> |
||||
|
||||
<a-menu-item key="gallery" class="group !flex !items-center !-my0 !h-[30px]" @click="openModal(ViewTypes.GALLERY)"> |
||||
<a-tooltip placement="left"> |
||||
<template #title> |
||||
{{ $t('msg.info.addView.gallery') }} |
||||
</template> |
||||
|
||||
<div class="text-xs flex items-center h-full w-full gap-2"> |
||||
<component :is="viewIcons[ViewTypes.GALLERY].icon" :class="`text-${viewIcons[ViewTypes.GALLERY].color}`" /> |
||||
|
||||
<div>{{ $t('objects.viewType.gallery') }}</div> |
||||
|
||||
<div class="flex-1" /> |
||||
|
||||
<MdiPlusIcon class="group-hover:text-primary" /> |
||||
</div> |
||||
</a-tooltip> |
||||
</a-menu-item> |
||||
|
||||
<a-menu-item |
||||
v-if="!isView" |
||||
key="form" |
||||
class="group !flex !items-center !my-0 !h-[30px]" |
||||
@click="openModal(ViewTypes.FORM)" |
||||
> |
||||
<a-tooltip placement="left"> |
||||
<template #title> |
||||
{{ $t('msg.info.addView.form') }} |
||||
</template> |
||||
|
||||
<div class="text-xs flex items-center h-full w-full gap-2"> |
||||
<component :is="viewIcons[ViewTypes.FORM].icon" :class="`text-${viewIcons[ViewTypes.FORM].color}`" /> |
||||
|
||||
<div>{{ $t('objects.viewType.form') }}</div> |
||||
|
||||
<div class="flex-1" /> |
||||
|
||||
<MdiPlusIcon class="group-hover:text-primary" /> |
||||
</div> |
||||
</a-tooltip> |
||||
</a-menu-item> |
||||
|
||||
<div class="flex-auto justify-end flex flex-col gap-4 mt-4"> |
||||
<button |
||||
class="flex items-center gap-2 w-full mx-3 px-4 py-3 rounded !bg-primary text-white transform translate-x-4 hover:(translate-x-0 shadow-lg) transition duration-150 ease" |
||||
@click="onApiSnippet" |
||||
> |
||||
<MdiXml />Get API Snippet |
||||
</button> |
||||
|
||||
<button |
||||
class="flex items-center gap-2 w-full mx-3 px-4 py-3 rounded border transform translate-x-4 hover:(translate-x-0 shadow-lg) transition duration-150 ease" |
||||
@click="onApiSnippet" |
||||
> |
||||
<MdiHook />{{ $t('objects.webhooks') }} |
||||
</button> |
||||
</div> |
||||
|
||||
<general-flipping-card class="my-4 min-h-[100px] w-[250px]" :triggers="['click', { duration: 15000 }]"> |
||||
<template #front> |
||||
<div class="flex h-full w-full gap-6 flex-col"> |
||||
<general-social /> |
||||
|
||||
<div> |
||||
<a |
||||
v-t="['e:hiring']" |
||||
class="px-4 py-3 !bg-primary rounded shadow text-white" |
||||
href="https://angel.co/company/nocodb" |
||||
target="_blank" |
||||
@click.stop |
||||
> |
||||
🚀 We are Hiring! 🚀 |
||||
</a> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<template #back> |
||||
<!-- todo: add project cost --> |
||||
<a |
||||
href="https://github.com/sponsors/nocodb" |
||||
target="_blank" |
||||
class="group flex items-center gap-2 w-full mx-3 px-4 py-2 rounded-l !bg-primary text-white transform translate-x-4 hover:(translate-x-0 shadow-lg !opacity-100) transition duration-150 ease" |
||||
@click.stop |
||||
> |
||||
<MdiHeartsCard class="text-red-500" /> |
||||
{{ $t('activity.sponsorUs') }} |
||||
</a> |
||||
</template> |
||||
</general-flipping-card> |
||||
</a-menu> |
||||
</div> |
||||
|
||||
<dlg-view-create v-if="views" v-model="modalOpen" :title="viewCreateTitle" :type="viewCreateType" @created="onCreate" /> |
||||
</a-layout-sider> |
||||
</template> |
||||
|
||||
<style scoped> |
||||
:deep(.ant-menu-title-content) { |
||||
@apply w-full; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,148 @@
|
||||
<script lang="ts" setup> |
||||
import { ViewTypes } from 'nocodb-sdk' |
||||
import { ref, useNuxtApp } from '#imports' |
||||
import { viewIcons } from '~/utils' |
||||
import MdiPlusIcon from '~icons/mdi/plus' |
||||
import MdiXml from '~icons/mdi/xml' |
||||
import MdiHook from '~icons/mdi/hook' |
||||
import MdiHeartsCard from '~icons/mdi/cards-heart' |
||||
import MdiShieldLockOutline from '~icons/mdi/shield-lock-outline' |
||||
|
||||
interface Emits { |
||||
(event: 'openModal', data: { type: ViewTypes; title?: string }): void |
||||
} |
||||
|
||||
const emits = defineEmits<Emits>() |
||||
|
||||
const { $e } = useNuxtApp() |
||||
|
||||
const isView = ref(false) |
||||
|
||||
function onApiSnippet() { |
||||
// get API snippet |
||||
$e('a:view:api-snippet') |
||||
} |
||||
|
||||
function onOpenModal(type: ViewTypes, title = '') { |
||||
emits('openModal', { type, title }) |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<a-menu class="flex-1 flex flex-col"> |
||||
<a-divider class="my-2" /> |
||||
|
||||
<h3 class="px-3 text-xs font-semibold flex items-center gap-4"> |
||||
{{ $t('activity.createView') }} |
||||
<a-tooltip> |
||||
<template #title> |
||||
{{ $t('msg.info.onlyCreator') }} |
||||
</template> |
||||
<MdiShieldLockOutline class="text-pink-500" /> |
||||
</a-tooltip> |
||||
</h3> |
||||
|
||||
<a-menu-item key="grid" class="group !flex !items-center !my-0 !h-[30px]" @click="onOpenModal(ViewTypes.GRID)"> |
||||
<a-tooltip placement="left"> |
||||
<template #title> |
||||
{{ $t('msg.info.addView.grid') }} |
||||
</template> |
||||
|
||||
<div class="text-xs flex items-center h-full w-full gap-2"> |
||||
<component :is="viewIcons[ViewTypes.GRID].icon" :class="`text-${viewIcons[ViewTypes.GRID].color}`" /> |
||||
|
||||
<div>{{ $t('objects.viewType.grid') }}</div> |
||||
|
||||
<div class="flex-1" /> |
||||
|
||||
<MdiPlusIcon class="group-hover:text-primary" /> |
||||
</div> |
||||
</a-tooltip> |
||||
</a-menu-item> |
||||
|
||||
<a-menu-item key="gallery" class="group !flex !items-center !-my0 !h-[30px]" @click="onOpenModal(ViewTypes.GALLERY)"> |
||||
<a-tooltip placement="left"> |
||||
<template #title> |
||||
{{ $t('msg.info.addView.gallery') }} |
||||
</template> |
||||
|
||||
<div class="text-xs flex items-center h-full w-full gap-2"> |
||||
<component :is="viewIcons[ViewTypes.GALLERY].icon" :class="`text-${viewIcons[ViewTypes.GALLERY].color}`" /> |
||||
|
||||
<div>{{ $t('objects.viewType.gallery') }}</div> |
||||
|
||||
<div class="flex-1" /> |
||||
|
||||
<MdiPlusIcon class="group-hover:text-primary" /> |
||||
</div> |
||||
</a-tooltip> |
||||
</a-menu-item> |
||||
|
||||
<a-menu-item v-if="!isView" key="form" class="group !flex !items-center !my-0 !h-[30px]" @click="onOpenModal(ViewTypes.FORM)"> |
||||
<a-tooltip placement="left"> |
||||
<template #title> |
||||
{{ $t('msg.info.addView.form') }} |
||||
</template> |
||||
|
||||
<div class="text-xs flex items-center h-full w-full gap-2"> |
||||
<component :is="viewIcons[ViewTypes.FORM].icon" :class="`text-${viewIcons[ViewTypes.FORM].color}`" /> |
||||
|
||||
<div>{{ $t('objects.viewType.form') }}</div> |
||||
|
||||
<div class="flex-1" /> |
||||
|
||||
<MdiPlusIcon class="group-hover:text-primary" /> |
||||
</div> |
||||
</a-tooltip> |
||||
</a-menu-item> |
||||
|
||||
<div class="flex-auto justify-end flex flex-col gap-4 mt-4"> |
||||
<button |
||||
class="flex items-center gap-2 w-full mx-3 px-4 py-3 rounded !bg-primary text-white transform translate-x-4 hover:(translate-x-0 shadow-lg) transition duration-150 ease" |
||||
@click="onApiSnippet" |
||||
> |
||||
<MdiXml />Get API Snippet |
||||
</button> |
||||
|
||||
<button |
||||
class="flex items-center gap-2 w-full mx-3 px-4 py-3 rounded border transform translate-x-4 hover:(translate-x-0 shadow-lg) transition duration-150 ease" |
||||
@click="onApiSnippet" |
||||
> |
||||
<MdiHook />{{ $t('objects.webhooks') }} |
||||
</button> |
||||
</div> |
||||
|
||||
<general-flipping-card class="my-4 min-h-[100px] w-[250px]" :triggers="['click', { duration: 15000 }]"> |
||||
<template #front> |
||||
<div class="flex h-full w-full gap-6 flex-col"> |
||||
<general-social /> |
||||
|
||||
<div> |
||||
<a |
||||
v-t="['e:hiring']" |
||||
class="px-4 py-3 !bg-primary rounded shadow text-white" |
||||
href="https://angel.co/company/nocodb" |
||||
target="_blank" |
||||
@click.stop |
||||
> |
||||
🚀 We are Hiring! 🚀 |
||||
</a> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<template #back> |
||||
<!-- todo: add project cost --> |
||||
<a |
||||
href="https://github.com/sponsors/nocodb" |
||||
target="_blank" |
||||
class="group flex items-center gap-2 w-full mx-3 px-4 py-2 rounded-l !bg-primary text-white transform translate-x-4 hover:(translate-x-0 shadow-lg !opacity-100) transition duration-150 ease" |
||||
@click.stop |
||||
> |
||||
<MdiHeartsCard class="text-red-500" /> |
||||
{{ $t('activity.sponsorUs') }} |
||||
</a> |
||||
</template> |
||||
</general-flipping-card> |
||||
</a-menu> |
||||
</template> |
||||
@ -0,0 +1,171 @@
|
||||
<script lang="ts" setup> |
||||
import type { FormType, GalleryType, GridType, KanbanType, ViewTypes } from 'nocodb-sdk' |
||||
import Sortable from 'sortablejs' |
||||
import { notification } from 'ant-design-vue' |
||||
import RenameableMenuItem from './RenameableMenuItem.vue' |
||||
import { inject, onBeforeUnmount, ref, unref, useApi, useNuxtApp, useTabs, useViews, watch } from '#imports' |
||||
import { extractSdkResponseErrorMsg } from '~/utils' |
||||
import type { TabItem } from '~/composables/useTabs' |
||||
import { TabType } from '~/composables/useTabs' |
||||
import { ActiveViewInj, MetaInj } from '~/context' |
||||
|
||||
interface Emits { |
||||
(event: 'openModal', data: { type: ViewTypes; title?: string }): void |
||||
} |
||||
|
||||
const emits = defineEmits<Emits>() |
||||
|
||||
const meta = inject(MetaInj, ref()) |
||||
|
||||
const activeView = inject(ActiveViewInj, ref()) |
||||
|
||||
const { $e } = useNuxtApp() |
||||
|
||||
const { addTab } = useTabs() |
||||
|
||||
const { views, loadViews } = useViews(meta) |
||||
|
||||
const { api } = useApi() |
||||
|
||||
/** sortable instance */ |
||||
let sortable: Sortable |
||||
|
||||
/** Selected view(s) for menu */ |
||||
const selected = ref<string[]>([]) |
||||
|
||||
/** Watch current views and on change set the next active view */ |
||||
watch( |
||||
views, |
||||
(nextViews) => { |
||||
if (nextViews.length) { |
||||
activeView.value = nextViews[0] |
||||
} |
||||
}, |
||||
{ immediate: true }, |
||||
) |
||||
|
||||
/** Watch currently active view, so we can mark it in the menu */ |
||||
watch(activeView, (nextActiveView) => { |
||||
const _nextActiveView = nextActiveView as GridType | FormType | KanbanType |
||||
|
||||
if (_nextActiveView && _nextActiveView.id) { |
||||
selected.value = [_nextActiveView.id] |
||||
} |
||||
}) |
||||
|
||||
onBeforeUnmount(() => { |
||||
if (sortable) sortable.destroy() |
||||
}) |
||||
|
||||
function validate(value?: string) { |
||||
if (!value || value.trim().length < 0) { |
||||
return 'View name is required' |
||||
} |
||||
|
||||
if ((unref(views) || []).every((v1) => ((v1 as GridType | KanbanType | GalleryType).alias || v1.title) !== value)) { |
||||
return 'View name should be unique' |
||||
} |
||||
|
||||
return true |
||||
} |
||||
|
||||
function initializeSortable(el: HTMLElement) { |
||||
/** if instance exists, destroy it first */ |
||||
if (sortable) sortable.destroy() |
||||
|
||||
sortable = Sortable.create(el, { |
||||
handle: '.nc-drag-icon', |
||||
onEnd: async (evt) => { |
||||
const { newIndex = 0, oldIndex = 0 } = evt |
||||
|
||||
const itemEl = evt.item as HTMLLIElement |
||||
console.log(itemEl) |
||||
}, |
||||
animation: 150, |
||||
}) |
||||
} |
||||
|
||||
// todo: fix view type, alias is missing for some reason? |
||||
/** Navigate to view and add new tab if necessary */ |
||||
function changeView(view: { id: string; alias?: string; title?: string; type: ViewTypes }) { |
||||
activeView.value = view |
||||
|
||||
const tabProps: TabItem = { |
||||
id: view.id, |
||||
title: (view.alias ?? view.title) || '', |
||||
type: TabType.VIEW, |
||||
} |
||||
|
||||
addTab(tabProps) |
||||
} |
||||
|
||||
/** Rename a view */ |
||||
async function onRename(view: Record<string, any>) { |
||||
const valid = validate(view.title) |
||||
|
||||
if (valid !== true) { |
||||
notification.error({ |
||||
message: valid, |
||||
duration: 2, |
||||
}) |
||||
} |
||||
|
||||
try { |
||||
// todo typing issues, order and id do not exist on all members of ViewTypes (Kanban, Gallery, Form, Grid) |
||||
await api.dbView.update(view.id, { |
||||
title: view.title, |
||||
order: view.order, |
||||
}) |
||||
|
||||
notification.success({ |
||||
message: 'View renamed successfully', |
||||
duration: 3, |
||||
}) |
||||
} catch (e: any) { |
||||
notification.error({ |
||||
message: await extractSdkResponseErrorMsg(e), |
||||
duration: 3, |
||||
}) |
||||
} |
||||
} |
||||
|
||||
/** Delete a view */ |
||||
async function onDelete(view: Record<string, any>) { |
||||
try { |
||||
await api.dbView.delete(view.id) |
||||
|
||||
notification.success({ |
||||
message: 'View deleted successfully', |
||||
duration: 3, |
||||
}) |
||||
|
||||
await loadViews() |
||||
|
||||
console.log(views.value) |
||||
} catch (e: any) { |
||||
notification.error({ |
||||
message: await extractSdkResponseErrorMsg(e), |
||||
duration: 3, |
||||
}) |
||||
} |
||||
|
||||
// telemetry event |
||||
$e('a:view:delete', { view: view.type }) |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<a-menu class="flex-1 max-h-50vh overflow-y-scroll scrollbar-thin-primary" :selected-keys="selected"> |
||||
<h3 class="pt-3 px-3 text-xs font-semibold">{{ $t('objects.views') }}</h3> |
||||
|
||||
<RenameableMenuItem |
||||
v-for="view of views" |
||||
:key="view.id" |
||||
:view="view" |
||||
@change-view="changeView" |
||||
@open-modal="$emit('openModal', $event)" |
||||
@delete="onDelete" |
||||
@rename="onRename" |
||||
/> |
||||
</a-menu> |
||||
</template> |
||||
@ -0,0 +1,179 @@
|
||||
<script lang="ts" setup> |
||||
import type { ViewTypes } from 'nocodb-sdk' |
||||
import { viewIcons } from '~/utils' |
||||
import { useDebounceFn, useNuxtApp, useVModel } from '#imports' |
||||
import MdiTrashCan from '~icons/mdi/trash-can' |
||||
import MdiContentCopy from '~icons/mdi/content-copy' |
||||
import MdiDrag from '~icons/mdi/drag-vertical' |
||||
|
||||
interface Props { |
||||
view: Record<string, any> |
||||
} |
||||
|
||||
interface Emits { |
||||
(event: 'openModal', data: { type: ViewTypes; title?: string }): void |
||||
(event: 'update:view', data: Record<string, any>): void |
||||
(event: 'changeView', view: Record<string, any>): void |
||||
(event: 'rename', view: Record<string, any>): void |
||||
(event: 'delete', view: Record<string, any>): void |
||||
} |
||||
|
||||
const props = defineProps<Props>() |
||||
|
||||
const emits = defineEmits<Emits>() |
||||
|
||||
const vModel = useVModel(props, 'view', emits) |
||||
|
||||
const { $e } = useNuxtApp() |
||||
|
||||
/** Is editing the view name enabled */ |
||||
let isEditing = $ref<boolean>(false) |
||||
|
||||
/** Helper to check if editing was disabled before the view navigation timeout triggers */ |
||||
let isStopped = $ref(false) |
||||
|
||||
/** Original view title when editing the view name */ |
||||
let originalTitle = $ref<string | undefined>() |
||||
|
||||
/** Debounce click handler, so we can potentially enable editing view name {@see onDblClick} */ |
||||
const onClick = useDebounceFn(() => { |
||||
if (isEditing || isStopped) return |
||||
|
||||
emits('changeView', vModel.value) |
||||
}, 250) |
||||
|
||||
/** Enable editing view name on dbl click */ |
||||
function onDblClick() { |
||||
if (!isEditing) { |
||||
isEditing = true |
||||
originalTitle = vModel.value.title |
||||
} |
||||
} |
||||
|
||||
/** 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) { |
||||
onKeyEnter(event) |
||||
} |
||||
}) |
||||
|
||||
function focusInput(el: HTMLInputElement) { |
||||
if (el) el.focus() |
||||
} |
||||
|
||||
/** Duplicate a view */ |
||||
// todo: This is not really a duplication, maybe we need to implement a true duplication? |
||||
function onDuplicate() { |
||||
emits('openModal', { type: vModel.value.type, title: vModel.value.title }) |
||||
|
||||
$e('c:view:copy', { view: vModel.value.type }) |
||||
} |
||||
|
||||
/** Delete a view */ |
||||
async function onDelete() { |
||||
emits('delete', vModel.value) |
||||
} |
||||
|
||||
/** Rename a view */ |
||||
async function onRename() { |
||||
if (!isEditing) return |
||||
|
||||
if (vModel.value.title === '' || vModel.value.title === originalTitle) { |
||||
onCancel() |
||||
return |
||||
} |
||||
|
||||
emits('rename', vModel.value) |
||||
|
||||
onStopEdit() |
||||
} |
||||
|
||||
/** Cancel renaming view */ |
||||
function onCancel() { |
||||
if (!isEditing) return |
||||
|
||||
vModel.value.title = originalTitle |
||||
onStopEdit() |
||||
} |
||||
|
||||
/** Stop editing view name, timeout makes sure that view navigation (click trigger) does not pick up before stop is done */ |
||||
function onStopEdit() { |
||||
isStopped = true |
||||
isEditing = false |
||||
originalTitle = '' |
||||
|
||||
setTimeout(() => { |
||||
isStopped = false |
||||
}, 250) |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<a-menu-item class="group !flex !items-center !my-0" @dblclick="onDblClick" @click="onClick"> |
||||
<div v-t="['a:view:open', { view: vModel.type }]" class="text-xs flex items-center w-full gap-2"> |
||||
<MdiDrag |
||||
:class="`transition-opacity opacity-0 group-hover:opacity-100 text-gray-500 nc-drag-icon cursor-move nc-child-draggable-icon-${vModel.title}`" |
||||
/> |
||||
|
||||
<component :is="viewIcons[vModel.type].icon" :class="`text-${viewIcons[vModel.type].color}`" /> |
||||
|
||||
<a-input v-if="isEditing" :ref="focusInput" v-model:value="vModel.title" @blur="onCancel" @keydown="onKeyDown($event)" /> |
||||
<div v-else>{{ vModel.alias || vModel.title }}</div> |
||||
|
||||
<div class="flex-1" /> |
||||
|
||||
<template v-if="!isEditing"> |
||||
<div class="flex items-center gap-1"> |
||||
<a-tooltip placement="left"> |
||||
<template #title> |
||||
{{ $t('activity.copyView') }} |
||||
</template> |
||||
|
||||
<MdiContentCopy class="hidden group-hover:block text-gray-500" @click.stop="onDuplicate" /> |
||||
</a-tooltip> |
||||
|
||||
<a-popconfirm |
||||
v-if="!vModel.is_default" |
||||
placement="left" |
||||
:title="$t('msg.info.deleteProject')" |
||||
:ok-text="$t('general.yes')" |
||||
:cancel-text="$t('general.no')" |
||||
@confirm="onDelete" |
||||
> |
||||
<a-tooltip placement="left"> |
||||
<template #title> |
||||
{{ $t('activity.deleteView') }} |
||||
</template> |
||||
|
||||
<MdiTrashCan class="hidden group-hover:block text-red-500" @click.stop /> |
||||
</a-tooltip> |
||||
</a-popconfirm> |
||||
</div> |
||||
</template> |
||||
</div> |
||||
</a-menu-item> |
||||
</template> |
||||
@ -0,0 +1,60 @@
|
||||
<script setup lang="ts"> |
||||
import type { FormType, GalleryType, GridType, KanbanType, ViewTypes } from 'nocodb-sdk' |
||||
import MenuTop from './MenuTop.vue' |
||||
import MenuBottom from './MenuBottom.vue' |
||||
import { inject, provide, ref, useApi, useViews } from '#imports' |
||||
import { ActiveViewInj, MetaInj, ViewListInj } from '~/context' |
||||
|
||||
const meta = inject(MetaInj, ref()) |
||||
|
||||
const activeView = inject(ActiveViewInj, ref()) |
||||
|
||||
const { views } = useViews(meta) |
||||
|
||||
const { api } = useApi() |
||||
|
||||
provide(ViewListInj, views) |
||||
|
||||
/** Sidebar visible */ |
||||
const drawerOpen = inject('navDrawerOpen', ref(false)) |
||||
|
||||
/** View type to create from modal */ |
||||
let viewCreateType = $ref<ViewTypes>() |
||||
|
||||
/** View title to create from modal (when duplicating) */ |
||||
let viewCreateTitle = $ref('') |
||||
|
||||
/** is view creation modal open */ |
||||
let modalOpen = $ref(false) |
||||
|
||||
/** Open view creation modal */ |
||||
function openModal({ type, title = '' }: { type: ViewTypes; title: string }) { |
||||
modalOpen = true |
||||
viewCreateType = type |
||||
viewCreateTitle = title |
||||
} |
||||
|
||||
/** Handle view creation */ |
||||
function onCreate(view: GridType | FormType | KanbanType | GalleryType) { |
||||
views.value?.push(view) |
||||
activeView.value = view |
||||
modalOpen = false |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<a-layout-sider class="shadow" :width="drawerOpen ? 0 : 250"> |
||||
<div class="flex flex-col h-full"> |
||||
<MenuTop @open-modal="openModal" /> |
||||
<MenuBottom @open-modal="openModal" /> |
||||
</div> |
||||
|
||||
<dlg-view-create v-if="views" v-model="modalOpen" :title="viewCreateTitle" :type="viewCreateType" @created="onCreate" /> |
||||
</a-layout-sider> |
||||
</template> |
||||
|
||||
<style scoped> |
||||
:deep(.ant-menu-title-content) { |
||||
@apply w-full; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue