re-factor / cleanup

ayanova/src/views/ops-notification-settings.vue

@@ -22,8 +22,8 @@
             <v-btn
               color="blue darken-1"
               text
-              @click="testConfiguration()"
               :disabled="!testAddress"
+              @click="testConfiguration()"
               >{{ $ay.t("OK") }}</v-btn
             >
           </v-card-actions>
@@ -38,38 +38,38 @@
 
             <v-col cols="12" sm="6" lg="4" xl="3">
               <v-checkbox
+                ref="smtpDeliveryActive"
                 v-model="obj.smtpDeliveryActive"
                 :readonly="formState.readOnly"
                 :label="$ay.t('SmtpDeliveryActive')"
                 :persistent-hint="true"
-                ref="smtpDeliveryActive"
                 :error-messages="
                   form().serverErrors(this, 'smtpDeliveryActive')
                 "
-                @change="fieldValueChanged('smtpDeliveryActive')"
                 data-cy="smtpDeliveryActive"
+                @change="fieldValueChanged('smtpDeliveryActive')"
               ></v-checkbox>
             </v-col>
             <v-col cols="12" sm="6" lg="4" xl="3">
               <v-text-field
+                ref="smtpServerAddress"
                 v-model="obj.smtpServerAddress"
                 :readonly="formState.readOnly"
                 :label="$ay.t('SmtpServerAddress')"
                 :rules="[form().required(this, 'smtpServerAddress')]"
                 :error-messages="form().serverErrors(this, 'smtpServerAddress')"
-                ref="smtpServerAddress"
                 data-cy="smtpServerAddress"
                 @input="fieldValueChanged('smtpServerAddress')"
               ></v-text-field>
             </v-col>
             <v-col cols="12" sm="6" lg="4" xl="3">
               <v-text-field
+                ref="smtpAccount"
                 v-model="obj.smtpAccount"
                 :readonly="formState.readOnly"
                 :label="$ay.t('SmtpAccount')"
                 :rules="[form().required(this, 'smtpAccount')]"
                 :error-messages="form().serverErrors(this, 'smtpAccount')"
-                ref="smtpAccount"
                 data-cy="smtpAccount"
                 @input="fieldValueChanged('smtpAccount')"
               ></v-text-field>
@@ -77,25 +77,25 @@
 
             <v-col cols="12" sm="6" lg="4" xl="3">
               <v-text-field
+                ref="smtpPassword"
                 v-model="obj.smtpPassword"
                 :readonly="formState.readOnly"
                 :label="$ay.t('SmtpPassword')"
                 :rules="[form().required(this, 'smtpPassword')]"
                 :error-messages="form().serverErrors(this, 'smtpPassword')"
-                ref="smtpPassword"
                 data-cy="smtpPassword"
                 @input="fieldValueChanged('smtpPassword')"
               ></v-text-field>
             </v-col>
             <v-col cols="12" sm="6" lg="4" xl="3">
               <v-select
+                ref="connectionSecurity"
                 v-model="obj.connectionSecurity"
                 :items="selectLists.NotifyMailSecurity"
                 item-text="name"
                 item-value="id"
                 :readonly="formState.readOnly"
                 :label="$ay.t('ConnectionSecurity')"
-                ref="connectionSecurity"
                 data-cy="connectionSecurity"
                 :rules="[
                   form().integerValid(this, 'connectionSecurity'),
@@ -109,6 +109,7 @@
             </v-col>
             <v-col cols="12" sm="6" lg="4" xl="3">
               <v-text-field
+                ref="smtpServerPort"
                 v-model="obj.smtpServerPort"
                 :readonly="formState.readOnly"
                 :label="$ay.t('SmtpServerPort')"
@@ -117,21 +118,20 @@
                   form().required(this, 'smtpServerPort')
                 ]"
                 :error-messages="form().serverErrors(this, 'smtpServerPort')"
-                ref="smtpServerPort"
                 data-cy="smtpServerPort"
-                @input="fieldValueChanged('smtpServerPort')"
                 type="number"
