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
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,35 +1,18 @@
<template>
<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 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">
<hr class="install-line">
<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')}]">
<div class="col-md-12 form-group required" :class="[{'has-error': form.errors.get('hostname')}]">
<label for="hostname" class="form-control-label">Hostname</label>
<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>
<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>
<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>
<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>
<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>
<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>
<div class="input-group input-group-merge">
@@ -93,7 +76,7 @@
<div class="card-footer">
<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>
<span>Next &nbsp;
<i class="fa fa-arrow-right"></i>
@@ -107,19 +90,32 @@
<script>
import axios from "axios";
import Form from './../../plugins/form';
import {Step, Steps} from 'element-ui';
export default {
name: 'database',
components: {
[Step.name]: Step,
[Steps.name]: Steps
},
data() {
return {
form: new Form('form-install')
form: new Form('form-install'),
active: 1
}
},
methods: {
// Form Submit
onSubmit() {
this.form.submit();
},
next() {
if (this.active++ > 2) this.active = 0;
}
}
}
</script>

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

@@ -1,30 +1,15 @@
<template>
<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="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="form-group mb-0">
<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="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>
<span>Next &nbsp;
<i class="fa fa-arrow-right"></i>
@@ -53,11 +38,18 @@
<script>
import axios from "axios";
import Form from './../../plugins/form';
import {Step, Steps} from 'element-ui';
var base_path = url.replace(window.location.origin, '');
export default {
name: 'language',
components: {
[Step.name]: Step,
[Steps.name]: Steps
},
mounted() {
axios.get(base_path + '/install/language/getLanguages')
.then(response => {
@@ -70,7 +62,8 @@
data() {
return {
form: new Form('form-install'),
languages: []
languages: [],
active: 0
}
},
methods: {
@@ -78,6 +71,10 @@
onSubmit() {
this.form.submit();
},
next() {
if (this.active++ > 2) this.active = 0;
}
}
}
</script>

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

@@ -1,35 +1,16 @@
<template>
<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="row">
<hr class="install-line">
<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')}]">
<div class="col-md-12 form-group required" :class="[{'has-error': form.errors.get('company_name')}]">
<label for="company_name" class="form-control-label">Company Name</label>
<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>
<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>
<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>
<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>
<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>
<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>
<div class="input-group input-group-merge ">
@@ -107,13 +88,21 @@
<script>
import axios from "axios";
import Form from './../../plugins/form';
import {Step, Steps} from 'element-ui';
export default {
name: 'settings',
components: {
[Step.name]: Step,
[Steps.name]: Steps
},
data() {
return {
form: new Form('form-install'),
languages: []
languages: [],
active: 2
}
},
methods: {
@@ -121,6 +110,10 @@
onSubmit() {
this.form.submit();
},
next() {
if (this.active++ > 2) this.active = 0;
}
}
}
</script>

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

@@ -7,7 +7,7 @@
<div class="container">
<div class="header-body text-center mb-5">
<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"/>
</div>
</div>
@@ -24,38 +24,38 @@
'role' => 'form',
'id' => 'form-install'
]) !!}
<div id="app">
<div class="card-body">
<div class="text-center text-muted mt-2 mb-4">
<small>@yield('header')</small>
<div id="app">
<div class="card-body">
<div class="text-center text-muted mt-2 mb-4">
<small>@yield('header')</small>
</div>
@include('flash::message')
@yield('content')
</div>
@include('flash::message')
@yield('content')
</div>
<div class="card-footer">
<div class="float-right">
@if (Request::is('install/requirements'))
<a href="{{ url('install/requirements') }}" class="btn btn-success"> {{ trans('install.refresh') }} &nbsp;<i class="fa fa-refresh"></i></a>
@else
{!! Form::button(
'<i v-if="loading" :class="(loading) ? \'show \' : \'\'" class="fas fa-spinner fa-spin d-none"></i> ' .
trans('install.next') .
' &nbsp;<i class="fa fa-arrow-right"></i>',
[
':disabled' => 'loading',
'type' => 'submit',
'id' => 'next-button',
'class' => 'btn btn-success',
'data-loading-text' => trans('general.loading')
]
) !!}
@endif
<div class="card-footer">
<div class="float-right">
@if (Request::is('install/requirements'))
<a href="{{ url('install/requirements') }}" class="btn btn-success"> {{ trans('install.refresh') }} &nbsp;<i class="fa fa-refresh"></i></a>
@else
{!! Form::button(
'<i v-if="loading" :class="(loading) ? \'show \' : \'\'" class="fas fa-spinner fa-spin d-none"></i> ' .
trans('install.next') .
' &nbsp;<i class="fa fa-arrow-right"></i>',
[
':disabled' => 'loading',
'type' => 'submit',
'id' => 'next-button',
'class' => 'btn btn-success',
'data-loading-text' => trans('general.loading')
]
) !!}
@endif
</div>
</div>
</div>
</div>
{!! Form::close() !!}
</div>
</div>

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

@@ -55,7 +55,7 @@
</a>
</div>
<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)]) }}
</a>
</div>