Wizard page re-factoring..

This commit is contained in:
Cüneyt Şentürk 2021-06-01 23:58:08 +03:00
parent 0536942bbd
commit fdd1011b3a
6 changed files with 198 additions and 178 deletions

View File

@ -1,39 +1,58 @@
<?php <?php
namespace App\Http\Controllers\Wizard; namespace App\Http\ViewComposers;
use App\Abstracts\Http\Controller;
use Akaunting\Money\Currency as MoneyCurrency; use Akaunting\Money\Currency as MoneyCurrency;
use App\Models\Common\Media;
use App\Models\Setting\Currency; use App\Models\Setting\Currency;
use App\Models\Setting\Tax; use App\Models\Setting\Tax;
use App\Traits\Modules; use App\Traits\Modules;
use App\Models\Common\Company; use App\Models\Common\Company;
use Illuminate\View\View;
class Data extends Controller class Wizard
{ {
use Modules; use Modules;
/** /**
* Instantiate a new controller instance. * Bind data to the view.
*
* @param View $view
* @return void
*/ */
public function __construct() public function compose(View $view)
{ {
// Add CRUD permission check $translations = $this->getTransalations();
$this->middleware('permission:create-common-companies')->only('create', 'store', 'duplicate', 'import');
$this->middleware('permission:read-common-companies')->only('index', 'show', 'edit', 'export'); $currencies = $this->getCurrencies();
$this->middleware('permission:update-common-companies')->only('update', 'enable', 'disable');
$this->middleware('permission:delete-common-companies')->only('destroy'); // Prepare codes
$codes = $this->getCurrencyCodes();
$taxes = $this->getTaxes();
$modules = $this->getFeaturedModules([
'query' => [
'limit' => 4
]
]);
$company = $this->getCompany();
$view->with([
'translations' => $translations,
'company' => $company,
'currencies' => $currencies,
'currency_codes' => $codes,
'taxes' => $taxes,
'modules' => $modules,
]);
} }
/** /* Wizard page transactions */
* Show the form for creating a new resource. protected function getTransalations()
*
* @return Response
*/
public function index()
{ {
$translations = [ return [
'company' => [ 'company' => [
'title' => trans_choice('general.companies', 1), 'title' => trans_choice('general.companies', 1),
'api_key' => trans('modules.api_key'), 'api_key' => trans('modules.api_key'),
@ -101,10 +120,15 @@ class Data extends Controller
'error_message' => trans('errors.title.500'), 'error_message' => trans('errors.title.500'),
] ]
]; ];
}
$currencies = Currency::collect(); protected function getCurrencies()
{
return Currency::all();
}
// Prepare codes protected function getCurrencyCodes()
{
$codes = []; $codes = [];
$money_currencies = MoneyCurrency::getCurrencies(); $money_currencies = MoneyCurrency::getCurrencies();
@ -112,39 +136,28 @@ class Data extends Controller
$codes[$key] = $key; $codes[$key] = $key;
} }
$taxes = Tax::collect(); return $codes;
}
$modules = $this->getFeaturedModules([ protected function getTaxes()
'query' => [ {
'limit' => 4 return Tax::all();
] }
]);
protected function getCompany()
{
$company = company(); $company = company();
$company->api_key = setting('apps.api_key'); $company->api_key = setting('apps.api_key');
$company->financial_start = setting('localisation.financial_start'); $company->financial_start = setting('localisation.financial_start');
if ($company->logo) { $logo_id = setting('company.logo');
$logo = \Plank\Mediable\Media::find($company->logo);
$logo->path = route('uploads.get', $logo->id); $logo = Media::find($logo_id);
$logo->path = route('uploads.get', $logo->id);
$company->logo = $logo; $company->logo = $logo;
}
return response()->json([ return $company;
'success' => true,
'errors' => false,
'message' => 'Get all data...',
'data' => [
'translations' => $translations,
'company' => $company,
'currencies' => $currencies,
'currency_codes' => $codes,
'taxes' => $taxes,
'modules' => $modules,
],
]);
} }
} }

View File

