Load external tasks asynchronously from task view page

app/Controller/ExternalTaskViewController.php

@@ -0,0 +1,30 @@
+<?php
+
+namespace Kanboard\Controller;
+
+use Kanboard\Core\ExternalTask\ExternalTaskException;
+
+/**
+ * Class ExternalTaskViewController
+ *
+ * @package Kanboard\Controller
+ * @author  Frederic Guillot
+ */
+class ExternalTaskViewController extends BaseController
+{
+    public function show()
+    {
+        try {
+            $task = $this->getTask();
+            $taskProvider = $this->externalTaskManager->getProvider($task['external_provider']);
+            $externalTask = $taskProvider->retrieve($task['external_uri']);
+
+            $this->response->html($this->template->render($taskProvider->getViewTemplate(), array(
+                'task' => $task,
+                'external_task' => $externalTask,
+            )));
+        } catch (ExternalTaskException $e) {
+            $this->response->html('<div class="alert alert-error">'.$e->getMessage().'</div>');
+        }
+    }
+}

app/Core/ExternalTask/ExternalTaskProviderInterface.php

@@ -43,6 +43,13 @@ interface ExternalTaskProviderInterface
      */
     public function getCreationFormTemplate();
 
+    /**
+     * Get task view template name
+     *
+     * @return string
+     */
+    public function getViewTemplate();
+
     /**
      * Build external task URI based on import form values
      *

app/Template/task/details.php

@@ -160,6 +160,10 @@
         <?php endif ?>
     </div>
 
+    <?php if (! empty($task['external_uri']) && ! empty($task['external_provider'])): ?>
+        <external-task-view url="<?= $this->url->href('ExternalTaskViewController', 'show', array('project_id' => $task['project_id'], 'task_id' => $task['id'])) ?>"></external-task-view>
+    <?php endif ?>
+
     <?php if ($editable && empty($task['date_started'])): ?>
         <div class="buttons-header">
             <?= $this->url->button('fa-play', t('Set start date'), 'TaskModificationController', 'start', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>

assets/js/components/external-task-view.js

@@ -0,0 +1,19 @@
+Vue.component('external-task-view', {
+    props: ['url'],
+    template: '<div id="external-task-view" v-show="content">{{{ content }}}</div>',
+    data: function () {
+        return {
+            content: ''
+        };
+    },
+    ready: function () {
+        var self = this;
+        $.ajax({
+            cache: false,
+            url: this.url,
+            success: function(data) {
+                self.content = data;
+            }
+        });
+    }
+});

assets/sass/_task_summary.sass

@@ -31,3 +31,9 @@
     color: color('medium')
   li
     line-height: 23px
+
+#external-task-view
+  padding: 10px
+  margin-top: 10px
+  margin-bottom: 10px
+  border: 1px dotted #ccc