moved georef import into modal, improve import button style and code readability

src/views/feature/Feature_edit.vue

@@ -74,7 +74,7 @@
           <div v-frag v-if="feature_type && feature_type.geom_type === 'point'">
             <p>
               <button
-                @click="showGeoRef = true"
+                @click="toggleGeoRefModal"
                 id="add-geo-image"
                 type="button"
                 class="ui compact button"
@@ -84,44 +84,69 @@
               Vous pouvez utiliser une image géoréférencée pour localiser le
               signalement.
             </p>
-            <div v-if="showGeoRef">
-              <p>
-                Attention, si vous avez déjà saisi une géométrie, celle issue de
-                l'image importée l'écrasera.
-              </p>
-              <div class="field georef-btn">
-                <label>Image (png ou jpeg)</label>
-                <label class="ui icon button" for="image_file">
-                  <i class="file icon"></i>
-                  <span class="label">{{ geoRefFileLabel }}</span>
-                </label>
-                <input
-                  type="file"
-                  accept="image/jpeg, image/png"
-                  style="display: none"
-                  ref="file"
-                  v-on:change="handleFileUpload()"
-                  name="image_file"
-                  class="image_file"
-                  id="image_file"
-                />
-                <p class="error-message" style="color: red">
-                  {{ erreurUploadMessage }}
-                </p>
-              </div>
-              <button
-                @click="georeferencement()"
-                id="get-geom-from-image-file"
-                type="button"
-                class="ui positive right labeled icon button"
+
+            <div
+              v-if="showGeoRef"
+              class="ui dimmer modals page transition visible active"
+              style="display: flex !important"
+            >
+              <div
+                class="ui mini modal transition visible active"
+                style="display: block !important"
               >
-                Importer
-                <i class="checkmark icon"></i>
-              </button>
+                <i class="close icon" @click="toggleGeoRefModal"></i>
+                <div class="content">
+                  <h3>Importer une image géoréférencée</h3>
+                  <form
+                    id="form-geo-image"
+                    class="ui form"
+                    enctype="multipart/form-data"
+                  >
+                    <p>
+                      Attention, si vous avez déjà saisi une géométrie, celle
+                      issue de l'image importée l'écrasera.
+                    </p>
+                    <div class="field georef-btn">
+                      <label>Image (png ou jpeg)</label>
+                      <label class="ui icon button" for="image_file">
+                        <i class="file icon"></i>
+                        <span class="label">{{ geoRefFileLabel }}</span>
+                      </label>
+                      <input
+                        type="file"
+                        accept="image/jpeg, image/png"
+                        style="display: none"
+                        ref="file"
+                        v-on:change="handleFileUpload"
+                        name="image_file"
+                        class="image_file"
+                        id="image_file"
+                      />
+                      <p class="error-message" style="color: red">
+                        {{ erreurUploadMessage }}
+                      </p>
+                    </div>
+                    <button
+                      @click="georeferencement"
+                      id="get-geom-from-image-file"
+                      type="button"
+                      :class="[
+                        'ui compact button',
+                        file && !erreurUploadMessage ? 'green' : 'disabled',
+                        { red: erreurUploadMessage },
+                      ]"
+                    >
+                      <i class="plus icon"></i>
+                      Importer
+                    </button>
+                  </form>
+                </div>
+              </div>
             </div>
+
             <p v-if="showGeoPositionBtn">
               <button
-                @click="create_point_geoposition()"
+                @click="create_point_geoposition"
                 id="create-point-geoposition"
                 type="button"
                 class="ui compact button"
@@ -471,7 +496,17 @@ export default {
       }
     },
 
+    toggleGeoRefModal() {
+      if (this.showGeoRef) {
+        //* when popup closes, empty form
+        this.erreurUploadMessage = "";
+        this.file = null;
+      }
+      this.showGeoRef = !this.showGeoRef;
+    },
+
     handleFileUpload() {
+      this.erreurUploadMessage = "";
       this.file = this.$refs.file.files[0];
     },
 
@@ -481,19 +516,17 @@ export default {
       let formData = new FormData();
       formData.append("image_file", this.file);
       console.log(">> formData >> ", formData);
-      let self = this;
       axios
         .post(url, formData, {
           headers: {
             "Content-Type": "multipart/form-data",
           },
         })
-        .then(function (response) {
+        .then((response) => {
           console.log("SUCCESS!!", response.data);
           if (response.data.geom.indexOf("POINT") >= 0) {
             let regexp = /POINT\s\((.*)\s(.*)\)/;
-            var arr = regexp.exec(response.data.geom);
-
+            let arr = regexp.exec(response.data.geom);
             let json = {
               type: "Feature",
               geometry: {
@@ -502,21 +535,21 @@ export default {
               },
               properties: {},
             };
-            self.updateMap(json);
-            self.updateGeomField(json);
+            this.updateMap(json);
+            this.updateGeomField(json);
             // Set Attachment
-            self.addAttachment({
+            this.addAttachment({
               title: "Localisation",
               info: "",
               id: "loc",
-              attachment_file: self.file.name,
-              fileToImport: self.file,
+              attachment_file: this.file.name,
+              fileToImport: this.file,
             });
           }
         })
-        .catch(function (response) {
+        .catch((response) => {
           console.log("FAILURE!!");
-          self.erreurUploadMessage = response.data.message;
+          this.erreurUploadMessage = response.data.message;
         });
     },
 
@@ -1002,4 +1035,9 @@ export default {
 .ui.segment {
   margin: 1rem 0 !important;
 }
+/* override to display buttons under the dimmer of modal */
+.leaflet-top,
+.leaflet-bottom {
+  z-index: 800;
+}
 </style>