Editor: Add a search filters summary component #1037
Conversation
|
Affected libs:
|
|
📷 Screenshots are here! |
...tor/src/app/dashboard/search-filters-summary-item/search-filters-summary-item.component.html
Outdated
Show resolved
Hide resolved
| const currentFieldValues: (FieldValue | DateRange)[] = await firstValueFrom( | ||
| this.fieldValues$ | ||
| ) | ||
| const updatedFieldValues = currentFieldValues.filter( | ||
| (value: string | DateRange) => value !== fieldValue | ||
| ) | ||
| this.fieldsService | ||
| .buildFiltersFromFieldValues({ | ||
| [this.fieldName]: updatedFieldValues as FieldValue[], | ||
| }) | ||
| .subscribe((filters) => this.searchService.updateFilters(filters)) |
There was a problem hiding this comment.
how about directly modifying the current filters instead of going from filters to values and then values to filters? simply deleting the corresponding key in the filters should be enough
There was a problem hiding this comment.
I must be thinking too complicated, but what would this look like? An additional method in the service or facade to delete one filter by its key? Also, date ranges don't use their value as a key in the object.
| <md-editor-search-filters-summary-item | ||
| *ngFor="let field of searchFields; let i = index" | ||
| [fieldName]="field" | ||
| ></md-editor-search-filters-summary-item> |
There was a problem hiding this comment.
I would suggest avoiding creating a separate "summary-item" component, and do everything in the search-filters-summary component. Do you think that would be doable?
There was a problem hiding this comment.
Hum, I've started with one component in the beginning, but afterwards I felt it became more readable, especially for understanding which field is targeted with a separate component.
| import { TranslateModule } from '@ngx-translate/core' | ||
|
|
||
| @Component({ | ||
| selector: 'md-editor-search-filters-summary', |
There was a problem hiding this comment.
this can maybe go in the feature-search lib ?
There was a problem hiding this comment.
Also, good point! I've moved it. I would've liked to separate logic and UI more to make it more reusable, but could not get it done. Maybe something for the future.
| @Input() searchFields: string[] = [] | ||
|
|
||
| searchFilterActive$ = this.searchFacade.searchFilters$.pipe( | ||
| map((filters) => this.hasNonEmptyValues(filters)) | ||
| ) |
There was a problem hiding this comment.
I'm wondering if instead of taking a list of filters as input we can simply listen for the search filters and show everyone of them. This means that if another filter (which does not appear in the advanced filters above) is active then it will also show up. What do you think?
There was a problem hiding this comment.
I gave it a try, but had some difficulties with the fact that the field names do not always correspond to the ES field names in the filters. I'm also wondering if it is not more intuitive from a user perspective to only display the summary badges for the filters visible in the filter component above. For example, on the myRecords page the filter { owner: user.id } should always be present.
| marker('search.filters.summaryLabel.user') | ||
| marker('search.filters.summaryLabel.changeDate') |
There was a problem hiding this comment.
how about marking labels for all fields? It might make more sense taken from outside I think. Another approach would be to use the field normal label if a summaryLabel is not available.
There was a problem hiding this comment.
Right, I'll add more translations for this, I think.
|
Thanks for the suggestions @jahow, I'll have a look how to refactor things this way. |
Description
This PR introduces components to display currently selected search filter values in a zone below the search filters. It is still WIP.
To-dos:
Screenshots
Quality Assurance Checklist
breaking changelabelbackport <release branch>label