Add new Vue.js component to handle submit and cancel buttons

ChangeLog

@@ -3,7 +3,7 @@ Version 1.0.33 (unreleased)
 
 New features:
 
-* Move a task without drag and drop (mobiles)
+* Move a task without drag and drop (smartphones and tablets)
 * Add the possibility to unlock users from the user interface
 * New API calls for task metadata
 * New automatic actions:

app/Template/task_move_position/show.php

@@ -30,11 +30,12 @@
         <label><input type="radio" value="after" v-model="positionChoice"><?= t('Insert after this task') ?></label>
     </div>
 
-    <div class="form-actions">
-        <input type="button" value="<?= t('Save') ?>" class="btn btn-blue" @click="onSubmit">
-        <?= t('or') ?>
-        <?= $this->url->link(t('cancel'), 'TaskViewController', 'show', array('task_id' => $task['id'], 'project_id' => $task['project_id']), false, 'close-popover') ?>
-    </div>
+    <submit-cancel
+        label-button="<?= t('Save') ?>"
+        label-or="<?= t('or') ?>"
+        label-cancel="<?= t('cancel') ?>"
+        :callback="onSubmit">
+    </submit-cancel>
 </script>
 
 <task-move-position

assets/js/components/submit-cancel.js

@@ -0,0 +1,30 @@
+Vue.component('submit-cancel', {
+    props: ['labelButton', 'labelOr', 'labelCancel', 'callback'],
+    template: '<div class="form-actions">' +
+              '<button type="button" class="btn btn-blue" @click="onSubmit" :disabled="isLoading">' +
+              '<span v-show="isLoading"><i class="fa fa-spinner fa-pulse"></i> </span>' +
+              '{{ labelButton }}' +
+              '</button> ' +
+              '{{ labelOr }} <a href="#" v-on:click.prevent="onCancel">{{ labelCancel }}</a>' +
+              '</div>'
+    ,
+    data: function () {
+        return {
+            loading: false
+        };
+    },
+    computed: {
+        isLoading: function () {
+            return this.loading;
+        }
+    },
+    methods: {
+        onSubmit: function () {
+            this.loading = true;
+            this.callback();
+        },
+        onCancel: function () {
+            _KB.get('Popover').close();
+        }
+    }
+});

assets/js/src/Bootstrap.js

@@ -1,4 +1,6 @@
+var _KB = null;
+
 jQuery(document).ready(function() {
-    var app = new Kanboard.App();
-    app.execute();
+    _KB = new Kanboard.App();
+    _KB.execute();
 });