shihaam/akaunting
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wizard vue steps updated, steps added to install

Browse Source
This commit is contained in:
batuhanbas 2020-01-16 12:10:37 +03:00
parent 0430dc5f36
commit f4a8a891df
7 changed files with 112 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
public/css/custom.css vendored
View File

@ -70,44 +70,6 @@ button:focus
border-radius: calc(0.375rem - 1px) calc(0.375rem - 1px) 0 0; border-radius: calc(0.375rem - 1px) calc(0.375rem - 1px) 0 0;
} }
.wizard-steps
{
width: 3.375rem;
height: 3.375rem;
padding: 0;
}
.wizard-steps-inner
{
font-size: 1.875rem;
}
.step-text
{
cursor: default !important;
font-weight: 400;
}
.after-step-text
{
cursor: default !important;
font-weight: 600;
}
.steps:not(:disabled):not(.disabled)
{
cursor: default !important;
}
.wizard-line
{
width: 75%;
position: absolute;
margin-left: 7rem;
margin-top: 1.7rem;
margin-bottom: 1.7rem;
border-top: 5px solid rgba(0, 0, 0, 0.1);
}
/*--------Wizard Steps Finish--------*/ /*--------Wizard Steps Finish--------*/

12
public/css/element.css vendored
View File

@ -10529,9 +10529,9 @@
-webkit-box-align: center; -webkit-box-align: center;
-ms-flex-align: center; -ms-flex-align: center;
align-items: center; align-items: center;
width: 80px; width: 70px;
height: 80px; height: 70px;
font-size: 40px; font-size: 35px;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
background: #3c3f72; background: #3c3f72;
@ -10547,6 +10547,10 @@
background: #6da252; background: #6da252;
} }
.el-step__head.is-success .el-step__line {
background-color: #3c3f72;
}
.el-step__head.is-wait .el-step__icon-inner { .el-step__head.is-wait .el-step__icon-inner {
color: #999999; color: #999999;
} }
@ -10670,7 +10674,7 @@
.el-step.is-horizontal .el-step__line { .el-step.is-horizontal .el-step__line {
height: 5px; height: 5px;
top: 40px; top: 35px;
left: 0; left: 0;
right: 0 right: 0
} }

58
resources/assets/js/views/install/Database.vue
View File

