fix : use asset helper to load images, modify execute and status vue components to receive route urls from blade (codestudiohq#23)

Author: roshangautam

public/css/app.css.map

@@ -18,6 +18,10 @@
         },
         props: {
             dataTask: {},
+            url: {
+                type: String,
+                required: true
+            },
             iconName: {
                 type: String,
                 default: null
@@ -42,7 +46,7 @@
             execute() {
                 this.running = true
 
-                axios.get('/totem/tasks/' + this.task.id + '/execute')
+                axios.get(this.url)
                     .takeAtLeast(500)
                     .then(response => {
                         this.task = response.data

public/js/app.js

@@ -17,10 +17,24 @@
         components: {
             'icon':Icon
         },
-        props: [
-            'dataTask',
-            'dataExists'
-        ],
+        props: {
+            dataTask: {
+                type: Object,
+                default: null
+            },
+            dataExists : {
+                type: Boolean,
+                required: false
+            },
+            activateUrl : {
+                type: String,
+                required: true
+            },
+            deactivateUrl : {
+                type: String,
+                required: true
+            }
+        },
         data() {
             return {
                 hovering: false,
@@ -44,8 +58,9 @@
             activate() {
                 this.working = true
 
-                axios.post('/totem/tasks/status', { task_id: this.task.id })
-                    .takeAtLeast(500)
+                axios.post(this.activateUrl, {
+                    task_id: this.dataTask.id
+                }).takeAtLeast(500)
                     .then(response => {
                         this.task = response.data
                         this.working = false
@@ -55,7 +70,7 @@
             deactivate() {
                 this.working = true
 
-                axios.delete(`/totem/tasks/status/${this.task.id}`)
+                axios.delete(this.deactivateUrl)
                     .takeAtLeast(500)
                     .then(response => {
                         this.task = response.data

resources/assets/js/tasks/components/ExecuteButton.vue

@@ -1,6 +1,6 @@
 <aside class="uk-width-1-6@l uk-margin-bottom">
     <div class="uk-text-center">
-        <img src="/vendor/totem/img/mask.svg" class="uk-svg">
+        <img src="{{asset('vendor/totem/img/mask.svg')}}" class="uk-svg">
         <div class="uk-text-large">Totem</div>
     </div>
     <hr>

resources/assets/js/tasks/components/StatusButton.vue

@@ -55,13 +55,13 @@
                         <span class="uk-float-right uk-hidden@s uk-text-muted">Next Run</span>
                     </td>
                     <td class="uk-text-center@m">
-                        <execute-button :data-task="{{$task}}" icon-name="cog" button-class="uk-button-link"></execute-button>
+                        <execute-button :data-task="{{$task}}" url="{{route('totem.task.execute', $task)}}" icon-name="cog" button-class="uk-button-link"></execute-button>
                     </td>
                 </tr>
             @empty
                 <tr>
                     <td class="uk-text-center" colspan="5">
-                        <img class="uk-svg" width="50" height="50" src="/vendor/totem/img/funnel.svg">
+                        <img class="uk-svg" width="50" height="50" src="{{asset('/vendor/totem/img/funnel.svg')}}">
                         <p>No Tasks Found.</p>
                     </td>
                 </tr>

resources/views/partials/sidebar.blade.php

@@ -6,7 +6,7 @@
 @section('title')
     <div class="uk-flex uk-flex-between uk-flex-middle">
         <h5 class="uk-card-title uk-margin-remove">Task Details</h5>
-        <status-button :data-task="{{ $task }}" :data-exists="{{ $task->exists ? 1 : 0 }}"></status-button>
+        <status-button :data-task="{{ $task }}" :data-exists="{{ $task->exists ? 'true' : 'false' }}" activate-url="{{route('totem.task.activate')}}" deactivate-url="{{route('totem.task.deactivate', $task)}}"></status-button>
     </div>
 @stop
 @section('main-panel-content')
@@ -84,7 +84,7 @@
                 <button type="submit" class="uk-button uk-button-danger uk-button-small">Delete</button>
             </form>
         </span>
-        <execute-button :data-task="{{ $task }}" button-class="uk-button-small uk-button-primary"></execute-button>
+        <execute-button :data-task="{{ $task }}" url="{{route('totem.task.execute', $task)}}" button-class="uk-button-small uk-button-primary"></execute-button>
     </div>
 @stop
 @section('additional-panels')