diff --git a/src/views/project/Project_detail.vue b/src/views/project/Project_detail.vue
index 4e8055af6c185ec594437934e0089ab258fb1bba..de55181f322b7ec0160dcd20940ed49385c031d5 100644
--- a/src/views/project/Project_detail.vue
+++ b/src/views/project/Project_detail.vue
@@ -74,38 +74,72 @@
<div class="row">
<div class="seven wide column">
- <h3 class="ui header">Types de signalements</h3>
+ <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.title + '-' + index"
+ :key="type.slug"
class="item"
>
<div class="middle aligned content">
- <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>
+ <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>
<!-- {% if project and feature_types and
permissions|lookup:'can_create_feature' %} -->
<!-- // todo: add permissions.can_create_feature and type.is_editable -->
@@ -114,6 +148,26 @@
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',
@@ -429,6 +483,66 @@
</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>
@@ -464,6 +578,11 @@ export default {
data() {
return {
+ allFlagDeleteFeature: false,
+ typeToDelete: '',
+ modalAllDeleteOpen: false,
+ modalDeleteOpen: false,
+ checkedFeatures: [],
geojsonImport: [],
fileToImport: { name: "", size: 0 },
slug: this.$route.params.slug,
@@ -492,10 +611,42 @@ 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();
},
-
toNewFeatureType() {
this.$router.push({
name: "ajouter-type-signalement",
@@ -534,7 +685,6 @@ export default {
.then((data) => (this.is_suscriber = data.is_suscriber));
},
},
-
created() {
this.$store.dispatch("GET_PROJECT_INFO", this.slug);
projectAPI