hyrax 2.0.3 → 2.1.0.beta1

data/app/assets/javascripts/hyrax/collections.js

@@ -1,12 +1,177 @@
 Blacklight.onLoad(function () {
 
+  /**
+   * Sync collection data attributes to the singular instance of the modal so it knows what data to post
+   * @param {string} modalId - The id of modal to target, ie. #add_collection_modal
+   * @param {[string]} dataAttributes - An string array of "data-xyz" data attributes WITHOUT
+   * the "data-" prefix. ie. ['id', 'some-var']
+   * @param {jquery Object} $tr - jQuery object reference to a table row
+   * @return {void}
+   */
+  function addDataAttributesToModal(modalId, dataAttributes, $dataEl) {
+    // Remove and add new data attributes
+    dataAttributes.forEach(function(attribute) {
+      $(modalId).removeAttr('data-' + attribute).attr('data-' + attribute, $dataEl.data(attribute));
+    });
+  }
+
+  /**
+   * Build <option>s markup for add collection to collection
+   * @param  {[objects]} collsHash An array of objects representing a needed data from Collection(s)
+   * @return {string} <options> string markup which will populate the <select> element
+   */
+  function buildSelectMarkup(collsHash) {
+    var options = collsHash.map(function(col) {
+      return '<option value="' + col.id + '">' + col.title_first + '</option>';
+    });
+    markup = options.join('');
+    return markup;
+  }
+
+  /**
+   * Handle "add to collection" element click event.
+   * @param  {Mouseevent} e
+   * @return {void}
+   */
+  function handleAddToCollection(e) {
+    e.preventDefault();
+    var $self = $(this),
+      $dataEl = (
+        $self.closest('#collections-list-table').length > 0 ?
+        $self.closest('tr') :
+        $self.closest('section')
+      ),
+      selectMarkup = '',
+      $firstOption = null;
+
+    // Show deny modal
+    if ($self.data('nestable') === false) {
+      $('#add-to-collection-deny-modal').modal('show');
+      return;
+    }
+    // Show modal permission denied
+    if ($self.data('hasaccess') === false) {
+      $('#add-to-collection-permission-deny-modal').modal('show');
+      return;
+    }
+    // Show add to collection modal below
+    addDataAttributesToModal('#add-to-collection-modal', ['id', 'post-url'], $dataEl);
+    // Grab reference to the default <option> in modal
+    $firstOption = $('#add-to-collection-modal').find('select[name="parent_id"] option');
+    // Remove all previous <options>s
+    $firstOption.not(':first').remove();
+    // Build new <option>s markup and put on DOM
+    selectMarkup = buildSelectMarkup($dataEl.data('collsHash'));
+    $(selectMarkup).insertAfter($firstOption);
+
+    // Disable the submit button in modal by default
+    $('#add-to-collection-modal').find('.modal-submit-button').prop('disabled', true);
+    
+    // Show modal
+    $('#add-to-collection-modal').modal('show');
+  }
+
+  /**
+   * Handle "delete collection" button click event
+   * @param  {Mouseevent} e
+   * @return {void}
+   */
+  function handleDeleteCollection(e) {
+    e.preventDefault();
+    var $self = $(this),
+      $tr = $self.parents('tr'),
+      totalitems = $self.data('totalitems'),
+      // membership set to true indicates admin_set
+      membership = $self.data('membership') === true,
+      collectionId = $tr.data('id'),
+      modalId = '';
+
+    // Permissions denial
+    if ($(this).data('hasaccess') !== true) {
+      $('#collection-to-delete-deny-modal').modal('show');
+      return;
+    }
+    // Admin set with child items
+    if (totalitems > 0 && membership) {
+      $('#collection-admin-set-delete-deny-modal').modal('show');
+      return;
+    }
+    modalId = (totalitems > 0 ?
+      '#collection-to-delete-modal' :
+      '#collection-empty-to-delete-modal'
+    );
+    addDataAttributesToModal(modalId, ['id', 'post-delete-url'], $tr);
+    $(modalId).modal('show');
+  }
+
   // change the action based which collection is selected
   // This expects the form to have a path that includes the string 'collection_replace_id'
   $('[data-behavior="updates-collection"]').on('click', function() {
-      var string_to_replace = "collection_replace_id"
-      var form = $(this).closest("form");
-      var collection_id = $(".collection-selector:checked")[0].value;
+      var string_to_replace = "collection_replace_id",
+        form = $(this).closest("form"),
+        collection_id = $(".collection-selector:checked")[0].value;
+
       form[0].action = form[0].action.replace(string_to_replace, collection_id);
       form.append('<input type="hidden" value="add" name="collection[members]"></input>');
   });
+
+
+  // Set up click listeners for collections buttons which initiate modal action windows
+  $('.add-to-collection').on('click', handleAddToCollection);
+  $('.delete-collection-button').on('click', handleDeleteCollection);
+
+
+  // Display access deny for edit request.
+  $('#documents').find('.edit-collection-deny-button').on('click', function (e) {
+    e.preventDefault();
+    $('#collections-to-edit-deny-modal').modal('show');
+  });
+
+
+  // Delete selected collections button click
+  $('#delete-collections-button').on('click', function () {
+    var tableRows = $('#documents table.collections-list-table tbody tr');
+    var checkbox = null;
+    var numRowsSelected = false;
+    var deleteWording = {
+      plural: 'these collections',
+      singular: 'this collection'
+    };
+    var $deleteWordingTarget = $('#selected-collections-delete-modal .pluralized');
+
+    tableRows.each(function(i, row) {
+      checkbox = $(row).find('td:first input[type=checkbox]');
+      if (typeof checkbox[0] !== "undefined") {
+        if (checkbox[0].checked) {
+          numRowsSelected++;
+        }
+      }
+    });
+
+    if (numRowsSelected > 0) {
+      // Collections are selected
+      // Update singular / plural text in delete modal
+      if (numRowsSelected > 1) {
+        $deleteWordingTarget.text(deleteWording.plural);
+      } else {
+        $deleteWordingTarget.text(deleteWording.singular);
+      }
+      $('#selected-collections-delete-modal').modal('show');
+    } else {
+      // No collections are selected
+      $('#collections-to-delete-deny-modal').modal('show');
+    }
+  });
+
+  $('#show-more-parent-collections').on('click', function () {
+    $(this).hide();
+    $("#more-parent-collections").show();
+    $("#show-less-parent-collections").show();
+  });
+
+  $('#show-less-parent-collections').on('click', function () {
+    $(this).hide();
+    $("#more-parent-collections").hide();
+    $("#show-more-parent-collections").show();
+  });
 });

