apps/workbench/app/assets/javascripts/editable.js

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 $.fn.editable.defaults.ajaxOptions = {type: 'post', dataType: 'json'};
   6 $.fn.editable.defaults.send = 'always';
   7
   8 // Default for editing is popup.  I experimented with inline which is a little
   9 // nicer in that it shows up right under the mouse instead of nearby.  However,
  10 // the inline box is taller than the regular content, which causes the page
  11 // layout to shift unless we make the table rows tall, which leaves a lot of
  12 // wasted space when not editing.  Also inline can get cut off if the page is
  13 // too narrow, when the popup box will just move to do the right thing.
  14 //$.fn.editable.defaults.mode = 'inline';
  15
  16 $.fn.editable.defaults.success = function (response, newValue) {
  17     $(document).trigger('editable:success', [this, response, newValue]);
  18 };
  19
  20 $.fn.editable.defaults.params = function (params) {
  21     var a = {};
  22     var key = params.pk.key;
  23     a.id = $(this).attr('data-object-uuid') || params.pk.id;
  24     a[key] = params.pk.defaults || {};
  25     // Remove null values. Otherwise they get transmitted as empty
  26     // strings in request params.
  27     for (i in a[key]) {
  28         if (a[key][i] == null)
  29             delete a[key][i];
  30     }
  31     a[key][params.name] = params.value;
  32     if (!a.id) {
  33         a['_method'] = 'post';
  34     } else {
  35         a['_method'] = 'put';
  36     }
  37     return a;
  38 };
  39
  40 $.fn.editable.defaults.validate = function (value) {
  41     if (value == "***invalid***") {
  42         return "Invalid selection";
  43     }
  44 }
  45
  46 $(document).
  47     on('ready ajax:complete', function() {
  48         $('.editable').
  49             not('.editable-done-setup').
  50             addClass('editable-done-setup').
  51             editable({
  52                 success: function(response, newValue) {
  53                     // If we just created a new object, stash its UUID
  54                     // so we edit it next time instead of creating
  55                     // another new object.
  56                     if (!$(this).attr('data-object-uuid') && response.uuid) {
  57                         $(this).attr('data-object-uuid', response.uuid);
  58                     }
  59                     if (response.href) {
  60                         $(this).editable('option', 'url', response.href);
  61                     }
  62                     if ($(this).attr('data-name')) {
  63                         var textileAttr = $(this).attr('data-name') + 'Textile';
  64                         if (response[textileAttr]) {
  65                             $(this).attr('data-textile', response[textileAttr]);
  66                         }
  67                     }
  68                     return;
  69                 },
  70                 error: function(response, newValue) {
  71                     var errlist = response.responseJSON.errors;
  72                     var errmsg;
  73                     if (Array.isArray(errlist)) {
  74                         errmsg = errlist.join();
  75                     } else {
  76                         errmsg = ("The server returned an error when making " +
  77                                   "this update (status " + response.status +
  78                                   ": " + errlist + ").");
  79                     }
  80                     return errmsg;
  81                 }
  82             }).
  83             on('hidden', function(e, reason) {
  84                 // After saving a new attribute, update the same
  85                 // information if it appears elsewhere on the page.
  86                 if (reason != 'save') return;
  87                 var html = $(this).html();
  88                 if( $(this).attr('data-textile') ) {
  89                     html = $(this).attr('data-textile');
  90                     $(this).html(html);
  91                 }
  92                 var uuid = $(this).attr('data-object-uuid');
  93                 var attr = $(this).attr('data-name');
  94                 var edited = this;
  95                 if (uuid && attr) {
  96                     $("[data-object-uuid='" + uuid + "']" +
  97                       "[data-name='" + attr + "']").each(function() {
  98                           if (this != edited)
  99                               $(this).html(html);
 100                       });
 101                 }
 102             });
 103     }).
 104     on('ready ajax:complete', function() {
 105         $("[data-toggle~='x-editable']").
 106             not('.editable-done-setup').
 107             addClass('editable-done-setup').
 108             click(function(e) {
 109                 e.stopPropagation();
 110                 $($(this).attr('data-toggle-selector')).editable('toggle');
 111             });
 112     });
 113
 114 $.fn.editabletypes.text.defaults.tpl = '<input type="text" name="editable-text">'
 115
 116 $.fn.editableform.buttons = '\
 117 <button type="submit" class="btn btn-primary btn-sm editable-submit" \
 118   id="editable-submit"><i class="glyphicon glyphicon-ok"></i></button>\
 119 <button type="button" class="btn btn-default btn-sm editable-cancel" \
 120   id="editable-cancel"><i class="glyphicon glyphicon-remove"></i></button>\
 121 '