mirror of https://github.com/nocodb/nocodb
Raju Udava
2 years ago
committed by
GitHub
34 changed files with 518 additions and 22 deletions
|
After Width: | Height: | Size: 925 B |
|
After Width: | Height: | Size: 586 B |
|
After Width: | Height: | Size: 437 B |
|
After Width: | Height: | Size: 757 B |
@ -0,0 +1,24 @@
|
||||
<script setup lang="ts"> |
||||
const props = defineProps<{ |
||||
value?: string | number | null |
||||
lines?: number |
||||
}>() |
||||
|
||||
const wrapper = ref() |
||||
|
||||
const key = ref(0) |
||||
|
||||
onMounted(() => { |
||||
const observer = new ResizeObserver(() => { |
||||
key.value++ |
||||
}) |
||||
|
||||
observer.observe(wrapper.value) |
||||
}) |
||||
</script> |
||||
|
||||
<template> |
||||
<div ref="wrapper"> |
||||
<text-clamp :key="key" class="w-full h-full break-all" :text="props.value || ''" :max-lines="props.lines" /> |
||||
</div> |
||||
</template> |
||||
@ -0,0 +1,87 @@
|
||||
<script setup lang="ts"> |
||||
import type { GridType } from 'nocodb-sdk' |
||||
import { ActiveViewInj, IsLockedInj, inject, ref, useMenuCloseOnEsc } from '#imports' |
||||
|
||||
const { isSharedBase } = useProject() |
||||
|
||||
const view = inject(ActiveViewInj, ref()) |
||||
|
||||
const isPublic = inject(IsPublicInj, ref(false)) |
||||
|
||||
const isLocked = inject(IsLockedInj, ref(false)) |
||||
|
||||
const { $api } = useNuxtApp() |
||||
|
||||
const open = ref(false) |
||||
|
||||
const updateRowHeight = async (rh: number) => { |
||||
if (view.value?.id) { |
||||
if (rh === (view.value.view as GridType).row_height) return |
||||
try { |
||||
if (!isPublic.value && !isSharedBase.value) { |
||||
await $api.dbView.gridUpdate(view.value.id, { |
||||
row_height: rh, |
||||
}) |
||||
|
||||
message.success('View updated successfully!') |
||||
} |
||||
|
||||
;(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-1"> |
||||
<RiLineHeight /> |
||||
|
||||
<!-- Row Height --> |
||||
<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="nc-row-height-option" @click="updateRowHeight(0)"> |
||||
<NcIconsRowHeightShort class="nc-row-height-icon" /> |
||||
Short |
||||
</div> |
||||
<div class="nc-row-height-option" @click="updateRowHeight(1)"> |
||||
<NcIconsRowHeightMedium class="nc-row-height-icon" /> |
||||
Medium |
||||
</div> |
||||
<div class="nc-row-height-option" @click="updateRowHeight(2)"> |
||||
<NcIconsRowHeightTall class="nc-row-height-icon" /> |
||||
Tall |
||||
</div> |
||||
<div class="nc-row-height-option" @click="updateRowHeight(3)"> |
||||
<NcIconsRowHeightExtraTall class="nc-row-height-icon" /> |
||||
Extra |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
</a-dropdown> |
||||
</template> |
||||
|
||||
<style scoped> |
||||
.nc-row-height-option { |
||||
@apply flex items-center py-1 px-2 justify-start hover:bg-gray-200 cursor-pointer; |
||||
} |
||||
|
||||
.nc-row-height-icon { |
||||
@apply text-gray-600 mx-4 text-base; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,6 @@
|
||||
import TextClamp from 'vue3-text-clamp' |
||||
import { defineNuxtPlugin } from 'nuxt/app' |
||||
|
||||
export default defineNuxtPlugin((nuxtApp) => { |
||||
nuxtApp.vueApp.use(TextClamp) |
||||
}) |
||||
@ -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 }; |
||||
@ -0,0 +1,26 @@
|
||||
import BasePage from '../../Base'; |
||||
import { GridPage } from './index'; |
||||
|
||||
export class RowPageObject extends BasePage { |
||||
readonly grid: GridPage; |
||||
|
||||
constructor(grid: GridPage) { |
||||
super(grid.rootPage); |
||||
this.grid = grid; |
||||
} |
||||
|
||||
get() { |
||||
return this.rootPage.locator('tr.nc-grid-row'); |
||||
} |
||||
|
||||
async getRecord(index: number) { |
||||
return this.get().nth(index); |
||||
} |
||||
|
||||
// style="height: 3rem;"
|
||||
async getRecordHeight(index: number) { |
||||
const record = await this.getRecord(index); |
||||
const style = await record.getAttribute('style'); |
||||
return style.split(':')[1].split(';')[0].trim(); |
||||
} |
||||
} |
||||
@ -0,0 +1,19 @@
|
||||
import BasePage from '../../../Base'; |
||||
import { ToolbarPage } from './index'; |
||||
|
||||
export class RowHeight extends BasePage { |
||||
readonly toolbar: ToolbarPage; |
||||
|
||||
constructor(toolbar: ToolbarPage) { |
||||
super(toolbar.rootPage); |
||||
this.toolbar = toolbar; |
||||
} |
||||
|
||||
get() { |
||||
return this.rootPage.locator(`[data-testid="nc-height-menu"]`); |
||||
} |
||||
|
||||
click({ title }: { title: string }) { |
||||
return this.get().locator(`.nc-row-height-option:has-text("${title}")`).click(); |
||||
} |
||||
} |
||||
Loading…
Reference in new issue