mirror of https://github.com/nocodb/nocodb
mertmit
2 years ago
11 changed files with 234 additions and 10 deletions
@ -0,0 +1,70 @@ |
|||||||
|
<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> |
@ -0,0 +1,16 @@ |
|||||||
|
import { Knex } from 'knex'; |
||||||
|
import { MetaTable } from '../../utils/globals'; |
||||||
|
|
||||||
|
const up = async (knex: Knex) => { |
||||||
|
await knex.schema.alterTable(MetaTable.GRID_VIEW, (table) => { |
||||||
|
table.integer('row_height'); |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
const down = async (knex) => { |
||||||
|
await knex.schema.alterTable(MetaTable.GRID_VIEW, (table) => { |
||||||
|
table.dropColumns('row_height'); |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
export { up, down }; |
Loading…
Reference in new issue