@ -1,35 +1,18 @@
<template> <template>
<div> <div>
<div class="card-header wizard-header p-3">
<el-steps :active="active" finish-status="success" align-center>
<el-step title="Language"></el-step>
<el-step title="Database"></el-step>
<el-step title="Admin"></el-step>
</el-steps>
</div>
<div class="card-body"> <div class="card-body">
<div role="alert" class="alert alert-danger d-none" :class="(form.response.error) ? 'show' : ''" v-if="form.response.error" v-html="form.response.message"></div> <div role="alert" class="alert alert-danger d-none" :class="(form.response.error) ? 'show' : ''" v-if="form.response.error" v-html="form.response.message"></div>
<div class="row"> <div class="row">
<hr class="install-line"> <div class="col-md-12 form-group required" :class="[{'has-error': form.errors.get('hostname')}]">
<div class="col-md-4 text-center">
<router-link to='./language'>
<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">Language</p>
</router-link>
</div>
<div class="col-md-4 text-center">
<button 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">Database</p>
</div>
<div class="col-md-4 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">Admin</p>
</div>
<div class="form-group col-md-12 required" :class="[{'has-error': form.errors.get('hostname')}]">
<label for="hostname" class="form-control-label">Hostname</label> <label for="hostname" class="form-control-label">Hostname</label>
<div class="input-group input-group-merge"> <div class="input-group input-group-merge">
@ -44,7 +27,7 @@
<div class="invalid-feedback" style="display: block;" v-if="form.errors.has('hostname')" v-html="form.errors.get('hostname')"></div> <div class="invalid-feedback" style="display: block;" v-if="form.errors.has('hostname')" v-html="form.errors.get('hostname')"></div>
</div> </div>
<div class="form-group col-md-12 required" :class="[{'has-error': form.errors.get('username')}]"> <div class="col-md-12 form-group required" :class="[{'has-error': form.errors.get('username')}]">
<label for="username" class="form-control-label">Username</label> <label for="username" class="form-control-label">Username</label>
<div class="input-group input-group-merge"> <div class="input-group input-group-merge">
@ -59,7 +42,7 @@
<div class="invalid-feedback" style="display: block;" v-if="form.errors.has('username')" v-html="form.errors.get('username')"></div> <div class="invalid-feedback" style="display: block;" v-if="form.errors.has('username')" v-html="form.errors.get('username')"></div>
</div> </div>
<div class="form-group col-md-12" :class="[{'has-error': form.errors.get('password')}]"> <div class="col-md-12 form-group" :class="[{'has-error': form.errors.get('password')}]">
<label for="password" class="form-control-label">Password</label> <label for="password" class="form-control-label">Password</label>
<div class="input-group input-group-merge "> <div class="input-group input-group-merge ">
@ -74,7 +57,7 @@
<div class="invalid-feedback" style="display: block;" v-if="form.errors.has('password')" v-html="form.errors.get('password')"></div> <div class="invalid-feedback" style="display: block;" v-if="form.errors.has('password')" v-html="form.errors.get('password')"></div>
</div> </div>
<div class="form-group col-md-12 mb--2 required" :class="[{'has-error': form.errors.get('database')}]"> <div class="col-md-12 form-group mb--2 required" :class="[{'has-error': form.errors.get('database')}]">
<label for="database" class="form-control-label">Database</label> <label for="database" class="form-control-label">Database</label>
<div class="input-group input-group-merge"> <div class="input-group input-group-merge">
@ -93,7 +76,7 @@
<div class="card-footer"> <div class="card-footer">
<div class="float-right"> <div class="float-right">
<button v-on:click="onSubmit" :disabled="form.loading" type="submit" id="next-button" class="btn btn-success" data-loading-text="Loading..."> <button v-on:click="onSubmit" :disabled="form.loading" type="submit" id="next-button" class="btn btn-success header-button-top" data-loading-text="Loading...">
<div class="aka-loader"></div> <div class="aka-loader"></div>
<span>Next &nbsp; <span>Next &nbsp;
<i class="fa fa-arrow-right"></i> <i class="fa fa-arrow-right"></i>
@ -107,19 +90,32 @@
<script> <script>
import axios from "axios"; import axios from "axios";
import Form from './../../plugins/form'; import Form from './../../plugins/form';
import {Step, Steps} from 'element-ui';
export default { export default {
name: 'database', name: 'database',
components: {
[Step.name]: Step,
[Steps.name]: Steps
},
data() { data() {
return { return {
form: new Form('form-install') form: new Form('form-install'),
active: 1
} }
}, },
methods: { methods: {
// Form Submit // Form Submit
onSubmit() { onSubmit() {
this.form.submit(); this.form.submit();
}, },
next() {
if (this.active++ > 2) this.active = 0;
}
} }
} }
</script> </script>

47
resources/assets/js/views/install/Language.vue
View File

