mirror of https://github.com/nocodb/nocodb
Browse Source
* feat: table description wip * fix: swagger update * fix: wip descriptions view * feat: field, view, table descriptions * fix: failing tests * fix: allow description edit for schema read-only sources * fix: add missing condition * fix: ux changes fix: duplicate service didn't copy descriptions * fix: long text default value update * fix: add new line for long text * fix: include labels for table and view description update * fix: workaround without breaking all tests * fix: update swagger types and tests fix * fix: source restriction tests * fix: pr review changes * fix: updated icons * fix: updated tooltip positions fix: minor corrections * fix: invalid description length * fix: update focus on tables * fix: add shared view descriptions * fix: title is missingpull/9285/head
Anbarasu
3 months ago
committed by
GitHub
43 changed files with 1276 additions and 281 deletions
|
After Width: | Height: | Size: 554 B |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 828 B |
|
After Width: | Height: | Size: 716 B |
@ -0,0 +1,182 @@
|
||||
<script setup lang="ts"> |
||||
import type { TableType } from 'nocodb-sdk' |
||||
import type { ComponentPublicInstance } from '@vue/runtime-core' |
||||
|
||||
interface Props { |
||||
modelValue?: boolean |
||||
tableMeta: TableType |
||||
sourceId: string |
||||
} |
||||
|
||||
const { tableMeta, ...props } = defineProps<Props>() |
||||
|
||||
const emit = defineEmits(['update:modelValue', 'updated']) |
||||
|
||||
const { $e, $api } = useNuxtApp() |
||||
|
||||
const { setMeta } = useMetas() |
||||
|
||||
const dialogShow = useVModel(props, 'modelValue', emit) |
||||
|
||||
const { loadProjectTables } = useTablesStore() |
||||
|
||||
const baseStore = useBase() |
||||
|
||||
const { loadTables } = baseStore |
||||
|
||||
const { addUndo, defineProjectScope } = useUndoRedo() |
||||
|
||||
const inputEl = ref<HTMLTextAreaElement>() |
||||
|
||||
const loading = ref(false) |
||||
|
||||
const useForm = Form.useForm |
||||
|
||||
const formState = reactive({ |
||||
description: '', |
||||
}) |
||||
|
||||
const validators = computed(() => { |
||||
return { |
||||
description: [ |
||||
{ |
||||
validator: (_: any, _value: any) => { |
||||
return new Promise<void>((resolve, _reject) => { |
||||
resolve() |
||||
}) |
||||
}, |
||||
}, |
||||
], |
||||
} |
||||
}) |
||||
|
||||
const { validateInfos } = useForm(formState, validators) |
||||
|
||||
watchEffect( |
||||
() => { |
||||
if (tableMeta?.description) formState.description = `${tableMeta.description}` |
||||
|
||||
nextTick(() => { |
||||
const input = inputEl.value?.$el as HTMLInputElement |
||||
|
||||
if (input) { |
||||
input.setSelectionRange(0, formState.description.length) |
||||
input.focus() |
||||
} |
||||
}) |
||||
}, |
||||
{ flush: 'post' }, |
||||
) |
||||
|
||||
const updateDescription = async (undo = false) => { |
||||
if (!tableMeta) return |
||||
|
||||
if (formState.description) { |
||||
formState.description = formState.description.trim() |
||||
} |
||||
|
||||
loading.value = true |
||||
try { |
||||
await $api.dbTable.update(tableMeta.id as string, { |
||||
base_id: tableMeta.base_id, |
||||
description: formState.description, |
||||
}) |
||||
|
||||
dialogShow.value = false |
||||
|
||||
await loadProjectTables(tableMeta.base_id!, true) |
||||
|
||||
if (!undo) { |
||||
addUndo({ |
||||
redo: { |
||||
fn: (t: string) => { |
||||
formState.description = t |
||||
updateDescription(true, true) |
||||
}, |
||||
args: [formState.description], |
||||
}, |
||||
undo: { |
||||
fn: (t: string) => { |
||||
formState.description = t |
||||
updateDescription(true, true) |
||||
}, |
||||
args: [tableMeta.description], |
||||
}, |
||||
scope: defineProjectScope({ model: tableMeta }), |
||||
}) |
||||
} |
||||
|
||||
await loadTables() |
||||
|
||||
// update metas |
||||
const newMeta = await $api.dbTable.read(tableMeta.id as string) |
||||
await setMeta(newMeta) |
||||
|
||||
$e('a:table:description:update') |
||||
|
||||
dialogShow.value = false |
||||
} catch (e: any) { |
||||
message.error(await extractSdkResponseErrorMsg(e)) |
||||
} |
||||
|
||||
loading.value = false |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<NcModal v-model:visible="dialogShow" size="small" :show-separator="false"> |
||||
<template #header> |
||||
<div class="flex flex-row items-center gap-x-2"> |
||||
<GeneralIcon icon="table" class="w-6 h-6 text-gray-700" /> |
||||
<span class="text-gray-900 font-bold"> |
||||
{{ tableMeta?.title ?? tableMeta?.table_name }} |
||||
</span> |
||||
</div> |
||||
</template> |
||||
<div class="mt-1"> |
||||
<a-form layout="vertical" :model="formState" name="create-new-table-form"> |
||||
<a-form-item :label="$t('labels.description')" v-bind="validateInfos.description"> |
||||
<a-textarea |
||||
ref="inputEl" |
||||
v-model:value="formState.description" |
||||
class="nc-input-sm !py-2 nc-text-area nc-input-shadow" |
||||
hide-details |
||||
size="small" |
||||
:placeholder="$t('msg.info.enterTableDescription')" |
||||
@keydown.enter.exact="() => updateDescription()" |
||||
/> |
||||
</a-form-item> |
||||
</a-form> |
||||
<div class="flex flex-row justify-end gap-x-2 mt-5"> |
||||
<NcButton type="secondary" size="small" @click="dialogShow = false">{{ $t('general.cancel') }}</NcButton> |
||||
|
||||
<NcButton |
||||
key="submit" |
||||
type="primary" |
||||
size="small" |
||||
:disabled=" |
||||
validateInfos?.description?.validateStatus === 'error' || formState.description?.trim() === tableMeta?.description |
||||
" |
||||
:loading="loading" |
||||
@click="() => updateDescription()" |
||||
> |
||||
{{ $t('general.save') }} |
||||
</NcButton> |
||||
</div> |
||||
</div> |
||||
</NcModal> |
||||
</template> |
||||
|
||||
<style scoped lang="scss"> |
||||
.nc-text-area { |
||||
@apply !py-2 min-h-[120px] max-h-[200px]; |
||||
} |
||||
|
||||
:deep(.ant-form-item-label > label) { |
||||
@apply !text-md font-base !leading-[20px] text-gray-800 flex; |
||||
|
||||
&.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before { |
||||
@apply content-[''] m-0; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,170 @@
|
||||
<script setup lang="ts"> |
||||
import type { ViewType } from 'nocodb-sdk' |
||||
import type { ComponentPublicInstance } from '@vue/runtime-core' |
||||
|
||||
interface Props { |
||||
modelValue?: boolean |
||||
view: ViewType |
||||
sourceId?: string |
||||
} |
||||
|
||||
const { view, ...props } = defineProps<Props>() |
||||
|
||||
const emit = defineEmits(['update:modelValue', 'updated']) |
||||
|
||||
const { $e, $api } = useNuxtApp() |
||||
|
||||
const dialogShow = useVModel(props, 'modelValue', emit) |
||||
|
||||
const { loadViews } = useViewsStore() |
||||
|
||||
const { addUndo, defineProjectScope } = useUndoRedo() |
||||
|
||||
const inputEl = ref<ComponentPublicInstance>() |
||||
|
||||
const loading = ref(false) |
||||
|
||||
const useForm = Form.useForm |
||||
|
||||
const formState = reactive({ |
||||
description: '', |
||||
}) |
||||
|
||||
const validators = computed(() => { |
||||
return { |
||||
description: [ |
||||
{ |
||||
validator: (_: any, _value: any) => { |
||||
return new Promise<void>((resolve, _reject) => { |
||||
resolve() |
||||
}) |
||||
}, |
||||
}, |
||||
], |
||||
} |
||||
}) |
||||
|
||||
const { validateInfos } = useForm(formState, validators) |
||||
|
||||
watchEffect( |
||||
() => { |
||||
if (view?.description) formState.description = `${view.description}` |
||||
|
||||
nextTick(() => { |
||||
const input = inputEl.value?.$el as HTMLInputElement |
||||
|
||||
if (input) { |
||||
input.setSelectionRange(0, formState.description.length) |
||||
input.focus() |
||||
} |
||||
}) |
||||
}, |
||||
{ flush: 'post' }, |
||||
) |
||||
|
||||
const updateDescription = async (undo = false) => { |
||||
if (!view) return |
||||
|
||||
if (formState.description) { |
||||
formState.description = formState.description.trim() |
||||
} |
||||
|
||||
loading.value = true |
||||
try { |
||||
await $api.dbView.update(view.id as string, { |
||||
description: formState.description, |
||||
}) |
||||
|
||||
dialogShow.value = false |
||||
|
||||
if (!undo) { |
||||
addUndo({ |
||||
redo: { |
||||
fn: (t: string) => { |
||||
formState.description = t |
||||
updateDescription(true, true) |
||||
}, |
||||
args: [formState.description], |
||||
}, |
||||
undo: { |
||||
fn: (t: string) => { |
||||
formState.description = t |
||||
updateDescription(true, true) |
||||
}, |
||||
args: [view.description], |
||||
}, |
||||
scope: defineProjectScope({ view }), |
||||
}) |
||||
} |
||||
|
||||
await loadViews({ tableId: view.fk_model_id, ignoreLoading: true, force: true }) |
||||
|
||||
$e('a:view:description:update') |
||||
|
||||
dialogShow.value = false |
||||
} catch (e: any) { |
||||
message.error(await extractSdkResponseErrorMsg(e)) |
||||
} |
||||
|
||||
loading.value = false |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<NcModal v-model:visible="dialogShow" size="small" :show-separator="false"> |
||||
<template #header> |
||||
<div class="flex flex-row items-center gap-x-2"> |
||||
<GeneralViewIcon :meta="view" class="mt-0.5 !text-2xl" /> |
||||
|
||||
<span class="text-gray-900 font-semibold"> |
||||
{{ view?.title }} |
||||
</span> |
||||
</div> |
||||
</template> |
||||
<div class="mt-1"> |
||||
<a-form layout="vertical" :model="formState" name="create-new-table-form"> |
||||
<a-form-item :label="$t('labels.description')" v-bind="validateInfos.description"> |
||||
<a-textarea |
||||
ref="inputEl" |
||||
v-model:value="formState.description" |
||||
class="nc-input-sm !py-2 nc-text-area !text-gray-800 nc-input-shadow" |
||||
hide-details |
||||
size="small" |
||||
:placeholder="$t('msg.info.enterTableDescription')" |
||||
@keydown.enter.exact="() => updateDescription()" |
||||
/> |
||||
</a-form-item> |
||||
</a-form> |
||||
<div class="flex flex-row justify-end gap-x-2 mt-5"> |
||||
<NcButton type="secondary" size="small" @click="dialogShow = false">{{ $t('general.cancel') }}</NcButton> |
||||
|
||||
<NcButton |
||||
key="submit" |
||||
type="primary" |
||||
size="small" |
||||
:disabled=" |
||||
validateInfos?.description?.validateStatus === 'error' || formState.description?.trim() === view?.description |
||||
" |
||||
:loading="loading" |
||||
@click="() => updateDescription()" |
||||
> |
||||
{{ $t('general.save') }} |
||||
</NcButton> |
||||
</div> |
||||
</div> |
||||
</NcModal> |
||||
</template> |
||||
|
||||
<style scoped lang="scss"> |
||||
.nc-text-area { |
||||
@apply !py-2 min-h-[120px] max-h-[200px]; |
||||
} |
||||
|
||||
:deep(.ant-form-item-label > label) { |
||||
@apply !leading-[20px] font-base !text-md text-gray-800 flex; |
||||
|
||||
&.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before { |
||||
@apply content-[''] m-0; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,28 @@
|
||||
import type { Knex } from 'knex'; |
||||
import { MetaTable } from '~/utils/globals'; |
||||
|
||||
const alterColumnToText = async (knex: Knex, table: string) => { |
||||
await knex.schema.alterTable(table, (t) => { |
||||
t.text('description').alter(); |
||||
}); |
||||
}; |
||||
|
||||
const alterColumnToString = async (knex: Knex, table: string) => { |
||||
await knex.schema.alterTable(table, (t) => { |
||||
t.string('description', 255).alter(); |
||||
}); |
||||
}; |
||||
|
||||
const up = async (knex: Knex) => { |
||||
await alterColumnToText(knex, MetaTable.COLUMNS); |
||||
await alterColumnToText(knex, MetaTable.MODELS); |
||||
await alterColumnToText(knex, MetaTable.VIEWS); |
||||
}; |
||||
|
||||
const down = async (knex: Knex) => { |
||||
await alterColumnToString(knex, MetaTable.COLUMNS); |
||||
await alterColumnToString(knex, MetaTable.MODELS); |
||||
await alterColumnToString(knex, MetaTable.VIEWS); |
||||
}; |
||||
|
||||
export { up, down }; |
||||
Loading…
Reference in new issue