refactor(gui-v2): error corrections, add import option in tab page

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

packages/nc-gui-v2/components/cell/TextArea.vue

@@ -2,7 +2,7 @@
 import { computed, inject, onMounted, ref } from '#imports'
 
 interface Props {
-  modelValue: string
+  modelValue?: string
 }
 
 const { modelValue: value } = defineProps<Props>()

packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue

@@ -76,7 +76,7 @@ const onMove = (event) => {
 
 <template>
   <a-dropdown :trigger="['click']">
-    <v-badge :value="isAnyFieldHidden" color="primary" dot overlap v-bind="props">
+    <v-badge :value="isAnyFieldHidden" color="primary" dot overlap>
       <a-button v-t="['c:fields']" class="nc-fields-menu-btn nc-toolbar-btn" :disabled="isLocked" size="small">
         <div class="flex align-center gap-1">
           <!--          <v-icon small class="mr-1" color="#777"> mdi-eye-off-outline </v-icon> -->

packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue

@@ -7,6 +7,7 @@ import useBelongsTo from '~/composables/useBelongsTo'
 const column = inject(ColumnInj)
 const value = inject('value')
 const active = false
+const localState = null
 
 const { parentMeta, loadParentMeta, primaryValueProp } = useBelongsTo(column as ColumnType)
 await loadParentMeta()

packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue

@@ -6,6 +6,7 @@ import useManyToMany from '~/composables/useManyToMany'
 const column = inject(ColumnInj)
 const value = inject('value')
 const active = false
+const isLocked = false
 
 const { childMeta, loadChildMeta, primaryValueProp } = useManyToMany(column as ColumnType)
 await loadChildMeta()

packages/nc-gui-v2/package-lock.json

@@ -9,6 +9,7 @@
         "@vueuse/integrations": "^8.9.1",
         "ant-design-vue": "^3.1.0-rc.6",
         "dayjs": "^1.11.3",
+        "file-saver": "^2.0.5",
         "jwt-decode": "^3.1.2",
         "monaco-editor": "^0.33.0",
         "nocodb-sdk": "file:../nocodb-sdk",
@@ -18,6 +19,7 @@
         "unique-names-generator": "^4.7.1",
         "vue-i18n": "^9.1.10",
         "vue-toastification": "^2.0.0-rc.5",
+        "vuedraggable": "^4.1.0",
         "vuetify": "^3.0.0-alpha.13",
         "xlsx": "^0.17.3"
       },
@@ -15684,6 +15686,11 @@
         "node": "^10.12.0 || >=12.0.0"
       }
     },
+    "node_modules/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
+    },
     "node_modules/file-uri-to-path": {
       "version": "1.0.0",
       "dev": true,
@@ -21953,6 +21960,22 @@
         "vue": "^3.0.0"
       }
     },
+    "node_modules/vuedraggable": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.1.0.tgz",
+      "integrity": "sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==",
+      "dependencies": {
+        "sortablejs": "1.14.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.1"
+      }
+    },
+    "node_modules/vuedraggable/node_modules/sortablejs": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz",
+      "integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w=="
+    },
     "node_modules/vuetify": {
       "version": "3.0.0-beta.5",
       "license": "MIT",
@@ -26412,6 +26435,11 @@
         "flat-cache": "^3.0.4"
       }
     },
+    "file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
+    },
     "file-uri-to-path": {
       "version": "1.0.0",
       "dev": true
@@ -36450,6 +36478,21 @@
         "is-plain-object": "3.0.1"
       }
     },
+    "vuedraggable": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.1.0.tgz",
+      "integrity": "sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==",
+      "requires": {
+        "sortablejs": "1.14.0"
+      },
+      "dependencies": {
+        "sortablejs": {
+          "version": "1.14.0",
+          "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz",
+          "integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w=="
+        }
+      }
+    },
     "vuetify": {
       "version": "3.0.0-beta.5",
       "requires": {}

packages/nc-gui-v2/package.json

@@ -25,7 +25,7 @@
     "unique-names-generator": "^4.7.1",
     "vue-i18n": "^9.1.10",
     "vue-toastification": "^2.0.0-rc.5",
-    "xlsx": "^0.17.3"
+    "xlsx": "^0.17.3",
     "vuedraggable": "^4.1.0",
     "vuetify": "^3.0.0-alpha.13"
   },

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

@@ -1,11 +1,38 @@
 <script setup lang="ts">
 import useTabs from '~/composables/useTabs'
 import { TabMetaInj } from '~/context'
