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

Merge branch 'ticket/11084' into 'develop'

add button to delete one or more feature types

See merge request geocontrib/geocontrib-frontend!6
parents 5f7b96c3 5577ba67
No related branches found
No related tags found
No related merge requests found
...@@ -74,38 +74,72 @@ ...@@ -74,38 +74,72 @@
<div class="row"> <div class="row">
<div class="seven wide column"> <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 --> <!-- // 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.title + '-' + index" :key="type.slug"
class="item" class="item"
> >
<div class="middle aligned content"> <div class="middle aligned content">
<router-link <div class="ui checkbox">
:to="{ <input
name: 'details-type-signalement', type="checkbox"
params: { feature_type_slug: type.slug }, :id="index"
}" :value="type.slug"
> v-model="checkedFeatures"
<img :checked="checkedFeatures[index]"
v-if="type.geom_type == 'point'" >
class="list-image-type" <label>
src="@/assets/img/marker.png" <router-link
/> :to="{
<img name: 'details-type-signalement',
v-if="type.geom_type == 'linestring'" params: { feature_type_slug: type.slug },
class="list-image-type" }"
src="@/assets/img/line.png" >
/> <img
<img v-if="type.geom_type == 'point'"
v-if="type.geom_type == 'polygon'" class="list-image-type"
class="list-image-type" src="@/assets/img/marker.png"
src="@/assets/img/polygon.png" />
/> <img
{{ type.title }} v-if="type.geom_type == 'linestring'"
</router-link> 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 <!-- {% 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 -->
...@@ -114,6 +148,26 @@ ...@@ -114,6 +148,26 @@
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',
...@@ -429,6 +483,66 @@ ...@@ -429,6 +483,66 @@
</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>
...@@ -464,6 +578,11 @@ export default { ...@@ -464,6 +578,11 @@ 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,
...@@ -492,10 +611,42 @@ export default { ...@@ -492,10 +611,42 @@ 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();
}, },
toNewFeatureType() { toNewFeatureType() {
this.$router.push({ this.$router.push({
name: "ajouter-type-signalement", name: "ajouter-type-signalement",
...@@ -534,7 +685,6 @@ export default { ...@@ -534,7 +685,6 @@ export default {
.then((data) => (this.is_suscriber = data.is_suscriber)); .then((data) => (this.is_suscriber = data.is_suscriber));
}, },
}, },
created() { created() {
this.$store.dispatch("GET_PROJECT_INFO", this.slug); this.$store.dispatch("GET_PROJECT_INFO", this.slug);
projectAPI projectAPI
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment