feat: Add Reset Filters button to footer of various tables

bluehalo · Nov 22, 2024 · f0a3874 · f0a3874
1 parent 2b3fa51
commit f0a3874
Show file tree

Hide file tree

Showing 9 changed files with 68 additions and 25 deletions.
diff --git a/src/app/core/admin/cache-entries/list-cache-entries/list-cache-entries.component.html b/src/app/core/admin/cache-entries/list-cache-entries/list-cache-entries.component.html
@@ -82,9 +82,14 @@ <h1 skipTo>Cache Entries</h1>
 	</div>
 
 	<div class="table-footer d-flex align-items-center">
-		<div class="table-footer-pager ms-auto">
-			<asy-paginator [dataSource]="dataSource" />
-		</div>
+		<button
+			class="btn btn-outline-primary btn-sm px-4 me-3"
+			type="button"
+			(click)="clearFilters()"
+		>
+			Reset Filters
+		</button>
+		<asy-paginator class="ms-auto" [dataSource]="dataSource" />
 	</div>
 </section>
 

diff --git a/src/app/core/admin/end-user-agreement/list-euas/admin-list-euas.component.html b/src/app/core/admin/end-user-agreement/list-euas/admin-list-euas.component.html
@@ -135,8 +135,13 @@ <h1 skipTo>EUAs</h1>
 	</div>
 
 	<div class="table-footer d-flex align-items-center">
-		<div class="table-footer-pager ms-auto">
-			<asy-paginator [dataSource]="dataSource" />
-		</div>
+		<button
+			class="btn btn-outline-primary btn-sm px-4 me-3"
+			type="button"
+			(click)="clearFilters()"
+		>
+			Reset Filters
+		</button>
+		<asy-paginator class="ms-auto" [dataSource]="dataSource" />
 	</div>
 </section>
diff --git a/src/app/core/admin/feedback/list-feedback/admin-list-feedback.component.html b/src/app/core/admin/feedback/list-feedback/admin-list-feedback.component.html
@@ -216,8 +216,13 @@ <h1 skipTo>System Feedback</h1>
 	</div>
 
 	<div class="table-footer d-flex align-items-center">
-		<div class="table-footer-pager ms-auto">
-			<asy-paginator [dataSource]="dataSource" />
-		</div>
+		<button
+			class="btn btn-outline-primary btn-sm px-4 me-3"
+			type="button"
+			(click)="clearFilters()"
+		>
+			Reset Filters
+		</button>
+		<asy-paginator class="ms-auto" [dataSource]="dataSource" />
 	</div>
 </section>
diff --git a/src/app/core/admin/feedback/list-feedback/admin-list-feedback.component.ts b/src/app/core/admin/feedback/list-feedback/admin-list-feedback.component.ts
@@ -3,7 +3,7 @@ import { OverlayModule } from '@angular/cdk/overlay';
 import { CdkTableModule } from '@angular/cdk/table';
 import { NgClass, TitleCasePipe } from '@angular/common';
 import { HttpErrorResponse } from '@angular/common/http';
-import { Component, DestroyRef, OnInit, inject, signal } from '@angular/core';
+import { Component, DestroyRef, OnInit, inject, signal, viewChild } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
@@ -72,6 +72,8 @@ export class AdminListFeedbackComponent implements OnInit {
 	readonly #adminUsersService = inject(AdminUsersService);
 	readonly feedbackStatusOptions = FeedbackStatusOption;
 
+	readonly filter = viewChild.required(AsyFilterDirective);
+
 	readonly displayedColumns = signal<string[]>([]);
 	readonly assigneeUsernames = signal<string[]>([]);
 
@@ -164,6 +166,7 @@ export class AdminListFeedbackComponent implements OnInit {
 
 	clearFilters() {
 		this.dataSource.search('');
+		this.filter().clearFilter();
 	}
 
 	exportCurrentView() {

diff --git a/src/app/core/admin/messages/list-messages/list-messages.component.html b/src/app/core/admin/messages/list-messages/list-messages.component.html
@@ -97,8 +97,13 @@ <h1 skipTo>Messages</h1>
 	</div>
 
 	<div class="table-footer d-flex align-items-center">
-		<div class="table-footer-pager ms-auto">
-			<asy-paginator [dataSource]="dataSource" />
-		</div>
+		<button
+			class="btn btn-outline-primary btn-sm px-4 me-3"
+			type="button"
+			(click)="clearFilters()"
+		>
+			Reset Filters
+		</button>
+		<asy-paginator class="ms-auto" [dataSource]="dataSource" />
 	</div>
 </section>
diff --git a/src/app/core/admin/user/list-users/admin-list-users.component.html b/src/app/core/admin/user/list-users/admin-list-users.component.html
@@ -152,8 +152,13 @@ <h1 skipTo>Users</h1>
 	</div>
 
 	<div class="table-footer d-flex align-items-center">
-		<div class="table-footer-pager ms-auto">
-			<asy-paginator [dataSource]="dataSource" />
-		</div>
+		<button
+			class="btn btn-outline-primary btn-sm px-4 me-3"
+			type="button"
+			(click)="clearFilters()"
+		>
+			Reset Filters
+		</button>
+		<asy-paginator class="ms-auto" [dataSource]="dataSource" />
 	</div>
 </section>
diff --git a/src/app/core/audit/list-audit-entries/list-audit-entries.component.html b/src/app/core/audit/list-audit-entries/list-audit-entries.component.html
@@ -146,8 +146,13 @@ <h1 skipTo>Audit Logs</h1>
 	</div>
 
 	<div class="table-footer d-flex align-items-center">
-		<div class="table-footer-pager ms-auto">
-			<asy-paginator [dataSource]="dataSource" />
-		</div>
+		<button
+			class="btn btn-outline-primary btn-sm px-4 me-3"
+			type="button"
+			(click)="clearFilters()"
+		>
+			Reset Filters
+		</button>
+		<asy-paginator class="ms-auto" [dataSource]="dataSource" />
 	</div>
 </section>
diff --git a/src/app/core/teams/list-team-members/list-team-members.component.html b/src/app/core/teams/list-team-members/list-team-members.component.html
@@ -108,8 +108,13 @@
 	</div>
 
 	<div class="table-footer d-flex align-items-center">
-		<div class="table-footer-pager ms-auto">
-			<asy-paginator [dataSource]="dataSource" />
-		</div>
+		<button
+			class="btn btn-outline-primary btn-sm px-4 me-3"
+			type="button"
+			(click)="clearFilters()"
+		>
+			Reset Filters
+		</button>
+		<asy-paginator class="ms-auto" [dataSource]="dataSource" />
 	</div>
 </section>
diff --git a/src/app/core/teams/list-teams/list-teams.component.html b/src/app/core/teams/list-teams/list-teams.component.html
@@ -68,8 +68,13 @@ <h1 skipTo>Teams</h1>
 	</div>
 
 	<div class="table-footer d-flex align-items-center">
-		<div class="table-footer-pager ms-auto">
-			<asy-paginator [dataSource]="dataSource" />
-		</div>
+		<button
+			class="btn btn-outline-primary btn-sm px-4 me-3"
+			type="button"
+			(click)="clearFilters()"
+		>
+			Reset Filters
+		</button>
+		<asy-paginator class="ms-auto" [dataSource]="dataSource" />
 	</div>
 </section>