refactor(gui-v2): change view create to ant design cmps

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

@@ -2,7 +2,7 @@
 import { inject } from '@vue/runtime-core'
 import type { TableType } from 'nocodb-sdk'
 import { ViewTypes } from 'nocodb-sdk'
-import type { Ref } from '#imports'
+import type { Ref } from 'vue'
 import { ActiveViewInj, MetaInj, ViewListInj } from '~/context'
 import useViewCreate from '~/composables/useViewCreate'
 
@@ -13,8 +13,13 @@ const emit = defineEmits(['update:modelValue', 'created'])
 const valid = ref(false)
 
 const viewList = inject(ViewListInj)
+
 const activeView = inject(ActiveViewInj)
 
+const inputEl = ref()
+
+const form = ref()
+
 const dialogShow = computed({
   get() {
     return modelValue
@@ -38,8 +43,6 @@ const typeAlias = computed(
     }[type]),
 )
 
-const inputEl = ref<any>()
-const form = ref<any>()
 watch(
   () => modelValue,
   (v) => {
@@ -55,93 +58,28 @@ watch(
   },
 )
 
-/*  name: 'CreateViewDialog',
-  props: [
-    'value',
-    'nodes',
-    'table',
-    'alias',
-    'show_as',
-    'viewsCount',
-    'primaryValueColumn',
-    'meta',
-    'copyView',
-    'viewsList',
-    'selectedViewId',
-  ],
-  data: () => ({
-    valid: false,
-    view_name: '',
-    loading: false,
-    queryParams: {},
-  }),
-  computed: {
-    localState: {
-      get() {
-        return this.value;
-      },
-      set(v) {
-        this.$emit('input', v);
-      },
-    },
-    typeAlias() {
-      return {
-        [ViewTypes.GRID]: 'grid',
-        [ViewTypes.GALLERY]: 'gallery',
-        [ViewTypes.FORM]: 'form',
-        [ViewTypes.KANBAN]: 'kanban',
-      }[this.show_as];
-    },
-  },
-  mounted() {
-    try {
-      if (this.copyView && this.copyView.query_params) {
-        this.queryParams = { ...JSON.parse(this.copyView.query_params) };
-      }
-    } catch (e) {}
-    this.view_name = `${this.alias || this.table}${this.viewsCount}`;
-
-    this.$nextTick(() => {
-      const input = this.$refs.name.$el.querySelector('input');
-      input.setSelectionRange(0, this.view_name.length);
-      input.focus();
-    });
-  }, */
+const onSubmit = () => {
+  const isValid = form.value.validate()
+  if (isValid) {
+    createView(view.type!)
+    emit('update:modelValue', false)
+  }
+}
 </script>
 
 <template>
-  <v-dialog v-model="dialogShow" max-width="600" min-width="400">
-    <v-card class="elevation-20">
-      <v-card-title class="grey darken-2 subheading" style="height: 30px" />
-      <v-card-text class="pt-4 pl-4">
-        <p class="headline">
-          {{ $t('general.create') }} <span class="text-capitalize">{{ typeAlias }}</span> {{ $t('objects.view') }}
-        </p>
-        <v-form ref="form" v-model="valid" @submit.prevent="createView">
-          <!-- label="View Name" -->
-          <v-text-field
-            ref="inputEl"
-            v-model="view.title"
-            :label="$t('labels.viewName')"
-            :rules="[
-              (v) => !!v || 'View name required',
-              (v) => (viewList || []).every((v1) => (v1.alias || v1.title) !== v) || 'View name should be unique',
-            ]"
-            autofocus
-          />
-        </v-form>
-      </v-card-text>
-      <v-card-actions class="pa-4">
-        <v-spacer />
-        <v-btn class="" small @click="emit('update:modelValue', false)">
-          {{ $t('general.cancel') }}
-        </v-btn>
-        <v-btn small :loading="loading" class="primary" :disabled="!valid" @click="createView(type, activeView.id)">
-          {{ $t('general.submit') }}
-        </v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
+  <a-modal v-model:visible="dialogShow">
+    <template #title>
+      {{ $t('general.create') }} <span class="text-capitalize">{{ typeAlias }}</span> {{ $t('objects.view') }}
+    </template>
+    <a-form ref="form" layout="vertical" :model="valid" name="createView" @finish="createView">
+      <a-form-item
+        :label="$t('labels.viewName')"
+        :name="$t('labels.viewName')"
+        :rules="[{ required: true, message: 'View name required' }]"
+      >
+        <a-input ref="inputEl" v-model:value="view.title" autofocus />
+      </a-form-item>
+    </a-form>
+  </a-modal>
 </template>
-
-<style scoped></style>

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

@@ -24,9 +24,11 @@ watch(
   { immediate: true },
 )
 
-const toggleDrawer = $ref(false)
+const toggleDrawer = ref(false)
 // todo: identify based on meta
-const isView = $ref(false)
+const isView = ref(false)
+
+const enableDummyFeat = ref(false)
 
 let viewCreateType = $ref<ViewTypes>()
 
@@ -80,23 +82,24 @@ function onViewCreate(view: GridType | FormType | KanbanType | GalleryType) {
           <v-tooltip bottom>
             <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> -->
+
                 <v-list-item-title>
                   <span class="font-weight-regular">
                     <!-- Grid -->
                     {{ $t('objects.viewType.grid') }}
                   </span>
                 </v-list-item-title>
+
                 <v-spacer />
+
                 <MdiPlusIcon class="mr-1" />
-                <!--                <v-icon class="mr-1" small> mdi-plus</v-icon> -->
               </v-list-item>
             </template>
             <!-- Add Grid View -->
             {{ $t('msg.info.addView.grid') }}
           </v-tooltip>
+
           <v-tooltip bottom>
             <template #activator="{ props }">
               <v-list-item
@@ -154,6 +157,6 @@ function onViewCreate(view: GridType | FormType | KanbanType | GalleryType) {
       </div>
     </div>
 
-    <DlgViewCreate v-if="views" v-model="viewCreateDlg" :type="viewCreateType" @created="onViewCreate" />
+    <DlgViewCreate v-model="viewCreateDlg" :type="viewCreateType" @created="onViewCreate" />
   </a-layout-sider>
 </template>