cyberes
/
geoserver
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

improve upload flow

This commit is contained in:
Cyberes 2024-06-14 12:19:38 -06:00
parent 45c86eb6d7
commit 93e2ef61fc
2 changed files with 21 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/geo-frontend/src/components/import/ImportHome.vue
View File

@ -10,6 +10,7 @@
<table> <table>
<thead> <thead>
<tr> <tr>
<th>ID</th>
<th>File Name</th> <th>File Name</th>
<th>Features</th> <th>Features</th>
<th></th> <th></th>
@ -17,6 +18,9 @@
</thead> </thead>
<tbody> <tbody>
<tr v-for="(item, index) in processQueue" :key="`item-${index}`"> <tr v-for="(item, index) in processQueue" :key="`item-${index}`">
<td>
<a :href="`/#/import/process/${item.id}`">{{ item.id }}</a>
</td>
<td> <td>
<a :href="`/#/import/process/${item.id}`">{{ item.original_filename }}</a> <a :href="`/#/import/process/${item.id}`">{{ item.original_filename }}</a>
</td> </td>
@ -24,7 +28,7 @@
{{ item.processing === true ? "processing" : item.feature_count }} {{ item.processing === true ? "processing" : item.feature_count }}
</td> </td>
<td> <td>
<button @click="deleteItem(item.id)">Delete</button> <button @click="deleteItem(item, index)">Delete</button>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -54,17 +58,21 @@ export default {
const response = await axios.get('/api/data/item/import/get/mine') const response = await axios.get('/api/data/item/import/get/mine')
this.processQueue = response.data.data this.processQueue = response.data.data
}, },
async deleteItem(id) { async deleteItem(item, index) {
try { if (window.confirm(`Delete "${item.original_filename}" (#${item.id})`))
const response = await axios.delete('/api/data/item/import/delete/' + id, { try {
headers: { this.processQueue.splice(index, 1)
'X-CSRFToken': this.userInfo.csrftoken // TODO: add a message popup when delete is completed
} const response = await axios.delete('/api/data/item/import/delete/' + item.id, {
}) headers: {
await this.fetchQueueList() 'X-CSRFToken': this.userInfo.csrftoken
} catch (error) { }
alert(`Failed to delete ${id}: ${error.message}`) })
} await this.fetchQueueList()
} catch (error) {
alert(`Failed to delete ${item.id}: ${error.message}`)
this.processQueue.splice(index, 0, item)
}
} }
}, },
async created() { async created() {

14
src/geo-frontend/src/components/import/Upload.vue
View File

@ -56,6 +56,7 @@ export default {
let formData = new FormData() let formData = new FormData()
formData.append('file', this.file) formData.append('file', this.file)
try { try {
this.disableUpload = true
const response = await axios.post('/api/data/item/import/upload/', formData, { const response = await axios.post('/api/data/item/import/upload/', formData, {
headers: { headers: {
'Content-Type': 'multipart/form-data', 'Content-Type': 'multipart/form-data',
@ -63,7 +64,6 @@ export default {
} }
}) })
this.uploadMsg = `<p>${capitalizeFirstLetter(response.data.msg).trim(".")}.</p><p><a href="/#/import/process/${response.data.id}">Continue to Import</a>` this.uploadMsg = `<p>${capitalizeFirstLetter(response.data.msg).trim(".")}.</p><p><a href="/#/import/process/${response.data.id}">Continue to Import</a>`
this.disableUpload = true
await this.fetchQueueList() await this.fetchQueueList()
this.file = null this.file = null
document.getElementById("uploadInput").value = "" document.getElementById("uploadInput").value = ""
@ -82,18 +82,6 @@ export default {
const response = await axios.get('/api/data/item/import/get/mine') const response = await axios.get('/api/data/item/import/get/mine')
this.processQueue = response.data.data this.processQueue = response.data.data
}, },
async deleteItem(id) {
try {
const response = await axios.delete('/api/data/item/import/delete/' + id, {
headers: {
'X-CSRFToken': this.userInfo.csrftoken
}
})
await this.fetchQueueList()
} catch (error) {
alert(`Failed to delete ${id}: ${error.message}`)
}
}
}, },
async created() { async created() {
}, },