App store install purchase app

app/Http/Controllers/Modules/Item.php

@@ -78,31 +78,34 @@ class Item extends Controller
      */
     public function steps(Request $request)
     {
-        $json = [];
+        $steps = [];
-        $json['step'] = [];
 
         $name = $request['name'];
-        $version = $request['version'];
 
         // Download
-        $json['step'][] = [
+        $steps[] = [
             'text' => trans('modules.installation.download', ['module' => $name]),
             'url'  => url('apps/download')
         ];
 
         // Unzip
-        $json['step'][] = [
+        $steps[] = [
             'text' => trans('modules.installation.unzip', ['module' => $name]),
             'url'  => url('apps/unzip')
         ];
 
         // Download
-        $json['step'][] = [
+        $steps[] = [
             'text' => trans('modules.installation.install', ['module' => $name]),
             'url'  => url('apps/install')
         ];
 
-        return response()->json($json);
+        return response()->json([
+            'success' => true,
+            'error' => false,
+            'data' => $steps,
+            'message' => null
+        ]);
     }
 
     /**

app/Traits/Modules.php

@@ -335,14 +335,16 @@ trait Modules
 
             return [
                 'success' => true,
-                'errors' => false,
+                'error' => false,
+                'message' => null,
                 'data' => $data,
             ];
         }
 
         return [
             'success' => false,
-            'errors' => true,
+            'error' => true,
+            'message' => null,
             'data' => null,
         ];
     }
@@ -359,7 +361,8 @@ trait Modules
         if (!$zip->open($file) || !$zip->extractTo($temp_path)) {
             return [
                 'success' => false,
-                'errors' => true,
+                'error' => true,
+                'message' => null,
                 'data' => null,
             ];
         }
@@ -375,7 +378,8 @@ trait Modules
 
         return [
             'success' => true,
-            'errors' => false,
+            'error' => false,
+            'message' => null,
             'data' => $data,
         ];
     }
@@ -414,8 +418,9 @@ trait Modules
 
         return [
             'success' => true,
-            'installed' => url("apps/post/" . $module->alias),
+            'redirect' => url("apps/post/" . $module->alias),
-            'errors' => false,
+            'error' => false,
+            'message' => null,
             'data' => $data,
         ];
     }
@@ -439,7 +444,8 @@ trait Modules
 
         return [
             'success' => true,
-            'errors' => false,
+            'error' => false,
+            'message' => null,
             'data' => $data
         ];
     }
@@ -460,7 +466,8 @@ trait Modules
 
         return [
             'success' => true,
-            'errors' => false,
+            'error' => false,
+            'message' => null,
             'data' => $data
         ];
     }
@@ -481,7 +488,8 @@ trait Modules
 
         return [
             'success' => true,
-            'errors' => false,
+            'error' => false,
+            'message' => null,
             'data' => $data
         ];
     }

resources/assets/js/views/install/update.js

@@ -100,7 +100,7 @@ const app = new Vue({
             let installed = document.getElementById('installed').value;
 
             if (data) {
-                this.update.total = (100 - ((this.update.steps.length / this.update.steps_total) * 100));
+                this.update.total = (100 - ((this.update.steps.length / this.update.steps_total) * 100)).toFixed(0);
 
                 this.update.html = '<span class="text-default"><i class="fa fa-spinner fa-spin update-spin"></i> ' + data['text'] + '</span> </br>';
 

resources/assets/js/views/modules/item.js

@@ -10,6 +10,10 @@ import Vue from 'vue';
 
 import Global from '../../mixins/global';
 
+import {Progress} from 'element-ui';
+
+Vue.use(Progress);
+
 const app = new Vue({
     el: '#app',
 
@@ -17,6 +21,10 @@ const app = new Vue({
         Global
     ],
 
+    components: {
+        [Progress.name]: Progress,
+    },
+
     mounted() {
         this.onGetReviews('', 1);
     },
@@ -24,7 +32,17 @@ const app = new Vue({
     data: function () {
         return {
             reviews: '',
-            faq: false
+            faq: false,
+            installation: {
+                show: false,
+                steps: [],
+                steps_total: 0,
+                total: 0,
+                path: '',
+                version: '',
+                status: 'success',
+                html: ''
+            },
         }
     },
 
@@ -43,6 +61,77 @@ const app = new Vue({
 
         onShowFaq() {
             this.faq = true;
+        },
+
+        onInstall(path, name, version) {
+            this.installation.show = true;
+            this.installation.total = 0;
+            this.installation.path = path;
+            this.installation.version = version;
+
+            axios.post(url + '/apps/steps', {
+                name: name,
+                version: version
+            })
+            .then(response => {
+                if (response.data.error) {
+                    this.installation.status = 'exception';
+                    this.installation.html = '<div class="text-danger">' + response.data.message + '</div>';
+                }
+
+                // Set steps
+                if (response.data.data) {
+                    this.installation.steps = response.data.data;
+                    this.installation.steps_total = this.installation.steps.length;
+
+                    this.next();
+                }
+            })
+            .catch(error => {
+            });
+        },
+
+        next() {
+            let data = this.installation.steps.shift();
+
+            if (data) {
+                this.installation.total = (100 - ((this.installation.steps.length / this.installation.steps_total) * 100)).toFixed(0);
+
+                this.installation.html = '<span class="text-default"><i class="fa fa-spinner fa-spin update-spin"></i> ' + data['text'] + '</span> </br>';
+
+                axios.post(data.url, {
+                    version: this.installation.version,
+                    path: this.installation.path,
+                })
+                .then(response => {
+                    if (response.data.error) {
+                        this.installation.status = 'exception';
+                        this.installation.html = '<div class="text-danger"><i class="fa fa-times update-error"></i> ' + response.data.message + '</div>';
+                    }
+
+                    if (response.data.success) {
+                        this.installation.status = 'success';
+                    }
+
+                    if (response.data.data.path) {
+                        this.installation.path = response.data.data.path;
+                    }
+
+                    if (!response.data.error && !response.data.redirect) {
+                        let self = this;
+
+                        setTimeout(function() {
+                            self.next();
+                        }, 800);
+                    }
+
+                    if (response.data.redirect) {
+                        window.location = response.data.redirect;
+                    }
+                })
+                .catch(error => {
+                });
+            }
         }
     }
 });

resources/views/modules/home/index.blade.php

@@ -61,3 +61,7 @@
             </div>
         @endif
 @endsection
+
+@push('scripts_start')
+    <script src="{{ asset('public/js/modules/apps.js?v=' . version('short')) }}"></script>
+@endpush

resources/views/modules/item/show.blade.php

@@ -210,9 +210,9 @@
                     @else
                         @permission('create-modules-item')
                             @if ($module->install)
-                                <a href="{{ $module->action_url }}" class="btn btn-success btn-block" id="install-module">
+                                <button type="button" @click="onInstall('{{ $module->action_url }}', '{{ $module->name }}', '{{ $module->version }}')" class="btn btn-success btn-block" id="install-module">
                                     {{ trans('modules.install') }}
-                                </a>
+                                </button>
                             @else
                                 <a href="{{ $module->action_url }}" class="btn btn-success btn-block" target="_blank">
                                     {{ trans('modules.buy_now') }}
@@ -293,6 +293,23 @@
             </template>
         </akaunting-modal>
     @endif
+
+    @if ($module->install)
+        <akaunting-modal :show="installation.show"
+        :title="'{{ trans('modules.installation.header') }}'"
+        @cancel="installation.show = false">
+            <template #modal-body>
+                <div class="modal-body">
+                    <el-progress :text-inside="true" :stroke-width="24" :percentage="installation.total" :status="installation.status"></el-progress>
+
+                    <div id="progress-text" v-html="installation.html"></div>
+                </div>
+            </template>
+            <template #card-footer>
+                <span></span>
+            </template>
+        </akaunting-modal>
+    @endif
 @endsection
 
 @push('scripts_start')

resources/views/partials/modules/bar.blade.php

@@ -5,6 +5,7 @@
                 <div class="row">
                     <div class="col-9">
                         {!! Form::select('category', $categories, request('category'), ['class' => 'form-control form-control-sm table-header-search mt-0']) !!}
+
                         <a href="{{ route('apps.paid') }}" class="btn btn-sm btn-white card-buttons filter-button ml-2">{{ trans('modules.top_paid') }}</a>
                         <a href="{{ route('apps.new') }}" class="btn btn-sm btn-white card-buttons filter-button">{{ trans('modules.new') }}</a>
                         <a href="{{ route('apps.free') }}" class="btn btn-sm btn-white card-buttons filter-button">{{ trans('modules.top_free') }}</a>