From 381dd6714d6efdbe189a14edd46d39f2707e642f Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 19 Jul 2022 22:18:50 +0800
Subject: [PATCH] feat(gui-v2): column type autocomplete

---
 .../nc-gui-v2/components/template/Editor.vue  | 36 ++++++++++++++++---
 1 file changed, 31 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui-v2/components/template/Editor.vue b/packages/nc-gui-v2/components/template/Editor.vue
index 6749a585b5..393d5fa079 100644
--- a/packages/nc-gui-v2/components/template/Editor.vue
+++ b/packages/nc-gui-v2/components/template/Editor.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { useToast } from 'vue-toastification'
-import type { ColumnType, TableType } from 'nocodb-sdk'
-import { UITypes } from 'nocodb-sdk'
+import type { ColumnType } from 'nocodb-sdk'
+import { isVirtualCol, UITypes } from 'nocodb-sdk'
 import type { SizeType } from 'ant-design-vue/es/config-provider'
-import { computed, onMounted, provide, watch } from '#imports'
+import { computed, onMounted } from '#imports'
 import MdiTableIcon from '~icons/mdi/table'
 import MdiStringIcon from '~icons/mdi/alpha-a'
 import MdiLongTextIcon from '~icons/mdi/text'
@@ -18,6 +18,10 @@ interface Props {
   importData: any[]
 }
 
+interface Option {
+  value: string
+}
+
 const { quickImportType, projectTemplate, importData } = defineProps<Props>()
 
 const { $api } = useNuxtApp()
@@ -31,6 +35,24 @@ const loading = ref(false)
 const buttonSize = ref<SizeType>('middle')
 const toast = useToast()
 
+const uiTypeOptions = ref<Option[]>(
+  (Object.keys(UITypes) as Array<keyof typeof UITypes>)
+    .filter(
+      (x: any) =>
+        !isVirtualCol(x) &&
+        ![UITypes.ForeignKey, UITypes.ID, UITypes.CreateTime, UITypes.LastModifiedTime, UITypes.Barcode, UITypes.Button].includes(
+          x,
+        ),
+    )
+    .map((x: string) => ({
+      value: x,
+    })),
+)
+
+const filterOption = (input: string, option: Option) => {
+  return option.value.toUpperCase().indexOf(input.toUpperCase()) >= 0
+}
+
 const tableColumns = [
   {
     name: 'Column Name',
@@ -301,8 +323,12 @@ const importTemplate = async () => {
                 />
               </template>
               <template v-else-if="column.key === 'column_type'">
-                <!--                        TODO: render uidt dropdown-->
-                {{ record.uidt }}
+                <a-auto-complete
+                  v-model:value="record.uidt"
+                  :options="uiTypeOptions"
+                  :filter-option="filterOption"
+                  style="width: 200px"
+                />
               </template>
 
               <template v-else-if="column.key === 'select_option'">