Skip to content
Snippets Groups Projects
Commit 62abd707 authored by leandro's avatar leandro
Browse files

fix ticket 11084

parent b552e5c3
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 @ 62abd707
...@@ -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 @ 62abd707
...@@ -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