+                @input="fieldValueChanged('smtpServerPort')"
               ></v-text-field>
             </v-col>
 
             <v-col cols="12" sm="6" lg="4" xl="3">
               <v-text-field
+                ref="notifyFromAddress"
                 v-model="obj.notifyFromAddress"
                 :readonly="formState.readOnly"
                 :label="$ay.t('NotifyFromAddress')"
                 :rules="[form().required(this, 'notifyFromAddress')]"
                 :error-messages="form().serverErrors(this, 'notifyFromAddress')"
-                ref="notifyFromAddress"
                 data-cy="notifyFromAddress"
                 @input="fieldValueChanged('notifyFromAddress')"
               ></v-text-field>
@@ -139,12 +139,12 @@
 
             <v-col cols="12" sm="6" lg="4" xl="3">
               <v-text-field
+                ref="ayaNovaServerURL"
                 v-model="obj.ayaNovaServerURL"
                 :readonly="formState.readOnly"
                 :label="$ay.t('AyaNovaServerURL')"
                 :rules="[form().required(this, 'ayaNovaServerURL')]"
                 :error-messages="form().serverErrors(this, 'ayaNovaServerURL')"
-                ref="ayaNovaServerURL"
                 data-cy="ayaNovaServerURL"
                 @input="fieldValueChanged('ayaNovaServerURL')"
               ></v-text-field>
@@ -158,36 +158,6 @@
 <script>
 const FORM_KEY = "ops-notification-settings";
 export default {
-  async created() {
-    const vm = this;
-    try {
-      await initForm(vm);
-      vm.rights = window.$gz.role.getRights(
-        window.$gz.type.OpsNotificationSettings
-      );
-      vm.formState.readOnly = !vm.rights.change;
-      vm.formState.ready = true;
-      window.$gz.eventBus.$on("menu-click", clickHandler);
-      await vm.getDataFromApi();
-    } catch (err) {
-      vm.formState.ready = true;
-      window.$gz.errorHandler.handleFormError(err, vm);
-    }
-  },
-  async beforeRouteLeave(to, from, next) {
-    if (!this.formState.dirty) {
-      next();
-      return;
-    }
-    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
-      next();
-    } else {
-      next(false);
-    }
-  },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
   components: {},
   data() {
     return {
@@ -221,6 +191,11 @@ export default {
       rights: window.$gz.role.defaultRightsObject()
     };
   },
+  computed: {
+    canSave: function() {
+      return this.formState.valid && this.formState.dirty;
+    }
+  },
   watch: {
     formState: {
       handler: function(val) {
@@ -237,11 +212,36 @@ export default {
       deep: true
     }
   },
-  computed: {
-    canSave: function() {
-      return this.formState.valid && this.formState.dirty;
+  async created() {
+    const vm = this;
+    try {
+      await initForm(vm);
+      vm.rights = window.$gz.role.getRights(
+        window.$gz.type.OpsNotificationSettings
+      );
+      vm.formState.readOnly = !vm.rights.change;
+      vm.formState.ready = true;
+      window.$gz.eventBus.$on("menu-click", clickHandler);
+      await vm.getDataFromApi();
+    } catch (err) {
+      vm.formState.ready = true;
+      window.$gz.errorHandler.handleFormError(err, vm);
     }
   },
+  async beforeRouteLeave(to, from, next) {
+    if (!this.formState.dirty) {
+      next();
+      return;
+    }
+    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
+      next();
+    } else {
+      next(false);
+    }
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
   methods: {
     translation() {
       return window.$gz.translation;
@@ -377,7 +377,6 @@ function generateMenu(vm) {
     formData: {
       ayaType: window.$gz.type.OpsNotificationSettings
     },
-    formData: {},
     menuItems: []
   };
 
@@ -413,14 +412,14 @@ function generateMenu(vm) {
 //
 //
 async function initForm(vm) {
-  await fetchTranslatedText(vm);
+  await fetchTranslatedText();
   await populateSelectionLists(vm);
 }
 
 //////////////////////////////////////////////////////////
 //
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "TestSMTPSettings",
     "TestToAddress",