Browse Source

feat: import(wip)

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/789/head
Pranav C 3 years ago
parent
commit
66cb568e15
  1. 42
      packages/nc-gui/components/import/excelImport.vue
  2. 2
      packages/nc-gui/components/project/spreadsheet/components/editableCell/editableAttachmentCell.vue
  3. 20
      packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue
  4. 29
      packages/nc-gui/components/project/spreadsheet/views/xcGridView.vue
  5. 25
      packages/nc-gui/components/templates/editor.vue
  6. 23
      packages/nc-gui/pages/projects/index.vue

42
packages/nc-gui/components/import/excelImport.vue

@ -1,11 +1,3 @@
<script>
import CreateProjectFromTemplateBtn from '~/components/templates/createProjectFromTemplateBtn'
import TemplateEditor from '~/components/templates/editor'
export default {
components: { TemplateEditor, CreateProjectFromTemplateBtn }
}
</script>
<template> <template>
<div class="pt-10"> <div class="pt-10">
<v-dialog v-model="dropOrUpload" max-width="600"> <v-dialog v-model="dropOrUpload" max-width="600">
@ -84,7 +76,7 @@ export default {
<div class="d-flex"> <div class="d-flex">
<v-spacer /> <v-spacer />
<span class="caption pointer grey--text" @click="showMore = !showMore">{{ showMore ? 'Hide' : 'Show' }} more <span class="caption pointer grey--text" @click="showMore = !showMore">{{ showMore ? 'Hide' : 'Show' }} more
<v-icon small>mdi-menu-{{ showMore ? 'up' : 'down' }}</v-icon> <v-icon small color="grey lighten-1">mdi-menu-{{ showMore ? 'up' : 'down' }}</v-icon>
</span> </span>
</div> </div>
<div class="mb-2 pt-2 nc-excel-import-options" :style="{ maxHeight: showMore ? '100px' : '0'}"> <div class="mb-2 pt-2 nc-excel-import-options" :style="{ maxHeight: showMore ? '100px' : '0'}">
@ -133,12 +125,13 @@ export default {
</v-tooltip> </v-tooltip>
<v-dialog v-if="templateData" v-model="templateEditorModal" max-width="1000"> <v-dialog v-if="templateData" v-model="templateEditorModal" max-width="1000">
<v-card> <v-card class="pa-6">
<template-editor :project-template.sync="templateData" excel-import> <template-editor :project-template.sync="templateData" excel-import>
<template #toolbar="{valid}"> <template #toolbar="{valid}">
<h3 class="mt-2 grey--text"> <!-- <h3 class="mt-2 grey&#45;&#45;text">-->
Import Excel as Project : {{ filename }} <!-- Import Excel as Project -->
</h3> <!-- </h3>-->
<!-- <span class="grey&#45;&#45;text">Importing 2 sheets</span>-->
<v-spacer /> <v-spacer />
<create-project-from-template-btn <create-project-from-template-btn
@ -167,14 +160,14 @@ import ExcelTemplateAdapter from '~/components/import/templateParsers/ExcelTempl
export default { export default {
name: 'ExcelImport', name: 'ExcelImport',
components: {CreateProjectFromTemplateBtn, TemplateEditor}, components: { CreateProjectFromTemplateBtn, TemplateEditor },
props: { props: {
hideLabel: Boolean, hideLabel: Boolean,
value: Boolean value: Boolean
}, },
data() { data() {
return { return {
templateEditorModal:false, templateEditorModal: false,
valid: null, valid: null,
templateData: null, templateData: null,
importData: null, importData: null,
@ -198,6 +191,10 @@ export default {
} }
}, },
mounted() { mounted() {
if (this.$route && this.$route.query && this.$route.query.excelUrl) {
this.url = this.$route.query.excelUrl
this.loadUrl()
}
}, },
methods: { methods: {
@ -214,6 +211,8 @@ export default {
} }
}, },
async _file(file) { async _file(file) {
this.templateData = null
this.importData = null
this.$store.commit('loader/MutMessage', 'Loading excel file') this.$store.commit('loader/MutMessage', 'Loading excel file')
let i = 0 let i = 0
const int = setInterval(() => { const int = setInterval(() => {
@ -222,7 +221,8 @@ export default {
this.dropOrUpload = false this.dropOrUpload = false
const reader = new FileReader() const reader = new FileReader()
this.filename = file.name this.filename = file.name
reader.onload = async (e) => {
reader.onload = async(e) => {
const ab = e.target.result const ab = e.target.result
await this.parseAndExtractData('file', ab, file.name) await this.parseAndExtractData('file', ab, file.name)
this.$store.commit('loader/MutMessage', null) this.$store.commit('loader/MutMessage', null)
@ -256,11 +256,11 @@ export default {
templateGenerator.parse() templateGenerator.parse()
this.templateData = templateGenerator.getTemplate() this.templateData = templateGenerator.getTemplate()
this.importData = templateGenerator.getData() this.importData = templateGenerator.getData()
this.templateEditorModal = true; this.templateEditorModal = true
}, },
dropHandler(ev) { dropHandler(ev) {
this.dragOver = false; this.dragOver = false
console.log('File(s) dropped') console.log('File(s) dropped')
let file let file
if (ev.dataTransfer.items) { if (ev.dataTransfer.items) {
@ -272,7 +272,9 @@ export default {
file = ev.dataTransfer.files[0] file = ev.dataTransfer.files[0]
} }
if (!file) return if (!file) {
return
}
if (!/\.xls[xm]?$/.test(file.name)) { if (!/\.xls[xm]?$/.test(file.name)) {
return this.$toast.error('Dropped file is not an accepted file type. The accepted file types are .xlsx,.xls,.xlsm!').goAway(3000) return this.$toast.error('Dropped file is not an accepted file type. The accepted file types are .xlsx,.xls,.xlsm!').goAway(3000)
@ -287,7 +289,7 @@ export default {
}, },
async loadUrl() { async loadUrl() {
if (!this.$refs.form.validate()) { if ((this.$refs.form && !this.$refs.form.validate()) || !this.url) {
return return
} }

2
packages/nc-gui/components/project/spreadsheet/components/editableCell/editableAttachmentCell.vue

@ -6,7 +6,7 @@
@dragexit="dragOver = false" @dragexit="dragOver = false"
@dragleave="dragOver = false" @dragleave="dragOver = false"
@dragend="dragOver = false" @dragend="dragOver = false"
@drop.prevent="onFileDrop" @drop.prevent.stop="onFileDrop"
> >
<div v-show="(isForm || _isUIAllowed('tableAttachment')) && dragOver" class="drop-overlay"> <div v-show="(isForm || _isUIAllowed('tableAttachment')) && dragOver" class="drop-overlay">
<div> <div>

20
packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue

@ -140,6 +140,7 @@
/> />
<csv-export-import <csv-export-import
ref="csvExportImport"
:meta="meta" :meta="meta"
:nodes="nodes" :nodes="nodes"
:query-params="{ :query-params="{
@ -234,6 +235,7 @@
<xc-grid-view <xc-grid-view
:key="key + selectedViewId" :key="key + selectedViewId"
ref="ncgridview" ref="ncgridview"
droppable
:relation-type="relationType" :relation-type="relationType"
:columns-width.sync="columnsWidth" :columns-width.sync="columnsWidth"
:is-locked="isLocked" :is-locked="isLocked"
@ -252,6 +254,7 @@
:is-virtual="selectedView.type === 'vtable'" :is-virtual="selectedView.type === 'vtable'"
:api="api" :api="api"
:is-pk-avail="isPkAvail" :is-pk-avail="isPkAvail"
@drop="onFileDrop"
@onNewColCreation="onNewColCreation" @onNewColCreation="onNewColCreation"
@onCellValueChange="onCellValueChange" @onCellValueChange="onCellValueChange"
@insertNewRow="insertNewRow" @insertNewRow="insertNewRow"
@ -1104,6 +1107,23 @@ export default {
await this.loadTableData() await this.loadTableData()
// this.mapFieldsAndShowFields(); // this.mapFieldsAndShowFields();
}) })
},
onFileDrop(ev) {
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 && !file.name.endsWith('.csv')) {
return
}
this.$refs.csvExportImport.onCsvFileSelection(file)
} }
}, },
computed: { computed: {

29
packages/nc-gui/components/project/spreadsheet/views/xcGridView.vue

@ -1,5 +1,12 @@
<template> <template>
<div> <div
@dragover.prevent="dragOver = true"
@dragenter.prevent="dragOver = true"
@dragexit="dragOver = false"
@dragleave="dragOver = false"
@dragend="dragOver = false"
@drop.prevent.stop="onFileDrop"
>
<table <table
v-if="data" v-if="data"
class="xc-row-table nc-grid" class="xc-row-table nc-grid"
@ -22,7 +29,7 @@
class="grey-border caption font-wight-regular nc-grid-header-cell" class="grey-border caption font-wight-regular nc-grid-header-cell"
:class="$store.state.windows.darkTheme ? 'grey darken-3 grey--text text--lighten-1' : 'grey lighten-4 grey--text text--darken-2'" :class="$store.state.windows.darkTheme ? 'grey darken-3 grey--text text--lighten-1' : 'grey lighten-4 grey--text text--darken-2'"
:data-col="col.alias" :data-col="col.alias"
@xcresize="onresize(col.alias,$event)" @xcresize="onresize(col.alias,$event), log('xcresize')"
@xcresizing="onXcResizing(col.alias,$event)" @xcresizing="onXcResizing(col.alias,$event)"
@xcresized="resizingCol = null" @xcresized="resizingCol = null"
> >
@ -258,6 +265,7 @@ export default {
}, },
mixins: [colors], mixins: [colors],
props: { props: {
droppable: Boolean,
metas: Object, metas: Object,
relationType: String, relationType: String,
availableColumns: [Object, Array], availableColumns: [Object, Array],
@ -294,7 +302,8 @@ export default {
row: null, row: null,
col: null col: null
}, },
aggCount: [] aggCount: [],
dragOver: false
}), }),
computed: { computed: {
ids() { ids() {
@ -347,8 +356,13 @@ export default {
document.removeEventListener('keydown', this.onKeyDown) document.removeEventListener('keydown', this.onKeyDown)
}, },
methods: { methods: {
onFileDrop(event) {
this.$emit('drop', event)
},
isRequired(_columnObj, rowObj) { isRequired(_columnObj, rowObj) {
if (this.isPublicView) { return false } if (this.isPublicView) {
return false
}
let columnObj = _columnObj let columnObj = _columnObj
if (columnObj.bt) { if (columnObj.bt) {
@ -447,7 +461,9 @@ export default {
if (e.ctrlKey || if (e.ctrlKey ||
e.altKey || e.altKey ||
e.shiftKey || e.shiftKey ||
e.metaKey) { return } e.metaKey) {
return
}
if (e.key && e.key.length === 1) { if (e.key && e.key.length === 1) {
if (!this.isPkAvail && !this.data[this.selected.row].rowMeta.new) { if (!this.isPkAvail && !this.data[this.selected.row].rowMeta.new) {
@ -531,6 +547,9 @@ export default {
onXcResizing(_cn, width) { onXcResizing(_cn, width) {
this.resizingCol = _cn this.resizingCol = _cn
this.resizingColWidth = width this.resizingColWidth = width
},
log(e, s) {
console.log(e.target, s)
} }
} }
} }

25
packages/nc-gui/components/templates/editor.vue

@ -90,8 +90,27 @@
<v-form ref="form" v-model="valid"> <v-form ref="form" v-model="valid">
<v-row fluid class="justify-center"> <v-row fluid class="justify-center">
<v-col cols="12"> <v-col cols="12">
<v-card> <v-card class="elevation-0">
<v-card-text> <v-card-text>
<div v-if="!viewMode" class="mx-auto" style="max-width:400px">
<div class="mt-1">
<v-text-field
ref="project"
v-model="project.title"
class="caption"
outlined
dense
label="Project Name"
persistent-hint
:rules="[v => !!v || 'Project name required'] "
/>
</div>
</div>
<p v-if="project.tables" class="caption grey--text">
{{ project.tables.length }} sheet{{ project.tables.length > 1 ? 's' :'' }} are available for import
</p>
<v-expansion-panels <v-expansion-panels
v-if="project.tables && project.tables.length" v-if="project.tables && project.tables.length"
v-model="expansionPanel" v-model="expansionPanel"
@ -425,7 +444,7 @@
<!-- <v-btn small color='primary' class='mt-10' @click='createTablesDialog = true'>New Table</v-btn>--> <!-- <v-btn small color='primary' class='mt-10' @click='createTablesDialog = true'>New Table</v-btn>-->
<div v-if="!viewMode" class="mx-auto" style="max-width:600px"> <div v-if="!viewMode" class="mx-auto" style="max-width:600px">
<div class="mt-10"> <!-- <div class="mt-10">
<v-text-field <v-text-field
ref="project" ref="project"
v-model="project.title" v-model="project.title"
@ -435,7 +454,7 @@
label="Project Name" label="Project Name"
:rules="[v => !!v || 'Project name required'] " :rules="[v => !!v || 'Project name required'] "
/> />
</div> </div>-->
<!-- <!--
<div <div
class="rounded pa-5 mb-5 d-100 text-center caption" class="rounded pa-5 mb-5 d-100 text-center caption"

23
packages/nc-gui/pages/projects/index.vue

@ -1,5 +1,17 @@
<template> <template>
<v-container fluid class="text-center px-10 pt-10 nc-container"> <v-container
fluid
class="text-center px-10 pt-10 nc-container"
@dragover.prevent="dragOver = true"
@dragenter.prevent="dragOver = true"
@dragexit="dragOver = false"
@dragleave="dragOver = false"
@dragend="dragOver = false"
@drop.prevent.stop="onFileDrop"
>
<!-- <v-overlay :value="dragOver" />-->
<!-- <sponsor-overlay v-if="overlayVisible && projects && projects.length"--> <!-- <sponsor-overlay v-if="overlayVisible && projects && projects.length"-->
<!-- @close="overlayVisible = false"></sponsor-overlay>--> <!-- @close="overlayVisible = false"></sponsor-overlay>-->
<v-row> <v-row>
@ -745,6 +757,7 @@ export default {
}, },
data() { data() {
return { return {
dragOver: false,
excelImportModal: false, excelImportModal: false,
templatesModal: false, templatesModal: false,
overlayVisible: true, overlayVisible: true,
@ -877,8 +890,16 @@ export default {
// }, 200) // }, 200)
await this.projectsLoad() await this.projectsLoad()
// await this.openProjectIfQueryParamFound() // await this.openProjectIfQueryParamFound()
if (this.$route && this.$route.query && this.$route.query.excelUrl) {
this.excelImportModal = true
}
}, },
methods: { methods: {
async onFileDrop(e) {
this.excelImportModal = true
this.$refs.excelImport.dropHandler(e)
},
async stopProject(project) { async stopProject(project) {
this.dialogShow = true this.dialogShow = true
this.confirmMessage = this.confirmMessage =

Loading…
Cancel
Save