zynfly/sqliteviz
1
0
Fork 0
mirror of https://github.com/lana-k/sqliteviz.git synced 2025-12-07 02:28:54 +08:00
Code Issues Projects Releases Wiki Activity

DbUpload refactoring

Browse Source
This commit is contained in:
lana-k
2021-02-28 21:26:37 +01:00
parent 6cb0d2d95d
commit 43cfc8d815
1 changed files with 15 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/DbUpload.vue
View File

@@ -1,24 +1,18 @@
<template> <template>
<div class="db-upload-container"> <div class="db-upload-container">
<label for="assetsFieldHandle"> <div class="drop-area-container">
<div <div
class="drop-area" class="drop-area"
@dragover.prevent="state = 'dragover'" @dragover.prevent="state = 'dragover'"
@dragleave.prevent="state=''" @dragleave.prevent="state=''"
@drop.prevent="drop" @drop.prevent="drop"
@click="browse"
> >
<input
type="file"
id="assetsFieldHandle"
@change="loadDb"
ref="file"
accept=".db,.sqlite,.sqlite3"
/>
<div class="text"> <div class="text">
Drop the database file here or click to choose a file from your computer. Drop the database file here or click to choose a file from your computer.
</div> </div>
</div> </div>
</label> </div>
<div v-if="illustrated" id="img-container"> <div v-if="illustrated" id="img-container">
<img id="drop-file-top-img" :src="require('@/assets/images/top.svg')" /> <img id="drop-file-top-img" :src="require('@/assets/images/top.svg')" />
<img <img
@@ -48,6 +42,8 @@
</template> </template>
<script> <script>
import fu from '@/fileUtils'
export default { export default {
name: 'DbUpload', name: 'DbUpload',
props: { props: {
@@ -75,26 +71,29 @@ export default {
} }
}, },
methods: { methods: {
loadDb () { loadDb (file) {
this.state = 'drop' this.state = 'drop'
return Promise.all([this.$db.loadDb(this.$refs.file.files[0]), this.animationPromise]) return Promise.all([this.$db.loadDb(file), this.animationPromise])
.then(([{ dbName, schema }]) => { .then(([schema]) => {
this.$store.commit('saveSchema', { dbName, schema }) this.$store.commit('saveSchema', schema)
if (this.$route.path !== '/editor') { if (this.$route.path !== '/editor') {
this.$router.push('/editor') this.$router.push('/editor')
} }
}) })
}, },
browse () {
fu.getFileFromUser('.db,.sqlite,.sqlite3')
.then(this.loadDb)
},
drop (event) { drop (event) {
this.$refs.file.files = event.dataTransfer.files this.loadDb(event.dataTransfer.files[0])
this.loadDb()
} }
} }
} }
</script> </script>
<style scoped> <style scoped>
label { .drop-area-container {
display: inline-block; display: inline-block;
border: 1px dashed var(--color-border); border: 1px dashed var(--color-border);
padding: 8px; padding: 8px;
@@ -117,10 +116,6 @@ label {
height: 100%; height: 100%;
} }
input {
display: none;
}
#img-container { #img-container {
position: absolute; position: absolute;
top: calc(50% - 120px); top: calc(50% - 120px);