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