add button to delete one or more feature types

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',
@@ -445,6 +499,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>
 
@@ -478,6 +592,11 @@ export default {
 
   data() {
     return {
+      allFlagDeleteFeature: false,
+      typeToDelete: '',
+      modalAllDeleteOpen: false,
+      modalDeleteOpen: false,
+      checkedFeatures: [],
       geojsonImport: [],
       fileToImport: { name: "", size: 0 },
       slug: this.$route.params.slug,
@@ -505,10 +624,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",
@@ -541,7 +692,6 @@ export default {
       //console.log("Subsribe to project");
     },
   },
-
   created() {
     this.$store.dispatch("GET_PROJECT_INFO", this.slug);
   },