re-factor / cleanup

ayanova/src/views/ay-data-list-column-view.vue

@@ -1,7 +1,7 @@
 <template>
   <v-row v-if="formState.ready">
     <v-col>
-      <v-form data-cy="dlcForm" ref="form">
+      <v-form ref="form" data-cy="dlcForm">
         <v-row>
           <gz-error :error-box-message="formState.errorBoxMessage"></gz-error>
           <template v-for="(item, index) in editView">
@@ -29,9 +29,9 @@
                   <!-- {{ item }} -->
                   <v-switch
                     v-if="!item.rid"
+                    :ref="item.key"
                     v-model="item.include"
                     :label="$ay.t('Include')"
-                    :ref="item.key"
                     @change="includeChanged(item)"
                   ></v-switch>
                   <div v-if="item.rid" class="v-label mb-8 mt-6">
@@ -39,7 +39,7 @@
                   </div>
 
                   <!-- RE-ORDER CONTROL -->
-                  <div class="d-flex justify-space-between" v-if="item.include">
+                  <div v-if="item.include" class="d-flex justify-space-between">
                     <v-btn large icon @click="move('start', index)"
                       ><v-icon large data-cy="movestart"
                         >$ayiStepBackward</v-icon
@@ -82,28 +82,6 @@ export default {
       next(false);
     }
   },
-  beforeDestroy() {
-    window.$gz.eventBus.$off("menu-click", clickHandler);
-  },
-  async created() {
-    const vm = this;
-    try {
-      vm.dataListKey = this.$route.params.dataListKey;
-      if (this.$route.params.hiddenAffectiveColumns) {
-        vm.hiddenAffectiveColumns = this.$route.params.hiddenAffectiveColumns;
-      }
-      await initForm(vm);
-      vm.formState.ready = true;
-      window.$gz.eventBus.$on("menu-click", clickHandler);
-      generateMenu(vm);
-      //init disable save button so it can be enabled only on edit to show dirty form
-      window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
-      vm.formState.loading = false;
-    } catch (err) {
-      vm.formState.ready = true;
-      window.$gz.errorHandler.handleFormError(err, vm);
-    }
-  },
   data() {
     return {
       obj: {
@@ -131,6 +109,14 @@ export default {
       rights: window.$gz.role.fullRightsObject()
     };
   },
+  computed: {
+    canSave: function() {
+      return this.formState.valid && this.formState.dirty;
+    },
+    canDuplicate: function() {
+      return this.formState.valid && !this.formState.dirty;
+    }
+  },
   watch: {
     formState: {
       handler: function(val) {
@@ -147,12 +133,26 @@ export default {
       deep: true
     }
   },
-  computed: {
-    canSave: function() {
-      return this.formState.valid && this.formState.dirty;
-    },
-    canDuplicate: function() {
-      return this.formState.valid && !this.formState.dirty;
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
+  async created() {
+    const vm = this;
+    try {
+      vm.dataListKey = this.$route.params.dataListKey;
+      if (this.$route.params.hiddenAffectiveColumns) {
+        vm.hiddenAffectiveColumns = this.$route.params.hiddenAffectiveColumns;
+      }
+      await initForm(vm);
+      vm.formState.ready = true;
+      window.$gz.eventBus.$on("menu-click", clickHandler);
+      generateMenu(vm);
+      //init disable save button so it can be enabled only on edit to show dirty form
+      window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
+      vm.formState.loading = false;
+    } catch (err) {
+      vm.formState.ready = true;
+      window.$gz.errorHandler.handleFormError(err, vm);
     }
   },
   methods: {
@@ -336,7 +336,7 @@ function generateMenu(vm) {
 //
 //
 async function initForm(vm) {
-  await fetchTranslatedText(vm);
+  await fetchTranslatedText();
   await populateFieldDefinitions(vm);
   await fetchTranslatedFieldNames(vm);
   await fetchColumnView(vm);
@@ -347,7 +347,7 @@ async function initForm(vm) {
 //
 // Ensures UI translated text is available
 //
-async function fetchTranslatedText(vm) {
+async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "ResetToDefault",
     "Columns",