wizard steps updated to vue

resources/assets/js/views/wizard/company.js

@@ -14,8 +14,10 @@ import Global from './../../mixins/global';
 
 import Form from './../../plugins/form';
 
+import {Step, Steps} from 'element-ui';
+
 // plugin setup
-Vue.use(DashboardPlugin);
+Vue.use(DashboardPlugin, Step, Steps);
 
 const app = new Vue({
     el: '#app',
@@ -24,9 +26,21 @@ const app = new Vue({
         Global
     ],
 
+    components: {
+        [Step.name]: Step,
+        [Steps.name]: Steps,
+    },
+
     data: function () {
         return {
-            form: new Form('company')
+            form: new Form('company'),
+            active: 0
+        }
+    },
+
+    methods: {
+        next() {
+            if (this.active++ > 1) this.active = 0;
         }
     }
 });

resources/assets/js/views/wizard/currencies.js

@@ -15,8 +15,10 @@ import Global from '../../mixins/global';
 import Form from '../../plugins/form';
 import BulkAction from './../../plugins/bulk-action';
 
+import {Step, Steps} from 'element-ui';
+
 // plugin setup
-Vue.use(DashboardPlugin);
+Vue.use(DashboardPlugin, Step, Steps);
 
 const app = new Vue({
     el: '#app',
@@ -25,9 +27,15 @@ const app = new Vue({
         Global
     ],
 
+    components: {
+        [Step.name]: Step,
+        [Steps.name]: Steps,
+    },
+
     data: function () {
         return {
             form: new Form('currency'),
+            active: 1,
             bulk_action: new BulkAction(url + '/settings/currencies'),
             show: false,
             currency: {
@@ -36,7 +44,7 @@ const app = new Vue({
                 rate: '1',
                 enabled: 1
             },
-            submit_function: ''
+            submit_function: '',
         }
     },
 
@@ -97,6 +105,10 @@ const app = new Vue({
             })
             .catch(error => {
             });
+        },
+
+        next() {
+            if (this.active++ > 1) this.active = 0;
         }
     }
 });

resources/assets/js/views/wizard/finish.js

@@ -0,0 +1,43 @@
+/**
+ * First we will load all of this project's JavaScript dependencies which
+ * includes Vue and other libraries. It is a great starting point when
+ * building robust, powerful web applications using Vue and Laravel.
+ */
+
+require('./../../bootstrap');
+
+import Vue from 'vue';
+
+import DashboardPlugin from './../../plugins/dashboard-plugin';
+
+import Global from './../../mixins/global';
+
+import {Step, Steps} from 'element-ui';
+
+// plugin setup
+Vue.use(DashboardPlugin, Step, Steps);
+
+const app = new Vue({
+    el: '#app',
+
+    mixins: [
+        Global
+    ],
+
+    components: {
+        [Step.name]: Step,
+        [Steps.name]: Steps,
+    },
+
+    data: function () {
+        return {
+            active: 3
+        }
+    },
+
+    methods: {
+        next() {
+            if (this.active++ > 1) this.active = 0;
+          }
+    }
+});

resources/assets/js/views/wizard/taxes.js

@@ -15,8 +15,10 @@ import Global from '../../mixins/global';
 import Form from '../../plugins/form';
 import BulkAction from './../../plugins/bulk-action';
 
+import {Step, Steps} from 'element-ui';
+
 // plugin setup
-Vue.use(DashboardPlugin);
+Vue.use(DashboardPlugin, Step, Steps);
 
 const app = new Vue({
     el: '#app',
@@ -25,9 +27,15 @@ const app = new Vue({
         Global
     ],
 
+    components: {
+        [Step.name]: Step,
+        [Steps.name]: Steps,
+    },
+
     data: function () {
         return {
             form: new Form('tax'),
+            active: 2,
             bulk_action: new BulkAction(url + '/settings/taxes'),
             show: false,
             tax: {
@@ -69,6 +77,10 @@ const app = new Vue({
             });
 
             this.show = true;
+        },
+
+        next() {
+            if (this.active++ > 1) this.active = 0;
         }
     }
 });