[Datahub] Add search filter for organisations

[tkohr]

PR adds a search filter for the organisations:

Todos:

• finish search-input: display clear only if value, no button for search icon, remove red background color, etc.
• rename sort to filter component ?
• i18n (lots of translations seem out of sync)
• search user experience: should we really always apply OR filter on inputs? => impossible to narrow search down to one result => changed to AND after discussion
• clarify why emails of orgs are erased by groups mapping => not sure if my fix is correct here => removed search in emails after discussion
• tests

Funded by SwissTopo geocat.ch

[github-actions]

Affected libs: feature-catalog, feature-record, feature-router, ui-catalog, ui-inputs, feature-dataviz, feature-search, feature-map, feature-editor, ui-elements, ui-search,
Affected apps: metadata-editor, datahub, demo, webcomponents, search, metadata-converter, map-viewer, datafeeder,

• 🚀 Build and deploy storybook and demo on GitHub Pages
• 📦 Build and push affected docker images

[coveralls]

coverage: 81.942% (-2.0%) from 83.923%
when pulling a4947b1 on orgs-filter
into 92348fa on main.

[fgravin]

Excellent, I start to like the dynamic, clear UX and sharp implementation.
I am wondering if we should have a number of char limit, like 2 or 3 chars.

You just missed one thing, the margin between the search info and the results. It should be bigger, and aligned with the dataset tab.

👌

[fgravin]

Is it really it an output ?

[tkohr]

Ah good catch, completely forgot about it when refactoring

[fgravin]

Note that the children output is an Observable, which you could reach with a @ChildView component ref.
Parent output would just be childrenOutput.pipe(debounce(300), no event handling with the component, no event emission, just propagation.

[tkohr]

Interesting idea! I guess I'd need an ngOnInit for this to update the ouput, though, no?

As doing the following, the @Output()'s initialization accesses too early the searchInput:

@ViewChild('search') searchInput
@Output() filterBy = this.searchInput.valueChange.pipe(debounceTime(300))

[fgravin]

Yes, the ViewChild are only accessible afterViewInit.

[tkohr]

Thanks for the review @fgravin ! I did some testing introducing a minimum number of chars, but as we don't launch requests here, I finally decided against it. This way the user immediately gets a feedback that something is happening, when he/she stops typing, which seems more intuitive to me.