diff --git a/src/app/features/admin-institutions/components/filters-section/filters-section.component.html b/src/app/features/admin-institutions/components/filters-section/filters-section.component.html index 5fe8824ad..8f4872ee7 100644 --- a/src/app/features/admin-institutions/components/filters-section/filters-section.component.html +++ b/src/app/features/admin-institutions/components/filters-section/filters-section.component.html @@ -20,7 +20,7 @@

{{ 'adminInstitutions.common.filterBy' | translate }}

(selectedOptionRemoved)="onFilterChipRemoved($event)" /> -
+
(); private readonly expandedFilters = signal>(new Set()); - + private destroyRef = inject(DestroyRef); readonly FILTER_PLACEHOLDERS = FILTER_PLACEHOLDERS; readonly hasFilters = computed(() => { @@ -98,6 +111,10 @@ export class ReusableFilterComponent { }; }); + constructor(private el: ElementRef) {} + + private readonly SCROLL_DELAY_MS = 100; + shouldShowFilter(filter: DiscoverableFilter): boolean { if (!filter || !filter.key) return false; @@ -112,6 +129,9 @@ export class ReusableFilterComponent { if (!filterKey) return; const key = Array.isArray(filterKey) ? filterKey[0]?.toString() : filterKey.toString(); + + this.scrollPanelIntoView(key); + const selectedFilter = this.filters().find((filter) => filter.key === key); if (selectedFilter) { @@ -135,6 +155,31 @@ export class ReusableFilterComponent { this.filterOptionChanged.emit({ filter, filterOption }); } + private scrollPanelIntoView(key: string) { + of(key) + .pipe(delay(this.SCROLL_DELAY_MS), takeUntilDestroyed(this.destroyRef)) + .subscribe({ + next: (key) => { + const panelContent = this.el.nativeElement.querySelector( + `p-accordion-panel[ng-reflect-value="${key}"] p-accordion-content` + ); + + const scrollContainer = document.querySelector('.filters-section'); + + if (panelContent && scrollContainer) { + const contentRect = panelContent.getBoundingClientRect(); + const containerRect = scrollContainer.getBoundingClientRect(); + const newScrollTop = scrollContainer.scrollTop + (contentRect.top - containerRect.top); + + scrollContainer.scrollTo({ + top: newScrollTop, + behavior: 'smooth', + }); + } + }, + }); + } + onFilterSearch(filter: DiscoverableFilter, searchText: string): void { if (filter) { this.filterSearchChanged.emit({ filter, searchText });