From f3e9261eda15b200e6ce5beefda5dfd63db573a7 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Fri, 22 Jul 2022 12:24:28 +0800
Subject: [PATCH] wip(gui-v2): DnD file uploader

---
 .../nc-gui-v2/components/dlg/FileImport.vue   | 53 +++++++++++++------
 1 file changed, 36 insertions(+), 17 deletions(-)

diff --git a/packages/nc-gui-v2/components/dlg/FileImport.vue b/packages/nc-gui-v2/components/dlg/FileImport.vue
index 578e370ad1..55191b05b0 100644
--- a/packages/nc-gui-v2/components/dlg/FileImport.vue
+++ b/packages/nc-gui-v2/components/dlg/FileImport.vue
@@ -1,7 +1,11 @@
 <script setup lang="ts">
+import { useToast } from 'vue-toastification'
 import type { UploadChangeParam } from 'ant-design-vue'
 import { useI18n } from 'vue-i18n'
 import MdiFileIcon from '~icons/mdi/file-plus-outline'
+import MdiFileUploadOutlineIcon from '~icons/mdi/file-upload-outline'
+import MdiLinkVariantIcon from '~icons/mdi/link-variant'
+import MdiCodeJSONIcon from '~icons/mdi/code-json'
 const { t } = useI18n()
 
 interface Props {
@@ -11,6 +15,7 @@ interface Props {
 
 const { modelValue, importType } = defineProps<Props>()
 
+const toast = useToast()
 const emit = defineEmits(['update:modelValue'])
 const activeKey = ref('upload')
 const fileList = ref([])
@@ -39,36 +44,45 @@ const handleChange = (info: UploadChangeParam) => {
     console.log(info.file, info.fileList)
   }
   if (status === 'done') {
-    console.log(`${info.file.name} file uploaded successfully.`)
+    toast.success(`${info.file.name} file uploaded successfully.`)
   } else if (status === 'error') {
-    console.log(`${info.file.name} file upload failed.`)
+    toast.error(`${info.file.name} file upload failed.`)
   }
 }
 </script>
 
 <template>
   <v-dialog v-model="dialogShow" persistent @keydown.esc="dialogShow = false">
-    <v-card style="height: 400px; width: 700px">
+    <v-card class="w-300 max-h-300">
       <a-tabs v-model:activeKey="activeKey" hide-add type="editable-card" :tab-position="top">
         <a-tab-pane key="upload" :closable="false">
           <template #tab>
-            <span>
-              <MdiTableIcon class="text-primary mdi-icons" />
+            <span class="flex items-center gap-2">
+              <MdiFileUploadOutlineIcon />
               Upload
             </span>
           </template>
-          <a-upload-dragger v-model:fileList="fileList" name="file" :multiple="true" @change="handleChange" @drop="handleDrop">
-            <MdiFileIcon />
-            <p class="ant-upload-text">Click or drag file to this area to upload</p>
-            <p class="ant-upload-hint">
-              {{ uploadHint }}
-            </p>
-          </a-upload-dragger>
+          <div class="pl-10 pr-10 pb-10 pt-5">
+            <a-upload-dragger
+              v-model:fileList="fileList"
+              name="file"
+              :multiple="true"
+              @change="handleChange"
+              @drop="handleDrop"
+              list-type="picture"
+            >
+              <MdiFileIcon size="large" />
+              <p class="ant-upload-text">Click or drag file to this area to upload</p>
+              <p class="ant-upload-hint">
+                {{ uploadHint }}
+              </p>
+            </a-upload-dragger>
+          </div>
         </a-tab-pane>
         <a-tab-pane v-if="importType === 'json'" key="json" :closable="false">
           <template #tab>
-            <span>
-              <MdiTableIcon class="text-primary mdi-icons" />
+            <span class="flex items-center gap-2">
+              <MdiCodeJSONIcon />
               Json String
             </span>
           </template>
@@ -76,8 +90,8 @@ const handleChange = (info: UploadChangeParam) => {
         </a-tab-pane>
         <a-tab-pane v-else key="url" :closable="false">
           <template #tab>
-            <span>
-              <MdiTableIcon class="text-primary mdi-icons" />
+            <span class="flex items-center gap-2">
+              <MdiLinkVariantIcon />
               Url
             </span>
           </template>
@@ -88,4 +102,9 @@ const handleChange = (info: UploadChangeParam) => {
   </v-dialog>
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+:deep(.ant-upload-list) {
+  overflow: auto;
+  height: 300px;
+}
+</style>