Skip to content
Snippets Groups Projects
Commit 9f3ec697 authored by Timothee P's avatar Timothee P :sunflower:
Browse files

fix redundant calls to fetch imports

parent dc410867
No related branches found
No related tags found
1 merge request!553REDMINE_ISSUE-16897|Import signalement | tooltip masqué et problèmes affichage
Hide whitespace changes
Inline Side-by-side
src/components/ImportTask.vue
+ 40
− 42
View file @ 9f3ec697
......@@ -11,13 +11,16 @@
</div>
<div
v-for="importFile in importsForFeatureType"
v-for="importFile in imports"
:key="importFile.created_on"
class="filerow"
>
<div class="file-column">
<h4 class="ui header align-right">
<div :data-tooltip="importFile.geojson_file_name" class="ellipsis">
<div
:data-tooltip="importFile.geojson_file_name"
class="ellipsis"
>
{{ importFile.geojson_file_name }}
</div>
</h4>
......@@ -55,10 +58,10 @@
</span>
<span
v-if="importFile.status === 'pending'"
data-tooltip="Statut en attente. Clickez pour rafraichir."
data-tooltip="Statut en attente. Cliquez pour rafraichir."
>
<i
:class="['orange icon', ready && !reloading ? 'sync' : 'hourglass half rotate']"
:class="['orange icon', !reloading ? 'sync' : 'hourglass half rotate']"
aria-hidden="true"
@click="fetchImports()"
/>
......@@ -70,7 +73,6 @@
<script>
import { mapState } from 'vuex';
export default {
filters: {
......@@ -88,55 +90,51 @@ export default {
},
props: {
data: {
imports: {
type: Array,
default: null,
},
reloading: {
type: Boolean,
default: false,
}
},
data() {
return {
open: false,
ready: true,
reloading: false,
fetchCallCounter: 0,
};
},
computed: {
...mapState('feature', ['features']),
importsForFeatureType() {
return this.data.filter((el) => el.feature_type_title === this.$route.params.feature_type_slug);
}
},
watch: {
data(newValue) {
if (newValue) {
console.log(newValue);
this.ready = true;
}
},
mounted() {
this.fetchImports();
},
methods: {
fetchImports() {
this.$store.dispatch(
'feature-type/GET_IMPORTS', {
project_slug: this.$route.params.slug,
feature_type: this.$route.params.feature_type_slug
});
this.$store.dispatch('feature/GET_PROJECT_FEATURES', {
this.fetchCallCounter += 1; // register each time function is programmed to be called in order to avoid redundant calls
this.reloading = true;
// fetch imports
this.$store.dispatch('feature-type/GET_IMPORTS', {
project_slug: this.$route.params.slug,
feature_type__slug: this.$route.params.feature_type_slug
}).catch((err) => {
console.error(err);
});
//* show that the action was triggered, could be improved with animation (doesn't work)
this.ready = false;
feature_type: this.$route.params.feature_type_slug
})
.then((response) => {
if (response.data && response.data.some(el => el.status === 'pending')) {
// if there is still some pending imports re-fetch imports by calling this function again
setTimeout(() => {
if (this.fetchCallCounter <= 1 ) {
// if the function wasn't called more than once in the reload interval, then call it again
this.fetchImports();
}
this.fetchCallCounter -= 1; // decrease function counter
}, this.$store.state.configuration.VUE_APP_RELOAD_INTERVAL);
// give a bit time for loader to be seen by user if response was fast
setTimeout(() => {
this.reloading = false;
}, 1500);
} else {
// if no pending import, get last features
this.$emit('getLastFeatures');
}
});
},
},
};
......@@ -183,9 +181,9 @@ i.icon {
}
.rotate {
-webkit-animation:spin 1.5s cubic-bezier(0.7, 0.3, 0, 0) infinite;
-moz-animation:spin 1.5s cubic-bezier(0.7, 0.3, 0, 0) infinite;
animation:spin 1.5s cubic-bezier(0.7, 0.3, 0, 0) infinite;
-webkit-animation:spin 1.5s cubic-bezier(.3,.25,.15,1) infinite;
-moz-animation:spin 1.5s cubic-bezier(.3,.25,.15,1) infinite;
animation:spin 1.5s cubic-bezier(.3,.25,.15,1) infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(180deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(180deg); } }
......
src/views/FeatureType/FeatureTypeDetail.vue
+ 27
− 50
View file @ 9f3ec697
......@@ -189,9 +189,10 @@
Lancer l'import
</button>
<ImportTask
v-if="importFeatureTypeData && importFeatureTypeData.length"
:data="importFeatureTypeData"
:reloading="reloadingImport"
v-if="importsForFeatureType.length > 0"
ref="importTask"
:imports="importsForFeatureType"
@getLastFeatures="getLastFeatures"
/>
</div>
</div>
......@@ -260,9 +261,9 @@
</div>
<div
v-if="
importFeatureTypeData &&
importFeatureTypeData.length &&
importFeatureTypeData.some((el) => el.status === 'pending')
importsForFeatureType &&
importsForFeatureType.length &&
importsForFeatureType.some((el) => el.status === 'pending')
"
class="ui message info"
>
......@@ -430,10 +431,10 @@ export default {
},
showImport: false,
slug: this.$route.params.slug,
featureTypeSlug: this.$route.params.feature_type_slug,
featuresLoading: true,
loadingImportFile: false,
waitMessage: false,
reloadingImport: false,
exportFormat: 'GeoJSON',
exportLoading: false,
lastFeatures: [],
......@@ -460,6 +461,12 @@ export default {
'feature_types',
'importFeatureTypeData'
]),
importsForFeatureType() { // filter import task datas only for this feature type
if (this.importFeatureTypeData) {
return this.importFeatureTypeData.filter((el) => el.feature_type_title === this.featureTypeSlug);
}
return [];
},
CATALOG_NAME() {
return this.configuration.VUE_APP_CATALOG_NAME;
},
......@@ -469,7 +476,7 @@ export default {
structure: function () {
if (Object.keys(this.feature_types).length) {
const st = this.feature_types.find(
(el) => el.slug === this.$route.params.feature_type_slug
(el) => el.slug === this.featureTypeSlug
);
if (st) {
return st;
......@@ -477,7 +484,6 @@ export default {
}
return {};
},
orderedCustomFields() {
if (Object.keys(this.structure).length) {
return [...this.structure.customfield_set].sort(
......@@ -488,50 +494,25 @@ export default {
},
},
watch: {
structure(newValue) {
if (newValue.slug) {
this.GET_IMPORTS({
feature_type: this.$route.params.feature_type_slug
});
}
},
importFeatureTypeData: {
deep: true,
handler(newValue, oldValue) {
if (newValue && newValue.some(el => el.status === 'pending')) {
setTimeout(() => {
this.reloadingImport = true;
this.GET_IMPORTS({
feature_type: this.$route.params.feature_type_slug
}).then(()=> {
setTimeout(() => {
this.reloadingImport = false;
}, 1000);
});
}, this.$store.state.configuration.VUE_APP_RELOAD_INTERVAL);
} else if (oldValue && oldValue.some(el => el.status === 'pending')) {
this.getLastFeatures();
}
}
},
},
created() {
if (!this.project) {
this.$store.dispatch('projects/GET_PROJECT', this.slug);
this.$store.dispatch('projects/GET_PROJECT_INFO', this.slug);
}
this.SET_CURRENT_FEATURE_TYPE_SLUG(
this.$route.params.feature_type_slug
this.featureTypeSlug
);
this.$store.dispatch('feature-type/GET_IMPORTS', {
project_slug: this.$route.params.slug,
feature_type: this.$route.params.feature_type_slug
});
this.getLastFeatures();
if (this.$route.params.type === 'external-geojson') {
this.showImport = true;
}
},
methods: {
...mapMutations('feature-type', [
'SET_CURRENT_FEATURE_TYPE_SLUG',
......@@ -539,14 +520,13 @@ export default {
]),
...mapActions('feature-type', [
'SEND_FEATURES_FROM_CSV',
'GET_IMPORTS'
]),
...mapActions('feature', [
'GET_PROJECT_FEATURES'
]),
getLastFeatures() {
let url = `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${this.slug}/feature-paginated/?feature_type_slug=${this.$route.params.feature_type_slug}&ordering=-created_on&limit=5&offset=0`;
let url = `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${this.slug}/feature-paginated/?feature_type_slug=${this.featureTypeSlug}&ordering=-created_on&limit=5&offset=0`;
featureAPI.getPaginatedFeatures(url)
.then((data) => {
if (data) {
......@@ -559,11 +539,6 @@ export default {
toggleShowImport() {
this.showImport = !this.showImport;
if (this.showImport) {
this.GET_IMPORTS({
feature_type: this.$route.params.feature_type_slug
});
}
},
checkJsonValidity(json) {
......@@ -716,7 +691,7 @@ export default {
this.waitMessage = true;
const payload = {
slug: this.slug,
feature_type_slug: this.$route.params.feature_type_slug,
feature_type_slug: this.featureTypeSlug,
};
if (this.$route.params.geojson) { //* import after redirection, for instance with data from catalog
payload['geojson'] = this.$route.params.geojson;
......@@ -729,6 +704,7 @@ export default {
this.$store.dispatch('feature-type/SEND_FEATURES_FROM_GEOJSON', payload)
.then(() => {
this.waitMessage = false;
this.$refs.importTask.fetchImports();
});
},
......@@ -736,7 +712,7 @@ export default {
this.waitMessage = true;
const payload = {
slug: this.slug,
feature_type_slug: this.$route.params.feature_type_slug,
feature_type_slug: this.featureTypeSlug,
};
if (this.$route.params.csv) { //* import after redirection, for instance with data from catalog
payload['csv'] = this.$route.params.csv;
......@@ -749,13 +725,14 @@ export default {
this.SEND_FEATURES_FROM_CSV(payload)
.then(() => {
this.waitMessage = false;
this.$refs.importTask.fetchImports();
});
},
exportFeatures() {
this.exportLoading = true;
const url = `
${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${this.slug}/feature-type/${this.$route.params.feature_type_slug}/export/?format_export=${this.exportFormat.toLowerCase()}
${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${this.slug}/feature-type/${this.featureTypeSlug}/export/?format_export=${this.exportFormat.toLowerCase()}
`;
featureAPI.getFeaturesBlob(url)
.then((blob) => {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment