mirror of https://github.com/nocodb/nocodb
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
382 lines
12 KiB
382 lines
12 KiB
<template> |
|
<div :class="{'pt-10':!hideLabel}"> |
|
<v-dialog v-model="dropOrUpload" max-width="600"> |
|
<v-card max-width="600"> |
|
<v-tabs height="30"> |
|
<v-tab> |
|
<v-icon small class="mr-1"> |
|
mdi-file-upload-outline |
|
</v-icon> |
|
<span class="caption text-capitalize">Upload</span> |
|
</v-tab> |
|
<v-tab> |
|
<v-icon small class="mr-1"> |
|
mdi-link-variant |
|
</v-icon> |
|
<span class="caption text-capitalize">URL</span> |
|
</v-tab> |
|
|
|
<v-tab-item> |
|
<div class="nc-excel-import-tab-item "> |
|
<div |
|
class="nc-droppable d-flex align-center justify-center flex-column" |
|
:style="{ |
|
background : dragOver ? '#7772' : '' |
|
}" |
|
@click="$refs.file.click()" |
|
@drop.prevent="dropHandler" |
|
@dragover.prevent="dragOver = true" |
|
@dragenter.prevent="dragOver = true" |
|
@dragexit="dragOver = false" |
|
@dragleave="dragOver = false" |
|
@dragend="dragOver = false" |
|
> |
|
<x-icon :color="['primary','grey']" size="50"> |
|
mdi-file-plus-outline |
|
</x-icon> |
|
<p class="title mb-1 mt-2"> |
|
<!-- Select File to Upload--> |
|
{{ $t('msg.info.upload') }} |
|
</p> |
|
<p class="grey--text mb-1"> |
|
<!-- or drag and drop file--> |
|
{{ $t('msg.info.upload_sub') }} |
|
</p> |
|
|
|
<p v-if="quickImportType == 'excel'" class="caption grey--text"> |
|
<!-- Supported: .xls, .xlsx, .xlsm, .ods, .ots --> |
|
{{ $t('msg.info.excelSupport') }} |
|
</p> |
|
</div> |
|
</div> |
|
</v-tab-item> |
|
<v-tab-item> |
|
<div class="nc-excel-import-tab-item align-center"> |
|
<div class="pa-4 d-100 h-100"> |
|
<v-form ref="form" v-model="valid"> |
|
<div class="d-flex"> |
|
<!--label="Enter excel file url"--> |
|
<v-text-field |
|
v-model="url" |
|
hide-details="auto" |
|
type="url" |
|
:label="quickImportType == 'excel' ? $t('msg.info.excelURL') : $t('msg.info.csvURL') " |
|
class="caption" |
|
outlined |
|
dense |
|
:rules="[v => !!v || $t('general.required') ]" |
|
/> |
|
<v-btn v-t="['c:project:create:excel:load-url']" class="ml-3" color="primary" @click="loadUrl"> |
|
<!--Load--> |
|
{{ $t('general.load') }} |
|
</v-btn> |
|
</div> |
|
</v-form> |
|
</div> |
|
</div> |
|
</v-tab-item> |
|
</v-tabs> |
|
|
|
<div class="px-4 pb-2"> |
|
<div class="d-flex"> |
|
<v-spacer /> |
|
<span class="caption pointer grey--text" @click="showMore = !showMore"> |
|
{{ showMore ? $t('general.hideAll') : $t('general.showMore') }} |
|
<v-icon small color="grey lighten-1">mdi-menu-{{ showMore ? 'up' : 'down' }}</v-icon> |
|
</span> |
|
</div> |
|
<div class="mb-2 pt-2 nc-excel-import-options" :style="{ maxHeight: showMore ? '100px' : '0'}"> |
|
<p /> |
|
<!--hint="# of rows to parse to infer data type"--> |
|
<v-text-field |
|
v-model="parserConfig.maxRowsToParse" |
|
style="max-width: 250px" |
|
class="caption mx-auto" |
|
dense |
|
persistent-hint |
|
:hint="$t('msg.info.footMsg')" |
|
outlined |
|
type="number" |
|
/> |
|
</div> |
|
</div> |
|
</v-card> |
|
</v-dialog> |
|
|
|
<v-tooltip bottom> |
|
<template #activator="{on}"> |
|
<input |
|
v-if="quickImportType == 'excel'" |
|
ref="file" |
|
class="nc-excel-import-input" |
|
type="file" |
|
style="display: none" |
|
accept=".xlsx, .xls, .xlsm, .ods, .ots" |
|
@change="_change($event)" |
|
> |
|
<input |
|
v-if="quickImportType == 'csv'" |
|
ref="file" |
|
class="nc-excel-import-input" |
|
type="file" |
|
style="display: none" |
|
accept=".csv" |
|
@change="_change($event)" |
|
> |
|
<v-btn |
|
|
|
v-if="!hideLabel" |
|
small |
|
outlined |
|
v-on="on" |
|
@click="$refs.file.click()" |
|
> |
|
<v-icon small class="mr-1"> |
|
mdi-file-excel-outline |
|
</v-icon> |
|
<!--Import--> |
|
{{ $t('activity.import') }} |
|
</v-btn> |
|
</template> |
|
<span class="caption">Create template from Excel</span> |
|
</v-tooltip> |
|
|
|
<v-dialog v-if="templateData" v-model="templateEditorModal" max-width="1000"> |
|
<v-card class="pa-6" min-width="500"> |
|
<template-editor :project-template.sync="templateData" excel-import :quick-import-type="quickImportType"> |
|
<template #toolbar="{valid}"> |
|
<h3 class="mt-2 grey--text"> |
|
<!--Import Excel--> |
|
<span v-if="quickImportType === 'excel'"> |
|
{{ $t('activity.importExcel') }} |
|
</span> |
|
<!--Import CSV--> |
|
<span v-if="quickImportType === 'csv'"> |
|
{{ $t('activity.importCSV') }} |
|
</span> |
|
: {{ filename }} |
|
</h3> |
|
<v-spacer /> |
|
<v-spacer /> |
|
<create-project-from-template-btn |
|
:template-data="templateData" |
|
:import-data="importData" |
|
:import-to-project="importToProject" |
|
excel-import |
|
:valid="valid" |
|
create-gql-text="Import as GQL Project" |
|
create-rest-text="Import as REST Project" |
|
@closeModal="$emit('closeModal'),templateEditorModal = false" |
|
> |
|
<!--Import Excel--> |
|
<span v-if="quickImportType === 'excel'"> |
|
{{ $t('activity.importExcel') }} |
|
</span> |
|
<!--Import CSV--> |
|
<span v-if="quickImportType === 'csv'"> |
|
{{ $t('activity.importCSV') }} |
|
</span> |
|
</create-project-from-template-btn> |
|
</template> |
|
</template-editor> |
|
</v-card> |
|
</v-dialog> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
|
|
// import XLSX from 'xlsx' |
|
import TemplateEditor from '~/components/templates/Editor' |
|
import CreateProjectFromTemplateBtn from '~/components/templates/CreateProjectFromTemplateBtn' |
|
import ExcelUrlTemplateAdapter from '~/components/import/templateParsers/ExcelUrlTemplateAdapter' |
|
import ExcelTemplateAdapter from '~/components/import/templateParsers/ExcelTemplateAdapter' |
|
|
|
export default { |
|
name: 'QuickImport', |
|
components: { CreateProjectFromTemplateBtn, TemplateEditor }, |
|
props: { |
|
hideLabel: Boolean, |
|
value: Boolean, |
|
importToProject: Boolean, |
|
quickImportType: String |
|
}, |
|
data() { |
|
return { |
|
templateEditorModal: false, |
|
valid: null, |
|
templateData: null, |
|
importData: null, |
|
dragOver: false, |
|
url: '', |
|
showMore: false, |
|
parserConfig: { |
|
maxRowsToParse: 500 |
|
}, |
|
filename: '' |
|
} |
|
}, |
|
computed: { |
|
dropOrUpload: { |
|
set(v) { |
|
this.$emit('input', v) |
|
}, |
|
get() { |
|
return this.value |
|
} |
|
} |
|
}, |
|
mounted() { |
|
if (this.$route && this.$route.query && this.$route.query.excelUrl) { |
|
this.url = this.$route.query.excelUrl |
|
this.loadUrl() |
|
} |
|
}, |
|
methods: { |
|
|
|
selectFile() { |
|
this.$refs.file.files = null |
|
this.$refs.file.click() |
|
}, |
|
|
|
_change(event) { |
|
const files = event.target.files |
|
if (files && files[0]) { |
|
this._file(files[0]) |
|
event.target.value = '' |
|
} |
|
}, |
|
async _file(file) { |
|
this.templateData = null |
|
this.importData = null |
|
this.$store.commit('loader/MutMessage', 'Loading excel file') |
|
let i = 0 |
|
const int = setInterval(() => { |
|
this.$store.commit('loader/MutMessage', `Loading excel file${'.'.repeat(++i % 4)}`) |
|
}, 1000) |
|
this.dropOrUpload = false |
|
const reader = new FileReader() |
|
this.filename = file.name |
|
|
|
reader.onload = async(e) => { |
|
const ab = e.target.result |
|
await this.parseAndExtractData('file', ab, file.name) |
|
this.$store.commit('loader/MutMessage', null) |
|
|
|
clearInterval(int) |
|
} |
|
|
|
const handleEvent = (event) => { |
|
this.$store.commit('loader/MutMessage', `${event.type}: ${event.loaded} bytes transferred`) |
|
} |
|
|
|
reader.addEventListener('progress', handleEvent) |
|
reader.onerror = (e) => { |
|
console.log('error', e) |
|
this.$store.commit('loader/MutClear') |
|
} |
|
reader.readAsArrayBuffer(file) |
|
}, |
|
|
|
async parseAndExtractData(type, val, name) { |
|
try { |
|
let templateGenerator |
|
this.templateData = null |
|
this.importData = null |
|
switch (type) { |
|
case 'file': |
|
templateGenerator = new ExcelTemplateAdapter(name, val, this.parserConfig) |
|
break |
|
case 'url': |
|
templateGenerator = new ExcelUrlTemplateAdapter(val, this.$store, this.parserConfig, this.$api) |
|
break |
|
} |
|
await templateGenerator.init() |
|
templateGenerator.parse() |
|
this.templateData = templateGenerator.getTemplate() |
|
this.importData = templateGenerator.getData() |
|
this.templateEditorModal = true |
|
} catch (e) { |
|
console.log(e) |
|
this.$toast |
|
.error(await this._extractSdkResponseErrorMsg(e)) |
|
.goAway(3000) |
|
} |
|
}, |
|
|
|
dropHandler(ev) { |
|
this.dragOver = false |
|
let file |
|
if (ev.dataTransfer.items) { |
|
// Use DataTransferItemList interface to access the file(s) |
|
if (ev.dataTransfer.items.length && ev.dataTransfer.items[0].kind === 'file') { |
|
file = ev.dataTransfer.items[0].getAsFile() |
|
} |
|
} else if (ev.dataTransfer.files.length) { |
|
file = ev.dataTransfer.files[0] |
|
} |
|
|
|
if (!file) { |
|
return |
|
} |
|
|
|
if (this.quickImportType === 'excel') { |
|
if (!/.*\.(xls|xlsx|xlsm|ods|ots)/.test(file.name)) { |
|
return this.$toast.error('Dropped file is not an accepted file type. The accepted file types are .xls, .xlsx, .xlsm, .ods, .ots!').goAway(3000) |
|
} |
|
} else if (this.quickImportType === 'csv') { |
|
if (!/.*\.(csv)/.test(file.name)) { |
|
return this.$toast.error('Dropped file is not an accepted file type. The accepted file type is .csv!').goAway(3000) |
|
} |
|
} |
|
this._file(file) |
|
}, |
|
dragOverHandler(ev) { |
|
// Prevent default behavior (Prevent file from being opened) |
|
ev.preventDefault() |
|
}, |
|
|
|
async loadUrl() { |
|
if ((this.$refs.form && !this.$refs.form.validate()) || !this.url) { |
|
return |
|
} |
|
|
|
this.$store.commit('loader/MutMessage', 'Loading excel file from url') |
|
|
|
let i = 0 |
|
const int = setInterval(() => { |
|
this.$store.commit('loader/MutMessage', `Loading excel file${'.'.repeat(++i % 4)}`) |
|
}, 1000) |
|
|
|
this.dropOrUpload = false |
|
|
|
await this.parseAndExtractData('url', this.url, '') |
|
clearInterval(int) |
|
this.$store.commit('loader/MutClear') |
|
} |
|
|
|
} |
|
} |
|
</script> |
|
|
|
<style scoped> |
|
.nc-droppable { |
|
width: 100%; |
|
min-height: 200px; |
|
border-radius: 4px; |
|
border: 2px dashed #ddd; |
|
} |
|
|
|
.nc-excel-import-tab-item { |
|
min-height: 400px; |
|
padding: 20px; |
|
display: flex; |
|
align-items: stretch; |
|
width: 100%; |
|
} |
|
|
|
.nc-excel-import-options { |
|
transition: .4s max-height; |
|
overflow: hidden; |
|
} |
|
</style>
|
|
|