data/app/assets/javascripts/hyrax/collections/editor.es6

@@ -1,4 +1,6 @@
 import ThumbnailSelect from 'hyrax/thumbnail_select'
+import Participants from 'hyrax/admin/admin_set/participants'
+import tabifyForm from 'hyrax/tabbed_form'
 
 // Controls the behavior of the Collections edit form
 // Add search for thumbnail to the edit descriptions
@@ -6,6 +8,10 @@ export default class {
   constructor(elem) {
     let url =  window.location.pathname.replace('edit', 'files')
     let field = elem.find('#collection_thumbnail_id')
-    this.thumbnailSelect = new ThumbnailSelect(url, field);
+    this.thumbnailSelect = new ThumbnailSelect(url, field)
+    tabifyForm(elem.find('form.editor'))
+
+    let participants = new Participants(elem.find('#participants'))
+    participants.setup()
   }
 }

data/app/assets/javascripts/hyrax/collections_forms.js

@@ -0,0 +1,108 @@
+Blacklight.onLoad(function () {
+
+  // Post modal data via Ajax to avoid nesting <forms> in edit collections tabs screen
+  function submitModalAjax(url, type, data, $self) {
+    $.ajax({
+      type: type,
+      url: url,
+      data: data
+    }).done(function(response) {
+      console.log('response', response);
+    }).fail(function(err) {
+      var alertNode = buildModalErrorAlert(err);
+      var $alert = $self.closest('.modal').find('.modal-ajax-alert');
+      $alert.html(alertNode);
+    });
+  }
+
+  // HTML for ajax error alert message, in case the AJAX request fails
+  function buildModalErrorAlert(err) {
+    var message = (err.responseText ? err.responseText : 'An unknown error has occurred');
+    var el = '<div class="alert alert-danger alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button><span class="message">' + message + '</span></div>';
+    return el;
+  }
+
+  function handleDeleteCollection() {
+    var $self = $(this),
+      $modal = $self.closest('.modal'),
+      url = $modal.data('postDeleteUrl'),
+      data = {};
+    if (url.length === 0) {
+      return;
+    }
+    submitModalAjax(url, 'DELETE', data, $self);
+  }
+
+  /**
+   * Generically disable modal submit buttons unless their select element
+   * has a valid value.
+   *
+   * To Use:
+   * 1.) Put the '.disable-unless-selected' class on the '.modal' element you wish to protect.
+   * 2.) Add the 'disabled' attribute to your protected submit button ie. <button disabled ...>.
+   * 3.) Put the '.modal-submit-button' class on whichever button you wish to disable for an invalid
+   * <select> value ie. <button disabled class="... modal-submit-button" ...>
+   *
+   * @return {void}
+   */
+  $('.modal.disable-unless-selected select').on('change', function() {
+    var selectValue = $(this).val(),
+      emptyValues = ['', 'none'],
+      selectHasAValue = emptyValues.indexOf(selectValue) === -1,
+      $submitButton = $(this).parents('.modal').find('.modal-submit-button');
+
+    $submitButton.prop('disabled', !selectHasAValue);
+  })
+
+  // Remove from collection button clicked
+  $('#remove_parent_collection').find('.remove-from-collection-button').on('click', function (e) {
+    e.preventDefault();
+    $('#collection-remove-from-collection').modal('show');
+  });
+
+  // Remove this sub-collection button clicked
+  $('#remove_subcollection').find('.remove-subcollection-button').on('click', function (e) {
+    e.preventDefault();
+    $('#collection-remove-subcollection').modal('show');
+  });
+
+  // Add to collection modal form post
+  $('#add-to-collection-modal').find('.modal-add-button').on('click', function (e) {
+    var $self = $(this),
+      $modal = $self.closest('.modal'),
+      url = $modal.data('postUrl'),
+      parentId = $modal.find('[name="parent_id"]').val(),
+      data = {
+        parent_id: parentId,
+        source: $self.data('source')
+      };
+    if (url.length === 0) {
+      return;
+    }
+    submitModalAjax(url, 'POST', data, $self);
+  });
+
+  // Handle delete collection modal submit button click event
+  ['#collection-to-delete-modal', '#collection-empty-to-delete-modal'].forEach(function(id) {
+    $(id).find('.modal-delete-button').on('click', handleDeleteCollection);
+  });
+
+  // Add sub collection to collection form post
+  $('[id^="add-subcollection-modal-"]').find('.modal-add-button').on('click', function (e) {
+    var url = $(this).data('postUrl'),
+      childId = $(this).closest('.modal').find('[name="child_id"]').val(),
+      data = {
+      child_id: childId,
+      source: $(this).data('source')
+    };
+    if (url.length === 0) {
+      return;
+    }
+    submitModalAjax(url, 'POST', data, $(this));
+  });
+
+  // Handle add a subcollection button click on the collections show page
+  $('.sub-collections-wrapper button.add-subcollection').on('click', function (e) {
+    $('#add-subcollection-modal-' + $(this).data('presenterId')).modal('show');
+  });
+});

