From fdd1011b3a228b5ae701bf870a36054dfcea1bf0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=BCneyt=20=C5=9Eent=C3=BCrk?= <cneytsenturk@gmail.com>
Date: Tue, 1 Jun 2021 23:58:08 +0300
Subject: [PATCH] Wizard page re-factoring..

---
 .../Data.php => ViewComposers/Wizard.php}     | 101 ++++----
 app/Providers/ViewComposer.php                |   5 +
 resources/assets/js/Wizard.vue                |  39 ++--
 resources/assets/js/views/wizard/Company.vue  | 220 +++++++++---------
 .../views/partials/wizard/scripts.blade.php   |   9 +
 routes/wizard.php                             |   2 -
 6 files changed, 198 insertions(+), 178 deletions(-)
 rename app/Http/{Controllers/Wizard/Data.php => ViewComposers/Wizard.php} (73%)

diff --git a/app/Http/Controllers/Wizard/Data.php b/app/Http/ViewComposers/Wizard.php
similarity index 73%
rename from app/Http/Controllers/Wizard/Data.php
rename to app/Http/ViewComposers/Wizard.php
index fa3a43b9f..6dd7594f7 100644
--- a/app/Http/Controllers/Wizard/Data.php
+++ b/app/Http/ViewComposers/Wizard.php
@@ -1,39 +1,58 @@
 <?php
 
-namespace App\Http\Controllers\Wizard;
-
-use App\Abstracts\Http\Controller;
+namespace App\Http\ViewComposers;
 
 use Akaunting\Money\Currency as MoneyCurrency;
+use App\Models\Common\Media;
 use App\Models\Setting\Currency;
 use App\Models\Setting\Tax;
 use App\Traits\Modules;
 use App\Models\Common\Company;
+use Illuminate\View\View;
 
-class Data extends Controller
+class Wizard
 {
     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
-        $this->middleware('permission:create-common-companies')->only('create', 'store', 'duplicate', 'import');
-        $this->middleware('permission:read-common-companies')->only('index', 'show', 'edit', 'export');
-        $this->middleware('permission:update-common-companies')->only('update', 'enable', 'disable');
-        $this->middleware('permission:delete-common-companies')->only('destroy');
+        $translations = $this->getTransalations();
+
+        $currencies = $this->getCurrencies();
+
+        // 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,
+        ]);
     }
 
-    /**
-     * Show the form for creating a new resource.
-     *
-     * @return Response
-     */
-    public function index()
+    /* Wizard page transactions */
+    protected function getTransalations()
     {
-        $translations = [
+        return [
             'company' => [
                 'title' => trans_choice('general.companies', 1),
                 'api_key' => trans('modules.api_key'),
@@ -101,10 +120,15 @@ class Data extends Controller
                 'error_message' => trans('errors.title.500'),
             ]
         ];
+    }
 
-        $currencies = Currency::collect();
+    protected function getCurrencies()
+    {
+        return Currency::all();
+    }
 
-        // Prepare codes
+    protected function getCurrencyCodes()
+    {
         $codes = [];
         $money_currencies = MoneyCurrency::getCurrencies();
 
@@ -112,39 +136,28 @@ class Data extends Controller
             $codes[$key] = $key;
         }
 
-        $taxes = Tax::collect();
+        return $codes;
+    }
 
-        $modules = $this->getFeaturedModules([
-            'query' => [
-                'limit' => 4
-            ]
-        ]);
+    protected function getTaxes()
+    {
+        return Tax::all();
+    }
 
+    protected function getCompany()
+    {
         $company = company();
 
         $company->api_key = setting('apps.api_key');
         $company->financial_start = setting('localisation.financial_start');
 
-        if ($company->logo) {
-            $logo = \Plank\Mediable\Media::find($company->logo);
+        $logo_id = setting('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([
-            'success' => true,
-            'errors' => false,
-            'message' => 'Get all data...',
-            'data' => [
-                'translations' => $translations,
-                'company' => $company,
-                'currencies' => $currencies,
-                'currency_codes' => $codes,
-                'taxes' => $taxes,
-                'modules' => $modules,
-            ],
-        ]);
+        return $company;
     }
 }
