From f4a280aee99749f3240ffe03ba7403d05ed07c27 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 21 Jul 2022 23:31:37 +0800
Subject: [PATCH] wip(gui-v2): file import dialog

---
 .../nc-gui-v2/components/dlg/FileImport.vue   | 76 +++++++++++++++++++
 1 file changed, 76 insertions(+)
 create mode 100644 packages/nc-gui-v2/components/dlg/FileImport.vue

diff --git a/packages/nc-gui-v2/components/dlg/FileImport.vue b/packages/nc-gui-v2/components/dlg/FileImport.vue
new file mode 100644
index 0000000000..cd96f989e0
--- /dev/null
+++ b/packages/nc-gui-v2/components/dlg/FileImport.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import type { UploadChangeParam } from 'ant-design-vue'
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n()
+
+interface Props {
+  modelValue: boolean
+  importType: 'csv' | 'json' | 'excel'
+}
+
+const { modelValue, importType } = defineProps<Props>()
+
+const emit = defineEmits(['update:modelValue'])
+const fileList = ref([])
+const handleDrop = (e: DragEvent) => {
+  console.log(e)
+}
+
+const uploadHint = computed(() => {
+  if (importType === 'excel') {
+    return t('msg.info.excelSupport')
+  }
+})
+
+const dialogShow = computed({
+  get() {
+    return modelValue
+  },
+  set(v) {
+    emit('update:modelValue', v)
+  },
+})
+
+const handleChange = (info: UploadChangeParam) => {
+  const status = info.file.status
+  if (status !== 'uploading') {
+    console.log(info.file, info.fileList)
+  }
+  if (status === 'done') {
+    console.log(`${info.file.name} file uploaded successfully.`)
+  } else if (status === 'error') {
+    console.log(`${info.file.name} file upload failed.`)
+  }
+}
+</script>
+
+<template>
+  <v-dialog
+    v-model="dialogShow"
+    persistent
+    max-width="550"
+    @keydown.esc="dialogShow = false"
+    @keydown.enter="$emit('create', table)"
+  >
+    <v-card class="">
+      <a-upload-dragger
+        v-model:fileList="fileList"
+        name="file"
+        :multiple="true"
+        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+        @change="handleChange"
+        @drop="handleDrop"
+      >
+        <p class="ant-upload-drag-icon">
+          <inbox-outlined></inbox-outlined>
+        </p>
+        <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>
+    </v-card>
+  </v-dialog>
+</template>
+
+<style scoped lang="scss"></style>
\ No newline at end of file