add import home page

This commit is contained in:
Cyberes 2024-06-11 16:16:04 -06:00
parent 69b13e4eb6
commit 45c86eb6d7
4 changed files with 91 additions and 20 deletions

View File

@ -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})

View File

@ -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>

View File

@ -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>

View File

@ -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',