improve upload flow

src/geo-frontend/src/components/import/ImportHome.vue

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

src/geo-frontend/src/components/import/Upload.vue

@@ -56,6 +56,7 @@ export default {
       let formData = new FormData()
       formData.append('file', this.file)
       try {
+        this.disableUpload = true
         const response = await axios.post('/api/data/item/import/upload/', formData, {
           headers: {
             '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.disableUpload = true
         await this.fetchQueueList()
         this.file = null
         document.getElementById("uploadInput").value = ""
@@ -82,18 +82,6 @@ export default {
       const response = await axios.get('/api/data/item/import/get/mine')
       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() {
   },