From 05021f97bfae9495488bcb56a8b05dd11db48f17 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 17 Aug 2022 14:52:34 +0200
Subject: [PATCH] feat(gui-v2): add dropzone to project intro page

---
 packages/nc-gui-v2/components.d.ts            |  3 ++
 .../components/dashboard/TreeView.vue         |  2 +-
 packages/nc-gui-v2/package-lock.json          | 38 +++++++++++++++++++
 packages/nc-gui-v2/package.json               |  2 +
 .../[projectType]/[projectId]/index/index.vue |  2 +-
 .../[projectId]/index/index/index.vue         | 33 +++++++++++++++-
 6 files changed, 77 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index c033344d42..61b64b94b4 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -64,6 +64,8 @@ declare module '@vue/runtime-core' {
     ATypography: typeof import('ant-design-vue/es')['Typography']
     ATypographyTitle: typeof import('ant-design-vue/es')['TypographyTitle']
     AUploadDragger: typeof import('ant-design-vue/es')['UploadDragger']
+    BiFiletypeJson: typeof import('~icons/bi/filetype-json')['default']
+    BiFiletypeXlsx: typeof import('~icons/bi/filetype-xlsx')['default']
     CilFullscreen: typeof import('~icons/cil/fullscreen')['default']
     CilFullscreenExit: typeof import('~icons/cil/fullscreen-exit')['default']
     ClaritySuccessLine: typeof import('~icons/clarity/success-line')['default']
@@ -180,6 +182,7 @@ declare module '@vue/runtime-core' {
     MdiViewListOutline: typeof import('~icons/mdi/view-list-outline')['default']
     MdiWhatsapp: typeof import('~icons/mdi/whatsapp')['default']
     MdiXml: typeof import('~icons/mdi/xml')['default']
+    PhFileCsv: typeof import('~icons/ph/file-csv')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }
diff --git a/packages/nc-gui-v2/components/dashboard/TreeView.vue b/packages/nc-gui-v2/components/dashboard/TreeView.vue
index d7999e4251..c23e290851 100644
--- a/packages/nc-gui-v2/components/dashboard/TreeView.vue
+++ b/packages/nc-gui-v2/components/dashboard/TreeView.vue
@@ -139,7 +139,7 @@ const activeTable = computed(() => {
 
 <template>
   <div class="nc-treeview-container flex flex-col">
-    <div class="px-6 py-[9px] border-b-1 nc-filter-input">
+    <div class="px-6 py-[8.5px] border-b-1 nc-filter-input">
       <div class="flex items-center bg-gray-50 rounded relative">
         <a-input
           v-model:value="filterQuery"
diff --git a/packages/nc-gui-v2/package-lock.json b/packages/nc-gui-v2/package-lock.json
index f2845b87e3..311c840305 100644
--- a/packages/nc-gui-v2/package-lock.json
+++ b/packages/nc-gui-v2/package-lock.json
@@ -32,6 +32,7 @@
       },
       "devDependencies": {
         "@antfu/eslint-config": "^0.26.0",
+        "@iconify-json/bi": "^1.1.6",
         "@iconify-json/cil": "^1.1.2",
         "@iconify-json/clarity": "^1.1.4",
         "@iconify-json/eva": "^1.1.2",
@@ -40,6 +41,7 @@
         "@iconify-json/material-symbols": "^1.1.8",
         "@iconify-json/mdi": "^1.1.25",
         "@iconify-json/mi": "^1.1.2",
+        "@iconify-json/ph": "^1.1.2",
         "@iconify-json/ri": "^1.1.3",
         "@intlify/vite-plugin-vue-i18n": "^6.0.1",
         "@nuxt/image-edge": "^1.0.0-27657146.da85542",
@@ -996,6 +998,15 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/@iconify-json/bi": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/@iconify-json/bi/-/bi-1.1.6.tgz",
+      "integrity": "sha512-q80o/IJN/mEwhzQG/LjmpA4S5Zk3XzHegmhseWEvu6XF/N3pc8d7a1Fv/PVE2kij06J6ugb8DTdt30BCt5Dplw==",
+      "dev": true,
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
     "node_modules/@iconify-json/cil": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@iconify-json/cil/-/cil-1.1.2.tgz",
@@ -1068,6 +1079,15 @@
         "@iconify/types": "*"
       }
     },
+    "node_modules/@iconify-json/ph": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@iconify-json/ph/-/ph-1.1.2.tgz",
+      "integrity": "sha512-NuTdtt/UmuxIHS4hfdyv3BP5JiWikNkr81hFHXDScXlH0GUMdRSY/B5T9vDvbXDY/esMLFnIAXoFVDLsGinhpw==",
+      "dev": true,
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
     "node_modules/@iconify-json/ri": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@iconify-json/ri/-/ri-1.1.3.tgz",
@@ -15955,6 +15975,15 @@
       "dev": true,
       "peer": true
     },