@ -1,30 +1,15 @@
<template> <template>
<div> <div>
<div class="card-header wizard-header p-3">
<el-steps :active="active" finish-status="success" align-center>
<el-step title="Language"></el-step>
<el-step title="Database"></el-step>
<el-step title="Admin"></el-step>
</el-steps>
</div>
<div class="card-body"> <div class="card-body">
<div class="row"> <div class="row">
<hr class="install-line">
<div class="col-md-4 text-center">
<button 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">Language</p>
</div>
<div class="col-md-4 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">Database</p>
</div>
<div class="col-md-4 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">Admin</p>
</div>
<div class="col-md-12"> <div class="col-md-12">
<div class="form-group mb-0"> <div class="form-group mb-0">
<select v-model="form.lang" name="lang" id="lang" size="13" class="col-xl-12 form-control-label"> <select v-model="form.lang" name="lang" id="lang" size="13" class="col-xl-12 form-control-label">
@ -39,7 +24,7 @@
<div class="card-footer"> <div class="card-footer">
<div class="float-right"> <div class="float-right">
<button v-on:click="onSubmit" :disabled="form.loading" type="submit" id="next-button" class="btn btn-success" data-loading-text="Loading..."> <button v-on:click="onSubmit" :disabled="form.loading" type="submit" id="next-button" class="btn btn-success header-button-top" data-loading-text="Loading...">
<div class="aka-loader"></div> <div class="aka-loader"></div>
<span>Next &nbsp; <span>Next &nbsp;
<i class="fa fa-arrow-right"></i> <i class="fa fa-arrow-right"></i>
@ -53,11 +38,18 @@
<script> <script>
import axios from "axios"; import axios from "axios";
import Form from './../../plugins/form'; import Form from './../../plugins/form';
import {Step, Steps} from 'element-ui';
var base_path = url.replace(window.location.origin, ''); var base_path = url.replace(window.location.origin, '');
export default { export default {
name: 'language', name: 'language',
components: {
[Step.name]: Step,
[Steps.name]: Steps
},
mounted() { mounted() {
axios.get(base_path + '/install/language/getLanguages') axios.get(base_path + '/install/language/getLanguages')
.then(response => { .then(response => {
@ -70,7 +62,8 @@
data() { data() {
return { return {
form: new Form('form-install'), form: new Form('form-install'),
languages: [] languages: [],
active: 0
} }
}, },
methods: { methods: {
@ -78,6 +71,10 @@
onSubmit() { onSubmit() {
this.form.submit(); this.form.submit();
}, },
next() {
if (this.active++ > 2) this.active = 0;
}
} }
} }
</script> </script>

57
resources/assets/js/views/install/Settings.vue
View File

@ -1,35 +1,16 @@
<template> <template>
<div> <div>
<div class="card-header wizard-header p-3">
<el-steps :active="active" finish-status="success" align-center>
<el-step title="Language"></el-step>
<el-step title="Database"></el-step>
<el-step title="Admin"></el-step>
</el-steps>
</div>
<div class="card-body"> <div class="card-body">
<div class="row"> <div class="row">
<hr class="install-line"> <div class="col-md-12 form-group required" :class="[{'has-error': form.errors.get('company_name')}]">
<div class="col-md-4 text-center">
<router-link to='./language'>
<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">Language</p>
</router-link>
</div>
<div class="col-md-4 text-center">
<router-link to='./database'>
<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">Database</p>
</router-link>
</div>
<div class="col-md-4 text-center">
<button 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">Admin</p>
</div>
<div class="form-group col-md-12 required" :class="[{'has-error': form.errors.get('company_name')}]">
<label for="company_name" class="form-control-label">Company Name</label> <label for="company_name" class="form-control-label">Company Name</label>
<div class="input-group input-group-merge"> <div class="input-group input-group-merge">
@ -44,7 +25,7 @@
<div class="invalid-feedback" style="display: block;" v-if="form.errors.has('company_name')" v-html="form.errors.get('company_name')"></div> <div class="invalid-feedback" style="display: block;" v-if="form.errors.has('company_name')" v-html="form.errors.get('company_name')"></div>
</div> </div>
<div class="form-group col-md-12 required" :class="[{'has-error': form.errors.get('company_email')}]"> <div class="col-md-12 form-group required" :class="[{'has-error': form.errors.get('company_email')}]">
<label for="company_email" class="form-control-label">Company Email</label> <label for="company_email" class="form-control-label">Company Email</label>
<div class="input-group input-group-merge"> <div class="input-group input-group-merge">
@ -59,7 +40,7 @@
<div class="invalid-feedback" style="display: block;" v-if="form.errors.has('company_email')" v-html="form.errors.get('company_email')"></div> <div class="invalid-feedback" style="display: block;" v-if="form.errors.has('company_email')" v-html="form.errors.get('company_email')"></div>
</div> </div>
<div class="form-group col-md-12 required" :class="[{'has-error': form.errors.get('user_email')}]"> <div class=" col-md-12 form-group required" :class="[{'has-error': form.errors.get('user_email')}]">
<label for="user_email" class="form-control-label">Admin Email</label> <label for="user_email" class="form-control-label">Admin Email</label>
<div class="input-group input-group-merge"> <div class="input-group input-group-merge">
@ -74,7 +55,7 @@
<div class="invalid-feedback" style="display: block;" v-if="form.errors.has('user_email')" v-html="form.errors.get('user_email')"></div> <div class="invalid-feedback" style="display: block;" v-if="form.errors.has('user_email')" v-html="form.errors.get('user_email')"></div>
</div> </div>
<div class="form-group col-md-12 mb--2 required" :class="[{'has-error': form.errors.get('user_password')}]"> <div class="col-md-12 form-group mb--2 required" :class="[{'has-error': form.errors.get('user_password')}]">
<label for="user_password" class="form-control-label">Admin Password</label> <label for="user_password" class="form-control-label">Admin Password</label>
<div class="input-group input-group-merge "> <div class="input-group input-group-merge ">
@ -107,13 +88,21 @@
<script> <script>
import axios from "axios"; import axios from "axios";
import Form from './../../plugins/form'; import Form from './../../plugins/form';
import {Step, Steps} from 'element-ui';
export default { export default {
name: 'settings', name: 'settings',
components: {
[Step.name]: Step,
[Steps.name]: Steps
},
data() { data() {
return { return {
form: new Form('form-install'), form: new Form('form-install'),
languages: [] languages: [],
active: 2
} }
}, },
methods: { methods: {
@ -121,6 +110,10 @@
onSubmit() { onSubmit() {
this.form.submit(); this.form.submit();
}, },
next() {
if (this.active++ > 2) this.active = 0;
}
} }
} }
</script> </script>

58
resources/views/layouts/install.blade.php
View File

@ -7,7 +7,7 @@
<div class="container"> <div class="container">
<div class="header-body text-center mb-5"> <div class="header-body text-center mb-5">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-xl-5 col-lg-6 col-md-8"> <div class="col-md-8 col-lg-6 col-xl-5">
<img class="pb-6" src="{{ asset('public/img/akaunting-logo-white.png') }}" width="22%" alt="Akaunting"/> <img class="pb-6" src="{{ asset('public/img/akaunting-logo-white.png') }}" width="22%" alt="Akaunting"/>
</div> </div>
</div> </div>
@ -24,38 +24,38 @@
'role' => 'form', 'role' => 'form',
'id' => 'form-install' 'id' => 'form-install'
]) !!} ]) !!}
<div id="app"> <div id="app">
<div class="card-body"> <div class="card-body">
<div class="text-center text-muted mt-2 mb-4"> <div class="text-center text-muted mt-2 mb-4">
<small>@yield('header')</small> <small>@yield('header')</small>
</div>
@include('flash::message')
@yield('content')
</div> </div>
@include('flash::message') <div class="card-footer">
<div class="float-right">
@yield('content') @if (Request::is('install/requirements'))
</div> <a href="{{ url('install/requirements') }}" class="btn btn-success"> {{ trans('install.refresh') }} &nbsp;<i class="fa fa-refresh"></i></a>
@else
<div class="card-footer"> {!! Form::button(
<div class="float-right"> '<i v-if="loading" :class="(loading) ? \'show \' : \'\'" class="fas fa-spinner fa-spin d-none"></i> ' .
@if (Request::is('install/requirements')) trans('install.next') .
<a href="{{ url('install/requirements') }}" class="btn btn-success"> {{ trans('install.refresh') }} &nbsp;<i class="fa fa-refresh"></i></a> ' &nbsp;<i class="fa fa-arrow-right"></i>',
@else [
{!! Form::button( ':disabled' => 'loading',
'<i v-if="loading" :class="(loading) ? \'show \' : \'\'" class="fas fa-spinner fa-spin d-none"></i> ' . 'type' => 'submit',
trans('install.next') . 'id' => 'next-button',
' &nbsp;<i class="fa fa-arrow-right"></i>', 'class' => 'btn btn-success',
[ 'data-loading-text' => trans('general.loading')
':disabled' => 'loading', ]
'type' => 'submit', ) !!}
'id' => 'next-button', @endif
'class' => 'btn btn-success', </div>
'data-loading-text' => trans('general.loading')
]
) !!}
@endif
</div> </div>
</div> </div>
</div>
{!! Form::close() !!} {!! Form::close() !!}
</div> </div>
</div> </div>

2
resources/views/wizard/finish/index.blade.php
View File

@ -55,7 +55,7 @@
</a> </a>
</div> </div>
<div class="col-md-6 text-right"> <div class="col-md-6 text-right">
<a href="{{ url('/') }}" class="btn btn-lg btn-success header-button-top" @click="next"> <a href="{{ url('/') }}" class="btn 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> </a>
</div> </div>