fix(gui-v2): directive usage warnings

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

@@ -24,9 +24,10 @@ interface Props {
   modelValue: boolean
   importType: 'csv' | 'json' | 'excel'
   importOnly: boolean
+  files?: Record<string, any>[]
 }
 
-const { importType, importOnly, ...rest } = defineProps<Props>()
+const { importType, importOnly, files: initialFiles = [], ...rest } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
@@ -53,7 +54,7 @@ const templateEditorModal = ref(false)
 const useForm = Form.useForm
 
 const importState = reactive({
-  fileList: [] as Record<string, any>[],
+  fileList: initialFiles as Record<string, any>[],
   url: '',
   jsonEditor: {},
   parserConfig: {
@@ -69,12 +70,10 @@ const isImportTypeCsv = computed(() => importType === 'csv')
 
 const IsImportTypeExcel = computed(() => importType === 'excel')
 
-const validators = computed(() => {
+const validators = computed(() => ({
-  return {
+  url: [fieldRequiredValidator, importUrlValidator, isImportTypeCsv.value ? importCsvUrlValidator : importExcelUrlValidator],
-    url: [fieldRequiredValidator, importUrlValidator, isImportTypeCsv.value ? importCsvUrlValidator : importExcelUrlValidator],
+  maxRowsToParse: [fieldRequiredValidator],
-    maxRowsToParse: [fieldRequiredValidator],
+}))
-  }
-})
 
 const { validate, validateInfos } = useForm(importState, validators)
 

packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue

@@ -1,28 +1,24 @@
 <script setup lang="ts">
 import type { TabItem } from '~/composables'
+import { TabMetaInj, provide, ref, useDialog, useNuxtApp, useTabs, useUIPermission } from '#imports'
+import DlgTableCreate from '~/components/dlg/TableCreate.vue'
+import DlgAirtableImport from '~/components/dlg/AirtableImport.vue'
+import DlgQuickImport from '~/components/dlg/QuickImport.vue'
 import { TabType } from '~/composables'
-import { TabMetaInj, useTabs, useUIPermission } from '#imports'
 import MdiAirTableIcon from '~icons/mdi/table-large'
 import MdiView from '~icons/mdi/eye-circle-outline'
 import MdiAccountGroup from '~icons/mdi/account-group'
 
+const { $e } = useNuxtApp()
+
 const { tabs, activeTabIndex, activeTab, closeTab } = useTabs()
 
 const { isUIAllowed } = useUIPermission()
 
-const tableCreateDialog = ref(false)
-const airtableImportDialog = ref(false)
-const quickImportDialog = ref(false)
-const importType = ref('')
 const currentMenu = ref<string[]>(['addORImport'])
 
 provide(TabMetaInj, activeTab)
 
-function openQuickImportDialog(type: string) {
-  quickImportDialog.value = true
-  importType.value = type
-}
-
 const icon = (tab: TabItem) => {
   switch (tab.type) {
     case TabType.TABLE:
@@ -33,6 +29,46 @@ const icon = (tab: TabItem) => {
       return MdiAccountGroup
   }
 }
+
+function openQuickImportDialog(type: string) {
+  $e(`a:actions:import-${type}`)
+
+  const { close } = useDialog(DlgQuickImport, {
+    'modelValue': true,
+    'importType': type,
+    'onUpdate:modelValue': closeDialog,
+  })
+
+  function closeDialog() {
+    close(1000)
+  }
+}
+
+function openTableCreateDialog() {
+  $e('a:actions:create-table')
+
+  const { close } = useDialog(DlgTableCreate, {
+    'modelValue': true,
+    'onUpdate:modelValue': closeDialog,
+  })
+
+  function closeDialog() {
+    close(1000)
+  }
+}
+
+function openAirtableImportDialog() {
+  $e('a:actions:import-airtable')
+
+  const { close } = useDialog(DlgAirtableImport, {
+    'modelValue': true,
+    'onUpdate:modelValue': closeDialog,
+  })
+
+  function closeDialog() {
+    close(1000)
+  }
+}
 </script>
 
 <template>
@@ -60,7 +96,7 @@ const icon = (tab: TabItem) => {
                 </template>
 
                 <a-menu-item-group v-if="isUIAllowed('addTable')">
-                  <a-menu-item key="add-new-table" v-t="['a:actions:create-table']" @click="tableCreateDialog = true">
+                  <a-menu-item key="add-new-table" @click="openTableCreateDialog">
                     <span class="flex items-center gap-2">
                       <MdiTable class="text-primary" />
                       <!-- Add new table -->
@@ -70,24 +106,15 @@ const icon = (tab: TabItem) => {
                 </a-menu-item-group>
 
                 <a-menu-item-group title="QUICK IMPORT FROM">
-                  <a-menu-item
+                  <a-menu-item v-if="isUIAllowed('airtableImport')" key="quick-import-airtable" @click="openAirtableImportDialog">
-                    v-if="isUIAllowed('airtableImport')"
-                    key="quick-import-airtable"
-                    v-t="['a:actions:import-airtable']"
-                    @click="airtableImportDialog = true"
-                  >
                     <span class="flex items-center gap-2">
                       <MdiTableLarge class="text-primary" />
                       <!-- TODO: i18n -->
                       Airtable
                     </span>
                   </a-menu-item>
-                  <a-menu-item
+
-                    v-if="isUIAllowed('csvImport')"
+                  <a-menu-item v-if="isUIAllowed('csvImport')" key="quick-import-csv" @click="openQuickImportDialog('csv')">
-                    key="quick-import-csv"
-                    v-t="['a:actions:import-csv']"
-                    @click="openQuickImportDialog('csv')"
-                  >
                     <span class="flex items-center gap-2">
                       <MdiFileDocumentOutline class="text-primary" />
                       <!-- TODO: i18n -->
@@ -95,12 +122,7 @@ const icon = (tab: TabItem) => {
                     </span>
                   </a-menu-item>
 
-                  <a-menu-item
+                  <a-menu-item v-if="isUIAllowed('jsonImport')" key="quick-import-json" @click="openQuickImportDialog('json')">
-                    v-if="isUIAllowed('jsonImport')"
-                    key="quick-import-json"
-                    v-t="['a:actions:import-json']"
-                    @click="openQuickImportDialog('json')"
-                  >
                     <span class="flex items-center gap-2">
                       <MdiCodeJson class="text-primary" />
                       <!-- TODO: i18n -->
@@ -108,12 +130,7 @@ const icon = (tab: TabItem) => {
                     </span>
                   </a-menu-item>
 
-                  <a-menu-item
+                  <a-menu-item v-if="isUIAllowed('excelImport')" key="quick-import-excel" @click="openQuickImportDialog('excel')">
-                    v-if="isUIAllowed('excelImport')"
-                    key="quick-import-excel"
-                    v-t="['a:actions:import-excel']"
-                    @click="openQuickImportDialog('excel')"
-                  >
                     <span class="flex items-center gap-2">
                       <MdiFileExcel class="text-primary" />
                       <!-- TODO: i18n -->
@@ -124,13 +141,13 @@ const icon = (tab: TabItem) => {
 
                 <a-menu-divider class="ma-0 mb-2" />
 
-                <a-menu-item
+                <a-menu-item v-if="isUIAllowed('importRequest')" key="add-new-table" class="ma-0 mt-3">
-                  v-if="isUIAllowed('importRequest')"
+                  <a
-                  key="add-new-table"
+                    v-t="['e:datasource:import-request']"
-                  v-t="['e:datasource:import-request']"
+                    href="https://github.com/nocodb/nocodb/issues/2052"
-                  class="ma-0 mt-3"
+                    target="_blank"
-                >
+                    class="prose-sm pa-0"
-                  <a href="https://github.com/nocodb/nocodb/issues/2052" target="_blank" class="prose-sm pa-0">
+                  >
                     <span class="flex items-center gap-2">
                       <MdiOpenInNew class="text-primary" />
                       <!-- TODO: i18n -->
@@ -143,16 +160,11 @@ const icon = (tab: TabItem) => {
           </template>
         </a-tabs>
       </div>
+
       <div class="w-full min-h-[300px] flex-auto">
         <NuxtPage />
       </div>
     </div>
-
-    <DlgTableCreate v-if="tableCreateDialog" v-model="tableCreateDialog" />
-
-    <DlgQuickImport v-if="quickImportDialog" v-model="quickImportDialog" :import-type="importType" />
-
-    <DlgAirtableImport v-if="airtableImportDialog" v-model="airtableImportDialog" />
   </div>
 </template>
 

packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/index.vue

@@ -1,12 +1,29 @@
 <script lang="ts" setup>
-import { ref, useDropZone } from '#imports'
+import { ref, useDialog, useDropZone, useNuxtApp } from '#imports'
+import DlgQuickImport from '~/components/dlg/QuickImport.vue'
 
 const el = ref<HTMLDivElement>()
 
 const { isOverDropZone } = useDropZone(el, onDrop)
 
-function onDrop() {
+const { $e } = useNuxtApp()
-  console.log('onDrop')
+
+function onDrop(droppedFiles: File[] | null) {
+  console.log('onDrop', droppedFiles)
+}
+
+function openQuickImportDialog(type: string) {
+  $e(`a:actions:import-${type}`)
+
+  const { close } = useDialog(DlgQuickImport, {
+    'modelValue': true,
+    'importType': type,
+    'onUpdate:modelValue': closeDialog,
+  })
+
+  function closeDialog() {
+    close(1000)
+  }
 }
 </script>