diff --git a/src/views/feature/Feature_list.vue b/src/views/feature/Feature_list.vue
index 6c347c7620e0ca65e43b352dd5c0b178f29cd8f8..8a2764cc2e69f5e25edc37309d966c198239711d 100644
--- a/src/views/feature/Feature_list.vue
+++ b/src/views/feature/Feature_list.vue
@@ -69,6 +69,29 @@
</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>
@@ -127,6 +150,10 @@
<table id="table-features" class="ui compact table">
<thead>
<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">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>
@@ -139,6 +166,19 @@
v-for="(feature, index) in getPaginatedFeatures()"
: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">
<div v-if="feature.properties.status.value == 'archived'" data-tooltip="Archivé">
<i class="grey archive icon"></i>
@@ -242,6 +282,41 @@
</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>
</template>
@@ -264,6 +339,8 @@ export default {
data() {
return {
+ modalAllDeleteOpen: false,
+ checkedFeatures: [],
form: {
type: {
selected: null,
@@ -329,6 +406,31 @@ export default {
},
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){
return feature.properties.title || feature.id;
},
@@ -372,7 +474,7 @@ export default {
})
}
-
+
return filterdFeatures.slice(
this.pagination.start,
this.pagination.end
diff --git a/src/views/project/Project_detail.vue b/src/views/project/Project_detail.vue
index de55181f322b7ec0160dcd20940ed49385c031d5..8bff78d9e0d9dbb71fe8672f0eeb4899fb0d4414 100644
--- a/src/views/project/Project_detail.vue
+++ b/src/views/project/Project_detail.vue
@@ -74,72 +74,37 @@
<div class="row">
<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 -->
<div class="ui middle aligned divided list">
<div
v-for="(type, index) in feature_types"
- :key="type.slug"
+ :key="type.title + '-' + index"
class="item"
>
<div class="middle aligned content">
- <div class="ui checkbox">
- <input
- type="checkbox"
- :id="index"
- :value="type.slug"
- v-model="checkedFeatures"
- :checked="checkedFeatures[index]"
- >
- <label>
- <router-link
- :to="{
- name: 'details-type-signalement',
- params: { feature_type_slug: type.slug },
- }"
- >
- <img
- v-if="type.geom_type == 'point'"
- class="list-image-type"
- src="@/assets/img/marker.png"
- />
- <img
- v-if="type.geom_type == 'linestring'"
- class="list-image-type"
- 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>
+ <router-link
+ :to="{
+ name: 'details-type-signalement',
+ params: { feature_type_slug: type.slug },
+ }"
+ >
+ <img
+ v-if="type.geom_type == 'point'"
+ class="list-image-type"
+ src="@/assets/img/marker.png"
+ />
+ <img
+ v-if="type.geom_type == 'linestring'"
+ class="list-image-type"
+ 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>
<!-- {% if project and feature_types and
permissions|lookup:'can_create_feature' %} -->
<!-- // todo: add permissions.can_create_feature and type.is_editable -->
@@ -148,26 +113,6 @@
permissions.can_create_feature &&
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
:to="{
name: 'ajouter-signalement',
@@ -483,65 +428,6 @@
</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>
</template>
@@ -578,11 +464,6 @@ export default {
data() {
return {
- allFlagDeleteFeature: false,
- typeToDelete: '',
- modalAllDeleteOpen: false,
- modalDeleteOpen: false,
- checkedFeatures: [],
geojsonImport: [],
fileToImport: { name: "", size: 0 },
slug: this.$route.params.slug,
@@ -611,39 +492,6 @@ export default {
},
},
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() {
return "?ver=" + Math.random();
},