@oat-sa/tao-core-ui 1.54.2 → 1.55.0

package/src/taskQueueButton/standardButton.js

@@ -1,108 +1,108 @@
-/**
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU General Public License
- * as published by the Free Software Foundation; under version 2
- * of the License (non-upgradable).
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program; if not, write to the Free Software
- * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- *
- * Copyright (c) 2017 (original work) Open Assessment Technologies SA;
- */
-
-/**
- * Component to create a simple button that will command task creation
- *
- * @example minimal example to build a task
- * standardTaskButtonFactory({
- *    type : 'info',
- *    icon : 'delivery',
- *    title : __('Publish the test'),
- *    label : __('Publish'),
- *    taskQueue : taskQueue,
- *    taskCreationUrl : 'the/url/to/task/creation/service'
- * }).render($container);
- *
- * @example simple example to build a task with additional request params
- * standardTaskButtonFactory({
- *    type : 'info',
- *    icon : 'delivery',
- *    title : __('Publish the test'),
- *    label : __('Publish'),
- *    taskQueue : taskQueue,
- *    taskCreationUrl : 'the/url/to/task/creation/service',
- *    taskCreationData : {foo : 'bar}
- * }).render($container);
- *
- * @example full example using taskCreationData as a function and taskReportContainer to display the report in
- * standardTaskButtonFactory({
- *    type : 'info',
- *    icon : 'delivery',
- *    title : __('Publish the test'),
- *    label : __('Publish'),
- *    taskQueue : taskQueue,
- *    taskCreationUrl : $form.prop('action'),
- *    taskCreationData : function getTaskCreationData(){
- *        return $form.serializeArray();
- *    },
- *    taskReportContainer : $container
- * }).render($container);
- */
-
-import _ from 'lodash';
-import loadingButton from 'ui/loadingButton/loadingButton';
-import makeTaskable from 'ui/taskQueueButton/taskable';
-
-var defaultConfig = {};
-
-/**
- * Builds a standard task creation button
- *
- * @param {Object} config - the component config
- * @param {String} config.type - the icon type (info, success, error)
- * @param {String} config.icon - the button icon
- * @param {String} config.label - the button's label
- * @param {String} [config.title] - the button's title
- * @param {String} [config.terminatedLabel] - the button's label when terminated
- * @param {Object} config.taskQueue - the task queue model to be used
- * @param {String} config.taskCreationUrl - endpoint to create a task
- * @param {Object|Function} [config.taskCreationData] - the parameters that will be send to the task creation request
- * @param {JQuery} [config.taskReportContainer] - the container where the inline report can be printed to
- * @returns {standardTaskButton} the component
- *
- * @event started - Emitted when the button is clicked and the triggered action supposed to be started
- * @event terminated - Emitted when the button action is stopped, interrupted
- * @event reset - Emitted when the button revert from the terminated stated to the initial one
- * @event finished - When task is finished within the polling duration allowed by the task queue model
- * @event enqueued - when task has not time to finish within the polling duration allowed by the task queue model
- */
-export default function standardTaskButtonFactory(config) {
-    var component;
-
-    //prepare the config and
-    config = _.defaults(config || {}, defaultConfig);
-
-    //create the base loading button and make it taskable
-    component = makeTaskable(loadingButton(config));
-
-    /**
-     * The component
-     * @typedef {ui/component} standardTaskButton
-     */
-    return component
-        .on('started', function() {
-            this.createTask();
-        })
-        .on('finished', function() {
-            this.terminate().reset();
-        })
-        .on('enqueued', function() {
-            this.terminate().reset();
-        });
-}
+/**
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * as published by the Free Software Foundation; under version 2
+ * of the License (non-upgradable).
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ *
+ * Copyright (c) 2017 (original work) Open Assessment Technologies SA;
+ */
+
+/**
+ * Component to create a simple button that will command task creation
+ *
+ * @example minimal example to build a task
+ * standardTaskButtonFactory({
+ *    type : 'info',
+ *    icon : 'delivery',
+ *    title : __('Publish the test'),
+ *    label : __('Publish'),
+ *    taskQueue : taskQueue,
+ *    taskCreationUrl : 'the/url/to/task/creation/service'
+ * }).render($container);
+ *
+ * @example simple example to build a task with additional request params
+ * standardTaskButtonFactory({
+ *    type : 'info',
+ *    icon : 'delivery',
+ *    title : __('Publish the test'),
+ *    label : __('Publish'),
+ *    taskQueue : taskQueue,
+ *    taskCreationUrl : 'the/url/to/task/creation/service',
+ *    taskCreationData : {foo : 'bar}
+ * }).render($container);
+ *
+ * @example full example using taskCreationData as a function and taskReportContainer to display the report in
+ * standardTaskButtonFactory({
+ *    type : 'info',
+ *    icon : 'delivery',
+ *    title : __('Publish the test'),
+ *    label : __('Publish'),
+ *    taskQueue : taskQueue,
+ *    taskCreationUrl : $form.prop('action'),
+ *    taskCreationData : function getTaskCreationData(){
+ *        return $form.serializeArray();
+ *    },
+ *    taskReportContainer : $container
+ * }).render($container);
+ */
+
+import _ from 'lodash';
+import loadingButton from 'ui/loadingButton/loadingButton';
+import makeTaskable from 'ui/taskQueueButton/taskable';
+
+var defaultConfig = {};
+
+/**
+ * Builds a standard task creation button
+ *
+ * @param {Object} config - the component config
+ * @param {String} config.type - the icon type (info, success, error)
+ * @param {String} config.icon - the button icon
+ * @param {String} config.label - the button's label
+ * @param {String} [config.title] - the button's title
+ * @param {String} [config.terminatedLabel] - the button's label when terminated
+ * @param {Object} config.taskQueue - the task queue model to be used
+ * @param {String} config.taskCreationUrl - endpoint to create a task
+ * @param {Object|Function} [config.taskCreationData] - the parameters that will be send to the task creation request
+ * @param {JQuery} [config.taskReportContainer] - the container where the inline report can be printed to
+ * @returns {standardTaskButton} the component
+ *
+ * @event started - Emitted when the button is clicked and the triggered action supposed to be started
+ * @event terminated - Emitted when the button action is stopped, interrupted
+ * @event reset - Emitted when the button revert from the terminated stated to the initial one
+ * @event finished - When task is finished within the polling duration allowed by the task queue model
+ * @event enqueued - when task has not time to finish within the polling duration allowed by the task queue model
+ */
+export default function standardTaskButtonFactory(config) {
+    var component;
+
+    //prepare the config and
+    config = _.defaults(config || {}, defaultConfig);
+
+    //create the base loading button and make it taskable
+    component = makeTaskable(loadingButton(config));
+
+    /**
+     * The component
+     * @typedef {ui/component} standardTaskButton
+     */
+    return component
+        .on('started', function() {
+            this.createTask();
+        })
+        .on('finished', function() {
+            this.terminate().reset();
+        })
+        .on('enqueued', function() {
+            this.terminate().reset();
+        });
+}

