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.
127 lines
3.7 KiB
127 lines
3.7 KiB
<script setup lang="ts"> |
|
import { OrgUserRoles, ProjectRoles, extractRolesObj } from 'nocodb-sdk' |
|
import type { GridType } from 'nocodb-sdk' |
|
import { ActiveViewInj, IsLockedInj, iconMap, inject, ref, storeToRefs, useMenuCloseOnEsc, useUndoRedo } from '#imports' |
|
|
|
const rowHeightOptions: { icon: keyof typeof iconMap; heightClass: string }[] = [ |
|
{ |
|
icon: 'heightShort', |
|
heightClass: 'short', |
|
}, |
|
{ |
|
icon: 'heightMedium', |
|
heightClass: 'medium', |
|
}, |
|
{ |
|
icon: 'heightTall', |
|
heightClass: 'tall', |
|
}, |
|
{ |
|
icon: 'heightExtra', |
|
heightClass: 'extra', |
|
}, |
|
] |
|
|
|
const { isSharedBase } = storeToRefs(useBase()) |
|
|
|
const view = inject(ActiveViewInj, ref()) |
|
|
|
const isPublic = inject(IsPublicInj, ref(false)) |
|
|
|
const isLocked = inject(IsLockedInj, ref(false)) |
|
|
|
const { $api } = useNuxtApp() |
|
|
|
const { addUndo, defineViewScope } = useUndoRedo() |
|
|
|
const { user } = useGlobal() |
|
|
|
const open = ref(false) |
|
|
|
const updateRowHeight = async (rh: number, undo = false) => { |
|
if (view.value?.id) { |
|
if (rh === (view.value.view as GridType).row_height) return |
|
|
|
if (!undo) { |
|
addUndo({ |
|
redo: { |
|
fn: (r: number) => updateRowHeight(r, true), |
|
args: [rh], |
|
}, |
|
undo: { |
|
fn: (r: number) => updateRowHeight(r, true), |
|
args: [(view.value.view as GridType).row_height || 0], |
|
}, |
|
scope: defineViewScope({ view: view.value }), |
|
}) |
|
} |
|
|
|
try { |
|
if ( |
|
!isPublic.value && |
|
!isSharedBase.value && |
|
!( |
|
extractRolesObj(user.value?.roles ?? {})[ProjectRoles.VIEWER] || |
|
extractRolesObj(user.value?.roles ?? {})[OrgUserRoles.VIEWER] |
|
) |
|
) { |
|
await $api.dbView.gridUpdate(view.value.id, { |
|
row_height: rh, |
|
}) |
|
} |
|
|
|
;(view.value.view as GridType).row_height = rh |
|
|
|
open.value = false |
|
} catch (e) { |
|
message.error('There was an error while updating view!') |
|
} |
|
} |
|
} |
|
|
|
useMenuCloseOnEsc(open) |
|
</script> |
|
|
|
<template> |
|
<a-dropdown v-model:visible="open" offset-y class="" :trigger="['click']" overlay-class-name="nc-dropdown-height-menu"> |
|
<div> |
|
<a-button v-e="['c:row-height']" class="nc-height-menu-btn nc-toolbar-btn" :disabled="isLocked"> |
|
<div class="flex items-center gap-0.5"> |
|
<component :is="iconMap.rowHeight" class="!h-3.75 !w-3.75" /> |
|
<!-- <span v-if="!isMobileMode" class="!text-sm !font-medium">{{ $t('objects.rowHeight') }}</span> --> |
|
</div> |
|
</a-button> |
|
</div> |
|
<template #overlay> |
|
<div |
|
class="w-full bg-white shadow-lg p-1.5 menu-filter-dropdown border-1 border-gray-200 rounded-md overflow-hidden w-[160px]" |
|
data-testid="nc-height-menu" |
|
> |
|
<div class="flex flex-col w-full text-sm" @click.stop> |
|
<div class="text-xs text-gray-500 px-3 pt-2 pb-1 select-none">{{ $t('objects.rowHeight') }}</div> |
|
<div v-for="(item, i) of rowHeightOptions" :key="i" class="nc-row-height-option" @click="updateRowHeight(i)"> |
|
<div class="flex items-center gap-2"> |
|
<GeneralIcon :icon="item.icon" class="nc-row-height-icon" /> |
|
{{ $t(`objects.heightClass.${item.heightClass}`) }} |
|
</div> |
|
<component |
|
:is="iconMap.check" |
|
v-if="i === 0 ? !(view?.view as GridType).row_height: (view?.view as GridType).row_height === i" |
|
class="text-primary w-4 h-4" |
|
/> |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
</a-dropdown> |
|
</template> |
|
|
|
<style scoped> |
|
.nc-row-height-option { |
|
@apply flex items-center gap-2 p-2 justify-between hover:bg-gray-100 rounded-md cursor-pointer text-gray-600; |
|
} |
|
|
|
.nc-row-height-icon { |
|
@apply text-base; |
|
} |
|
</style>
|
|
|