Browse Source

wip(gui-v2): table rename

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/2830/head
Pranav C 2 years ago
parent
commit
70755b8b1d
  1. 15
      packages/nc-gui-v2/components/dashboard/TreeView.vue
  2. 104
      packages/nc-gui-v2/components/dlg/TableRename.vue

15
packages/nc-gui-v2/components/dashboard/TreeView.vue

@ -8,7 +8,6 @@ import Sortable from 'sortablejs'
import { useToast } from 'vue-toastification' import { useToast } from 'vue-toastification'
import { $computed } from 'vue/macros' import { $computed } from 'vue/macros'
import { useNuxtApp, useRoute } from '#app' import { useNuxtApp, useRoute } from '#app'
// import Draggable from 'vuedraggable'
import useProject from '~/composables/useProject' import useProject from '~/composables/useProject'
import useTabs from '~/composables/useTabs' import useTabs from '~/composables/useTabs'
import { extractSdkResponseErrorMsg } from '~/utils/errorUtils' import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
@ -106,7 +105,7 @@ const filteredTables = $computed(() => {
return tables?.value?.filter((table) => !filterQuery || table?.title.toLowerCase()?.includes(filterQuery.toLowerCase())) return tables?.value?.filter((table) => !filterQuery || table?.title.toLowerCase()?.includes(filterQuery.toLowerCase()))
}) })
const contextMenuTarget = reactive<{ type: 'table' | 'main'; value?: any }>({}) const contextMenuTarget = reactive<{ type?: 'table' | 'main'; value?: any }>({})
const setMenuContext = (type: 'table' | 'main', value?: any) => { const setMenuContext = (type: 'table' | 'main', value?: any) => {
contextMenuTarget.type = type contextMenuTarget.type = type
contextMenuTarget.value = value contextMenuTarget.value = value
@ -162,6 +161,13 @@ const deleteTable = (table: TableType) => {
}, },
}) })
} }
const renameTableDlg = ref(false)
const renameTableMeta = ref()
const showRenameTableDlg = (table: TableType) => {
renameTableMeta.value = table
renameTableDlg.value = true
}
</script> </script>
<template> <template>
@ -212,7 +218,7 @@ const deleteTable = (table: TableType) => {
<MdiMenuIcon class="transition-opacity opacity-0 group-hover:opacity-100" /> <MdiMenuIcon class="transition-opacity opacity-0 group-hover:opacity-100" />
<template #overlay> <template #overlay>
<a-menu> <a-menu>
<a-menu-item class="!text-xs"> Rename</a-menu-item> <a-menu-item class="!text-xs" @click="showRenameTableDlg(table)"> Rename</a-menu-item>
<a-menu-item class="!text-xs" @click="deleteTable(table)"> Delete</a-menu-item> <a-menu-item class="!text-xs" @click="deleteTable(table)"> Delete</a-menu-item>
</a-menu> </a-menu>
</template> </template>
@ -227,7 +233,7 @@ const deleteTable = (table: TableType) => {
<template #overlay> <template #overlay>
<a-menu> <a-menu>
<template v-if="contextMenuTarget.type === 'table'"> <template v-if="contextMenuTarget.type === 'table'">
<a-menu-item class="!text-xs">Table Rename</a-menu-item> <a-menu-item class="!text-xs" @click="showRenameTableDlg(contextMenuTarget.value)">Table Rename</a-menu-item>
<a-menu-item class="!text-xs" @click="deleteTable(contextMenuTarget.value)">Table Delete</a-menu-item> <a-menu-item class="!text-xs" @click="deleteTable(contextMenuTarget.value)">Table Delete</a-menu-item>
</template> </template>
<template v-else> <template v-else>
@ -253,6 +259,7 @@ const deleteTable = (table: TableType) => {
<a-modal v-model:visible="settingsDlg" width="max(90vw, 600px)"> Team and settings</a-modal> <a-modal v-model:visible="settingsDlg" width="max(90vw, 600px)"> Team and settings</a-modal>
<DlgTableCreate v-model="tableCreateDlg" /> <DlgTableCreate v-model="tableCreateDlg" />
<DlgTableRename v-model="renameTableDlg" :table-meta="renameTableMeta" />
</div> </div>
</template> </template>

104
packages/nc-gui-v2/components/dlg/TableRename.vue

@ -0,0 +1,104 @@
<script setup lang="ts">
import { onMounted, watchEffect } from '@vue/runtime-core'
import { Form } from 'ant-design-vue'
import type { TableType } from 'nocodb-sdk'
import { useToast } from 'vue-toastification'
import { useProject, useTableCreate, useTabs } from '#imports'
import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
import { validateTableName } from '~/utils/validation'
import { useNuxtApp } from '#app'
interface Props {
modelValue?: boolean
tableMeta: TableType
}
const { modelValue = false, tableMeta } = defineProps<Props>()
const emit = defineEmits(['update:modelValue', 'updated'])
const { $e, $api } = useNuxtApp()
const toast = useToast()
const dialogShow = computed({
get() {
return modelValue
},
set(v) {
emit('update:modelValue', v)
},
})
const { addTab } = useTabs()
const { loadTables } = useProject()
const { project, tables } = useProject()
const prefix = computed(() => project?.value?.prefix || '')
const validateDuplicateAlias = (v: string) => {
return (tables?.value || []).every((t) => t.title !== (v || '')) || 'Duplicate table alias'
}
const validateLeadingOrTrailingWhiteSpace = (v: string) => {
return !/^\s+|\s+$/.test(v) || 'Leading or trailing whitespace not allowed in table name'
}
const validateDuplicate = (v: string) => {
return (tables?.value || []).every((t) => t.table_name.toLowerCase() !== (v || '').toLowerCase()) || 'Duplicate table name'
}
const inputEl = ref<any>()
const useForm = Form.useForm
const formState = reactive({
title: '',
})
const validators = computed(() => {
return {
title: [validateTableName, validateDuplicateAlias],
table_name: [validateTableName],
}
})
const { resetFields, validate, validateInfos } = useForm(formState, validators)
onMounted(() => {
// todo: focus input
})
watch(
() => tableMeta?.title,
(title) => {
if (title) formState.title = title
},
)
const renameTable = async () => {
try {
await $api.dbTable.update(tableMeta?.id as string, {
title: formState.title,
})
loadTables()
toast.success('Table renamed successfully')
$e('a:table:rename')
} catch (e) {
toast.error(await extractSdkResponseErrorMsg(e))
}
}
</script>
<template>
<a-modal v-model:visible="dialogShow" @keydown.esc="dialogShow = false" @finish="renameTable">
<template #footer>
<a-button key="back" @click="dialogShow = false">{{ $t('general.cancel') }}</a-button>
<a-button key="submit" type="primary" @click="renameTable">{{ $t('general.submit') }}</a-button>
</template>
<div class="pl-10 pr-10 pt-5">
<a-form :model="formState" name="create-new-table-form">
<!-- Create A New Table -->
<div class="prose-xl font-bold text-center my-4">Rename Table</div>
<!-- hint="Enter table name" -->
<div class="mb-2">Table Name</div>
<a-form-item v-bind="validateInfos.title">
<a-input
ref="inputEl"
v-model:value="formState.title"
size="large"
hide-details
:placeholder="$t('msg.info.enterTableName')"
/> </a-form-item
></a-form>
</div>
</a-modal>
</template>
Loading…
Cancel
Save