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/portal/header.blade.php

@@ -1,21 +1,21 @@
 @stack('header_start')
-<div id="header" class="header pb-6">
+    <div id="header" class="header pb-6">
-    <div class="container-fluid content-layout">
+        <div class="container-fluid content-layout">
-        <div class="header-body">
+            <div class="header-body">
-            <div class="row py-4 align-items-center">
+                <div class="row py-4 align-items-center">
-                <div class="col-sm-4 col-md-5 align-items-center">
+                    <div class="col-sm-4 col-md-5 align-items-center">
-                    <h2 class="d-inline-flex mb-0 long-texts">@yield('title')</h2>
+                        <h2 class="d-inline-flex mb-0 long-texts">@yield('title')</h2>
-                    @yield('dashboard_action')
+                        @yield('dashboard_action')
-                </div>
+                    </div>
-                <div class="col-sm-8 col-md-7">
+                    <div class="col-sm-8 col-md-7">
-                    <div class="text-right">
+                        <div class="text-right">
-                        @yield('new_button')
+                            @yield('new_button')
 
-                        @stack('header_button')
+                            @stack('header_button')
+                        </div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
-</div>
 @stack('header_end')

resources/views/partials/portal/menu.blade.php

@@ -1,28 +1,28 @@
 @stack('menu_start')
-<nav class="sidenav navbar navbar-vertical fixed-left navbar-expand-xs navbar-light bg-default" id="sidenav-main">
+    <nav class="sidenav navbar navbar-vertical fixed-left navbar-expand-xs navbar-light bg-default" id="sidenav-main">
-    <div class="scrollbar-inner">
+        <div class="scrollbar-inner">
-        <div class="sidenav-header d-flex align-items-center ml-4">
+            <div class="sidenav-header d-flex align-items-center ml-4">
-            <ul class="navbar-nav">
+                <ul class="navbar-nav">
-                <li class="nav-item">
+                    <li class="nav-item">
-                    <a class="nav-link" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        <a class="nav-link" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                        <span class="avatar avatar-xs background-unset">
+                            <span class="avatar avatar-xs background-unset">
-                            <img class="border-radius-none border-0 mr-3" alt="Image placeholder" src="{{ setting('company.logo') ? Storage::url(setting('company.logo')) : asset('public/img/akaunting-logo-white.png') }}">
+                                <img class="border-radius-none border-0 mr-3" alt="Image placeholder" src="{{ setting('company.logo') ? Storage::url(setting('company.logo')) : asset('public/img/akaunting-logo-white.png') }}">
-                        </span>
+                            </span>
-                        <span class="nav-link-text long-texts pl-2 mwpx-100">{{ Str::limit(setting('company.name'), 22) }}</span>
+                            <span class="nav-link-text long-texts pl-2 mwpx-100">{{ Str::limit(setting('company.name'), 22) }}</span>
-                    </a>
+                        </a>
-                </li>
+                    </li>
-            </ul>
+                </ul>
-            <div class="ml-auto left-menu-toggle-position">
+                <div class="ml-auto left-menu-toggle-position">
-                <div class="sidenav-toggler d-none d-xl-block left-menu-toggle" data-action="sidenav-unpin" data-target="#sidenav-main">
+                    <div class="sidenav-toggler d-none d-xl-block left-menu-toggle" data-action="sidenav-unpin" data-target="#sidenav-main">
-                    <div class="sidenav-toggler-inner">
+                        <div class="sidenav-toggler-inner">
-                        <i class="sidenav-toggler-line"></i>
+                            <i class="sidenav-toggler-line"></i>
-                        <i class="sidenav-toggler-line"></i>
+                            <i class="sidenav-toggler-line"></i>
-                        <i class="sidenav-toggler-line"></i>
+                            <i class="sidenav-toggler-line"></i>
+                        </div>
                     </div>
                 </div>
             </div>
+            {!! menu('portal') !!}
         </div>
-        {!! menu('portal') !!}
+    </nav>
-    </div>
-</nav>
 @stack('menu_end')

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,11 +50,15 @@
         <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)]) }}
+                        <span class="fa fa-tachometer-alt"></span> &nbsp;{{ trans('general.go_to', ['name' => trans_choice('general.dashboards', 1)]) }}
                     </a>
                 </div>
             </div>
         </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');