2023-11-24 18:12:39 +01:00
< div class = "d-flex align-items-center gap-1-rem" >
< button mat-flat-button [ matMenuTriggerFor ] = " filterMenu " # filterMenuTrigger = "matMenuTrigger" ( click ) = " updateFilters ( ) " class = "filter-button" >
< mat-icon aria-hidden = "false" [ matBadgeHidden ] = " ! appliedFilterCount " [ matBadge ] = " appliedFilterCount " matBadgeColor = "warn" matBadgeSize = "small" > filter_alt< / mat-icon >
{{'COMMONS.LISTING-COMPONENT.SEARCH-FILTER-BTN' | translate}}
< / button >
< mat-menu # filterMenu >
2024-04-15 12:01:58 +02:00
< div class = "container-fluid" ( click ) = " $ event ? . stopPropagation ? . ( ) " >
< div class = "row justify-content-between" >
< div class = "col-auto mt-2" >
2023-11-24 18:12:39 +01:00
< h4 > {{'REFERENCE-LISTING.FILTER.TITLE' | translate}}< / h4 >
2024-04-15 12:01:58 +02:00
< / div >
< div class = "col-auto" >
2023-11-24 18:12:39 +01:00
< button color = "accent" mat-button ( click ) = " clearFilters ( ) " >
{{'COMMONS.LISTING-COMPONENT.CLEAR-ALL-FILTERS' | translate}}
< / button >
< / div >
2024-04-15 12:01:58 +02:00
< / div >
2023-11-24 18:12:39 +01:00
2024-04-15 12:01:58 +02:00
< div class = "row mt-3" >
< div class = "col-12" >
< section class = "w-100" >
< mat-slide-toggle labelPosition = "before" [ ( ngModel ) ] = " internalFilters . isActive " >
{{'REFERENCE-LISTING.FILTER.IS-ACTIVE' | translate}}
< / mat-slide-toggle >
< / section >
< / div >
< / div >
2023-11-24 18:12:39 +01:00
2024-04-15 12:01:58 +02:00
< div class = "row mt-3" >
< div class = "col-12" >
< mat-form-field class = "w-100" >
< mat-label > {{'REFERENCE-LISTING.FILTER.TYPE' | translate}}< / mat-label >
2024-02-09 21:46:05 +01:00
< app-single-auto-complete [ ( ngModel ) ] = " internalFilters . typeIds " placeholder = "{{'REFERENCE-LISTING.FILTER.TYPE' | translate}}" [ configuration ] = " referenceTypeService . singleAutocompleteConfiguration " >
< / app-single-auto-complete >
2024-04-15 12:01:58 +02:00
< / mat-form-field >
2023-11-30 16:28:05 +01:00
< / div >
2024-04-15 12:01:58 +02:00
< / div >
2023-11-30 16:28:05 +01:00
2024-04-15 12:01:58 +02:00
< div class = "row mt-3" >
< div class = "col-12" >
< mat-form-field class = "w-100" >
< mat-label > {{'REFERENCE-LISTING.FILTER.SOURCE-TYPE' | translate}}< / mat-label >
2023-12-01 09:12:09 +01:00
< mat-select multiple [ ( ngModel ) ] = " internalFilters . sourceTypes " >
< mat-option * ngFor = "let referenceSourceType of referenceSourceTypeEnumValues" [ value ] = " referenceSourceType " > {{enumUtils.toReferenceSourceTypeString(referenceSourceType)}}< / mat-option >
< / mat-select >
2024-04-15 12:01:58 +02:00
< / mat-form-field >
2023-12-01 09:12:09 +01:00
< / div >
2024-04-15 12:01:58 +02:00
< / div >
2023-12-01 09:12:09 +01:00
2024-04-15 12:01:58 +02:00
< div class = "row justify-content-end align-items-center mt-4 mb-1 gap-1-rem" >
< div class = "col-auto" >
< button class = "normal-btn-light-sm" ( click ) = " filterMenuTrigger ? . closeMenu ( ) " >
2023-11-24 18:12:39 +01:00
{{'REFERENCE-LISTING.FILTER.CANCEL' | translate}}
< / button >
2024-04-15 12:01:58 +02:00
< / div >
< div class = "col-auto" >
< button class = "normal-btn-sm" ( click ) = " filterMenuTrigger . closeMenu ( ) ; applyFilters ( ) ; " >
2023-11-24 18:12:39 +01:00
{{'REFERENCE-LISTING.FILTER.APPLY-FILTERS' | translate}}
< / button >
< / div >
< / div >
< / div >
< / mat-menu >
< app-expandable-search-field [ ( value ) ] = internalFilters . like ( valueChange ) = " onSearchTermChange ( $ event ) " / >
2024-02-09 21:46:05 +01:00
< / div >