mirror of https://github.com/nocodb/nocodb
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
80 lines
2.2 KiB
80 lines
2.2 KiB
<script setup lang="ts"> |
|
const { isUIAllowed } = useRoles() |
|
|
|
const hasPermissionForSnapshots = computed(() => isUIAllowed('manageSnapshot')) |
|
|
|
const router = useRouter() |
|
|
|
const activeMenu = ref(isEeUI && hasPermissionForSnapshots.value ? 'snapshots' : 'visibility') |
|
|
|
const selectMenu = (option: string) => { |
|
if (!hasPermissionForSnapshots.value && option === 'snapshots') { |
|
return |
|
} |
|
router.push({ |
|
query: { |
|
...router.currentRoute.value.query, |
|
tab: option, |
|
}, |
|
}) |
|
activeMenu.value = option |
|
} |
|
|
|
onMounted(() => { |
|
const query = router.currentRoute.value.query |
|
if (query && query.tab && ['snapshots', 'visibility'].includes(query.tab as string)) { |
|
selectMenu(query.tab as string) |
|
} |
|
}) |
|
</script> |
|
|
|
<template> |
|
<div class="flex p-5 nc-base-settings justify-center overflow-auto gap-8"> |
|
<!-- Left Pane --> |
|
<div class="flex flex-col"> |
|
<div class="h-full w-60"> |
|
<div |
|
v-if="isEeUI && hasPermissionForSnapshots" |
|
data-testid="snapshots-tab" |
|
:class="{ |
|
'active-menu': activeMenu === 'snapshots', |
|
}" |
|
class="gap-3 !hover:bg-gray-50 transition-all text-nc-content-gray flex rounded-lg items-center cursor-pointer py-1.5 px-3" |
|
@click="selectMenu('snapshots')" |
|
> |
|
<GeneralIcon icon="camera" /> |
|
|
|
<span> |
|
{{ $t('general.snapshots') }} |
|
</span> |
|
</div> |
|
|
|
<div |
|
:class="{ |
|
'active-menu': activeMenu === 'visibility', |
|
}" |
|
class="gap-3 !hover:bg-gray-50 transition-all text-nc-content-gray flex rounded-lg items-center cursor-pointer py-1.5 px-3" |
|
data-testid="visibility-tab" |
|
@click="selectMenu('visibility')" |
|
> |
|
<GeneralIcon icon="ncEye" /> |
|
<span> |
|
{{ $t('labels.visibilityAndDataHandling') }} |
|
</span> |
|
</div> |
|
</div> |
|
</div> |
|
<!-- Data Pane --> |
|
|
|
<div class="flex flex-col w-[760px]"> |
|
<DashboardSettingsBaseSnapshots v-if="activeMenu === 'snapshots'" /> |
|
<DashboardSettingsBaseVisibility v-if="activeMenu === 'visibility'" /> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<style lang="scss" scoped> |
|
.active-menu { |
|
@apply !bg-brand-50 font-semibold !text-nc-content-brand-disabled; |
|
} |
|
</style>
|
|
|