data/app/assets/javascripts/hyrax/editor.es6

@@ -15,7 +15,9 @@ export default class {
     this.paramKey = element.data('paramKey') // The work type
     this.adminSetWidget = new AdminSetWidget(element.find('select[id$="_admin_set_id"]'))
     this.sharingTabElement = $('#tab-share')
+  }
 
+  init() {
     this.autocomplete()
     this.controlledVocabularies()
     this.sharingTab()
@@ -78,9 +80,21 @@ export default class {
   }
 
   relationshipsControl() {
-      new RelationshipsControl(this.element.find('[data-behavior="child-relationships"]'),
-                               'work_members_attributes',
-                               'tmpl-child-work')
+      let collections = this.element.find('[data-behavior="collection-relationships"]')
+      collections.each((_idx, element) =>
+          new RelationshipsControl(element,
+                                   collections.data('members'),
+                                   collections.data('paramKey'),
+                                   'member_of_collections_attributes',
+                                   'tmpl-collection').init())
+
+      let works = this.element.find('[data-behavior="child-relationships"]')
+      works.each((_idx, element) =>
+          new RelationshipsControl(element,
+                                   works.data('members'),
+                                   works.data('paramKey'),
+                                   'work_members_attributes',
+                                   'tmpl-child-work').init())
   }
 
   saveWorkControl() {

data/app/assets/javascripts/hyrax/fileupload.js

@@ -4,4 +4,5 @@
 Blacklight.onLoad(function() {
   var options = {};
   $('#fileupload').hyraxUploader(options);
+  $('#fileuploadlogo').hyraxUploader({downloadTemplateId: 'logo-template-download'});
 });

data/app/assets/javascripts/hyrax/relationships.js

@@ -1,4 +1,5 @@
 //= require hyrax/relationships/control
 //= require hyrax/relationships/registry
 //= require hyrax/relationships/registry_entry
-//= require hyrax/relationships/work
+//= require hyrax/relationships/confirm_remove_dialog
+//= require hyrax/relationships/resource

data/app/assets/javascripts/hyrax/relationships/confirm_remove_dialog.es6

@@ -0,0 +1,45 @@
+export default class ConfirmRemoveDialog {
+  /**
+   * The function to perform when the dialog is accepted.
+   *
+   * @callback requestCallback
+   */
+
+  /**
+   * Initialize the dialog
+   * @param {String} text the text for the body of the dialog
+   * @param {String} cancel the text for the cancel button
+   * @param {String} remove the text for the remove button
+   * @param {requestCallback} fn the function to perform if the remove button is pressed
+   */
+  constructor(text, cancel, remove, fn) {
+      this.text = text
+      this.cancel = cancel
+      this.remove = remove
+      this.fn = fn
+  }
+
+  template() {
+      return `<div class="modal confirm-remove-dialog" tabindex="-1" role="dialog">
+              <div class="modal-dialog modal-md" role="document">
+              <div class="modal-content">
+              <div class="modal-body">${this.text}</div>
+              <div class="modal-footer">
+                <button type="button" class="btn btn-default" data-dismiss="modal">${this.cancel}</button>
+                <button type="button" class="btn btn-danger" data-behavior="submit">${this.remove}</button>
+              </div>
+              </div>
+              </div>
+              </div>`
+  }
+
+  launch() {
+      let dialog = $(this.template())
+      dialog.find('[data-behavior="submit"]').click(() => {
+          dialog.modal('hide');
+          dialog.remove();
+          this.fn();
+      })
+      dialog.modal('show')
+  }
+}

data/app/assets/javascripts/hyrax/relationships/control.es6

@@ -1,23 +1,32 @@
 import Registry from './registry'
-import Work from './work'
-
+import Resource from './resource'
+/**
+ * This depends on the passed in element containing `data-autocomplete="work'"`
+ * that is also a select2 element.
+*/
 export default class RelationshipsControl {
 
   /**
    * Initializes the class in the context of an individual table element
-   * @param {jQuery} element the table element that this class represents
+   * @param {HTMLElement} element the table element that this class represents.
+   * @param {Array} members the members to display in the table
+   * @param {String} paramKey the key for the type of object we're submitting (e.g. 'generic_work')
    * @param {String} property the property to submit
    * @param {String} templateId the template identifier for new rows
    */
-  constructor(element, property, templateId) {
-    this.element = element
-    this.registry = new Registry(this.element, this.element.data('paramKey'), property, templateId)
-
-    this.input = this.element.find("[data-autocomplete='work']")
+  constructor(element, members, paramKey, property, templateId) {
+    this.element = $(element)
+    this.members = this.element.data('members')
+    this.registry = new Registry(this.element.find('tbody'), paramKey, property, templateId)
+    this.input = this.element.find(`[data-autocomplete]`)
     this.warning = this.element.find(".message.has-warning")
     this.addButton = this.element.find("[data-behavior='add-relationship']")
     this.errors = null
+  }
+
+  init() {
     this.bindAddButton();
+    this.displayMembers();
   }
 
   validate() {
@@ -26,6 +35,12 @@ export default class RelationshipsControl {
     }
   }
 
+  displayMembers() {
+    this.members.forEach((elem) =>
+      this.registry.addResource(new Resource(elem.id, elem.label))
+    )
+  }
+
   isValid() {
     this.validate()
     return this.errors === null
@@ -40,7 +55,7 @@ export default class RelationshipsControl {
   }
 
   attemptToAddRow() {
-      // Display an error when the input field is empty, or if the work ID is already related,
+      // Display an error when the input field is empty, or if the resource ID is already related,
       // otherwise clone the row and set appropriate styles
       if (this.isValid()) {
         this.addRow()
@@ -52,7 +67,7 @@ export default class RelationshipsControl {
   addRow() {
     this.hideWarningMessage()
     let data = this.searchData()
-    this.registry.addWork(new Work(data.id, data.text))
+    this.registry.addResource(new Resource(data.id, data.text))
 
     // finally, empty the "add" row input value
     this.clearSearch();