Mercurial > gemma

changeset 3243:e9c143436432

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: diagram-template: improve Pdf-templates systemconfiguration * use selectbox instead of radio buttons to choose template type * make upload done only if template type is selected
author Fadi Abbud <fadi.abbud@intevation.de>
date Fri, 10 May 2019 16:13:59 +0200
parents 3b770f8273b6
children b27759d0cdff
files client/src/components/systemconfiguration/PDFTemplates.vue
diffstat 1 files changed, 32 insertions(+), 29 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/systemconfiguration/PDFTemplates.vue	Fri May 10 14:18:20 2019 +0200
+++ b/client/src/components/systemconfiguration/PDFTemplates.vue	Fri May 10 16:13:59 2019 +0200
@@ -45,30 +45,22 @@
           </div>
         </template>
       </UITableBody>
-      <div class="d-flex align-items-center">
-        <div class="form-check form-check-inline">
-          <input
-            class="form-check-input"
-            type="radio"
-            name="type"
-            v-model="type"
-            value="map"
-          />
-          <label class="form-check-label">Map-template</label>
-        </div>
-        <div class="form-check form-check-inline">
-          <input
-            class="form-check-input"
-            type="radio"
-            v-model="type"
-            value="diagram"
-          />
-          <label class="form-check-label">Diagram-template</label>
-        </div>
-        <button
-          class="btn btn-info btn-sm"
-          @click="$refs.uploadTemplate.click()"
+      <div class="d-flex flex-column mt-2 w-25 mr-auto">
+        <select
+          v-model="type"
+          class="form-control d-block custom-select-sm w-75 h-25"
         >
+          <option :value="null">
+            Select template type
+          </option>
+          <option value="map">
+            Map-template
+          </option>
+          <option value="diagram">
+            Diagram-template
+          </option>
+        </select>
+        <button class="btn btn-info btn-sm mt-1 w-75" @click="checkUpload">
           <font-awesome-icon
             icon="spinner"
             class="fa-spin fa-fw"
@@ -118,7 +110,7 @@
     return {
       templates: [],
       uploading: false,
-      type: "map"
+      type: null
     };
   },
   computed: {
@@ -136,6 +128,16 @@
     }
   },
   methods: {
+    // check if template type is selceted
+    checkUpload() {
+      if (this.type) {
+        this.$refs.uploadTemplate.click();
+      } else {
+        displayError({
+          message: this.$gettext("Please select template type")
+        });
+      }
+    },
     downloadTemplate(template) {
       if (template) {
         var templateData = "";
@@ -193,12 +195,12 @@
               "Uploaded file does not contain valid json data."
             )
           });
-          //allow the user to upload the same file
-          //if user wants to upload the same file after edit it.
+          // allow the user to upload the same file
+          // if user wants to upload the same file after edit it.
           this.$refs.uploadTemplate.value = null;
         }
         if (template.name) {
-          //check if an element in the uploaded file does not match the predefind template-elements
+          // check if an element in the uploaded file does not match the predefind template-elements
           let checkElement = false;
           template.elements.forEach(e => {
             if (
@@ -224,7 +226,7 @@
                   e.type +
                   this.$gettext(" does not match any template's element")
               });
-              //allow the user to upload the same file
+              // allow the user to upload the same file
               this.$refs.uploadTemplate.value = null;
             }
           });
@@ -277,10 +279,11 @@
               "The provided template has no name property."
             )
           });
-          //allow the user to upload the same file
+          // allow the user to upload the same file
           this.$refs.uploadTemplate.value = null;
         }
       };
+
       reader.onerror = error => console.log(error);
       reader.readAsText(this.$refs.uploadTemplate.files[0]);
     },