package/src/taskQueueButton/taskable.js

@@ -1,202 +1,202 @@
-/**
- * This program is free software; you can redistribute it and/or
- * modify it under the terms of the GNU General Public License
- * as published by the Free Software Foundation; under version 2
- * of the License (non-upgradable).
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program; if not, write to the Free Software
- * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- *
- * Copyright (c) 2017 (original work) Open Assessment Technologies SA;
- */
-
-/**
- * Add the task creation capability to a component
- *
- * @example
- * makeTaskable(component)
- *    .setTaskConfig({
- *        taskQueue : taskQueue,
- *        taskCreationUrl : 'the/url/to/task/creation/service',
- *        taskCreationData : function(){
- *            return {some: 'data'};
- *        }
- *    }).createTask();
- *
- * @author Sam <sam@taotesting.com>
- */
-import $ from 'jquery';
-import _ from 'lodash';
-import __ from 'i18n';
-import reportFactory from 'ui/report';
-import feedback from 'ui/feedback';
-import loadingBar from 'layout/loading-bar';
-import reportTpl from 'ui/taskQueueButton/tpl/report';
-import 'ui/taskQueueButton/css/taskable.css';
-
-var defaultConfig = {};
-
-var taskableComponent = {
-    /**
-     * Set configuration for task creation
-     * @param config
-     * @returns {taskableComponent}
-     */
-    setTaskConfig: function setTaskConfig(config) {
-        _.assign(this.config, config);
-        return this;
-    },
-
-    /**
-     * Create a task
-     * @param requestUrl
-     * @param requestData
-     */
-    createTask: function createTask() {
-        var self = this;
-        var taskQueue,
-            requestUrl,
-            requestData = {};
-
-        //prepare the request parameter if applicable
-        if (_.isFunction(this.config.taskCreationData)) {
-            requestData = this.config.taskCreationData.call(this);
-        } else if (_.isPlainObject(this.config.taskCreationData)) {
-            requestData = this.config.taskCreationData;
-        }
-
-        if (!this.config.taskCreationUrl) {
-            return this.trigger('error', 'the request url is required to create a task');
-        }
-        requestUrl = this.config.taskCreationUrl;
-
-        if (!this.config.taskQueue) {
-            return this.trigger('error', 'the taskQueue model is required to create a task');
-        }
-        taskQueue = this.config.taskQueue;
-
-        loadingBar.start();
-        taskQueue.pollAllStop();
-        taskQueue
-            .create(requestUrl, requestData)
-            .then(function(result) {
-                var infoBox,
-                    message,
-                    task = result.task;
-
-                if (result.finished) {
-                    if (task.hasFile) {
-                        //download if its is a export-typed task
-                        taskQueue
-                            .download(task.id)
-                            .then(function() {
-                                //immediately archive the finished task as there is no need to display this task in the queue list
-                                return taskQueue.archive(task.id);
-                            })
-                            .then(function() {
-                                self.trigger('finished', result);
-                                taskQueue.pollAll();
-                            })
-                            .catch(function(err) {
-                                self.trigger('error', err);
-                                taskQueue.pollAll();
-                            });
-                    } else {
-                        //immediately archive the finished task as there is no need to display this task in the queue list
-                        taskQueue
-                            .archive(task.id)
-                            .then(function() {
-                                self.trigger('finished', result);
-                                taskQueue.pollAll();
-                            })
-                            .catch(function(err) {
-                                self.trigger('error', err);
-                                taskQueue.pollAll();
-                            });
-                    }
-                } else {
-                    //enqueuing process:
-                    message = __('<strong> %s </strong> has been moved to the background.', task.taskLabel);
-                    infoBox = feedback(null, {
-                        encodeHtml: false,
-                        timeout: { info: 8000 }
-                    }).info(message);
-
-                    taskQueue.trigger('taskcreated', { task: task, sourceDom: infoBox.getElement() });
-                    self.trigger('enqueued', result);
-                }
-                loadingBar.stop();
-            })
-            .catch(function(err) {
-                //in case of error display it and continue task queue activity
-                taskQueue.pollAll();
-                loadingBar.stop();
-                self.trigger('error', err);
-            });
-    },
-
-    /**
-     * prepare the given container to display the final report
-     * @param {Object} report - the standard report object
-     * @param {String} title - the report title
-     * @param {String} result - raw result data from the task creation action
-     */
-    displayReport: function displayReport(report, title, result) {
-        var self = this,
-            $reportContainer;
-
-        if (this.config.taskReportContainer instanceof $) {
-            $reportContainer = $(
-                reportTpl({
-                    title: title
-                })
-            );
-
-            this.config.taskReportContainer.html($reportContainer);
-
-            return reportFactory(
-                {
-                    actions: [
-                        {
-                            id: 'continue',
-                            icon: 'right',
-                            title: 'continue',
-                            label: __('Continue')
-                        }
-                    ]
-                },
-                report
-            )
-                .on('action-continue', function() {
-                    self.trigger('continue', result);
-                })
-                .render($reportContainer.find('.report'));
-        }
-    }
-};
-
-/**
- * @param {Component} component - an instance of ui/component
- * @param {Object} config - task queue creation specific config
- * @param {Object} config.taskQueue - the task queue model to be used
- * @param {String} config.taskCreationUrl - endpoint to create a task
- * @param {Object|Function} [config.taskCreationData] - the parameters that will be send to the task creation request
- * @param {JQuery} [config.taskReportContainer] - the container where the inline report can be printed to
- * @return {taskableComponent}
- */
-export default function makeTaskable(component, config) {
-    _.assign(component, taskableComponent);
-
-    /**
-     * @typedef {ui/component} taskableComponent
-     */
-    return component.off('.taskable').on('init.taskable', function() {
-        _.defaults(this.config, config || {}, defaultConfig);
-    });
-}
+/**
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * as published by the Free Software Foundation; under version 2
+ * of the License (non-upgradable).
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ *
+ * Copyright (c) 2017 (original work) Open Assessment Technologies SA;
+ */
+
+/**
+ * Add the task creation capability to a component
+ *
+ * @example
+ * makeTaskable(component)
+ *    .setTaskConfig({
+ *        taskQueue : taskQueue,
+ *        taskCreationUrl : 'the/url/to/task/creation/service',
+ *        taskCreationData : function(){
+ *            return {some: 'data'};
+ *        }
+ *    }).createTask();
+ *
+ * @author Sam <sam@taotesting.com>
+ */
+import $ from 'jquery';
+import _ from 'lodash';
+import __ from 'i18n';
+import reportFactory from 'ui/report';
+import feedback from 'ui/feedback';
+import loadingBar from 'layout/loading-bar';
+import reportTpl from 'ui/taskQueueButton/tpl/report';
+import 'ui/taskQueueButton/css/taskable.css';
+
+var defaultConfig = {};
+
+var taskableComponent = {
+    /**
+     * Set configuration for task creation
+     * @param config
+     * @returns {taskableComponent}
+     */
+    setTaskConfig: function setTaskConfig(config) {
+        _.assign(this.config, config);
+        return this;
+    },
+
+    /**
+     * Create a task
+     * @param requestUrl
+     * @param requestData
+     */
+    createTask: function createTask() {
+        var self = this;
+        var taskQueue,
+            requestUrl,
+            requestData = {};
+
+        //prepare the request parameter if applicable
+        if (_.isFunction(this.config.taskCreationData)) {
+            requestData = this.config.taskCreationData.call(this);
+        } else if (_.isPlainObject(this.config.taskCreationData)) {
+            requestData = this.config.taskCreationData;
+        }
+
+        if (!this.config.taskCreationUrl) {
+            return this.trigger('error', 'the request url is required to create a task');
+        }
+        requestUrl = this.config.taskCreationUrl;
+
+        if (!this.config.taskQueue) {
+            return this.trigger('error', 'the taskQueue model is required to create a task');
+        }
+        taskQueue = this.config.taskQueue;
+
+        loadingBar.start();
+        taskQueue.pollAllStop();
+        taskQueue
+            .create(requestUrl, requestData)
+            .then(function(result) {
+                var infoBox,
+                    message,
+                    task = result.task;
+
+                if (result.finished) {
+                    if (task.hasFile) {
+                        //download if its is a export-typed task
+                        taskQueue
+                            .download(task.id)
+                            .then(function() {
+                                //immediately archive the finished task as there is no need to display this task in the queue list
+                                return taskQueue.archive(task.id);
+                            })
+                            .then(function() {
+                                self.trigger('finished', result);
+                                taskQueue.pollAll();
+                            })
+                            .catch(function(err) {
+                                self.trigger('error', err);
+                                taskQueue.pollAll();
+                            });
+                    } else {
+                        //immediately archive the finished task as there is no need to display this task in the queue list
+                        taskQueue
+                            .archive(task.id)
+                            .then(function() {
+                                self.trigger('finished', result);
+                                taskQueue.pollAll();
+                            })
+                            .catch(function(err) {
+                                self.trigger('error', err);
+                                taskQueue.pollAll();
+                            });
+                    }
+                } else {
+                    //enqueuing process:
+                    message = __('<strong> %s </strong> has been moved to the background.', task.taskLabel);
+                    infoBox = feedback(null, {
+                        encodeHtml: false,
+                        timeout: { info: 8000 }
+                    }).info(message);
+
+                    taskQueue.trigger('taskcreated', { task: task, sourceDom: infoBox.getElement() });
+                    self.trigger('enqueued', result);
+                }
+                loadingBar.stop();
+            })
+            .catch(function(err) {
+                //in case of error display it and continue task queue activity
+                taskQueue.pollAll();
+                loadingBar.stop();
+                self.trigger('error', err);
+            });
+    },
+
+    /**
+     * prepare the given container to display the final report
+     * @param {Object} report - the standard report object
+     * @param {String} title - the report title
+     * @param {String} result - raw result data from the task creation action
+     */
+    displayReport: function displayReport(report, title, result) {
+        var self = this,
+            $reportContainer;
+
+        if (this.config.taskReportContainer instanceof $) {
+            $reportContainer = $(
+                reportTpl({
+                    title: title
+                })
+            );
+
+            this.config.taskReportContainer.html($reportContainer);
+
+            return reportFactory(
+                {
+                    actions: [
+                        {
+                            id: 'continue',
+                            icon: 'right',
+                            title: 'continue',
+                            label: __('Continue')
+                        }
+                    ]
+                },
+                report
+            )
+                .on('action-continue', function() {
+                    self.trigger('continue', result);
+                })
+                .render($reportContainer.find('.report'));
+        }
+    }
+};
+
+/**
+ * @param {Component} component - an instance of ui/component
+ * @param {Object} config - task queue creation specific config
+ * @param {Object} config.taskQueue - the task queue model to be used
+ * @param {String} config.taskCreationUrl - endpoint to create a task
+ * @param {Object|Function} [config.taskCreationData] - the parameters that will be send to the task creation request
+ * @param {JQuery} [config.taskReportContainer] - the container where the inline report can be printed to
+ * @return {taskableComponent}
+ */
+export default function makeTaskable(component, config) {
+    _.assign(component, taskableComponent);
+
+    /**
+     * @typedef {ui/component} taskableComponent
+     */
+    return component.off('.taskable').on('init.taskable', function() {
+        _.defaults(this.config, config || {}, defaultConfig);
+    });
+}

package/src/taskQueueButton/tpl/report.tpl

@@ -1,6 +1,6 @@
-<div class="task-report-container">
-    <div class="section-header flex-container-full">
-        <h2>{{title}}</h2>
-    </div>
-    <div class="main-container flex-container-full report"></div>
+<div class="task-report-container">
+    <div class="section-header flex-container-full">
+        <h2>{{title}}</h2>
+    </div>
+    <div class="main-container flex-container-full report"></div>
 </div>

package/src/taskQueueButton/tpl/treeButton.tpl

@@ -1,7 +1,7 @@
-<div class="tree-button-component">
-    <a class="li-inner">
-        <span class="spinner-icon icon-loop spinning"></span>
-        <span class="glyph start-icon icon-{{icon}}"></span>
-        {{label}}
-    </a>
+<div class="tree-button-component">
+    <a class="li-inner">
+        <span class="spinner-icon icon-loop spinning"></span>
+        <span class="glyph start-icon icon-{{icon}}"></span>
+        {{label}}
+    </a>
 </div>