@oat-sa/tao-core-ui 3.6.0 → 3.8.0

package/dist/datatable.js

@@ -426,6 +426,8 @@ define(['jquery', 'lodash', 'i18n', 'core/pluginifier', 'handlebars', 'lib/handl
       
       var buffer = "", stack1;
       buffer += "\n                                <button class=\"btn-info small "
+        + escapeExpression(((stack1 = (depth2 && depth2.cls)),typeof stack1 === functionType ? stack1.apply(depth0) : stack1))
+        + " "
         + escapeExpression(((stack1 = (depth2 && depth2.id)),typeof stack1 === functionType ? stack1.apply(depth0) : stack1))
         + "\"\n                                    ";
       stack1 = helpers['if'].call(depth0, (depth2 && depth2.title), {hash:{},inverse:self.noop,fn:self.programWithDepth(71, program71, data, depth2),data:data});
@@ -549,6 +551,8 @@ define(['jquery', 'lodash', 'i18n', 'core/pluginifier', 'handlebars', 'lib/handl
       
       var buffer = "", stack1;
       buffer += "\n                            <button class=\"btn-info small "
+        + escapeExpression(((stack1 = (depth2 && depth2.cls)),typeof stack1 === functionType ? stack1.apply(depth0) : stack1))
+        + " "
         + escapeExpression(((stack1 = (depth2 && depth2.id)),typeof stack1 === functionType ? stack1.apply(depth0) : stack1))
         + "\"\n                                ";
       stack1 = helpers['if'].call(depth0, (depth2 && depth2.title), {hash:{},inverse:self.noop,fn:self.programWithDepth(71, program71, data, depth2),data:data});
@@ -686,6 +690,10 @@ define(['jquery', 'lodash', 'i18n', 'core/pluginifier', 'handlebars', 'lib/handl
       }
 
       buffer += "<button class=\"btn-info small ";
+      if (helper = helpers.cls) { stack1 = helper.call(depth0, {hash:{},data:data}); }
+      else { helper = (depth0 && depth0.cls); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
+      buffer += escapeExpression(stack1)
+        + " ";
       if (helper = helpers.id) { stack1 = helper.call(depth0, {hash:{},data:data}); }
       else { helper = (depth0 && depth0.id); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
       buffer += escapeExpression(stack1)
@@ -1486,12 +1494,14 @@ define(['jquery', 'lodash', 'i18n', 'core/pluginifier', 'handlebars', 'lib/handl
                 const disabled = getPropertyValue('disabled', action, nextData);
                 const icon = getPropertyValue('icon', action, nextData);
                 const label = getPropertyValue('label', action, nextData);
+                const cls = getPropertyValue('cls', action, nextData);
                 const $actionButton = $$1(buttonTpl({
                   id,
                   icon,
                   label,
                   title,
-                  disabled
+                  disabled,
+                  cls
                 }));
                 if (!hidden) {
                   $actionCell.append('\n').append($actionButton);

package/dist/resourcemgr/fileSelector.js

@@ -1,4 +1,4 @@
-define(['jquery', 'lodash', 'async', 'i18n', 'core/mimetype', 'handlebars', 'lib/handlebars/helpers', 'ui/feedback', 'context', 'ui/uploader'], function ($$1, _, async, __, mimeType, Handlebars, Helpers0, feedback, context, uploader) { 'use strict';
+define(['jquery', 'lodash', 'async', 'i18n', 'core/mimetype', 'handlebars', 'lib/handlebars/helpers', 'ui/feedback', 'context', 'ui/uploader', 'core/logger'], function ($$1, _, async, __, mimeType, Handlebars, Helpers0, feedback, context, uploader, loggerFactory) { 'use strict';
 
     $$1 = $$1 && Object.prototype.hasOwnProperty.call($$1, 'default') ? $$1['default'] : $$1;
     _ = _ && Object.prototype.hasOwnProperty.call(_, 'default') ? _['default'] : _;
@@ -9,6 +9,7 @@ define(['jquery', 'lodash', 'async', 'i18n', 'core/mimetype', 'handlebars', 'lib
     Helpers0 = Helpers0 && Object.prototype.hasOwnProperty.call(Helpers0, 'default') ? Helpers0['default'] : Helpers0;
     feedback = feedback && Object.prototype.hasOwnProperty.call(feedback, 'default') ? feedback['default'] : feedback;
     context = context && Object.prototype.hasOwnProperty.call(context, 'default') ? context['default'] : context;
+    loggerFactory = loggerFactory && Object.prototype.hasOwnProperty.call(loggerFactory, 'default') ? loggerFactory['default'] : loggerFactory;
 
     if (!Helpers0.__initialized) {
       Helpers0(Handlebars);
@@ -26,27 +27,27 @@ define(['jquery', 'lodash', 'async', 'i18n', 'core/mimetype', 'handlebars', 'lib
       if (helper = helpers.type) { stack1 = helper.call(depth0, {hash:{},data:data}); }
       else { helper = (depth0 && depth0.type); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
       buffer += escapeExpression(stack1)
-        + "\" \n        data-file=\"";
+        + "\"\n        data-file=\"";
       if (helper = helpers.uri) { stack1 = helper.call(depth0, {hash:{},data:data}); }
       else { helper = (depth0 && depth0.uri); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
       buffer += escapeExpression(stack1)
-        + "\" \n        data-display=\"";
+        + "\"\n        data-display=\"";
       if (helper = helpers.display) { stack1 = helper.call(depth0, {hash:{},data:data}); }
       else { helper = (depth0 && depth0.display); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
       buffer += escapeExpression(stack1)
-        + "\" \n        data-mime=\"";
+        + "\"\n        data-mime=\"";
       if (helper = helpers.mime) { stack1 = helper.call(depth0, {hash:{},data:data}); }
       else { helper = (depth0 && depth0.mime); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
       buffer += escapeExpression(stack1)
-        + "\" \n        data-size=\"";
+        + "\"\n        data-size=\"";
       if (helper = helpers.size) { stack1 = helper.call(depth0, {hash:{},data:data}); }
       else { helper = (depth0 && depth0.size); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
       buffer += escapeExpression(stack1)
-        + "\" \n        data-url=\"";
+        + "\"\n        data-url=\"";
       if (helper = helpers.viewUrl) { stack1 = helper.call(depth0, {hash:{},data:data}); }
       else { helper = (depth0 && depth0.viewUrl); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
       buffer += escapeExpression(stack1)
-        + "\" \n        ";
+        + "\"\n        ";
       stack1 = helpers['if'].call(depth0, ((stack1 = (depth0 && depth0.permissions)),stack1 == null || stack1 === false ? stack1 : stack1.download), {hash:{},inverse:self.noop,fn:self.program(2, program2, data),data:data});
       if(stack1 || stack1 === 0) { buffer += stack1; }
       buffer += "\n        ";
@@ -131,9 +132,9 @@ define(['jquery', 'lodash', 'async', 'i18n', 'core/mimetype', 'handlebars', 'lib
     function program13(depth0,data) {
       
       var buffer = "", helper, options;
-      buffer += "\n                                        <a href=\"#\" class=\"tlb-button-off\" title=\""
+      buffer += "\n                                        <a href=\"#\" class=\"tlb-button-off delete\" title=\""
         + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Remove this file", options) : helperMissing.call(depth0, "__", "Remove this file", options)))
-        + "\" data-delete=\":parent li\"><span class=\"icon-bin\"></span></a>\n                                    ";
+        + "\"><span class=\"icon-bin\"></span></a>\n                                    ";
       return buffer;
       }
 
@@ -214,10 +215,11 @@ define(['jquery', 'lodash', 'async', 'i18n', 'core/mimetype', 'handlebars', 'lib
      * 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) 2015 (original work) Open Assessment Technologies SA;
+     * Copyright (c) 2015-2024 (original work) Open Assessment Technologies SA;
      *
      */
-    let ns = 'resourcemgr';
+    const ns = 'resourcemgr';
+    const logger = loggerFactory(`ui/${ns}`);
     function shortenPath(path) {
       let tokens = path.replace(/\/$/, '').split('/');
       let start = tokens.length - 3;
@@ -325,6 +327,32 @@ define(['jquery', 'lodash', 'async', 'i18n', 'core/mimetype', 'handlebars', 'lib
       });
 
       //delete a file
+      $$1(parentSelector).off('click', '.files li a.delete').on('click', '.files li a.delete', function (e) {
+        // This function replaces ui/deleter and must follow the same logic.
+        // The main difference is that it insert a confirmation dialog before deleting the file.
+        e.preventDefault();
+        const $elt = $$1(e.target);
+        if ($elt.hasClass(options.disableClass)) {
+          return;
+        }
+        const $target = $elt.closest('li');
+        const path = $target.data('file');
+        const hooks = [];
+        if (options.hooks && 'function' === typeof options.hooks.deleteFile) {
+          hooks.push(options.hooks.deleteFile(path));
+        }
+        Promise.all(hooks).then(() => {
+          $$1(this).trigger('delete.deleter', [$target]);
+          $target.trigger('delete', [false]);
+          $target.detach();
+          $target.remove();
+          $fileContainer.trigger('deleted.deleter', [$target]);
+        }).catch(err => {
+          if (err instanceof Error) {
+            logger.error(err);
+          }
+        });
+      });
       $fileContainer.on('delete.deleter', function (e, $target) {
         let path,
           params = {};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@oat-sa/tao-core-ui",
-    "version": "3.6.0",
+    "version": "3.8.0",
     "displayName": "TAO Core UI",
     "description": "UI libraries of TAO",
     "scripts": {

package/src/datatable/tpl/button.tpl

@@ -1,4 +1,4 @@
-<button class="btn-info small {{id}}"
+<button class="btn-info small {{cls}} {{id}}"
   {{#if title}} title="{{title}}"{{/if}}
   {{#if disabled}} disabled="disabled"{{/if}}>
   {{#if icon}}<span class="icon-{{icon}}"></span>{{/if}}

package/src/datatable/tpl/layout.tpl

@@ -97,7 +97,7 @@
                                     {{#if id}}
                                         {{#with ../../../../this}}
                                             {{#unless ../hidden}}
-                                <button class="btn-info small {{../../id}}"
+                                <button class="btn-info small {{../../cls}} {{../../id}}"
                                     {{#if ../../title}} title="{{../../../title}}"{{/if}}
                                     {{#if ../../disabled}} disabled="disabled"{{/if}}>
                                     {{#if ../../icon}}<span class="icon-{{../../../icon}}"></span>{{/if}}
@@ -128,7 +128,7 @@
                                 {{#if id}}
                                     {{#with ../../../this}}
                                         {{#unless ../hidden}}
-                            <button class="btn-info small {{../../id}}"
+                            <button class="btn-info small {{../../cls}} {{../../id}}"
                                 {{#if ../../title}} title="{{../../../title}}"{{/if}}
                                 {{#if ../../disabled}} disabled="disabled"{{/if}}>
                                 {{#if ../../icon}}<span class="icon-{{../../../icon}}"></span>{{/if}}

package/src/datatable.js

@@ -887,7 +887,8 @@ const dataTable = {
                         const disabled = getPropertyValue('disabled', action, nextData);
                         const icon = getPropertyValue('icon', action, nextData);
                         const label = getPropertyValue('label', action, nextData);
-                        const $actionButton = $(buttonTpl({ id, icon, label, title, disabled }));
+                        const cls = getPropertyValue('cls', action, nextData);
+                        const $actionButton = $(buttonTpl({ id, icon, label, title, disabled, cls }));
 
                         if (!hidden) {
                             $actionCell.append('\n').append($actionButton);

package/src/resourcemgr/fileSelector.js

@@ -13,7 +13,7 @@
  * 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) 2015 (original work) Open Assessment Technologies SA;
+ * Copyright (c) 2015-2024 (original work) Open Assessment Technologies SA;
  *
  */
 
@@ -31,8 +31,10 @@ import feedback from 'ui/feedback';
 import context from 'context';
 import 'ui/uploader';
 import updatePermissions from './util/updatePermissions';
+import loggerFactory from 'core/logger';
 
-let ns = 'resourcemgr';
+const ns = 'resourcemgr';
+const logger = loggerFactory(`ui/${ns}`);
 
 function shortenPath(path) {
     let tokens = path.replace(/\/$/, '').split('/');
@@ -161,6 +163,41 @@ export default function (options) {
         });
 
     //delete a file
+    $(parentSelector)
+        .off('click', '.files li a.delete')
+        .on('click', '.files li a.delete', function (e) {
+            // This function replaces ui/deleter and must follow the same logic.
+            // The main difference is that it insert a confirmation dialog before deleting the file.
+            e.preventDefault();
+            const $elt = $(e.target);
+            if ($elt.hasClass(options.disableClass)) {
+                return;
+            }
+
+            const $target = $elt.closest('li');
+            const path = $target.data('file');
+            const hooks = [];
+
+            if (options.hooks && 'function' === typeof options.hooks.deleteFile) {
+                hooks.push(options.hooks.deleteFile(path));
+            }
+
+            Promise.all(hooks)
+                .then(() => {
+                    $(this).trigger('delete.deleter', [$target]);
+                    $target.trigger('delete', [false]);
+
+                    $target.detach();
+                    $target.remove();
+
+                    $fileContainer.trigger('deleted.deleter', [$target]);
+                })
+                .catch(err => {
+                    if (err instanceof Error) {
+                        logger.error(err);
+                    }
+                });
+        });
     $fileContainer.on('delete.deleter', function (e, $target) {
         let path,
             params = {};

package/src/resourcemgr/tpl/fileSelect.tpl

@@ -1,10 +1,10 @@
 {{#each files}}
-    <li data-type="{{type}}" 
-        data-file="{{uri}}" 
-        data-display="{{display}}" 
-        data-mime="{{mime}}" 
-        data-size="{{size}}" 
-        data-url="{{viewUrl}}" 
+    <li data-type="{{type}}"
+        data-file="{{uri}}"
+        data-display="{{display}}"
+        data-mime="{{mime}}"
+        data-size="{{size}}"
+        data-url="{{viewUrl}}"
         {{#if permissions.download}} data-download="true" {{/if}}
         {{#if permissions.preview}} data-preview="true" {{/if}}
         {{#if permissions.read}} data-select="true" {{/if}}
@@ -25,7 +25,7 @@
                                         <a href="{{downloadUrl}}" download="{{name}}" target="_blank" class="tlb-button-off download" title="{{__ 'Download this file'}}"><span class="icon-download"></span></a>
                                     {{/if}}
                                     {{#if permissions.delete }}
-                                        <a href="#" class="tlb-button-off" title="{{__ 'Remove this file'}}" data-delete=":parent li"><span class="icon-bin"></span></a>
+                                        <a href="#" class="tlb-button-off delete" title="{{__ 'Remove this file'}}"><span class="icon-bin"></span></a>
                                     {{/if}}
                                 </span>
                             {{/if}}