add button Créer un nouveau type de signalement avec un geojson

src/views/feature_type/Feature_type_detail.vue

@@ -228,7 +228,6 @@ export default {
       if (this.filenameToImport.size > 0){
         var formData = new FormData();
         formData.append("json_file", this.filenameToImport);
-        console.log(formData)
         let url = process.env.VUE_APP_URL_BASE + 'projet/' + this.$route.params.slug + '/type-signalement/'+this.$route.params.feature_type_slug + '/importer-geojson/' ;
         axios.post(url, formData, { headers: {
             'Content-Type': 'multipart/form-data'
@@ -237,7 +236,7 @@ export default {
           .then((response) => {
             if (response.status == 200){
               this.getImports()
-              // TODO: RELOAD DERNIER SIGNALEMENTS
+              // TODO : RELOAD DERNIER SIGNALEMENTS
             }
           })
           .catch(err => {

src/views/project/Project_detail.vue

@@ -150,7 +150,7 @@
                 <router-link
                   :to="{
                     name: 'editer-type-signalement',
-                    params: { slug_type_signal: type.title },
+                    params: { slug_type_signal: type.slug },
                   }"
                   v-if="project"
                   class="
@@ -176,25 +176,60 @@
             </div>
           </div>
           <!-- // todo: gérer permissions:  {% if project and permissions|lookup:'can_update_project' %} -->
-          <router-link
-            :to="{
-              name: 'ajouter-type-signalement',
-              params: { slug: project.slug },
-            }"
-            class="ui compact basic button button-hover-green"
-          >
-            <i class="ui plus icon"></i>Créer un nouveau type de signalement
-          </router-link>
-        </div>
-        <div class="seven wide column">
-          <router-link
-            :to="{ name: 'liste-signalements', params: { slug: project.slug } }"
-            class="item"
-          >
-            <div id="map"></div>
-          </router-link>
+          <div class="nouveau-type-signalement">
+            <router-link
+              :to="{
+                name: 'ajouter-type-signalement',
+                params: { slug: project.slug },
+              }"
+              class="ui compact basic button button-hover-green"
+            >
+              <i class="ui plus icon"></i>Créer un nouveau type de signalement
+            </router-link>
+          </div>
+          <div class="nouveau-type-signalement">
+            <div
+              class="ui compact basic button button-hover-green"
+              >
+            <div 
+             onclick="document.getElementById('json_file').click()"
+              >
+              <label
+                class="ui "
+                for="json_file"
+                >
+                <i class="ui plus icon"></i>
+                <span class="label">Créer un nouveau type de signalement avec un geojson</span>
+              </label>
+              <input
+                type="file"
+                accept="application/json, .json, .geojson"
+                style="display: none"
+                name="json_file"
+                id="json_file"
+                @change="onFileChange"
+                />
+            </div>
+          </div>
+          <br>
+          <div id="button-import" v-if="filenameToImport.size>0">
+            <button
+              :disabled="filenameToImport.size == 0"
+              @click="importGeoJson" class="ui fluid teal icon button">
+              <i class="upload icon"></i> Lancer l'import avec le fichier {{filenameToImport.name}}
+            </button>
+          </div>
         </div>
       </div>
+      <div class="seven wide column">
+        <router-link
+          :to="{ name: 'liste-signalements', params: { slug: project.slug } }"
+          class="item"
+        >
+          <div id="map"></div>
+        </router-link>
+      </div>
+      </div>
 
       <div class="row">
         <div class="fourteen wide column">
@@ -418,6 +453,7 @@
 </template>
 
 <script>
+import axios from 'axios';
 import frag from "vue-frag";
 import { mapGetters, mapState } from "vuex";
 
@@ -430,6 +466,7 @@ export default {
 
   data() {
     return {
+      filenameToImport: {name: '', size: 0},
       slug: this.$route.params.slug,
       isModalOpen: false,
       is_suscriber: false,
@@ -459,6 +496,37 @@ export default {
   },
 
   methods: {
+    importGeoJson() {
+      if (this.filenameToImport.size > 0){
+        var formData = new FormData();
+        formData.append("json_file", this.filenameToImport);
+        let url = process.env.VUE_APP_URL_BASE + 'projet/' + this.$route.params.slug + '/importer-geojson/' ;
+        axios.post(url, formData, { headers: {
+            'Content-Type': 'multipart/form-data'
+            }
+          })
+          .then((response) => {
+            if (response.status == 200){
+              console.log(response.data)
+              // TODO : Router :to="{
+              //                    name: 'ajouter-type-signalement',
+              //                    params: { slug: project.slug },
+              //                    }"
+
+            }
+          })
+          .catch(err => {
+            // TODO : HANDLER ERROR
+            console.log(err)
+          });
+      }
+    },
+    onFileChange(e) {
+      var files = e.target.files || e.dataTransfer.files;
+      if (!files.length)
+        return;
+      this.filenameToImport = files[0]
+    },
     subsribeProject() {
       console.log("Subsribe to project");
     },
@@ -483,4 +551,11 @@ export default {
   float: right;
   margin: 0 0 0 1em;
 }
+.nouveau-type-signalement{
+  padding-top: 1em;
+}
+
+#button-import{
+  padding-top: 0.5em;
+}
 </style>
\ No newline at end of file