+import useUIPermission from '~/composables/useUIPermission'
+import MdiPlusIcon from '~icons/mdi/plus'
+import MdiTableIcon from '~icons/mdi/table'
+import MdiCsvIcon from '~icons/mdi/file-document-outline'
+import MdiExcelIcon from '~icons/mdi/file-excel'
+import MdiJSONIcon from '~icons/mdi/code-json'
+import MdiAirTableIcon from '~icons/mdi/table-large'
+import MdiRequestDataSourceIcon from '~icons/mdi/open-in-new'
+import MdiAccountGroupIcon from '~icons/mdi/account-group'
 
 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 onEdit(targetKey: number, action: string) {
+  if (action !== 'add') {
+    closeTab(targetKey)
+  }
+}
+
+function openQuickImportDialog(type: string) {
+  quickImportDialog.value = true
+  importType.value = type
+}
 </script>
 
 <template>
@@ -13,11 +40,103 @@ provide(TabMetaInj, activeTab)
     <div>
       <a-tabs v-model:activeKey="activeTabIndex" size="small" type="editable-card" @edit="closeTab">
         <a-tab-pane v-for="(tab, i) in tabs" :key="i" :tab="tab.title" />
+
+        <template #leftExtra>
+          <a-menu v-model:selectedKeys="currentMenu" mode="horizontal">
+            <a-sub-menu key="addORImport">
+              <template #title>
+                <div class="text-sm flex items-center gap-2">
+                  <MdiPlusIcon />
+                  Add / Import
+                </div>
+              </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">
+                  <span class="flex items-center gap-2">
+                    <MdiTableIcon class="text-primary" />
+                    <!-- Add new table -->
+                    {{ $t('tooltip.addTable') }}
+                  </span>
+                </a-menu-item>
+              </a-menu-item-group>
+              <a-menu-item-group title="QUICK IMPORT FROM">
+                <a-menu-item
+                  v-if="isUIAllowed('airtableImport')"
+                  key="quick-import-airtable"
+                  v-t="['a:actions:import-airtable']"
+                  @click="airtableImportDialog = true"
+                >
+                  <span class="flex items-center gap-2">
+                    <MdiAirTableIcon class="text-primary" />
+                    <!-- TODO: i18n -->
+                    Airtable
+                  </span>
+                </a-menu-item>
+                <a-menu-item
+                  v-if="isUIAllowed('csvImport')"
+                  key="quick-import-csv"
+                  v-t="['a:actions:import-csv']"
+                  @click="openQuickImportDialog('csv')"
+                >
+                  <span class="flex items-center gap-2">
+                    <MdiCsvIcon class="text-primary" />
+                    <!-- TODO: i18n -->
+                    CSV file
+                  </span>
+                </a-menu-item>
+                <a-menu-item
+                  v-if="isUIAllowed('jsonImport')"
+                  key="quick-import-json"
+                  v-t="['a:actions:import-json']"
+                  @click="openQuickImportDialog('json')"
+                >
+                  <span class="flex items-center gap-2">
+                    <MdiJSONIcon class="text-primary" />
+                    <!-- TODO: i18n -->
+                    JSON file
+                  </span>
+                </a-menu-item>
+                <a-menu-item
+                  v-if="isUIAllowed('excelImport')"
+                  key="quick-import-excel"
+                  v-t="['a:actions:import-excel']"
+                  @click="openQuickImportDialog('excel')"
+                >
+                  <span class="flex items-center gap-2">
+                    <MdiExcelIcon class="text-primary" />
+                    <!-- TODO: i18n -->
+                    Microsoft Excel
+                  </span>
+                </a-menu-item>
+              </a-menu-item-group>
+              <a-divider class="ma-0 mb-2" />
+              <a-menu-item
+                v-if="isUIAllowed('importRequest')"
+                key="add-new-table"
+                v-t="['e:datasource:import-request']"
+                class="ma-0 mt-3"
+              >
+                <a href="https://github.com/nocodb/nocodb/issues/2052" target="_blank" class="prose-sm pa-0">
+                  <span class="flex items-center gap-2">
+                    <MdiRequestDataSourceIcon class="text-primary" />
+                    <!-- TODO: i18n -->
+                    Request a data source you need?
+                  </span>
+                </a>
+              </a-menu-item>
+            </a-sub-menu>
+          </a-menu>
+        </template>
       </a-tabs>
     </div>
+
     <div class="flex-1 min-h-0">
       <NuxtPage />
     </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>