Merge pull request #3094 from nocodb/fix/view-rename-validation

fix(gui-v2): abort renaming view on failed validation

packages/nc-gui-v2/components/smartsheet-header/Cell.vue

@@ -5,7 +5,7 @@ import { inject, toRef } from 'vue'
 import { ColumnInj, IsFormInj, MetaInj } from '~/context'
 import { useProvideColumnCreateStore } from '#imports'
 
-const props = defineProps<{ column: ColumnType & { meta: any }; required: boolean; hideMenu?: boolean }>()
+const props = defineProps<{ column: ColumnType & { meta: any }; required?: boolean; hideMenu?: boolean }>()
 
 const hideMenu = toRef(props, 'hideMenu')
 

packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue

@@ -61,12 +61,12 @@ function markItem(id: string) {
 }
 
 /** validate view title */
-function validate(value?: string) {
+function validate(view: Record<string, any>) {
-  if (!value || value.trim().length < 0) {
+  if (!view.title || view.title.trim().length < 0) {
     return 'View name is required'
   }
 
-  if (views.value.every((v1) => v1.title !== value)) {
+  if (views.value.some((v) => v.title === view.title && v.id !== view.id)) {
     return 'View name should be unique'
   }
 
@@ -141,19 +141,10 @@ function changeView(view: { id: string; alias?: string; title?: string; type: Vi
 
 /** Rename a view */
 async function onRename(view: ViewType) {
-  const valid = validate(view.title)
-
-  if (valid !== true) {
-    notification.error({
-      message: valid,
-      duration: 2,
-    })
-  }
-
   try {
     await api.dbView.update(view.id!, {
       title: view.title,
-      order: view.order,
+      order: String(view.order),
     })
 
     notification.success({
@@ -193,6 +184,7 @@ function onDeleted() {
       :id="view.id"
       :key="view.id"
       :view="view"
+      :on-validate="validate"
       class="transition-all ease-in duration-300"
       :class="[
         isMarked === view.id ? 'bg-gray-200' : '',

packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue

@@ -1,18 +1,20 @@
 <script lang="ts" setup>
 import type { ViewTypes } from 'nocodb-sdk'
+import { notification } from 'ant-design-vue'
 import { viewIcons } from '~/utils'
-import { useDebounceFn, useNuxtApp, useVModel } from '#imports'
+import { onKeyStroke, useDebounceFn, useNuxtApp, useVModel } from '#imports'
 
 interface Props {
   view: Record<string, any>
+  onValidate: (view: Record<string, any>) => boolean | string
 }
 
 interface Emits {
-  (event: 'openModal', data: { type: ViewTypes; title?: string }): void
   (event: 'update:view', data: Record<string, any>): void
   (event: 'changeView', view: Record<string, any>): void
   (event: 'rename', view: Record<string, any>): void
   (event: 'delete', view: Record<string, any>): void
+  (event: 'openModal', data: { type: ViewTypes; title?: string; copyViewId?: string }): void
 }
 
 const props = defineProps<Props>()
@@ -99,6 +101,18 @@ async function onDelete() {
 async function onRename() {
   if (!isEditing) return
 
+  const isValid = props.onValidate(vModel.value)
+
+  if (isValid !== true) {
+    notification.error({
+      message: isValid,
+      duration: 2,
+    })
+
+    onCancel()
+    return
+  }
+
   if (vModel.value.title === '' || vModel.value.title === originalTitle) {
     onCancel()
     return