Skip to content
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

add ng-select for templatable select options #3035

Merged
merged 1 commit into from
Aug 11, 2020

Conversation

rigelk
Copy link
Collaborator

@rigelk rigelk commented Aug 4, 2020

Having a slightly more customizable select component is required here to display both the label of an option and its description. ng-select component, like most select components around, features lazy-loading of remote data - which could prove useful for listing channels in the video-edit view in the future.

In this PR I focus on the upload/edit view, but other select usages could use option templates elsewhere.

Screenshot_2020-08-05 Upload a video - PeerTube
Screenshot_2020-08-05 Edit a video - PeerTube

fixes #3015

@rigelk rigelk added the UI non-trivial UI changes, that might need discussion label Aug 4, 2020
@rigelk
Copy link
Collaborator Author

rigelk commented Aug 5, 2020

@Chocobozzz I didn't check bundle size, because I think this component could replace ngx-tag as well and save on its size: https://ng-select.github.io/ng-select/#/tags

Considered this, I didn't try to target the video-update module only.

@Chocobozzz
Copy link
Owner

😍

Copy link
Owner

@Chocobozzz Chocobozzz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would be happy if you could remove ngx-tag

@rigelk rigelk force-pushed the ng-select branch 3 times, most recently from 14b625c to 155fc34 Compare August 7, 2020 07:57
@rigelk
Copy link
Collaborator Author

rigelk commented Aug 7, 2020

@Chocobozzz I made progress, but I also have a strange error that might be due to my modifications of the video-edit view:

Peek 2020-08-07 10-20 - problem with ng-select

DEBUGGED:

  • it is due to errors that block further rendering:
    • a missing input that I forgot while extending the base NgSelectComponent.
    • bindValue that cannot find the nested attribute (key) when reseting.

@rigelk rigelk force-pushed the ng-select branch 4 times, most recently from 67350fc to 88cb021 Compare August 8, 2020 14:42
@rigelk rigelk requested a review from Chocobozzz August 8, 2020 14:42
@rigelk
Copy link
Collaborator Author

rigelk commented Aug 8, 2020

@Chocobozzz I replaced ngx-chips as intended, and while my select-tags component behaves well in forms (in the video-edit view), I can't seem to make it work in the search-filter component, where there is no form and two-way data binding doesn't seem to work with it. I could always replace the component with the bare ng-select component, but it kinda defeats the factorization.

Aside from this, it is mostly on par with previous functionality. Slight differences: channel avatars, instance languages on top of language list and grouped as such.

- create select-tags component to replace ngx-chips
- create select-options to factorize option selection in forms
- create select-channel to simplify channel selection
- refactor tags validation
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
UI non-trivial UI changes, that might need discussion
Projects
None yet
Development

Successfully merging this pull request may close these issues.

video privacy text mismatch
3 participants