diff --git a/app/Providers/ViewComposer.php b/app/Providers/ViewComposer.php
index db7bd740a..844a31dbf 100644
--- a/app/Providers/ViewComposer.php
+++ b/app/Providers/ViewComposer.php
@@ -73,6 +73,11 @@ class ViewComposer extends Provider
             ['documents.*', 'portal.documents.*'],
             'App\Http\ViewComposers\DocumentType'
         );
+
+        // Wizard
+        View::composer(
+            'layouts.wizard', 'App\Http\ViewComposers\Wizard'
+        );
     }
 
     /**
diff --git a/resources/assets/js/Wizard.vue b/resources/assets/js/Wizard.vue
index 6131491eb..f5a8a293c 100644
--- a/resources/assets/js/Wizard.vue
+++ b/resources/assets/js/Wizard.vue
@@ -13,42 +13,35 @@
 <script>
 export default {
   name: "Wizard",
+
   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
-      .axios({
-        method: "GET",
-        url: url + "/wizard/data",
-      })
-      .then((response) => {
-        let data = response.data.data;
+    Object.keys(this.currency_codes).map((key) => {
+      return this.currency_codes[key];
+    });
 
-        for (let item in data) {
-          self[item] = data[item];
-        }
-
-        Object.keys(data.currency_codes).map((key) => {
-          return data.currency_codes[key];
-        });
-
-        self.page_loaded = false;
-      });
+    this.page_loaded = false;
   },
 
   data() {
     return {
-      currencies: [],
-      currency_codes: [],
-      taxes: [],
-      modules: {},
-      company: {},
       translations: {
         company: {},
         currencies: {},
         taxes: {},
         finish: {},
       },
+      company: {},
+      currencies: [],
+      currency_codes: [],
+      taxes: [],
+      modules: {},
       page_loaded: true
     };
   },
diff --git a/resources/assets/js/views/wizard/Company.vue b/resources/assets/js/views/wizard/Company.vue
index 98b72ee1c..cc3f49267 100644
--- a/resources/assets/js/views/wizard/Company.vue
+++ b/resources/assets/js/views/wizard/Company.vue
@@ -1,115 +1,117 @@
 <template>
-  <div>
-    <h1 class="text-white">
-      {{ translations.company.title }}
-    </h1>
-    <div class="card">
-      <div class="card-header wizard-header p-3">
-        <el-steps :active="active" finish-status="success" align-center>
-          <el-step :title="translations.company.title"></el-step>
-          <el-step :title="translations.currencies.title"></el-step>
-          <el-step :title="translations.taxes.title"></el-step>
-          <el-step :title="translations.finish.title"></el-step>
-        </el-steps>
-      </div>
-      <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>
+        <h1 class="text-white">
+            {{ translations.company.title }}
+        </h1>
+
+        <div class="card">
+            <div class="card-header wizard-header p-3">
+                <el-steps :active="active" finish-status="success" align-center>
+                    <el-step :title="translations.company.title"></el-step>
+                    <el-step :title="translations.currencies.title"></el-step>
+                    <el-step :title="translations.taxes.title"></el-step>
+                    <el-step :title="translations.finish.title"></el-step>
+                </el-steps>
             </div>
-          </div>
-          <div class="row mb-4">
-            <div class="col-12 mb-4">
-              <base-input
-                :label="translations.company.api_key"
-                name="api_key"
-                data-name="api_key"
-                :placeholder="translations.company.api_key"
-                prepend-icon="fas fa-key"
-                v-model="company.api_key"
-              />
-              <p class="mb-0 mt--3">
-                <small>
-                  <div>
-                    <a href="https://akaunting.com/dashboard" target="_blank"
-                      >Click here</a
-                    >
-                    to get your API key.
-                  </div>
-                </small>
-              </p>
-            </div>
-            <div class="col-6 mb-4">
-              <base-input
-                type="text"
-                :label="translations.company.tax_number"
-                name="tax_number"
-                data-name="tax_number"
-                :placeholder="translations.company.tax_number"
-                prepend-icon="fas fa-percent"
-                v-model="company.tax_number"
-              />
-            </div>
-            <div class="col-6 mb-4">
-              <akaunting-date
-                :title="translations.company.financial_start"
-                data-name="financial_start"
-                :placeholder="translations.company.financial_start"
-                icon="fas fa-calendar"
-                :date-config="{
-                  dateFormat: 'd-m',
-                  allowInput: true,
-                  altInput: true,
-                  altFormat: 'j F',
-                }"
-                v-model="real_date"
-              ></akaunting-date>
-            </div>
-            <div class="col-12 mb-4">
-              <base-input :label="translations.company.address">
-                <textarea
-                  class="form-control"
-                  name="address"
-                  data-name="address"
-                  rows="3"
-                  :placeholder="translations.company.address"
-                  v-model="company.address"
-                ></textarea>
-              </base-input>
-            </div>
-            <div class="col-3">
-              <label class="form-control-label">{{
-                translations.company.logo
-              }}</label>
-              <akaunting-dropzone-file-upload
-                ref="dropzoneWizard"
-                preview-classes="single"
-                :attachments="logo"
-                :v-model="logo"
-              >
-              </akaunting-dropzone-file-upload>
-            </div>
-          </div>
+
+            <form ref="form" class="w-100 mb-0">
+                <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 class="row mb-0">
+                        <div class="col-12 mb-4">
+                            <base-input
+                                :label="translations.company.api_key"
+                                name="api_key"
+                                data-name="api_key"
+                                :placeholder="translations.company.api_key"
+                                prepend-icon="fas fa-key"
+                                v-model="company.api_key"
+                            />
+
+                            <p class="mb-0 mt--3">
+                                <small>
+                                    <div>
+                                        <a href="https://akaunting.com/dashboard" target="_blank">Click here</a>
+                                        to get your API key.
+                                    </div>
+                                </small>
+                            </p>
+                        </div>
+
+                        <div class="col-6">
+                            <base-input
+                                type="text"
+                                :label="translations.company.tax_number"
+                                name="tax_number"
+                                data-name="tax_number"
+                                :placeholder="translations.company.tax_number"
+                                prepend-icon="fas fa-percent"
+                                v-model="company.tax_number"
+                            />
+                        </div>
+                        <div class="col-6">
+                            <akaunting-date
+                            :title="translations.company.financial_start"
+                                data-name="financial_start"
+                                :placeholder="translations.company.financial_start"
+                                icon="fas fa-calendar"
+                                :date-config="{
+                                  dateFormat: 'd-m',
+                                  allowInput: true,
+                                  altInput: true,
+                                  altFormat: 'j F',
+                                }"
+                                v-model="real_date"
+                            ></akaunting-date>
+                        </div>
+
+                        <div class="col-12">
+                            <base-input :label="translations.company.address">
+                                <textarea
+                                    class="form-control"
+                                    name="address"
+                                    data-name="address"
+                                    rows="3"
+                                    :placeholder="translations.company.address"
+                                    v-model="company.address"
+                                ></textarea>
+                            </base-input>
+                        </div>
+
+                        <div class="col-3 mb-0">
+                            <label class="form-control-label">{{  translations.company.logo }}</label>
+                            <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 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>
 </template>
 
diff --git a/resources/views/partials/wizard/scripts.blade.php b/resources/views/partials/wizard/scripts.blade.php
index 81f7b1b8e..7def00260 100644
--- a/resources/views/partials/wizard/scripts.blade.php
+++ b/resources/views/partials/wizard/scripts.blade.php
@@ -4,6 +4,15 @@
     <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 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>
 
     @stack('body_css')
diff --git a/routes/wizard.php b/routes/wizard.php
index 3f3f951ec..a746cfb07 100644
--- a/routes/wizard.php
+++ b/routes/wizard.php
@@ -9,8 +9,6 @@ use Illuminate\Support\Facades\Route;
  */
 
 Route::group(['as' => 'wizard.'], function () {
-    Route::get('data', 'Wizard\Data@index')->name('data.index');
-
     Route::get('companies', 'Wizard\Companies@edit')->name('companies.edit');
     Route::post('companies', 'Wizard\Companies@update')->middleware('dropzone')->name('companies.update');