-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Allow re-ordering and commenting of collection items. #724
- Loading branch information
Showing
10 changed files
with
5,748 additions
and
59 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| var Collections = { | ||
| init: function () { | ||
| $("[data-role='collection-items-group']").each(function () { | ||
| // Set up drag/drop | ||
| var list = $('.collection-items', $(this))[0]; | ||
| const collectionItems = new Sortable.default(list, { | ||
| draggable: 'li.collection-item', | ||
| handle: '.collection-item-handle' | ||
| }); | ||
|
|
||
| collectionItems.on('drag:stopped', function (e) { | ||
| // Re-compute orders after dropping. | ||
| Collections.recalculateOrder(e.data.sourceContainer); | ||
| }); | ||
|
|
||
| // Set up autocompleter | ||
| var origTransform = Autocompleters.transformFunctions[$(this).data("transformFunction") || "default"]; | ||
| Autocompleters.initGroup(this, { | ||
| resourceType: $(this).data("resourceType"), | ||
| transformFunction: function (response, config) { | ||
| var result = origTransform(response, config); | ||
| result.suggestions.forEach(function (sugg) { | ||
| sugg.data.item.resource_type = config.resourceType; | ||
| sugg.data.item.resource_id = sugg.data.item.id; | ||
| sugg.data.item.id = null; | ||
| sugg.data.id = sugg.data.item.resource_type + '-' + sugg.data.item.resource_id | ||
| }); | ||
| return result; | ||
| } | ||
| }); | ||
|
|
||
|
|
||
| $(this).on('autocompleters:added', function () { | ||
| // Re-compute orders after new item added. | ||
| Collections.recalculateOrder(this); | ||
| }); | ||
|
|
||
| $(this).on('click', '[data-role="delete-collection-item"]', function (e) { | ||
| // If the collection item yet saved, just delete from the DOM, | ||
| // otherwise, apply visible styling to show it will be deleted, which can be | ||
| // undone if the button is clicked again | ||
| var item = $(this).closest('.collection-item'); | ||
| var checkbox = $('input', $(this)); | ||
| if (!checkbox.length) { // No checkbox is rendered if item is not persisted yet. | ||
| var list = $(this).closest('ul')[0]; | ||
| // Re-compute orders after item removed. | ||
| item.remove(); | ||
| Collections.recalculateOrder(list); | ||
| } else { | ||
| if (checkbox.is(':checked')) { | ||
| checkbox.prop('checked', false); | ||
| $('input[type=text]', item).prop('disabled', false); | ||
| item.removeClass('pending-delete'); | ||
| } else { | ||
| checkbox.prop('checked', true); | ||
| $('input[type=text]', item).prop('disabled', true); | ||
| item.addClass('pending-delete'); | ||
| } | ||
| } | ||
|
|
||
| return false; | ||
| }); | ||
|
|
||
| // Calculate initial order - order from database may have gaps if items were deleted. | ||
| Collections.recalculateOrder(list); | ||
| }); | ||
| }, | ||
|
|
||
| recalculateOrder: function (container) { | ||
| var order = 1; | ||
| container.querySelectorAll('li.collection-item').forEach(function (li) { | ||
| li.querySelector('[data-role="item-order"]').value = order; | ||
| li.querySelector('.item-order-label').innerText = order; | ||
| order++; | ||
| }); | ||
| } | ||
| } |
24 changes: 24 additions & 0 deletions
24
app/assets/javascripts/templates/autocompleter/collection_item.hbs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| <li data-id="{{ item.resource_type }}-{{ item.resource_id }}" class="collection-item"> | ||
| <div class="collection-item-handle"> | ||
| <i class="fa fa-sort" aria-hidden="true"></i> | ||
| <span class="item-order-label">{{ item.order }}</span> | ||
| <input type="hidden" name="{{ prefix }}[][order]" value="{{ item.order }}" data-role="item-order" /> | ||
| </div> | ||
|
|
||
| <div class="collection-item-title"> | ||
| <input type="hidden" name="{{ prefix }}[][id]" value="{{ item.id }}" /> | ||
| <input type="hidden" name="{{ prefix }}[][resource_id]" value="{{ item.resource_id }}" /> | ||
| <input type="hidden" name="{{ prefix }}[][resource_type]" value="{{ item.resource_type }}" /> | ||
| <a href="{{ item.url }}" target="_blank">{{ item.title }}</a> | ||
| <input type="text" class="form-control input-sm" name="{{ prefix }}[][comment]" placeholder="Enter a comment" value="{{ item.comment }}"> | ||
| </div> | ||
|
|
||
| <div> | ||
| <a href="#" class="btn btn-icon" data-role="delete-collection-item"> | ||
| <i class="icon cross-icon icon-sm icon-greyscale"></i> | ||
| {{#if item.id}} | ||
| <input type="checkbox" name="{{ prefix }}[][_destroy]" style="display: none;" autocomplete="off"> | ||
| {{/if}} | ||
| </a> | ||
| </div> | ||
| </li> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| <% | ||
| form_field_name = 'collection[items_attributes]' | ||
| data = { role: 'collection-items-group', | ||
| url: url, | ||
| prefix: form_field_name, | ||
| 'label-field' => 'title', | ||
| 'id-field' => 'id', | ||
| 'resource-type' => field_name.singularize.classify, | ||
| template: 'autocompleter/collection_item' } | ||
| transform_function ||= nil | ||
| group_by ||= nil | ||
| data['transform-function'] = transform_function if transform_function | ||
| data['group-by'] = group_by if group_by | ||
|
|
||
| json = items.map do |item| | ||
| { item: { id: item.id, order: item.order, comment: item.comment, | ||
| resource_id: item.resource_id, resource_type: item.resource_type, | ||
| title: item.resource.title, url: polymorphic_path(item.resource) }, | ||
| prefix: form_field_name } | ||
| end.to_json | ||
|
|
||
| placeholder_text = "Add a new #{f.object.class.human_attribute_name(field_name).singularize.downcase}" | ||
| %> | ||
|
|
||
| <div class="form-group"> | ||
| <%= f.label field_name %> | ||
|
|
||
| <p class="help-block"> | ||
| Re-order items by clicking and dragging the icon on the left-hand side. | ||
| </p> | ||
|
|
||
| <%= content_tag(:div, data: data) do %> | ||
| <%= content_tag :script, json.html_safe, type: 'application/json', data: { role: 'autocompleter-existing' } %> | ||
|
|
||
| <ul data-role="autocompleter-list" class="collection-items"> | ||
| <%# Populated via javascript from the JSON above %> | ||
| </ul> | ||
|
|
||
| <input type="text" data-role="autocompleter-input" autocomplete="off" class="form-control" | ||
| placeholder="<%= placeholder_text %>"> | ||
| <% end %> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.