wizard steps updated to vue

public/css/element.css

@@ -10493,13 +10493,13 @@
 }
 
 .el-step__head.is-process {
-    color: #303133;
+    color: #3c3f72;
-    border-color: #303133
+    border-color: #3c3f72
 }
 
 .el-step__head.is-wait {
-    color: #C0C4CC;
+    color: #e5e5e5;
-    border-color: #C0C4CC
+    border-color: #e5e5e5
 }
 
 .el-step__head.is-success {
@@ -10529,19 +10529,37 @@
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
-    width: 24px;
+    width: 80px;
-    height: 24px;
+    height: 80px;
-    font-size: 14px;
+    font-size: 40px;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
-    background: #FFF;
+    background: #3c3f72;
     -webkit-transition: .15s ease-out;
     transition: .15s ease-out
 }
 
+.el-step__head.is-wait .el-step__icon {
+    background: #e5e5e5 ;
+}
+
+.el-step__head.is-success .el-step__icon {
+    background: #6da252;
+}
+
+.el-step__head.is-success .el-step__icon:hover {
+    cursor: pointer;
+    border: 5px solid #3c3f72;
+    background: #3c3f72;
+}
+
+.el-step__head.is-wait .el-step__icon-inner {
+    color: #999999;
+}
+
 .el-step__icon.is-text {
     border-radius: 50%;
-    border: 2px solid;
+    border: 5px solid;
     border-color: inherit
 }
 
@@ -10555,7 +10573,7 @@
     text-align: center;
     font-weight: 700;
     line-height: 1;
-    color: inherit
+    color: #ffffff;
 }
 
 .el-button,.el-checkbox,.el-image-viewer__btn {
@@ -10577,12 +10595,12 @@
 .el-step__line {
     position: absolute;
     border-color: inherit;
-    background-color: #C0C4CC
+    background-color: #e5e5e5;
 }
 
 .el-step__line-inner {
     display: block;
-    border-width: 1px;
+    border-width: 2px !important;
     border-style: solid;
     border-color: inherit;
     -webkit-transition: .15s ease-out;
@@ -10605,7 +10623,7 @@
 
 .el-step__title.is-process {
     font-weight: 700;
-    color: #303133
+    color: #3c3f72;
 }
 
 .el-step__title.is-wait {
@@ -10657,8 +10675,8 @@
 }
 
 .el-step.is-horizontal .el-step__line {
-    height: 2px;
+    height: 5px;
-    top: 11px;
+    top: 40px;
     left: 0;
     right: 0
 }

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;
         }
     }
 });

resources/views/partials/wizard/steps.blade.php

@@ -0,0 +1,10 @@
+@stack('steps_start')
+    <div class="card-header wizard-header p-3">
+        <el-steps :active="active" finish-status="success" align-center>
+            <el-step href="{{ url('wizard/companies') }}" title="Company"></el-step>
+            <el-step href="{{ url('wizard/currencies') }}" title="Currency"></el-step>
+            <el-step href="{{ url('wizard/taxes') }}" title="Taxes"></el-step>
+            <el-step href="{{ url('wizard/finish') }}" title="Finish"></el-step>
+        </el-steps>
+    </div>
+@stack('steps_end')

resources/views/wizard/companies/edit.blade.php

@@ -17,49 +17,8 @@
         ]) !!}
 
             <div id="wizard-loading"></div>
-            <div class="card-header wizard-header pb-0">
+            @include('partials.wizard.steps')
-                <div class="container-fluid">
-                    <div class="row">
-                        <hr class="wizard-line">
 
-                        <div class="col-md-3">
-                            <div class="text-center">
-                                <button href="#step-1" type="button" class="btn btn-default btn-lg wizard-steps rounded-circle">
-                                    <span class="btn-inner--icon wizard-steps-inner">1</span>
-                                </button>
-                                <p class="mt-2 after-step-text">{{ trans_choice('general.companies', 1) }}</p>
-                            </div>
-                        </div>
-
-                        <div class="col-md-3">
-                            <div class="text-center">
-                                <button type="button" class="btn btn-secondary btn-lg wizard-steps rounded-circle steps">
-                                    <span class="btn-inner--icon wizard-steps-inner wizard-steps-color">2</span>
-                                </button>
-                                <p class="mt-2 text-muted step-text">{{ trans_choice('general.currencies', 2) }}</p>
-                            </div>
-                        </div>
-
-                        <div class="col-md-3">
-                            <div class="text-center">
-                                <button type="button" class="btn btn-secondary btn-lg wizard-steps rounded-circle steps">
-                                    <span class="btn-inner--icon wizard-steps-inner wizard-steps-color">3</span>
-                                </button>
-                                <p class="mt-2 text-muted step-text">{{ trans_choice('general.taxes', 2) }}</p>
-                            </div>
-                        </div>
-
-                        <div class="col-md-3">
-                            <div class="text-center">
-                                <button type="button" class="btn btn-secondary btn-lg wizard-steps rounded-circle steps">
-                                    <span class="btn-inner--icon wizard-steps-inner wizard-steps-color">4</span>
-                                </button>
-                                <p class="mt-2 text-muted step-text">{{ trans_choice('general.finish', 1) }}</p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
 
             <div class="card-body">
                 <div id="wizard-loading"></div>
@@ -109,7 +68,7 @@
                             '<div v-if="form.loading" class="aka-loader-frame"><div class="aka-loader"></div></div> <span v-if="!form.loading" class="btn-inner--icon"><i class="fas fa-save"></i></span>' . '<span v-if="!form.loading" class="btn-inner--text"> ' . trans('general.save') . '</span>',
                                 [':disabled' => 'form.loading', 'type' => 'submit', 'class' => 'btn btn-icon btn-success button-submit header-button-top', 'data-loading-text' => trans('general.loading')]) !!}
 
-                        <a href="{{ url('wizard/currencies') }}" id="wizard-skip" class="btn btn-white header-button-top">
+                        <a href="{{ url('wizard/currencies') }}" id="wizard-skip" class="btn btn-white header-button-top" @click="next">
                             <span class="fa fa-share"></span> &nbsp;{{ trans('general.skip') }}
                         </a>
                     </div>

resources/views/wizard/currencies/index.blade.php

@@ -4,51 +4,7 @@
 
 @section('content')
     <div class="card">
-        <div class="card-header pb-0">
+        @include('partials.wizard.steps')
-            <div class="container-fluid">
-                <div class="row">
-                    <hr class="wizard-line">
-
-                    <div class="col-md-3">
-                        <div class="text-center">
-                            <a href="{{ url('wizard/companies') }}">
-                                <button type="button" class="btn btn-secondary btn-lg wizard-steps wizard-steps-color-active rounded-circle">
-                                    <span class="btn-inner--icon wizard-steps-inner"><i class="fa fa-check"></i></span>
-                                </button>
-                                <p class="mt-2 text-muted step-text">{{ trans_choice('general.companies', 1) }}</p>
-                            </a>
-                        </div>
-                    </div>
-
-                    <div class="col-md-3">
-                        <div class="text-center">
-                            <button href="#step-2" type="button" class="btn btn-default btn-lg wizard-steps rounded-circle">
-                                <span class="btn-inner--icon wizard-steps-inner">2</span>
-                            </button>
-                            <p class="mt-2 after-step-text">{{ trans_choice('general.currencies', 2) }}</p>
-                        </div>
-                    </div>
-
-                    <div class="col-md-3">
-                        <div class="text-center">
-                            <button type="button" class="btn btn-secondary btn-lg wizard-steps rounded-circle steps">
-                                <span class="btn-inner--icon wizard-steps-inner wizard-steps-color">3</span>
-                            </button>
-                            <p class="mt-2 text-muted step-text">{{ trans_choice('general.taxes', 2) }}</p>
-                        </div>
-                    </div>
-
-                    <div class="col-md-3">
-                        <div class="text-center">
-                            <button type="button" class="btn btn-secondary btn-lg wizard-steps rounded-circle steps">
-                                <span class="btn-inner--icon wizard-steps-inner wizard-steps-color">4</span>
-                            </button>
-                            <p class="mt-2 text-muted step-text">{{ trans_choice('general.finish', 1) }}</p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
 
         <div class="card-body border-bottom-0">
             <div class="row">
@@ -167,7 +123,7 @@
         <div class="card-footer">
             <div class="row">
                 <div class="col-12 text-right">
-                    <a href="{{ url('wizard/taxes') }}" id="wizard-skip" class="btn btn-white header-button-top">
+                    <a href="{{ url('wizard/taxes') }}" id="wizard-skip" class="btn btn-white header-button-top" @click="next">
                         <span class="fa fa-share"></span> &nbsp;{{ trans('general.skip') }}
                     </a>
                 </div>

resources/views/wizard/finish/index.blade.php

@@ -4,55 +4,7 @@
 
 @section('content')
     <div class="card">
-        <div class="card-header pb-0">
+        @include('partials.wizard.steps')
-            <div class="container-fluid">
-                <div class="row">
-                    <hr class="wizard-line">
-
-                    <div class="col-md-3">
-                        <div class="text-center">
-                           <a href="{{ url('wizard/companies') }}">
-                                <button type="button" class="btn btn-secondary btn-lg wizard-steps wizard-steps-color-active rounded-circle">
-                                    <span class="btn-inner--icon wizard-steps-inner"><i class="fa fa-check"></i></span>
-                                </button>
-                                <p class="mt-2 text-muted step-text">{{ trans_choice('general.companies', 1) }}</p>
-                           </a>
-                        </div>
-                    </div>
-
-                    <div class="col-md-3">
-                        <div class="text-center">
-                            <a href="{{ url('wizard/currencies') }}">
-                                <button type="button" class="btn btn-secondary btn-lg wizard-steps wizard-steps-color-active rounded-circle">
-                                    <span class="btn-inner--icon wizard-steps-inner"><i class="fa fa-check"></i></span>
-                                </button>
-                                <p class="mt-2 text-muted step-text">{{ trans_choice('general.currencies', 2) }}</p>
-                            </a>
-                        </div>
-                    </div>
-
-                    <div class="col-md-3">
-                        <div class="text-center">
-                            <a href="{{ url('wizard/taxes') }}">
-                                <button type="button" class="btn btn-secondary btn-lg wizard-steps wizard-steps-color-active rounded-circle">
-                                    <span class="btn-inner--icon wizard-steps-inner"><i class="fa fa-check"></i></span>
-                                </button>
-                                <p class="mt-2 text-muted step-text">{{ trans_choice('general.taxes', 2) }}</p>
-                            </a>
-                        </div>
-                    </div>
-
-                    <div class="col-md-3">
-                        <div class="text-center">
-                            <button href="#step-4" type="button" class="btn btn-default btn-lg wizard-steps rounded-circle">
-                                <span class="btn-inner--icon wizard-steps-inner">4</span>
-                            </button>
-                            <p class="mt-2 after-step-text">{{ trans_choice('general.finish', 1) }}</p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
 
         <div class="card-body bg-default">
             <div class="row">
@@ -98,7 +50,7 @@
         <div class="card-footer">
             <div class="row">
                 <div class="col-md-12 text-right">
-                    <a href="{{ url('/') }}" class="btn btn-lg btn-success header-button-top">
+                    <a href="{{ url('/') }}" class="btn btn-lg btn-success header-button-top" @click="next">
                         <span class="fa fa-tachometer-alt"></span> &nbsp;{{ trans('general.go_to', ['name' => trans_choice('general.dashboards', 1)]) }}
                     </a>
                 </div>
@@ -106,3 +58,7 @@
         </div>
     </div>
 @endsection
+
+@push('scripts_start')
+    <script src="{{ asset('public/js/wizard/finish.js?v=' . version('short')) }}"></script>
+@endpush

resources/views/wizard/taxes/index.blade.php

@@ -4,53 +4,7 @@
 
 @section('content')
     <div class="card">
-        <div class="card-header pb-0">
+        @include('partials.wizard.steps')
-            <div class="container-fluid">
-                <div class="row">
-                    <hr class="wizard-line">
-
-                    <div class="col-md-3">
-                        <div class="text-center">
-                            <a href="{{ url('wizard/companies') }}">
-                                <button type="button" class="btn btn-secondary btn-lg wizard-steps wizard-steps-color-active rounded-circle">
-                                    <span class="btn-inner--icon wizard-steps-inner"><i class="fa fa-check"></i></span>
-                                </button>
-                                <p class="mt-2 text-muted step-text">{{ trans_choice('general.companies', 1) }}</p>
-                            </a>
-                        </div>
-                    </div>
-
-                    <div class="col-md-3">
-                        <div class="text-center">
-                            <a href="{{ url('wizard/currencies') }}">
-                                <button type="button" class="btn btn-secondary btn-lg wizard-steps wizard-steps-color-active rounded-circle">
-                                    <span class="btn-inner--icon wizard-steps-inner"><i class="fa fa-check"></i></span>
-                                </button>
-                                <p class="mt-2 text-muted step-text">{{ trans_choice('general.currencies', 2) }}</p>
-                            </a>
-                        </div>
-                    </div>
-
-                    <div class="col-md-3">
-                        <div class="text-center">
-                            <button href="#step-3" type="button" class="btn btn-default btn-lg wizard-steps rounded-circle">
-                                <span class="btn-inner--icon wizard-steps-inner">3</span>
-                            </button>
-                            <p class="mt-2 after-step-text">{{ trans_choice('general.taxes', 2) }}</p>
-                        </div>
-                    </div>
-
-                    <div class="col-md-3">
-                        <div class="text-center">
-                            <button type="button" class="btn btn-secondary btn-lg wizard-steps rounded-circle steps">
-                                <span class="btn-inner--icon wizard-steps-inner wizard-steps-color">4</span>
-                            </button>
-                            <p class="mt-2 text-muted step-text">{{ trans_choice('general.finish', 1) }}</p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
 
         <div class="card-body border-bottom-0">
             <div class="row">
@@ -152,7 +106,7 @@
         <div class="card-footer">
             <div class="row">
                 <div class="col-12 text-right">
-                    <a href="{{ url('wizard/finish') }}" id="wizard-skip" class="btn btn-white header-button-top">
+                    <a href="{{ url('wizard/finish') }}" id="wizard-skip" class="btn btn-white header-button-top" @click="next">
                         <span class="fa fa-share"></span> &nbsp;{{ trans('general.skip') }}
                     </a>
                 </div>

webpack.mix.js

@@ -71,5 +71,6 @@ mix
     .js('resources/assets/js/views/wizard/company.js', 'public/js/wizard')
     .js('resources/assets/js/views/wizard/currencies.js', 'public/js/wizard')
     .js('resources/assets/js/views/wizard/taxes.js', 'public/js/wizard')
+    .js('resources/assets/js/views/wizard/finish.js', 'public/js/wizard')
 
     .sass('resources/assets/sass/argon.scss', 'public/css');