+    "@iconify-json/bi": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/@iconify-json/bi/-/bi-1.1.6.tgz",
+      "integrity": "sha512-q80o/IJN/mEwhzQG/LjmpA4S5Zk3XzHegmhseWEvu6XF/N3pc8d7a1Fv/PVE2kij06J6ugb8DTdt30BCt5Dplw==",
+      "dev": true,
+      "requires": {
+        "@iconify/types": "*"
+      }
+    },
     "@iconify-json/cil": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@iconify-json/cil/-/cil-1.1.2.tgz",
@@ -16027,6 +16056,15 @@
         "@iconify/types": "*"
       }
     },
+    "@iconify-json/ph": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@iconify-json/ph/-/ph-1.1.2.tgz",
+      "integrity": "sha512-NuTdtt/UmuxIHS4hfdyv3BP5JiWikNkr81hFHXDScXlH0GUMdRSY/B5T9vDvbXDY/esMLFnIAXoFVDLsGinhpw==",
+      "dev": true,
+      "requires": {
+        "@iconify/types": "*"
+      }
+    },
     "@iconify-json/ri": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@iconify-json/ri/-/ri-1.1.3.tgz",
diff --git a/packages/nc-gui-v2/package.json b/packages/nc-gui-v2/package.json
index b7ae901b41..cf5ca7935b 100644
--- a/packages/nc-gui-v2/package.json
+++ b/packages/nc-gui-v2/package.json
@@ -38,6 +38,7 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.26.0",
+    "@iconify-json/bi": "^1.1.6",
     "@iconify-json/cil": "^1.1.2",
     "@iconify-json/clarity": "^1.1.4",
     "@iconify-json/eva": "^1.1.2",
@@ -46,6 +47,7 @@
     "@iconify-json/material-symbols": "^1.1.8",
     "@iconify-json/mdi": "^1.1.25",
     "@iconify-json/mi": "^1.1.2",
+    "@iconify-json/ph": "^1.1.2",
     "@iconify-json/ri": "^1.1.3",
     "@intlify/vite-plugin-vue-i18n": "^6.0.1",
     "@nuxt/image-edge": "^1.0.0-27657146.da85542",
diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
index 693549d18b..87751fc6b0 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
@@ -143,7 +143,7 @@ const icon = (tab: TabItem) => {
           </template>
         </a-tabs>
       </div>
-      <div class="w-full min-h-[300px] flex-grow">
+      <div class="w-full min-h-[300px] flex-auto">
         <NuxtPage />
       </div>
     </div>
diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/index.vue
index 8f65f3122b..cc3a0be053 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/index.vue
@@ -1,3 +1,34 @@
+<script lang="ts" setup>
+import { ref, useDropZone } from '#imports'
+
+const el = ref<HTMLDivElement>()
+
+const { isOverDropZone } = useDropZone(el, onDrop)
+
+function onDrop() {
+  console.log('onDrop')
+}
+</script>
+
 <template>
-  <div class="h-full w-full prose text-3xl text-gray-400 flex items-center justify-center">Welcome to NocoDB!</div>
+  <div ref="el" class="h-full w-full text-gray-400 flex items-center justify-center relative">
+    <general-overlay
+      v-model="isOverDropZone"
+      inline
+      class="text-white text-3xl shadow-pink-500 shadow-inner bg-gray-700/75 flex items-center justify-center gap-2 backdrop-blur-xl"
+    >
+      <MaterialSymbolsFileCopyOutline class="text-pink-500" /> Drop here
+    </general-overlay>
+
+    <div class="flex flex-col gap-6 items-center justify-center md:w-1/2 mx-auto text-center">
+      <div class="text-3xl">Welcome to NocoDB!</div>
+
+      <div class="flex items-center flex-wrap justify-center gap-2 prose-lg leading-8">
+        To get started, either drop a <span class="flex items-center gap-2"><PhFileCsv /> CSV</span>,
+        <span class="flex items-center gap-2"><BiFiletypeJson /> JSON</span> or
+        <span class="flex items-center gap-2"><BiFiletypeXlsx /> Excel</span> file in here or click the button in the top-left of
+        this page.
+      </div>
+    </div>
+  </div>
 </template>