mirror of https://github.com/nocodb/nocodb
Muhammed Mustafa
11 months ago
5 changed files with 284 additions and 43 deletions
|
Before Width: | Height: | Size: 275 B After Width: | Height: | Size: 280 B |
@ -0,0 +1,258 @@
|
||||
<script lang="ts" setup> |
||||
import type { 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 { activeView, views } = storeToRefs(useViewsStore()) |
||||
const { loadViews, navigateToView } = useViewsStore() |
||||
|
||||
const { isMobileMode } = useGlobal() |
||||
|
||||
const { activeTable } = storeToRefs(useTablesStore()) |
||||
|
||||
const { base, isSharedBase } = storeToRefs(useBase()) |
||||
|
||||
const { refreshCommandPalette } = useCommandPalette() |
||||
|
||||
const { t } = useI18n() |
||||
|
||||
const { $api, $e } = useNuxtApp() |
||||
|
||||
const isPublicView = inject(IsPublicInj, ref(false)) |
||||
|
||||
const isLocked = inject(IsLockedInj, ref(false)) |
||||
|
||||
const { isSqlView } = useSmartsheetStoreOrThrow() |
||||
|
||||
const lockType = computed(() => (activeView.value?.lock_type as LockType) || LockType.Collaborative) |
||||
|
||||
// TODO: add 'json' when it's ready |
||||
|
||||
const quickImportDialogTypes: QuickImportDialogType[] = ['csv', 'excel'] |
||||
|
||||
const isViewIdCopied = ref(false) |
||||
|
||||
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 { isUIAllowed } = useRoles() |
||||
|
||||
async function changeLockType(type: LockType) { |
||||
$e('a:grid:lockmenu', { lockType: type }) |
||||
|
||||
if (!activeView.value) return |
||||
|
||||
if (type === 'personal') { |
||||
// Coming soon |
||||
return message.info(t('msg.toast.futureRelease')) |
||||
} |
||||
try { |
||||
activeView.value.lock_type = type |
||||
await $api.dbView.update(activeView.value.id as string, { |
||||
lock_type: type, |
||||
}) |
||||
|
||||
message.success(`Successfully Switched to ${type} view`) |
||||
} catch (e: any) { |
||||
message.error(await extractSdkResponseErrorMsg(e)) |
||||
} |
||||
} |
||||
|
||||
const { copy } = useCopy() |
||||
|
||||
const onViewIdCopy = async () => { |
||||
await copy(activeView.value!.id!) |
||||
isViewIdCopied.value = true |
||||
} |
||||
|
||||
/** Duplicate a view */ |
||||
// todo: This is not really a duplication, maybe we need to implement a true duplication? |
||||
function onDuplicate() { |
||||
const isOpen = ref(true) |
||||
|
||||
const { close } = useDialog(resolveComponent('DlgViewCreate'), { |
||||
'modelValue': isOpen, |
||||
'title': activeView.value!.title, |
||||
'type': activeView.value!.type as ViewTypes, |
||||
'tableId': activeTable.value!.id, |
||||
'selectedViewId': activeView.value!.id, |
||||
'views': views, |
||||
'onUpdate:modelValue': closeDialog, |
||||
'onCreated': async (view: ViewType) => { |
||||
closeDialog() |
||||
|
||||
refreshCommandPalette() |
||||
|
||||
await loadViews({ |
||||
force: true, |
||||
tableId: activeTable.value!.id!, |
||||
}) |
||||
|
||||
navigateToView({ |
||||
view, |
||||
tableId: activeTable.value!.id!, |
||||
baseId: base.value.id!, |
||||
hardReload: view.type === ViewTypes.FORM, |
||||
}) |
||||
|
||||
$e('a:view:create', { view: view.type }) |
||||
}, |
||||
}) |
||||
|
||||
function closeDialog() { |
||||
isOpen.value = false |
||||
|
||||
close(1000) |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<NcDropdown> |
||||
<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> |
||||
<NcMenu class="min-w-72"> |
||||
<div class="flex items-center justify-between py-2 px-2"> |
||||
<div class="flex text-xs font-bold text-gray-500 ml-1">VIEW ID: {{ activeView?.id }}</div> |
||||
<NcTooltip> |
||||
<template #title>Click to copy View ID</template> |
||||
<NcButton size="xsmall" type="secondary" @click="onViewIdCopy"> |
||||
<GeneralIcon v-if="isViewIdCopied" icon="check" /> |
||||
<GeneralIcon v-else else icon="copy" /> |
||||
</NcButton> |
||||
</NcTooltip> |
||||
</div> |
||||
<NcDivider /> |
||||
<NcMenuItem> |
||||
<GeneralIcon icon="edit" /> |
||||
Rename View |
||||
</NcMenuItem> |
||||
<NcMenuItem @click="onDuplicate"> |
||||
<GeneralIcon icon="copy" /> |
||||
Duplicate View |
||||
</NcMenuItem> |
||||
<NcDivider /> |
||||
|
||||
<NcMenuItem-group> |
||||
<template v-if="isUIAllowed('csvTableImport') && !isPublicView && !isSqlView"> |
||||
<NcSubMenu key="upload"> |
||||
<template #title> |
||||
<div v-e="['c:navdraw:preview-as']" 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">Upload Data</div> |
||||
|
||||
<template v-for="(dialog, type) in quickImportDialogs"> |
||||
<NcMenuItem v-if="isUIAllowed(`${type}TableImport`) && !isPublicView" :key="type"> |
||||
<div |
||||
v-e="[`a:upload:${type}`]" |
||||
class="nc-base-menu-item" |
||||
:class="{ disabled: isLocked }" |
||||
@click="!isLocked ? (dialog.value = true) : {}" |
||||
> |
||||
<component :is="iconMap.upload" /> |
||||
{{ `${$t('general.upload')} ${type.toUpperCase()}` }} |
||||
</div> |
||||
</NcMenuItem> |
||||
</template> |
||||
</NcSubMenu> |
||||
</template> |
||||
<NcSubMenu key="download"> |
||||
<template #title> |
||||
<div v-e="['c:download']" class="nc-base-menu-item group"> |
||||
<DownloadIcon class="w-4 h-4" /> |
||||
{{ $t('general.download') }} |
||||
</div> |
||||
</template> |
||||
|
||||
<template #expandIcon></template> |
||||
|
||||
<LazySmartsheetToolbarExportSubActions /> |
||||
</NcSubMenu> |
||||
|
||||
<NcDivider /> |
||||
|
||||
<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']" class="flex flex-row items-center gap-x-3"> |
||||
<div>View Settings</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-semibold uppercase text-xs text-gray-500">View Settings</div> |
||||
<NcMenuItem class="nc-view-action-lock-subaction" @click="changeLockType(LockType.Collaborative)"> |
||||
<LazySmartsheetToolbarLockType :type="LockType.Collaborative" /> |
||||
</NcMenuItem> |
||||
|
||||
<NcMenuItem @click="changeLockType(LockType.Locked)"> |
||||
<LazySmartsheetToolbarLockType :type="LockType.Locked" /> |
||||
</NcMenuItem> |
||||
</NcSubMenu> |
||||
</NcMenuItem-group> |
||||
</NcMenu> |
||||
</template> |
||||
</NcDropdown> |
||||
</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