Skip to content

Drag drop re-order of tab array #665

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
jugglingcats opened this issue Apr 12, 2016 · 9 comments
Closed

Drag drop re-order of tab array #665

jugglingcats opened this issue Apr 12, 2016 · 9 comments

Comments

@jugglingcats
Copy link

Is this possible, or is there a feature request for it I can follow? Quick search of existing issues didn't turn up anything.

Thanks

@nicklasb
Copy link
Member

I have not seen any such request, what would be the use case?

@jugglingcats
Copy link
Author

Hi, thanks for the reply. We have an array within our schema shown as horizontal tabs. Buttons appear to add items to the array or remove items. All good. But we need the ability to re-order the items in the array. Doesn't have to be drag'n'drop, but there should be a way, as this is possible with a non-tabbed array.

@Anthropic
Copy link
Member

@jugglingcats can you not change the data directly in your model? Put a button into the content of each tab and then change the order of your items in the model directly.

@jugglingcats
Copy link
Author

I've not done anything that custom in angular-schema-form to date. Is there an example somewhere how to do it? Also we are trying to provide a framework where customers/projects can define their own schema/form, and this seems like something that might be complex to explain/document.

@Anthropic
Copy link
Member

@jugglingcats
Only what is in the demo pages, what you are looking for is the button with onClick and pass in the $index, then update your data based on the click event. So you may have

{
  "list": [
    {"name":"a", "data":{}},
    {"name":"b", "data":{}},
    {"name":"c", "data":{}}
  ]
}

Well all you need to do to re-order the tabs is to have an onClick function splice your list array and re-order the items to

{
  "list": [
    {"name":"b", "data":{}},
    {"name":"a", "data":{}},
    {"name":"c", "data":{}}
  ]
}

That will move the tab

@jugglingcats
Copy link
Author

I will have a look and thanks for your feedback. I do think this is a good feature to consider adding, to make drag-drop reordering consistent between tabbed and non-tabbed modes.

@Anthropic
Copy link
Member

No problem, it would be something that would go in a decorator, so worth raising in angular-schema-form-boostrap, angular-schema-form-material probably wont add it unless the capability is part of the material design specification (which it may be, haven't checked)

@joelwkent
Copy link
Member

Hi @jugglingcats , @Anthropic , I agree drag and drop tab arrays are useful. I built a form builder some time back and used a tab array to show the fields in the form and I modified the decorator to allow users to drag and drop the tabs to re-order the fields in the form. @jugglingcats if you have not already started on this modification I can raise a pull request with angular-schema-form-boostrap and contribute my change?

@joelwkent
Copy link
Member

I've raised a Pull Request that adds this functionality to angular-schema-form-boostrap. I'll close this issue but please re-open if you do not feel the question has been answered sufficiently.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants