mirror of https://github.com/nocodb/nocodb
Muhammed Mustafa
1 year ago
committed by
GitHub
24 changed files with 684 additions and 150 deletions
|
Before Width: | Height: | Size: 275 B After Width: | Height: | Size: 280 B |
|
Before Width: | Height: | Size: 725 B After Width: | Height: | Size: 735 B |
|
Before Width: | Height: | Size: 458 B After Width: | Height: | Size: 473 B |
@ -0,0 +1,207 @@ |
|||||||
|
<script lang="ts" setup> |
||||||
|
const { activeTable } = storeToRefs(useTablesStore()) |
||||||
|
|
||||||
|
const { isMobileMode } = useGlobal() |
||||||
|
|
||||||
|
const { isSharedBase, base } = storeToRefs(useBase()) |
||||||
|
|
||||||
|
const { t } = useI18n() |
||||||
|
|
||||||
|
const { $api } = useNuxtApp() |
||||||
|
|
||||||
|
const { refreshCommandPalette } = useCommandPalette() |
||||||
|
|
||||||
|
const { activeView, views, openedViewsTab, viewsByTable } = storeToRefs(useViewsStore()) |
||||||
|
const { loadViews, removeFromRecentViews } = useViewsStore() |
||||||
|
|
||||||
|
const { navigateToTable } = useTablesStore() |
||||||
|
|
||||||
|
const isDropdownOpen = ref(false) |
||||||
|
|
||||||
|
const isViewIdCopied = ref(false) |
||||||
|
|
||||||
|
const isRenaming = ref(false) |
||||||
|
|
||||||
|
const renameInputDom = ref() |
||||||
|
|
||||||
|
const viewRenameTitle = ref('') |
||||||
|
|
||||||
|
const error = ref<string | undefined>() |
||||||
|
|
||||||
|
const onRenameMenuClick = () => { |
||||||
|
isRenaming.value = true |
||||||
|
isDropdownOpen.value = false |
||||||
|
viewRenameTitle.value = activeView.value!.title |
||||||
|
|
||||||
|
setTimeout(() => { |
||||||
|
renameInputDom.value.focus() |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
watch(renameInputDom, () => { |
||||||
|
renameInputDom.value?.focus() |
||||||
|
}) |
||||||
|
|
||||||
|
const onRenameBlur = async () => { |
||||||
|
if (validate()) { |
||||||
|
activeView.value!.title = viewRenameTitle.value |
||||||
|
isRenaming.value = false |
||||||
|
error.value = undefined |
||||||
|
|
||||||
|
await $api.dbView.update(activeView.value!.id!, { |
||||||
|
title: viewRenameTitle.value, |
||||||
|
}) |
||||||
|
} else { |
||||||
|
renameInputDom.value?.focus() |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/** validate view title */ |
||||||
|
function validate() { |
||||||
|
if (!viewRenameTitle.value || viewRenameTitle.value.trim().length < 0) { |
||||||
|
error.value = t('msg.error.viewNameRequired') |
||||||
|
|
||||||
|
return false |
||||||
|
} |
||||||
|
|
||||||
|
if (viewRenameTitle.value.trim().length > 255) { |
||||||
|
error.value = t('msg.error.nameMaxLength256') |
||||||
|
|
||||||
|
return false |
||||||
|
} |
||||||
|
|
||||||
|
if (views.value.some((v) => v.title === viewRenameTitle.value && v.id !== activeView.value!.id)) { |
||||||
|
error.value = t('msg.error.viewNameDuplicate') |
||||||
|
return false |
||||||
|
} |
||||||
|
|
||||||
|
return true |
||||||
|
} |
||||||
|
|
||||||
|
watch(viewRenameTitle, () => { |
||||||
|
if (error.value) { |
||||||
|
error.value = undefined |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
watch(isDropdownOpen, () => { |
||||||
|
setTimeout(() => { |
||||||
|
isViewIdCopied.value = false |
||||||
|
}, 250) |
||||||
|
}) |
||||||
|
|
||||||
|
const resetViewRename = () => { |
||||||
|
viewRenameTitle.value = activeView.value!.title |
||||||
|
isRenaming.value = false |
||||||
|
} |
||||||
|
|
||||||
|
function openDeleteDialog() { |
||||||
|
const isOpen = ref(true) |
||||||
|
isDropdownOpen.value = false |
||||||
|
|
||||||
|
const { close } = useDialog(resolveComponent('DlgViewDelete'), { |
||||||
|
'modelValue': isOpen, |
||||||
|
'view': activeView.value, |
||||||
|
'onUpdate:modelValue': closeDialog, |
||||||
|
'onDeleted': async () => { |
||||||
|
closeDialog() |
||||||
|
|
||||||
|
removeFromRecentViews({ viewId: activeView.value!.id, tableId: activeView.value!.fk_model_id, baseId: base.value.id }) |
||||||
|
refreshCommandPalette() |
||||||
|
if (activeView.value?.id === activeView.value!.id) { |
||||||
|
navigateToTable({ |
||||||
|
tableId: activeTable.value!.id!, |
||||||
|
baseId: base.value.id!, |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
await loadViews({ |
||||||
|
tableId: activeTable.value!.id!, |
||||||
|
force: true, |
||||||
|
}) |
||||||
|
|
||||||
|
const activeNonDefaultViews = viewsByTable.value.get(activeTable!.value!.id!)?.filter((v) => !v.is_default) ?? [] |
||||||
|
|
||||||
|
activeTable!.value!.meta = { |
||||||
|
...(activeTable!.value!.meta as object), |
||||||
|
hasNonDefaultViews: activeNonDefaultViews.length > 1, |
||||||
|
} |
||||||
|
}, |
||||||
|
}) |
||||||
|
|
||||||
|
function closeDialog() { |
||||||
|
isOpen.value = false |
||||||
|
|
||||||
|
close(1000) |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<div |
||||||
|
v-if="isRenaming" |
||||||
|
class="h-6 relative" |
||||||
|
:class="{ |
||||||
|
'max-w-2/5': !isSharedBase && !isMobileMode && activeView?.is_default, |
||||||
|
'max-w-3/5': !isSharedBase && !isMobileMode && !activeView?.is_default, |
||||||
|
}" |
||||||
|
> |
||||||
|
<input |
||||||
|
ref="renameInputDom" |
||||||
|
v-model="viewRenameTitle" |
||||||
|
class="ml-0.25 w-full px-1 py-0.5 rounded-md font-medium text-gray-800" |
||||||
|
:class="{ |
||||||
|
'outline-brand-500': !error, |
||||||
|
'outline-red-500 pr-6': error, |
||||||
|
}" |
||||||
|
@blur="onRenameBlur" |
||||||
|
@keydown.enter="onRenameBlur" |
||||||
|
@keydown.esc="resetViewRename" |
||||||
|
/> |
||||||
|
<NcTooltip v-if="error" class="absolute top-0.25 right-0.5 bg-white rounded-lg"> |
||||||
|
<template #title> |
||||||
|
{{ error }} |
||||||
|
</template> |
||||||
|
<GeneralIcon icon="info" class="cursor-pointer" /> |
||||||
|
</NcTooltip> |
||||||
|
</div> |
||||||
|
<NcDropdown |
||||||
|
v-else |
||||||
|
v-model:visible="isDropdownOpen" |
||||||
|
v-e="['c:breadcrumb:view-actions']" |
||||||
|
class="!xs:pointer-events-none nc-actions-menu-btn nc-view-context-btn" |
||||||
|
overlay-class-name="nc-dropdown-actions-menu" |
||||||
|
> |
||||||
|
<div |
||||||
|
class="truncate nc-active-view-title !hover:(bg-gray-100 text-gray-800) ml-0.25 pl-1 pr-0.25 rounded-md py-1 cursor-pointer" |
||||||
|
:class="{ |
||||||
|
'max-w-2/5': !isSharedBase && !isMobileMode && activeView?.is_default, |
||||||
|
'max-w-3/5': !isSharedBase && !isMobileMode && !activeView?.is_default, |
||||||
|
'max-w-1/2': isMobileMode, |
||||||
|
'text-gray-500': activeView?.is_default, |
||||||
|
'text-gray-800 font-medium': !activeView?.is_default, |
||||||
|
}" |
||||||
|
> |
||||||
|
<span |
||||||
|
class="truncate xs:pl-1.25 text-inherit" |
||||||
|
:class="{ |
||||||
|
'max-w-28/100': !isMobileMode, |
||||||
|
}" |
||||||
|
> |
||||||
|
{{ activeView?.is_default ? $t('title.defaultView') : activeView?.title }} |
||||||
|
</span> |
||||||
|
<GeneralIcon icon="arrowDown" class="ml-1" /> |
||||||
|
</div> |
||||||
|
<template #overlay> |
||||||
|
<SmartsheetToolbarViewActionMenu |
||||||
|
:table="activeTable" |
||||||
|
:view="activeView" |
||||||
|
@close-modal="isDropdownOpen = false" |
||||||
|
@rename="onRenameMenuClick" |
||||||
|
@delete="openDeleteDialog" |
||||||
|
/> |
||||||
|
</template> |
||||||
|
</NcDropdown> |
||||||
|
|
||||||
|
<LazySmartsheetToolbarReload v-if="openedViewsTab === 'view' && !isMobileMode && !isRenaming" /> |
||||||
|
</template> |
||||||
@ -0,0 +1,317 @@ |
|||||||
|
<script lang="ts" setup> |
||||||
|
import type { TableType, ViewType } from 'nocodb-sdk' |
||||||
|
import { ViewTypes } from 'nocodb-sdk' |
||||||
|
import { LockType } from '~/lib' |
||||||
|
|
||||||
|
import UploadIcon from '~icons/nc-icons/upload' |
||||||
|
import DownloadIcon from '~icons/nc-icons/download' |
||||||
|
|
||||||
|
const props = defineProps<{ |
||||||
|
view: ViewType |
||||||
|
table: TableType |
||||||
|
inSidebar: boolean |
||||||
|
}>() |
||||||
|
|
||||||
|
const emits = defineEmits(['rename', 'closeModal', 'delete']) |
||||||
|
|
||||||
|
const { isUIAllowed } = useRoles() |
||||||
|
|
||||||
|
const isPublicView = inject(IsPublicInj, ref(false)) |
||||||
|
|
||||||
|
const isLocked = inject(IsLockedInj, ref(false)) |
||||||
|
|
||||||
|
const { $api, $e } = useNuxtApp() |
||||||
|
|
||||||
|
const { t } = useI18n() |
||||||
|
|
||||||
|
const view = computed(() => props.view) |
||||||
|
|
||||||
|
const table = computed(() => props.table) |
||||||
|
|
||||||
|
const { viewsByTable } = storeToRefs(useViewsStore()) |
||||||
|
const { loadViews, navigateToView } = useViewsStore() |
||||||
|
|
||||||
|
const { base } = storeToRefs(useBase()) |
||||||
|
|
||||||
|
const { refreshCommandPalette } = useCommandPalette() |
||||||
|
|
||||||
|
const lockType = computed(() => (view.value?.lock_type as LockType) || LockType.Collaborative) |
||||||
|
|
||||||
|
const views = computed(() => viewsByTable.value.get(table.value.id!)) |
||||||
|
|
||||||
|
const isViewIdCopied = ref(false) |
||||||
|
|
||||||
|
const currentBaseId = computed(() => table.value?.source_id) |
||||||
|
|
||||||
|
const onRenameMenuClick = () => { |
||||||
|
emits('rename') |
||||||
|
} |
||||||
|
|
||||||
|
const quickImportDialogTypes: QuickImportDialogType[] = ['csv', 'excel'] |
||||||
|
|
||||||
|
const quickImportDialogs: Record<(typeof quickImportDialogTypes)[number], Ref<boolean>> = quickImportDialogTypes.reduce( |
||||||
|
(acc: any, curr) => { |
||||||
|
acc[curr] = ref(false) |
||||||
|
return acc |
||||||
|
}, |
||||||
|
{}, |
||||||
|
) as Record<QuickImportDialogType, Ref<boolean>> |
||||||
|
|
||||||
|
const onImportClick = (dialog: any) => { |
||||||
|
if (isLocked.value) return |
||||||
|
|
||||||
|
emits('closeModal') |
||||||
|
dialog.value = true |
||||||
|
} |
||||||
|
|
||||||
|
async function changeLockType(type: LockType) { |
||||||
|
$e('a:grid:lockmenu', { lockType: type, sidebar: props.inSidebar }) |
||||||
|
|
||||||
|
if (!view.value) return |
||||||
|
|
||||||
|
if (type === 'personal') { |
||||||
|
// Coming soon |
||||||
|
return message.info(t('msg.toast.futureRelease')) |
||||||
|
} |
||||||
|
try { |
||||||
|
view.value.lock_type = type |
||||||
|
await $api.dbView.update(view.value.id as string, { |
||||||
|
lock_type: type, |
||||||
|
}) |
||||||
|
|
||||||
|
message.success(`Successfully Switched to ${type} view`) |
||||||
|
} catch (e: any) { |
||||||
|
message.error(await extractSdkResponseErrorMsg(e)) |
||||||
|
} |
||||||
|
|
||||||
|
emits('closeModal') |
||||||
|
} |
||||||
|
|
||||||
|
/** Duplicate a view */ |
||||||
|
// todo: This is not really a duplication, maybe we need to implement a true duplication? |
||||||
|
function onDuplicate() { |
||||||
|
emits('closeModal') |
||||||
|
|
||||||
|
const isOpen = ref(true) |
||||||
|
|
||||||
|
const { close } = useDialog(resolveComponent('DlgViewCreate'), { |
||||||
|
'modelValue': isOpen, |
||||||
|
'title': view.value!.title, |
||||||
|
'type': view.value!.type as ViewTypes, |
||||||
|
'tableId': table.value!.id, |
||||||
|
'selectedViewId': view.value!.id, |
||||||
|
'groupingFieldColumnId': view.value!.view!.fk_grp_col_id, |
||||||
|
'views': views, |
||||||
|
'onUpdate:modelValue': closeDialog, |
||||||
|
'onCreated': async (view: ViewType) => { |
||||||
|
closeDialog() |
||||||
|
|
||||||
|
refreshCommandPalette() |
||||||
|
|
||||||
|
await loadViews({ |
||||||
|
force: true, |
||||||
|
tableId: table.value!.id!, |
||||||
|
}) |
||||||
|
|
||||||
|
navigateToView({ |
||||||
|
view, |
||||||
|
tableId: table.value!.id!, |
||||||
|
baseId: base.value.id!, |
||||||
|
hardReload: view.type === ViewTypes.FORM, |
||||||
|
}) |
||||||
|
|
||||||
|
$e('a:view:create', { view: view.type, sidebar: props.inSidebar }) |
||||||
|
}, |
||||||
|
}) |
||||||
|
|
||||||
|
function closeDialog() { |
||||||
|
isOpen.value = false |
||||||
|
|
||||||
|
close(1000) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const { copy } = useCopy() |
||||||
|
|
||||||
|
const onViewIdCopy = async () => { |
||||||
|
await copy(view.value!.id!) |
||||||
|
isViewIdCopied.value = true |
||||||
|
} |
||||||
|
|
||||||
|
const onDelete = async () => { |
||||||
|
emits('delete') |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<NcMenu class="!min-w-70" data-id="toolbar-actions" :data-testid="`view-sidebar-view-actions-${view!.alias || view!.title}`"> |
||||||
|
<NcTooltip> |
||||||
|
<template #title> {{ $t('labels.clickToCopyViewID') }} </template> |
||||||
|
<div class="flex items-center justify-between py-2 px-3 cursor-pointer hover:bg-gray-100 group" @click="onViewIdCopy"> |
||||||
|
<div class="flex text-xs font-bold text-gray-500 ml-1"> |
||||||
|
{{ |
||||||
|
$t('labels.viewIdColon', { |
||||||
|
viewId: view?.id, |
||||||
|
}) |
||||||
|
}} |
||||||
|
</div> |
||||||
|
<NcButton size="xsmall" type="secondary" class="!group-hover:bg-gray-100"> |
||||||
|
<GeneralIcon v-if="isViewIdCopied" icon="check" class="max-h-4 min-w-4" /> |
||||||
|
<GeneralIcon v-else else icon="copy" class="max-h-4 min-w-4" /> |
||||||
|
</NcButton> |
||||||
|
</div> |
||||||
|
</NcTooltip> |
||||||
|
<NcDivider /> |
||||||
|
<template v-if="!view?.is_default"> |
||||||
|
<NcMenuItem @click="onRenameMenuClick"> |
||||||
|
<GeneralIcon icon="edit" /> |
||||||
|
{{ $t('activity.renameView') }} |
||||||
|
</NcMenuItem> |
||||||
|
<NcMenuItem @click="onDuplicate"> |
||||||
|
<GeneralIcon icon="duplicate" class="nc-view-copy-icon" /> |
||||||
|
{{ $t('labels.duplicateView') }} |
||||||
|
</NcMenuItem> |
||||||
|
<NcDivider /> |
||||||
|
</template> |
||||||
|
|
||||||
|
<template v-if="view.type !== ViewTypes.FORM"> |
||||||
|
<template v-if="isUIAllowed('csvTableImport') && !isPublicView"> |
||||||
|
<NcSubMenu key="upload"> |
||||||
|
<template #title> |
||||||
|
<div |
||||||
|
v-e="[ |
||||||
|
'c:navdraw:preview-as', |
||||||
|
{ |
||||||
|
sidebar: props.inSidebar, |
||||||
|
}, |
||||||
|
]" |
||||||
|
class="nc-base-menu-item group" |
||||||
|
> |
||||||
|
<UploadIcon class="w-4 h-4" /> |
||||||
|
{{ $t('general.upload') }} |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<template #expandIcon></template> |
||||||
|
<div class="flex py-3 px-4 font-bold uppercase text-xs text-gray-500">{{ $t('activity.uploadData') }}</div> |
||||||
|
|
||||||
|
<template v-for="(dialog, type) in quickImportDialogs"> |
||||||
|
<NcMenuItem v-if="isUIAllowed(`${type}TableImport`) && !isPublicView" :key="type" @click="onImportClick(dialog)"> |
||||||
|
<div |
||||||
|
v-e="[ |
||||||
|
`a:upload:${type}`, |
||||||
|
{ |
||||||
|
sidebar: props.inSidebar, |
||||||
|
}, |
||||||
|
]" |
||||||
|
class="nc-base-menu-item" |
||||||
|
:class="{ disabled: isLocked }" |
||||||
|
> |
||||||
|
<component :is="iconMap.upload" /> |
||||||
|
{{ `${$t('general.upload')} ${type.toUpperCase()}` }} |
||||||
|
</div> |
||||||
|
</NcMenuItem> |
||||||
|
</template> |
||||||
|
</NcSubMenu> |
||||||
|
</template> |
||||||
|
<NcSubMenu key="download"> |
||||||
|
<template #title> |
||||||
|
<div |
||||||
|
v-e="[ |
||||||
|
'c:download', |
||||||
|
{ |
||||||
|
sidebar: props.inSidebar, |
||||||
|
}, |
||||||
|
]" |
||||||
|
class="nc-base-menu-item group nc-view-context-download-option" |
||||||
|
> |
||||||
|
<DownloadIcon class="w-4 h-4" /> |
||||||
|
{{ $t('general.download') }} |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<template #expandIcon></template> |
||||||
|
|
||||||
|
<LazySmartsheetToolbarExportSubActions /> |
||||||
|
</NcSubMenu> |
||||||
|
<NcDivider /> |
||||||
|
</template> |
||||||
|
|
||||||
|
<NcSubMenu v-if="isUIAllowed('viewCreateOrEdit')" key="lock-type" class="scrollbar-thin-dull max-h-90vh overflow-auto !py-0"> |
||||||
|
<template #title> |
||||||
|
<div |
||||||
|
v-e="[ |
||||||
|
'c:navdraw:preview-as', |
||||||
|
{ |
||||||
|
sidebar: props.inSidebar, |
||||||
|
}, |
||||||
|
]" |
||||||
|
class="flex flex-row items-center gap-x-3" |
||||||
|
> |
||||||
|
<div> |
||||||
|
{{ $t('labels.viewMode') }} |
||||||
|
</div> |
||||||
|
<div class="nc-base-menu-item flex !flex-shrink group !py-1 !px-1 rounded-md bg-brand-50"> |
||||||
|
<LazySmartsheetToolbarLockType |
||||||
|
hide-tick |
||||||
|
:type="lockType" |
||||||
|
class="flex nc-view-actions-lock-type !text-brand-500 !flex-shrink" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<div class="flex flex-grow"></div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<template #expandIcon></template> |
||||||
|
<div class="flex py-3 px-4 font-bold uppercase text-xs text-gray-500">{{ $t('labels.viewMode') }}</div> |
||||||
|
<a-menu-item class="!mx-1 !py-2 !rounded-md nc-view-action-lock-subaction"> |
||||||
|
<LazySmartsheetToolbarLockType :type="LockType.Collaborative" @click="changeLockType(LockType.Collaborative)" /> |
||||||
|
</a-menu-item> |
||||||
|
|
||||||
|
<a-menu-item class="!mx-1 !py-2 !rounded-md nc-view-action-lock-subaction"> |
||||||
|
<LazySmartsheetToolbarLockType :type="LockType.Locked" @click="changeLockType(LockType.Locked)" /> |
||||||
|
</a-menu-item> |
||||||
|
</NcSubMenu> |
||||||
|
<template v-if="!view.is_default"> |
||||||
|
<NcDivider /> |
||||||
|
<NcMenuItem class="!hover:bg-red-50 !text-red-500" @click="onDelete"> |
||||||
|
<GeneralIcon icon="delete" class="nc-view-delete-icon" /> |
||||||
|
{{ |
||||||
|
$t('general.deleteEntity', { |
||||||
|
entity: $t('objects.view'), |
||||||
|
}) |
||||||
|
}} |
||||||
|
</NcMenuItem> |
||||||
|
</template> |
||||||
|
<template v-if="currentBaseId"> |
||||||
|
<LazyDlgQuickImport |
||||||
|
v-for="tp in quickImportDialogTypes" |
||||||
|
:key="tp" |
||||||
|
v-model="quickImportDialogs[tp].value" |
||||||
|
:import-type="tp" |
||||||
|
:source-id="currentBaseId" |
||||||
|
:import-data-only="true" |
||||||
|
/> |
||||||
|
</template> |
||||||
|
</NcMenu> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.nc-base-menu-item { |
||||||
|
@apply !py-0; |
||||||
|
} |
||||||
|
|
||||||
|
.nc-view-actions-lock-type { |
||||||
|
@apply !min-w-0; |
||||||
|
} |
||||||
|
</style> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
.nc-view-actions-lock-type > div { |
||||||
|
@apply !py-0; |
||||||
|
} |
||||||
|
|
||||||
|
.nc-view-action-lock-subaction { |
||||||
|
@apply !min-w-82; |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue