Minor refactorings

Simplify some code and extract some methods to a helpers file

Author: cristijora

src/assets/form-wizard/_buttons.scss

@@ -6,15 +6,9 @@
   font-size: $font-size-base;
   font-weight: $font-weight-bold;
   padding: $padding-base-vertical $padding-base-horizontal;
+  min-width: 140px;
   &:hover,
   &:focus {
     outline: 0 !important;
   }
 }
-
-.vue-form-wizard {
-  .navbar .navbar-nav > li > a.wizard-btn.wizard-btn-wd,
-  .wizard-btn-wd {
-    min-width: 140px;
-  }
-}

src/components/FormWizard.vue

@@ -74,6 +74,7 @@
 <script>
   import WizardButton from './WizardButton.vue'
   import WizardStep from './WizardStep.vue'
+  import {isPromise, findElementAndFocus, getFocusedTabIndex} from './helpers'
   export default{
     name: 'form-wizard',
     components: {
@@ -151,7 +152,6 @@
     data () {
       return {
         activeTabIndex: 0,
-        isLastStep: false,
         currentPercentage: 0,
         maxStep: 0,
         loading: false,
@@ -171,6 +171,9 @@
       tabCount () {
         return this.tabs.length
       },
+      isLastStep () {
+        return this.activeTabIndex === this.tabCount - 1
+      },
       displayPrevButton () {
         return this.activeTabIndex !== 0
       },
@@ -268,39 +271,16 @@
           if (this.activeTabIndex < this.tabCount - 1) {
             this.changeTab(this.activeTabIndex, this.activeTabIndex + 1)
           } else {
-            this.isLastStep = true
             this.$emit('on-complete')
           }
         }
         this.beforeTabChange(this.activeTabIndex, cb)
       },
-      getActiveElementId () {
-        return document.activeElement.id
-      },
-      focusNextTab () {
-        let activeId = this.getActiveElementId()
-        let tabIndex = this.tabs.findIndex(tab => tab.tabId === activeId)
-        if (tabIndex !== -1 && tabIndex < this.tabs.length - 1) {
-          let toFocus = this.tabs[tabIndex + 1].tabId
-          let elem = document.getElementById(toFocus)
-          elem.focus()
-        }
-      },
-      focusPrevTab () {
-        let activeId = this.getActiveElementId()
-        let tabIndex = this.tabs.findIndex(tab => tab.tabId === activeId)
-        if (tabIndex !== -1 && tabIndex > 0) {
-          let toFocus = this.tabs[tabIndex - 1].tabId
-          let elem = document.getElementById(toFocus)
-          elem.focus()
-        }
-      },
       prevTab () {
         let cb = () => {
           if (this.activeTabIndex > 0) {
             this.setValidationError(null)
             this.changeTab(this.activeTabIndex, this.activeTabIndex - 1)
-            this.isLastStep = false
           }
         }
         if (this.validateOnBack) {
@@ -309,6 +289,20 @@
           cb()
         }
       },
+      focusNextTab () {
+        let tabIndex = getFocusedTabIndex(this.tabs)
+        if (tabIndex !== -1 && tabIndex < this.tabs.length - 1) {
+          let toFocusId = this.tabs[tabIndex + 1].tabId
+          findElementAndFocus(toFocusId)
+        }
+      },
+      focusPrevTab () {
+        let tabIndex = getFocusedTabIndex(this.tabs)
+        if (tabIndex !== -1 && tabIndex > 0) {
+          let toFocusId = this.tabs[tabIndex - 1].tabId
+          findElementAndFocus(toFocusId)
+        }
+      },
       setLoading (value) {
         this.loading = value
         this.$emit('on-loading', value)
@@ -320,7 +314,7 @@
       validateBeforeChange (promiseFn, callback) {
         this.setValidationError(null)
         // we have a promise
-        if (promiseFn.then && typeof promiseFn.then === 'function') {
+        if (isPromise(promiseFn)) {
           this.setLoading(true)
           promiseFn.then((res) => {
             this.setLoading(false)
@@ -377,18 +371,6 @@
           this.$router.push(tab.route)
         }
       },
-      checkStep () {
-        if (this.activeTabIndex === this.tabCount - 1) {
-          this.isLastStep = true
-        } else {
-          this.isLastStep = false
-        }
-      },
-      increaseMaxStep () {
-        if (this.activeTabIndex > this.maxStep) {
-          this.maxStep = this.activeTabIndex
-        }
-      },
       checkRouteChange (route) {
         let matchingTabIndex = -1
         let matchingTab = this.tabs.find((tab, index) => {
@@ -420,7 +402,6 @@
       },
       activateTabAndCheckStep (index) {
         this.activateTab(index)
-        this.checkStep()
         if (index > this.maxStep) {
           this.maxStep = index
         }
@@ -441,7 +422,7 @@
       this.initializeTabs()
     },
     watch: {
-      '$route.path': function (newRoute) {
+      '$route.path' (newRoute) {
         this.checkRouteChange(newRoute)
       }
     }

src/components/WizardButton.vue

@@ -1,10 +1,10 @@
 <template>
-  <button class="wizard-btn btn-fill wizard-btn-wd" tabindex="-1">
+  <button class="wizard-btn" tabindex="-1">
     <slot></slot>
   </button>
 </template>
 <script>
-    export default {}
+  export default {}
 </script>
 <style>
 </style>

src/components/helpers.js

@@ -0,0 +1,15 @@
+export function getFocusedElementId () {
+  return document.activeElement.id
+}
+export function getFocusedTabIndex (tabs = []) {
+  let activeId = getFocusedElementId()
+  let tabIndex = tabs.findIndex(tab => tab.tabId === activeId)
+  return tabIndex
+}
+export function findElementAndFocus (elemId) {
+  let elem = document.getElementById(elemId)
+  elem.focus()
+}
+export function isPromise (func) {
+  return func.then && typeof func.then === 'function'
+}