ayanova/src/views/adm-import.vue

@@ -1,63 +1,59 @@
 <template>
-  <div>
+  <div v-if="formState.ready">
-    <v-row>
+    <gz-error :error-box-message="formState.errorBoxMessage"></gz-error>
-      <v-col cols="12" sm="6" lg="4" xl="3">
+    <div>
-        <v-select
+      <v-row>
-          ref="ayaType"
+        <v-col cols="12" sm="6" lg="4" xl="3">
-          v-model="ayaType"
+          <v-select
-          :items="selectLists.importableAyaTypes"
+            ref="ayaType"
-          item-text="name"
+            v-model="ayaType"
-          item-value="id"
+            :items="selectLists.importableAyaTypes"
-          :label="$ay.t('AyaType')"
+            item-text="name"
-          data-cy="ayaType"
+            item-value="id"
-        ></v-select>
+            :label="$ay.t('AyaType')"
-      </v-col>
+            data-cy="ayaType"
-      <v-col cols="12" sm="6" lg="4" xl="3">
+          ></v-select>
-        <v-checkbox
+        </v-col>
-          v-model="doImport"
+        <v-col v-if="ayaType != 0" cols="12" sm="6" lg="4" xl="3">
-          :label="$ay.t('ImportNewRecords')"
+          <v-file-input
-        ></v-checkbox>
+            v-model="uploadFile"
-        <v-checkbox
+            :label="$ay.t('Import')"
-          v-model="doUpdate"
+            accept=".json, .csv, application/json, text/csv"
-          :label="$ay.t('UpdateExistingRecords')"
+            prepend-icon="$ayiFileUpload"
-          color="warning"
+            show-size
-        ></v-checkbox>
+          ></v-file-input
-      </v-col>
+          ><v-btn
-      <!-- <v-col cols="12" sm="6" lg="4" xl="3">
+            v-if="importable"
-        <v-checkbox
+            :loading="uploading"
-          v-model="doUpdate"
+            color="primary"
-          :label="$ay.t('UpdateExisting')"
+            text
-        ></v-checkbox>
+            @click="process"
-      </v-col> -->
+            >{{ $ay.t("Import") }}</v-btn
+          >
+        </v-col>
+        <v-col v-if="ayaType != 0" cols="12" sm="6" lg="4" xl="3">
+          <v-checkbox
+            v-model="doImport"
+            :label="$ay.t('ImportNewRecords')"
+          ></v-checkbox>
+          <v-checkbox
+            v-model="doUpdate"
+            :label="$ay.t('UpdateExistingRecords')"
+            color="warning"
+          ></v-checkbox>
+        </v-col>
 
-      <v-col cols="12" sm="6" lg="4" xl="3">
+        <v-col v-if="outputText != null" cols="12">
-        <v-file-input
+          <v-textarea
-          v-model="uploadFile"
+            v-model="outputText"
-          :label="$ay.t('Import')"
+            full-width
-          accept=".json, .csv, application/json, text/csv"
+            readonly
-          prepend-icon="$ayiFileUpload"
+            auto-grow
-          show-size
+            data-cy="outputText"
-        ></v-file-input
+          ></v-textarea>
-        ><v-btn
+        </v-col>
-          v-if="importable"
+      </v-row>
-          :loading="uploading"
+    </div>
-          color="primary"
-          text
-          @click="process"
-          >{{ $ay.t("Import") }}</v-btn
-        >
-      </v-col>
-
-      <v-col v-if="outputText != null" cols="12">
-        <v-textarea
-          v-model="outputText"
-          full-width
-          readonly
-          auto-grow
-          data-cy="outputText"
-        ></v-textarea>
-      </v-col>
-    </v-row>
   </div>
 </template>
 <script>
@@ -75,7 +71,17 @@ export default {
       doUpdate: false,
       outputText: null,
       rights: window.$gz.role.defaultRightsObject(),
-      uploading: false
+      uploading: false,
+      formState: {
+        ready: false,
+        dirty: false,
+        valid: true,
+        readOnly: false,
+        loading: true,
+        errorBoxMessage: null,
+        appError: null,
+        serverError: {}
+      }
     };
   },
   computed: {
@@ -95,15 +101,20 @@ export default {
     await fetchTranslatedText(this);
     await populateSelectionLists(this);
     generateMenu(this);
+    this.formState.ready = true;
   },
   beforeDestroy() {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
   methods: {
     async process() {
+      if (this.uploading) {
+        return;
+      }
       if (!this.uploadFile) {
         return;
       }
+      this.uploading = true;
       this.outputText = null;
       try {
         let fileType = this.uploadFile.type.toLowerCase();
@@ -150,12 +161,12 @@ export default {
         await this.upload(dat);
       } catch (error) {
         window.$gz.errorHandler.handleFormError(error);
+      } finally {
+        this.uploading = false;
       }
     },
     async upload(dat) {
       try {
-        this.uploading = true;
-
         if (this.doUpdate == true) {
           let dialogResult = await window.$gz.dialog.confirmGeneric(
             "AdminImportUpdateWarning",
@@ -186,8 +197,6 @@ export default {
         }
       } catch (error) {
         window.$gz.errorHandler.handleFormError(error);
-      } finally {
-        this.uploading = false;
       }
     },
     handleSelected() {}