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. 36
      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

36
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>
<div class="pt-10">
<v-dialog v-model="dropOrUpload" max-width="600">
@ -84,7 +76,7 @@ export default {
<div class="d-flex">
<v-spacer />
<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>
</div>
<div class="mb-2 pt-2 nc-excel-import-options" :style="{ maxHeight: showMore ? '100px' : '0'}">
@ -133,12 +125,13 @@ export default {
</v-tooltip>
<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 #toolbar="{valid}">
<h3 class="mt-2 grey--text">
Import Excel as Project : {{ filename }}
</h3>
<!-- <h3 class="mt-2 grey&#45;&#45;text">-->
<!-- Import Excel as Project -->
<!-- </h3>-->
<!-- <span class="grey&#45;&#45;text">Importing 2 sheets</span>-->
<v-spacer />
<create-project-from-template-btn
@ -198,6 +191,10 @@ export default {
}
},
mounted() {
if (this.$route && this.$route.query && this.$route.query.excelUrl) {
this.url = this.$route.query.excelUrl
this.loadUrl()
}
},
methods: {
@ -214,6 +211,8 @@ export default {
}
},
async _file(file) {
this.templateData = null
this.importData = null
this.$store.commit('loader/MutMessage', 'Loading excel file')
let i = 0
const int = setInterval(() => {
@ -222,6 +221,7 @@ export default {
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)
@ -256,11 +256,11 @@ export default {
templateGenerator.parse()
this.templateData = templateGenerator.getTemplate()
this.importData = templateGenerator.getData()
this.templateEditorModal = true;
this.templateEditorModal = true
},
dropHandler(ev) {
this.dragOver = false;
this.dragOver = false
console.log('File(s) dropped')
let file
if (ev.dataTransfer.items) {
@ -272,7 +272,9 @@ export default {
file = ev.dataTransfer.files[0]
}
if (!file) return
if (!file) {
return
}
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)
@ -287,7 +289,7 @@ export default {
},
async loadUrl() {
if (!this.$refs.form.validate()) {
if ((this.$refs.form && !this.$refs.form.validate()) || !this.url) {
return
}

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

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

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

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

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

@ -1,5 +1,12 @@
<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
v-if="data"
class="xc-row-table nc-grid"
@ -22,7 +29,7 @@
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'"
:data-col="col.alias"
@xcresize="onresize(col.alias,$event)"
@xcresize="onresize(col.alias,$event), log('xcresize')"
@xcresizing="onXcResizing(col.alias,$event)"
@xcresized="resizingCol = null"
>
@ -258,6 +265,7 @@ export default {
},
mixins: [colors],
props: {
droppable: Boolean,
metas: Object,
relationType: String,
availableColumns: [Object, Array],
@ -294,7 +302,8 @@ export default {
row: null,
col: null
},
aggCount: []
aggCount: [],
dragOver: false
}),
computed: {
ids() {
@ -347,8 +356,13 @@ export default {
document.removeEventListener('keydown', this.onKeyDown)
},
methods: {
onFileDrop(event) {
this.$emit('drop', event)
},
isRequired(_columnObj, rowObj) {
if (this.isPublicView) { return false }
if (this.isPublicView) {
return false
}
let columnObj = _columnObj
if (columnObj.bt) {
@ -447,7 +461,9 @@ export default {
if (e.ctrlKey ||
e.altKey ||
e.shiftKey ||
e.metaKey) { return }
e.metaKey) {
return
}
if (e.key && e.key.length === 1) {
if (!this.isPkAvail && !this.data[this.selected.row].rowMeta.new) {
@ -531,6 +547,9 @@ export default {
onXcResizing(_cn, width) {
this.resizingCol = _cn
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-row fluid class="justify-center">
<v-col cols="12">
<v-card>
<v-card class="elevation-0">
<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-if="project.tables && project.tables.length"
v-model="expansionPanel"
@ -425,7 +444,7 @@
<!-- <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 class="mt-10">
<!-- <div class="mt-10">
<v-text-field
ref="project"
v-model="project.title"
@ -435,7 +454,7 @@
label="Project Name"
:rules="[v => !!v || 'Project name required'] "
/>
</div>
</div>-->
<!--
<div
class="rounded pa-5 mb-5 d-100 text-center caption"

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

@ -1,5 +1,17 @@
<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"-->
<!-- @close="overlayVisible = false"></sponsor-overlay>-->
<v-row>
@ -745,6 +757,7 @@ export default {
},
data() {
return {
dragOver: false,
excelImportModal: false,
templatesModal: false,
overlayVisible: true,
@ -877,8 +890,16 @@ export default {
// }, 200)
await this.projectsLoad()
// await this.openProjectIfQueryParamFound()
if (this.$route && this.$route.query && this.$route.query.excelUrl) {
this.excelImportModal = true
}
},
methods: {
async onFileDrop(e) {
this.excelImportModal = true
this.$refs.excelImport.dropHandler(e)
},
async stopProject(project) {
this.dialogShow = true
this.confirmMessage =

Loading…
Cancel
Save