Tab array: sortable tabs, hide add and remove

[joelwkent]

Updated 18 April 2016:

This implementation of sortable tab arrays now supports sortOptions. I’ve added a new function to the bootstrap decorator to default the sortOptions.items property to ignore the final list item, the “Add” link.

Original comment 17th April 2016:

This pull request adds drag and drop sorting to tab arrays as requested in ASF Issue #665. It is a rather trivial change BUT there is one issue with this PR - it currently does not support sortOptions. The reason it does not support sortOptions is that I wanted to prevent the user from dragging the "+ Add" list item so I pass {items: 'li:not(:last-child)'} as the options to the ui-sortable directive. Ideally the "items" property of the sortOptions would default to 'li:not(:last-child)' but that is not appropriate code to have in the html template.

I see the following options:

1. Sortable tabArrays do not support sortOptions: I don't think this is acceptable.
2. sortOptions.items defaults to 'li:not(:last-child)'. Maybe this could be done in bootstrap-decorator.js but this may not be possible and seems messy.
3. Change the html to move the "+ Add" out of the sortable list: The "+ Add" list item could be moved out of the ordered list and into a second list. I tried this out by having an <ol> containing the sortable tabs then a <ul> containing just the "+ Add" list item. This is a really simple fix but means that the "+ Add" is moved to another list which is a change to the structure of the html template and could impact the layout of applications already using tabarrays. But then again this PR switches tabArrays from using <ul> to <ol> which could have style implications for some users so there is already a possible break in backwards compatibility. Also separating the list items that correspond to elements in the array from the button that adds elements kind of makes sense for the structure of the template and could have other benefits.

I think I've convinced myself that option 3 is the best/only approach but I'm interested to hear other opinions.

[joelwkent]

I've added an example of sortable tab arrays and a protractor test. The protractor test populates an array with 10 elements then drags and drops them into reverse order.

To run the protractor test I included gulp-webserver and a task to start the server on port 8080. Currently there is no web server included in this repo as outlined here.

Unless anyone sees any issues with this PR the only thing remaining is to update the Angular Schema Form documentation regarding this change.

[joelwkent]

This Pull Request includes the following enhancements to tab arrays:

• Drag and drop tab sorting of the array elements
• Hide the "Add" link when set to null in the form
• Hide the "Remove" button when set to null in the form

These 3 enhancements align tab array more closely with the behavior of arrays.

I have added a tab array example that contains 4 demos of tab array forms. And I have added 4 protractor tests that cover:

• Tab array form loading
• "Add" link hidden
• "Remove" button hidden
• Drag and drop sorting of tabs

[Anthropic]

@joelwkent you totally should have nagged me about this!
Have I told you lately how much I love your work ;)

One question, is there a reason the example has its own html file rather than just run from a json file like the others, could it be done the same way?

[joelwkent]

Hi @Anthropic, you are right about just adding json to the standard example page so I have removed the example page I created and moved the examples to json used by the standard example page. I've pointed the tab array protractor tests to the standard example page and it all works as before. Thanks.