Skip to content
Snippets Groups Projects
Commit f1f42b31 authored by Sébastien DA ROCHA's avatar Sébastien DA ROCHA :bicyclist:
Browse files

Merge branch 'ticket/11084V2' into 'develop' 

fix ticket 11084

See merge request geocontrib/geocontrib-frontend!10
parents f26cb708 62abd707
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/views/feature/Feature_list.vue
+ 103
− 1
View file @ f1f42b31
...@@ -69,6 +69,29 @@ ...@@ -69,6 +69,29 @@
</div> </div>
</div> </div>
</div> </div>
<div v-if="project && feature_types" class="item right">
<div
v-if="checkedFeatures.length"
class="
ui
top
center
pointing
compact
button button-hover-red
"
data-tooltip="Effacer tous les types de signalements sélectionnés"
data-position="left center"
data-variation="mini"
>
<i
class="grey trash icon"
@click="modalAllDelete()"
></i>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -127,6 +150,10 @@ ...@@ -127,6 +150,10 @@
<table id="table-features" class="ui compact table"> <table id="table-features" class="ui compact table">
<thead> <thead>
<tr> <tr>
<th class="center">
</th>
<th class="center">Statut <i :class="{ down: isSortedAsc('statut'),up:isSortedDesc('statut') }" class="icon sort" @click="changeSort('statut')"/></th> <th class="center">Statut <i :class="{ down: isSortedAsc('statut'),up:isSortedDesc('statut') }" class="icon sort" @click="changeSort('statut')"/></th>
<th class="center">Type <i :class="{ down: isSortedAsc('type'),up:isSortedDesc('type') }" class="icon sort" @click="changeSort('type')"/></th> <th class="center">Type <i :class="{ down: isSortedAsc('type'),up:isSortedDesc('type') }" class="icon sort" @click="changeSort('type')"/></th>
<th class="center">Nom <i :class="{ down: isSortedAsc('nom'),up:isSortedDesc('nom') }" class="icon sort" @click="changeSort('nom')"/></th> <th class="center">Nom <i :class="{ down: isSortedAsc('nom'),up:isSortedDesc('nom') }" class="icon sort" @click="changeSort('nom')"/></th>
...@@ -139,6 +166,19 @@ ...@@ -139,6 +166,19 @@
v-for="(feature, index) in getPaginatedFeatures()" v-for="(feature, index) in getPaginatedFeatures()"
:key="index" :key="index"
> >
<td class="center">
<div class="ui checkbox">
<input
type="checkbox"
:id="feature.id"
:value="feature.id"
v-model="checkedFeatures"
:checked="checkedFeatures[feature.id]"
>
<label></label>
</div>
</td>
<td class="center"> <td class="center">
<div v-if="feature.properties.status.value == 'archived'" data-tooltip="Archivé"> <div v-if="feature.properties.status.value == 'archived'" data-tooltip="Archivé">
<i class="grey archive icon"></i> <i class="grey archive icon"></i>
...@@ -242,6 +282,41 @@ ...@@ -242,6 +282,41 @@
</div> </div>
</div> </div>
<!-- MODAL ALL DELETE FEATURE TYPE -->
<div
v-if="modalAllDeleteOpen"
class="ui dimmer modals page transition visible active"
style="display: flex !important"
>
<div
:class="[
'ui mini modal subscription',
{ 'active visible': modalAllDeleteOpen },
]"
>
<i @click="modalAllDeleteOpen = false" class="close icon"></i>
<div class="ui icon header">
<i class="trash alternate icon"></i>
Êtes-vous sûr de vouloir effacer
<span v-if="checkedFeatures.length == 1">
un signalement ?
</span>
<span v-else>
ces {{checkedFeatures.length}} signalements ?
</span>
</div>
<div class="actions">
<button
@click="deleteAllFeatureSelection()"
type="button"
class="ui red compact fluid button"
>
Confirmer la suppression
</button>
</div>
</div>
</div>
</div> </div>
</template> </template>
...@@ -264,6 +339,8 @@ export default { ...@@ -264,6 +339,8 @@ export default {
data() { data() {
return { return {
modalAllDeleteOpen: false,
checkedFeatures: [],
form: { form: {
type: { type: {
selected: null, selected: null,
...@@ -329,6 +406,31 @@ export default { ...@@ -329,6 +406,31 @@ export default {
}, },
methods: { methods: {
modalAllDelete(){
return (this.modalAllDeleteOpen = !this.modalAllDeleteOpen);
},
deleteFeature(feature){
const url=`${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}features/${feature.feature_id}`;
axios
.delete(url, {
})
.then(() => {
if(!this.modalAllDeleteOpen){
this.$router.go();
}
})
.catch(() => {
return false;
});
},
deleteAllFeatureSelection(){
let feature = {}
this.checkedFeatures.forEach(feature_id => {
feature = {'feature_id': feature_id};
this.deleteFeature(feature);
});
this.modalAllDelete();
},
getFeatureDisplayName(feature){ getFeatureDisplayName(feature){
return feature.properties.title || feature.id; return feature.properties.title || feature.id;
}, },
...@@ -372,7 +474,7 @@ export default { ...@@ -372,7 +474,7 @@ export default {
}) })
} }
return filterdFeatures.slice( return filterdFeatures.slice(
this.pagination.start, this.pagination.start,
this.pagination.end this.pagination.end
......
src/views/project/Project_detail.vue
+ 24
− 176
View file @ f1f42b31
...@@ -74,72 +74,37 @@ ...@@ -74,72 +74,37 @@
<div class="row"> <div class="row">
<div class="seven wide column"> <div class="seven wide column">
<div>
<span
v-if="checkedFeatures.length"
class="
ui
compact
small
icon
right
floated
button button-hover-green
"
data-tooltip="Effacer tous les types de signalements sélectionnés"
data-position="left center"
data-variation="mini"
>
<i
class="inverted grey trash icon"
@click="modalAllDelete()"
></i>
</span>
<h3 class="ui header">Types de signalements</h3>
</div>
<!-- // todo : Create endpoints for feature_types --> <!-- // todo : Create endpoints for feature_types -->
<div class="ui middle aligned divided list"> <div class="ui middle aligned divided list">
<div <div
v-for="(type, index) in feature_types" v-for="(type, index) in feature_types"
:key="type.slug" :key="type.title + '-' + index"
class="item" class="item"
> >
<div class="middle aligned content"> <div class="middle aligned content">
<div class="ui checkbox"> <router-link
<input :to="{
type="checkbox" name: 'details-type-signalement',
:id="index" params: { feature_type_slug: type.slug },
:value="type.slug" }"
v-model="checkedFeatures" >
:checked="checkedFeatures[index]" <img
> v-if="type.geom_type == 'point'"
<label> class="list-image-type"
<router-link src="@/assets/img/marker.png"
:to="{ />
name: 'details-type-signalement', <img
params: { feature_type_slug: type.slug }, v-if="type.geom_type == 'linestring'"
}" class="list-image-type"
> src="@/assets/img/line.png"
<img />
v-if="type.geom_type == 'point'" <img
class="list-image-type" v-if="type.geom_type == 'polygon'"
src="@/assets/img/marker.png" class="list-image-type"
/> src="@/assets/img/polygon.png"
<img />
v-if="type.geom_type == 'linestring'" {{ type.title }}
class="list-image-type" </router-link>
src="@/assets/img/line.png"
/>
<img
v-if="type.geom_type == 'polygon'"
class="list-image-type"
src="@/assets/img/polygon.png"
/>
{{ type.title }}
</router-link>
</label>
</div>
<!-- {% if project and feature_types and <!-- {% if project and feature_types and
permissions|lookup:'can_create_feature' %} --> permissions|lookup:'can_create_feature' %} -->
<!-- // todo: add permissions.can_create_feature and type.is_editable --> <!-- // todo: add permissions.can_create_feature and type.is_editable -->
...@@ -148,26 +113,6 @@ ...@@ -148,26 +113,6 @@
permissions.can_create_feature && permissions.can_create_feature &&
type.is_editable type.is_editable
" --> " -->
<div
v-if="checkFeature(type.slug)"
class="
ui
compact
small
icon
right
floated
button button-hover-green
"
data-tooltip="Effacer le type de signalement"
data-position="left center"
data-variation="mini"
>
<i
@click="modalDelete(type)"
class="inverted grey trash icon"></i>
</div>
<router-link <router-link
:to="{ :to="{
name: 'ajouter-signalement', name: 'ajouter-signalement',
...@@ -483,65 +428,6 @@ ...@@ -483,65 +428,6 @@
</div> </div>
</div> </div>
</div> </div>
<!-- MODAL DELETE FEATURE TYPE -->
<div
v-if="modalDeleteOpen"
class="ui dimmer modals page transition visible active"
style="display: flex !important"
>
<div
:class="[
'ui mini modal subscription',
{ 'active visible': modalDeleteOpen },
]"
>
<i @click="modalDeleteOpen = false" class="close icon"></i>
<div class="ui icon header">
<i class="trash alternate icon"></i>
Supprimer le type de signalement "{{typeToDelete.title}}"
</div>
<div class="actions">
<button
@click="deleteFeature(typeToDelete)"
type="button"
class="ui red compact fluid button"
>
Confirmer la suppression
</button>
</div>
</div>
</div>
<!-- MODAL ALL DELETE FEATURE TYPE -->
<div
v-if="modalAllDeleteOpen"
class="ui dimmer modals page transition visible active"
style="display: flex !important"
>
<div
:class="[
'ui mini modal subscription',
{ 'active visible': modalAllDeleteOpen },
]"
>
<i @click="modalAllDeleteOpen = false" class="close icon"></i>
<div class="ui icon header">
<i class="trash alternate icon"></i>
Êtes-vous sûr de vouloir effacer ces {{checkedFeatures.length}} signalements ?
</div>
<div class="actions">
<button
@click="deleteAllFeatureSelection()"
type="button"
class="ui red compact fluid button"
>
Confirmer la suppression
</button>
</div>
</div>
</div>
</div> </div>
</template> </template>
...@@ -578,11 +464,6 @@ export default { ...@@ -578,11 +464,6 @@ export default {
data() { data() {
return { return {
allFlagDeleteFeature: false,
typeToDelete: '',
modalAllDeleteOpen: false,
modalDeleteOpen: false,
checkedFeatures: [],
geojsonImport: [], geojsonImport: [],
fileToImport: { name: "", size: 0 }, fileToImport: { name: "", size: 0 },
slug: this.$route.params.slug, slug: this.$route.params.slug,
...@@ -611,39 +492,6 @@ export default { ...@@ -611,39 +492,6 @@ export default {
}, },
}, },
methods: { methods: {
modalAllDelete(){
return (this.modalAllDeleteOpen = !this.modalAllDeleteOpen);
},
modalDelete(type){
this.typeToDelete = type;
return (this.modalDeleteOpen = !this.modalDeleteOpen);
},
deleteFeature(type){
const url=`${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}feature-types/${type.slug}`;
axios
.delete(url, {
})
.then(() => {
if(!this.modalAllDeleteOpen){
this.modalDeleteOpen = !this.modalDeleteOpen
this.$router.go();
}
})
.catch(() => {
return false;
});
},
deleteAllFeatureSelection(){
let type = {}
this.checkedFeatures.forEach(slug => {
type = {'slug': slug};
this.deleteFeature(type);
});
this.modalAllDelete();
},
checkFeature(id){
return this.checkedFeatures.find(x => x === id);
},
refreshId() { refreshId() {
return "?ver=" + Math.random(); return "?ver=" + Math.random();
}, },
......
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