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.
71 lines
2.3 KiB
71 lines
2.3 KiB
2 years ago
|
<script setup lang="ts">
|
||
|
|
import type { GridType } from 'nocodb-sdk'
|
||
|
|
import { ActiveViewInj, IsLockedInj, ReloadViewDataHookInj, inject, ref, useMenuCloseOnEsc } from '#imports'
|
||
|
|
|
||
|
|
const view = inject(ActiveViewInj, ref())
|
||
|
|
const isLocked = inject(IsLockedInj, ref(false))
|
||
|
|
const reloadDataHook = inject(ReloadViewDataHookInj)
|
||
|
|
|
||
|
|
const { $api } = useNuxtApp()
|
||
|
|
|
||
|
|
const open = ref(false)
|
||
|
|
|
||
|
|
const updateRowHeight = (rh: number) => {
|
||
|
|
if (view.value?.id) {
|
||
|
|
try {
|
||
|
|
$api.dbView.gridUpdate(view.value.id, {
|
||
|
|
row_height: rh,
|
||
|
|
})
|
||
|
|
;(view.value.view as GridType).row_height = rh
|
||
|
|
|
||
|
|
message.success('View updated successfully!')
|
||
|
|
|
||
|
|
reloadDataHook?.trigger()
|
||
|
|
|
||
|
|
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-1">
|
||
|
|
<MdiTableRowHeight />
|
||
|
|
|
||
|
|
<!-- Row Height -->
|
||
|
|
<span class="text-capitalize !text-sm font-weight-normal">Row Height</span>
|
||
|
|
<MdiMenuDown class="text-grey" />
|
||
|
|
</div>
|
||
|
|
</a-button>
|
||
|
|
</div>
|
||
|
|
<template #overlay>
|
||
|
|
<div class="w-full bg-gray-50 shadow-lg menu-filter-dropdown !border" data-testid="nc-height-menu">
|
||
|
|
<div class="text-gray-500 !text-xs px-4 py-2">Select a row height</div>
|
||
|
|
<div class="flex flex-col w-full text-sm" @click.stop>
|
||
|
|
<div class="flex items-center py-1 px-2 hover:bg-gray-200" @click="updateRowHeight(0)">
|
||
|
|
<MdiSizeS class="text-xl mr-3" />Short
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center py-1 px-2 hover:bg-gray-200" @click="updateRowHeight(1)">
|
||
|
|
<MdiSizeM class="text-xl mr-3" />Medium
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center py-1 px-2 hover:bg-gray-200" @click="updateRowHeight(2)">
|
||
|
|
<MdiSizeL class="text-xl mr-3" />Tall
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center py-1 px-2 hover:bg-gray-200" @click="updateRowHeight(3)">
|
||
|
|
<MdiSizeXl class="text-xl mr-3" />Extra
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</a-dropdown>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped></style>
|