feat(gui-v2): autogenerate name and validation

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui-v2/components/dlg/ViewCreate.vue

@@ -38,6 +38,23 @@ const typeAlias = computed(
     }[type]),
 )
 
+const inputEl = ref<any>()
+const form = ref<any>()
+watch(
+  () => modelValue,
+  (v) => {
+    if (v) {
+      generateUniqueTitle(viewList?.value || [])
+      nextTick(() => {
+        const el = inputEl?.value?.$el
+        el?.querySelector('input')?.focus()
+        el?.querySelector('input')?.select()
+        form?.value?.validate()
+      })
+    }
+  },
+)
+
 /*  name: 'CreateViewDialog',
   props: [
     'value',
@@ -103,7 +120,7 @@ const typeAlias = computed(
         <v-form ref="form" v-model="valid" @submit.prevent="createView">
           <!-- label="View Name" -->
           <v-text-field
-            ref="name"
+            ref="inputEl"
             v-model="view.title"
             :label="$t('labels.viewName')"
             :rules="[

packages/nc-gui-v2/components/smartsheet/Sidebar.vue

@@ -174,28 +174,28 @@ const onViewCreate = (view) => {
             <span class="body-2 font-weight-medium" @dblclick="enableDummyFeat = true">
               {{ $t('activity.createView') }}
             </span>
-            <v-tooltip top>
-              <template #activator="{ on }">
-                <!--                <x-icon -->
-                <!--                  color="pink textColor" -->
-                <!--                  icon-class="ml-2" -->
-                <!--                  small -->
-                <!--                  v-on="on" -->
-                <!--                  @mouseenter="overShieldIcon = true" -->
-                <!--                  @mouseleave="overShieldIcon = false" -->
-                <!--                > -->
-                <!--                  mdi-shield-lock-outline -->
-                <!--                </x-icon> -->
+            <!--            <v-tooltip top>
+              <template #activator="{ props }">
+                &lt;!&ndash;                <x-icon &ndash;&gt;
+                &lt;!&ndash;                  color="pink textColor" &ndash;&gt;
+                &lt;!&ndash;                  icon-class="ml-2" &ndash;&gt;
+                &lt;!&ndash;                  small &ndash;&gt;
+                &lt;!&ndash;                  v-on="on" &ndash;&gt;
+                &lt;!&ndash;                  @mouseenter="overShieldIcon = true" &ndash;&gt;
+                &lt;!&ndash;                  @mouseleave="overShieldIcon = false" &ndash;&gt;
+                &lt;!&ndash;                > &ndash;&gt;
+                &lt;!&ndash;                  mdi-shield-lock-outline &ndash;&gt;
+                &lt;!&ndash;                </x-icon> &ndash;&gt;
               </template>
-              <!-- Only visible to Creator -->
+              &lt;!&ndash; Only visible to Creator &ndash;&gt;
               <span class="caption">
                 {{ $t('msg.info.onlyCreator') }}
               </span>
-            </v-tooltip>
+            </v-tooltip> -->
           </v-list-item>
           <v-tooltip bottom>
-            <template #activator="{ on }">
-              <v-list-item dense class="body-2 nc-create-grid-view" v-on="on" @click="openCreateViewDlg(ViewTypes.GRID)">
+            <template #activator="{ props }">
+              <v-list-item dense class="body-2 nc-create-grid-view" v-bind="props" @click="openCreateViewDlg(ViewTypes.GRID)">
                 <!--                <v-list-item-icon class="mr-n1"> -->
                 <component :is="viewIcons[ViewTypes.GRID].icon" :class="`text-${viewIcons[ViewTypes.GRID].color} mr-1`" />
                 <!--                </v-list-item-icon> -->
@@ -214,8 +214,13 @@ const onViewCreate = (view) => {
             {{ $t('msg.info.addView.grid') }}
           </v-tooltip>
           <v-tooltip bottom>
-            <template #activator="{ on }">
-              <v-list-item dense class="body-2 nc-create-gallery-view" v-on="on" @click="openCreateViewDlg(ViewTypes.GALLERY)">
+            <template #activator="{ props }">
+              <v-list-item
+                dense
+                class="body-2 nc-create-gallery-view"
+                v-bind="props"
+                @click="openCreateViewDlg(ViewTypes.GALLERY)"
+              >
                 <!--                <v-list-item-icon class="mr-n1"> -->
                 <component :is="viewIcons[ViewTypes.GALLERY].icon" :class="`text-${viewIcons[ViewTypes.GALLERY].color} mr-1`" />
                 <!--                </v-list-item-icon> -->
@@ -237,12 +242,12 @@ const onViewCreate = (view) => {
           </v-tooltip>
 
           <v-tooltip bottom>
-            <template #activator="{ on }">
+            <template #activator="{ props }">
               <v-list-item
                 v-if="!isView"
                 dense
                 class="body-2 nc-create-form-view"
-                v-on="on"
+                v-bind="props"
                 @click="openCreateViewDlg(ViewTypes.FORM)"
               >
                 <!--                <v-list-item-icon class="mr-n1"> -->
@@ -269,7 +274,7 @@ const onViewCreate = (view) => {
       </div>
     </div>
 
-    <DlgViewCreate v-model="viewCreateDlg" :type="viewCreateType" @created="onViewCreate" />
+    <DlgViewCreate v-if="views" v-model="viewCreateDlg" :type="viewCreateType" @created="onViewCreate" />
   </div>
 </template>
 

packages/nc-gui-v2/composables/useViewCreate.ts

@@ -3,6 +3,7 @@ import { ViewTypes } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { useToast } from 'vue-toastification'
 import { useNuxtApp } from '#app'
+import type { ViewType } from '~/components'
 import useMetas from '~/composables/useMetas'
 
 export default (meta: Ref<TableType>, onViewCreate?: (viewMeta: any) => void) => {
@@ -60,12 +61,12 @@ export default (meta: Ref<TableType>, onViewCreate?: (viewMeta: any) => void) =>
     loading.value = false
   }
 
-  const generateUniqueTitle = () => {
-    // let c = 1
-    // while (tables?.value?.some((t) => t.title === `Sheet${c}`)) {
-    //   c++
-    // }
-    // table.title = `Sheet${c}`
+  const generateUniqueTitle = (views: ViewType[]) => {
+    let c = 1
+    while (views?.some((t) => t.title === `${meta?.value?.title}${c}`)) {
+      c++
+    }
+    view.title = `${meta?.value?.title}${c}`
   }
 
   return { view, createView, generateUniqueTitle, loading }