re-factor / cleanup

ayanova/src/views/ops-backup.vue

@@ -10,22 +10,22 @@
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <gz-time-picker
+              ref="backupTime"
+              v-model="obj.backupTime"
               :label="$ay.t('BackupTime')"
               :rules="[form().required(this, 'backupTime')]"
               :error-messages="form().serverErrors(this, 'backupTime')"
-              v-model="obj.backupTime"
               :readonly="formState.readOnly"
-              ref="backupTime"
               @input="fieldValueChanged('backupTime')"
             ></gz-time-picker>
           </v-col>
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-checkbox
+              ref="backupAttachments"
               v-model="obj.backupAttachments"
               :readonly="formState.readOnly"
               :label="$ay.t('BackupAttachments')"
-              ref="backupAttachments"
               :error-messages="form().serverErrors(this, 'backupAttachments')"
               @change="fieldValueChanged('backupAttachments')"
             ></v-checkbox>
@@ -33,22 +33,22 @@
 
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-text-field
+              ref="backupSetsToKeep"
               v-model="obj.backupSetsToKeep"
               :readonly="formState.readOnly"
               :label="$ay.t('BackupSetsToKeep')"
-              ref="backupSetsToKeep"
               :rules="[form().integerValid(this, 'backupSetsToKeep')]"
               :error-messages="form().serverErrors(this, 'backupSetsToKeep')"
-              @input="fieldValueChanged('backupSetsToKeep')"
               type="number"
+              @input="fieldValueChanged('backupSetsToKeep')"
             ></v-text-field>
           </v-col>
           <v-col cols="12" sm="6" lg="4" xl="3">
             <v-checkbox
+              ref="active"
               v-model="obj.active"
               :readonly="formState.readOnly"
               :label="$ay.t('Active')"
-              ref="active"
               :error-messages="form().serverErrors(this, 'active')"
               @change="fieldValueChanged('active')"
             ></v-checkbox>
@@ -58,7 +58,7 @@
           <v-col cols="12" class="mt-6">
             <v-col cols="12">
               <span class="text-h6">{{ $ay.t("BackupFiles") }}</span>
-              <v-btn @click="getBackupStatus" class="mb-6">
+              <v-btn class="mb-6" @click="getBackupStatus">
                 <v-icon>$ayiSync</v-icon>
               </v-btn>
 
@@ -80,7 +80,7 @@
                     $ayiTrashAlt
                   </v-icon>
 
-                  <v-btn icon :href="item.url" v-if="item.url">
+                  <v-btn v-if="item.url" icon :href="item.url">
                     <v-icon small>
                       $ayiFileDownload
                     </v-icon>
@@ -100,35 +100,6 @@
 <script>
 const FORM_KEY = "ops-backup";
 export default {
-  async created() {
-    const vm = this;
-    try {
-      await initForm(vm);
-      vm.rights = window.$gz.role.getRights(window.$gz.type.Backup);
-      vm.formState.readOnly = !vm.rights.change;
-      vm.formState.ready = true;
-      window.$gz.eventBus.$on("menu-click", clickHandler);
-      await vm.getDataFromApi();
-      vm.getBackupStatus();
-    } 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 {
@@ -160,6 +131,11 @@ export default {
       hour12: window.$gz.locale.getHour12()
     };
   },
+  computed: {
+    canSave: function() {
+      return this.formState.valid && this.formState.dirty;
+    }
+  },
   watch: {
     formState: {
       handler: function(val) {
@@ -176,11 +152,35 @@ 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.Backup);
+      vm.formState.readOnly = !vm.rights.change;
+      vm.formState.ready = true;
+      window.$gz.eventBus.$on("menu-click", clickHandler);
+      await vm.getDataFromApi();
+      vm.getBackupStatus();
+    } 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;
@@ -386,7 +386,6 @@ function generateMenu(vm) {
     formData: {
       ayaType: window.$gz.type.Backup
     },
-    formData: {},
     menuItems: []
   };
 
@@ -415,14 +414,14 @@ function generateMenu(vm) {
 //
 //
 async function initForm(vm) {
-  await fetchTranslatedText(vm);
+  await fetchTranslatedText();
   await createTableHeaders(vm);
 }
 
 //////////////////////////////////////////////////////////
 //
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "BackupSettings",
     "BackupTime",