@ -73,6 +73,11 @@ class ViewComposer extends Provider
['documents.*', 'portal.documents.*'], ['documents.*', 'portal.documents.*'],
'App\Http\ViewComposers\DocumentType' 'App\Http\ViewComposers\DocumentType'
); );
// Wizard
View::composer(
'layouts.wizard', 'App\Http\ViewComposers\Wizard'
);
} }
/** /**

View File

@ -13,42 +13,35 @@
<script> <script>
export default { export default {
name: "Wizard", name: "Wizard",
created() { created() {
let self = this; this.translations = wizard_translations;
this.company = wizard_company;
this.currencies = wizard_currencies;
this.currency_codes = wizard_currency_codes;
this.taxes = wizard_taxes;
this.modules = wizard_modules;
window Object.keys(this.currency_codes).map((key) => {
.axios({ return this.currency_codes[key];
method: "GET", });
url: url + "/wizard/data",
})
.then((response) => {
let data = response.data.data;
for (let item in data) { this.page_loaded = false;
self[item] = data[item];
}
Object.keys(data.currency_codes).map((key) => {
return data.currency_codes[key];
});
self.page_loaded = false;
});
}, },
data() { data() {
return { return {
currencies: [],
currency_codes: [],
taxes: [],
modules: {},
company: {},
translations: { translations: {
company: {}, company: {},
currencies: {}, currencies: {},
taxes: {}, taxes: {},
finish: {}, finish: {},
}, },
company: {},
currencies: [],
currency_codes: [],
taxes: [],
modules: {},
page_loaded: true page_loaded: true
}; };
}, },

View File

@ -1,115 +1,117 @@
<template> <template>
<div> <div>
<h1 class="text-white"> <h1 class="text-white">
{{ translations.company.title }} {{ translations.company.title }}
</h1> </h1>
<div class="card">
<div class="card-header wizard-header p-3"> <div class="card">
<el-steps :active="active" finish-status="success" align-center> <div class="card-header wizard-header p-3">
<el-step :title="translations.company.title"></el-step> <el-steps :active="active" finish-status="success" align-center>
<el-step :title="translations.currencies.title"></el-step> <el-step :title="translations.company.title"></el-step>
<el-step :title="translations.taxes.title"></el-step> <el-step :title="translations.currencies.title"></el-step>
<el-step :title="translations.finish.title"></el-step> <el-step :title="translations.taxes.title"></el-step>
</el-steps> <el-step :title="translations.finish.title"></el-step>
</div> </el-steps>
<form ref="form" class="w-100">
<div class="card-body">
<div class="document-loading" v-if="pageLoad">
<div>
<i class="fas fa-spinner fa-pulse fa-7x"></i>
</div> </div>
</div>
<div class="row mb-4"> <form ref="form" class="w-100 mb-0">
<div class="col-12 mb-4"> <div class="card-body">
<base-input <div class="document-loading" v-if="pageLoad">
:label="translations.company.api_key" <div>
name="api_key" <i class="fas fa-spinner fa-pulse fa-7x"></i>
data-name="api_key" </div>
:placeholder="translations.company.api_key" </div>
prepend-icon="fas fa-key"
v-model="company.api_key" <div class="row mb-0">
/> <div class="col-12 mb-4">
<p class="mb-0 mt--3"> <base-input
<small> :label="translations.company.api_key"
<div> name="api_key"
<a href="https://akaunting.com/dashboard" target="_blank" data-name="api_key"
>Click here</a :placeholder="translations.company.api_key"
> prepend-icon="fas fa-key"
to get your API key. v-model="company.api_key"
</div> />
</small>
</p> <p class="mb-0 mt--3">
</div> <small>
<div class="col-6 mb-4"> <div>
<base-input <a href="https://akaunting.com/dashboard" target="_blank">Click here</a>
type="text" to get your API key.
:label="translations.company.tax_number" </div>
name="tax_number" </small>
data-name="tax_number" </p>
:placeholder="translations.company.tax_number" </div>
prepend-icon="fas fa-percent"
v-model="company.tax_number" <div class="col-6">
/> <base-input
</div> type="text"
<div class="col-6 mb-4"> :label="translations.company.tax_number"
<akaunting-date name="tax_number"
:title="translations.company.financial_start" data-name="tax_number"
data-name="financial_start" :placeholder="translations.company.tax_number"
:placeholder="translations.company.financial_start" prepend-icon="fas fa-percent"
icon="fas fa-calendar" v-model="company.tax_number"
:date-config="{ />
dateFormat: 'd-m', </div>
allowInput: true, <div class="col-6">
altInput: true, <akaunting-date
altFormat: 'j F', :title="translations.company.financial_start"
}" data-name="financial_start"
v-model="real_date" :placeholder="translations.company.financial_start"
></akaunting-date> icon="fas fa-calendar"
</div> :date-config="{
<div class="col-12 mb-4"> dateFormat: 'd-m',
<base-input :label="translations.company.address"> allowInput: true,
<textarea altInput: true,
class="form-control" altFormat: 'j F',
name="address" }"
data-name="address" v-model="real_date"
rows="3" ></akaunting-date>
:placeholder="translations.company.address" </div>
v-model="company.address"
></textarea> <div class="col-12">
</base-input> <base-input :label="translations.company.address">
</div> <textarea
<div class="col-3"> class="form-control"
<label class="form-control-label">{{ name="address"
translations.company.logo data-name="address"
}}</label> rows="3"
<akaunting-dropzone-file-upload :placeholder="translations.company.address"
ref="dropzoneWizard" v-model="company.address"
preview-classes="single" ></textarea>
:attachments="logo" </base-input>
:v-model="logo" </div>
>
</akaunting-dropzone-file-upload> <div class="col-3 mb-0">
</div> <label class="form-control-label">{{ translations.company.logo }}</label>
</div> <akaunting-dropzone-file-upload
ref="dropzoneWizard"
preview-classes="single"
:attachments="logo"
:v-model="logo"
>
</akaunting-dropzone-file-upload>
</div>
</div>
</div>
<div class="card-footer">
<div class="row">
<div class="col-md-12 text-right">
<base-button
id="button"
type="success"
native-type="button"
@click="onEditSave()"
>{{ translations.company.save }}</base-button>
<base-button type="white" native-type="submit" @click="next()">{{ translations.company.skip }}</base-button>
</div>
</div>
</div>
</form>
</div> </div>
<div class="card-footer">
<div class="row">
<div class="col-md-12 text-right">
<base-button
id="button"
type="success"
native-type="button"
@click="onEditSave()"
>{{ translations.company.save }}</base-button
>
<base-button type="white" native-type="submit" @click="next()">{{
translations.company.skip
}}</base-button>
</div>
</div>
</div>
</form>
</div>
</div> </div>
</template> </template>

View File

@ -4,6 +4,15 @@
<script src="{{ asset('public/vendor/bootstrap/dist/js/bootstrap.bundle.min.js') }}"></script> <script src="{{ asset('public/vendor/bootstrap/dist/js/bootstrap.bundle.min.js') }}"></script>
<script src="{{ asset('public/vendor/js-cookie/js.cookie.js') }}"></script> <script src="{{ asset('public/vendor/js-cookie/js.cookie.js') }}"></script>
<script type="text/javascript">
var wizard_translations = {!! json_encode($translations) !!};
var wizard_company = {!! json_encode($company) !!};
var wizard_currencies = {!! json_encode($currencies) !!};
var wizard_currency_codes = {!! json_encode($currency_codes) !!};
var wizard_taxes = {!! json_encode($taxes) !!};
var wizard_modules = {!! json_encode($modules) !!};
</script>
<script src="{{ asset('public/js/wizard/wizard.js?v=' . version('short')) }}"></script> <script src="{{ asset('public/js/wizard/wizard.js?v=' . version('short')) }}"></script>
@stack('body_css') @stack('body_css')

View File

@ -9,8 +9,6 @@ use Illuminate\Support\Facades\Route;
*/ */
Route::group(['as' => 'wizard.'], function () { Route::group(['as' => 'wizard.'], function () {
Route::get('data', 'Wizard\Data@index')->name('data.index');
Route::get('companies', 'Wizard\Companies@edit')->name('companies.edit'); Route::get('companies', 'Wizard\Companies@edit')->name('companies.edit');
Route::post('companies', 'Wizard\Companies@update')->middleware('dropzone')->name('companies.update'); Route::post('companies', 'Wizard\Companies@update')->middleware('dropzone')->name('companies.update');