add import home page

src/geo-backend/data/views/import_item.py

@@ -82,8 +82,9 @@ def fetch_queued(request):
     data = json.loads(json.dumps(list(user_items), cls=DjangoJSONEncoder))
     for i, item in enumerate(data):
         count = len(item['geojson'].get('features', []))
-        del item['geojson']
+        item['processing'] = len(item['geojson']) == 0
         item['feature_count'] = count
+        del item['geojson']
     return JsonResponse({'data': data})
 
 

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

@@ -0,0 +1,84 @@
+<template>
+  <div class="mb-10">
+    <div>
+      <a href="/#/import/upload">Upload Files</a>
+    </div>
+    <div>
+      <button @click="fetchQueueList">Refresh</button>
+    </div>
+
+    <table>
+      <thead>
+      <tr>
+        <th>File Name</th>
+        <th>Features</th>
+        <th></th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr v-for="(item, index) in processQueue" :key="`item-${index}`">
+        <td>
+          <a :href="`/#/import/process/${item.id}`">{{ item.original_filename }}</a>
+        </td>
+        <td>
+          {{ item.processing === true ? "processing" : item.feature_count }}
+        </td>
+        <td>
+          <button @click="deleteItem(item.id)">Delete</button>
+        </td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+import {mapState} from "vuex"
+import {authMixin} from "@/assets/js/authMixin.js";
+import axios from "axios";
+
+
+export default {
+  computed: {
+    ...mapState(["userInfo"]),
+  },
+  components: {},
+  mixins: [authMixin],
+  data() {
+    return {
+      processQueue: []
+    }
+  },
+  methods: {
+    async fetchQueueList() {
+      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() {
+    await this.fetchQueueList()
+  },
+  // async mounted() {
+  // },
+  // beforeRouteEnter(to, from, next) {
+  //   next(async vm => {
+  //   })
+  // },
+  watch: {},
+}
+</script>
+
+<style scoped>
+</style>

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

@@ -15,25 +15,6 @@
   </div>
 
   <div v-if="uploadMsg !== ''" class="w-[90%] m-auto mt-10" v-html="uploadMsg"></div>
-
-  <table>
-    <thead>
-    <tr>
-      <th>File Name</th>
-      <th>Features</th>
-      <th></th>
-    </tr>
-    </thead>
-    <tbody>
-    <tr v-for="(item, index) in processQueue" :key="`item-${index}`">
-      <td><a :href="`/#/import/process/${item.id}`">{{ item.original_filename }}</a></td>
-      <td>{{ item.feature_count }}</td>
-      <td>
-        <button @click="deleteItem(item.id)">Delete</button>
-      </td>
-    </tr>
-    </tbody>
-  </table>
 </template>
 
 <script>

src/geo-frontend/src/router.js

@@ -10,6 +10,11 @@ const routes = [
         path: '/dashboard',
         name: 'Dashboard',
         component: () => import('./components/dashboard/Dashboard.vue'),
+    },
+        {
+        path: '/import',
+        name: 'Import',
+        component: () => import('./components/import/ImportHome.vue'),
     },
     {
         path: '/import/upload',