Add clickable button to filter issues and PRs

bipplane · web-flow · commit f0580587bdbe · 2025-08-07T14:39:50.000+08:00
Add the ability for users to filter cards by type (issue or PR) 
directly from the card view headers.

Clicking the issue or PR count toggles a filter to show only 
items of that type. Clicking the active filter again reverts this 
filter back to the original state.

This enhancement provides a more responsive, one-click method 
for filtering, which is especially useful in high-volume scenarios 
such as the huge influx of issues during PE-D or actual PE.
diff --git a/src/app/issues-viewer/card-view/card-view.component.css b/src/app/issues-viewer/card-view/card-view.component.css
@@ -131,17 +131,34 @@ div.column-header .mat-card-header {
   margin: 6px 0;
 }
 
-.row-count {
+.issue-row-count,
+.pr-row-count {
   background-color: rgb(222, 222, 222);
   border-radius: 3px;
-  cursor: default;
+  cursor: pointer;
   padding: 6px 8px 3px 8px;
   color: rgb(0, 0, 0);
   font-weight: 410;
   display: inline-flex;
   font-size: 14px;
   flex-shrink: 0;
   margin-top: 3px;
+  user-select: none;
+}
+
+.issue-row-count:hover,
+.pr-row-count:hover {
+  background-color: rgb(200, 200, 200);
+}
+
+.issue-row-count.active,
+.pr-row-count.active {
+  background-color: #b8b8b8;
+}
+
+.issue-row-count.inactive,
+.pr-row-count.inactive {
+  background-color: rgb(222, 222, 222);
 }
 
 .assignee-container {
diff --git a/src/app/issues-viewer/card-view/card-view.component.html b/src/app/issues-viewer/card-view/card-view.component.html
@@ -6,7 +6,7 @@
   <div class="scrollable-container-wrapper scroll-shadow">
     <div class="scrollable-container">
       <div class="issue-pr-cards" *ngFor="let issue of this.issues$ | async; index as i">
-        <app-issue-pr-card [issue]="issue" [filter]="issues.filter" [milestoneService]="milestoneService"></app-issue-pr-card>
+        <app-issue-pr-card [issue]="issue" [filter]="issues.filter" [milestoneService]="milestoneService"> </app-issue-pr-card>
       </div>
       <mat-card class="loading-spinner" *ngIf="this.issues.isLoading$ | async">
         <mat-progress-spinner color="primary" mode="indeterminate" diameter="50" strokeWidth="5"></mat-progress-spinner>
@@ -43,21 +43,37 @@
         <mat-card-title>
           <div class="assignee-container">
             <div
-              class="assignee-name"
+              class="assignee-name no-select"
               (click)="goToGithubProfile(assignee.login)"
               [ngClass]="{ clickable: assignee.login !== 'Unassigned' }"
             >
               <span class="" [matTooltip]="getAssigneeTooltip(assignee)" matTooltipPosition="above">
                 {{ assignee.login }}
               </span>
             </div>
-            <div class="row-count count-margins" [matTooltip]="getIssueTooltip()" matTooltipPosition="above">
+            <div
+              class="issue-row-count count-margins"
+              [class.inactive]="!this.issues.hasIssue"
+              [matTooltip]="getIssueTooltip()"
+              matTooltipPosition="above"
+              (click)="this.issues.hasIssue && filterByIssues()"
+              [class.active]="currentFilter === 'issues'"
+              [style.cursor]="this.issues.hasIssue ? 'pointer' : 'default'"
+            >
               <span class="octicon count-margins" octicon="issue-opened"></span>
-              <span class="">{{ this.issues.issueCount }}</span>
+              <span class="no-select">{{ this.issues.issueCount }}</span>
             </div>
-            <div class="row-count" [matTooltip]="getPrTooltip()" matTooltipPosition="above">
+            <div
+              class="pr-row-count"
+              [class.inactive]="!this.issues.hasPR"
+              [matTooltip]="getPrTooltip()"
+              matTooltipPosition="above"
+              (click)="this.issues.hasPR && filterByPrs()"
+              [class.active]="currentFilter === 'prs'"
+              [style.cursor]="this.issues.hasPR ? 'pointer' : 'default'"
+            >
               <span class="octicon count-margins" octicon="git-pull-request"></span>
-              <span>{{ this.issues.prCount }}</span>
+              <span class="no-select">{{ this.issues.prCount }}</span>
             </div>
           </div>
         </mat-card-title>
@@ -72,16 +88,32 @@
       <mat-card-header [ngStyle]="{ height: '40px' }">
         <mat-card-title>
           <div class="milestone-container">
-            <div>
+            <div class="no-select">
               {{ milestone.title }}
             </div>
-            <div class="row-count count-margins" [matTooltip]="getIssueTooltip()" matTooltipPosition="above">
+            <div
+              class="issue-row-count count-margins"
+              [class.inactive]="!this.issues.hasIssue"
+              [matTooltip]="getIssueTooltip()"
+              matTooltipPosition="above"
+              (click)="this.issues.hasIssue && filterByIssues()"
+              [class.active]="currentFilter === 'issues'"
+              [style.cursor]="this.issues.hasIssue ? 'pointer' : 'default'"
+            >
               <span class="octicon count-margins" octicon="issue-opened"></span>
-              <span class="">{{ this.issues.issueCount }}</span>
+              <span class="no-select">{{ this.issues.issueCount }}</span>
             </div>
-            <div class="row-count" [matTooltip]="getPrTooltip()" matTooltipPosition="above">
+            <div
+              class="pr-row-count"
+              [class.inactive]="!this.issues.hasPR"
+              [matTooltip]="getPrTooltip()"
+              matTooltipPosition="above"
+              (click)="this.issues.hasPR && filterByPrs()"
+              [class.active]="currentFilter === 'prs'"
+              [style.cursor]="this.issues.hasPR ? 'pointer' : 'default'"
+            >
               <span class="octicon count-margins" octicon="git-pull-request"></span>
-              <span>{{ this.issues.prCount }}</span>
+              <span class="no-select">{{ this.issues.prCount }}</span>
             </div>
           </div>
         </mat-card-title>
diff --git a/src/app/issues-viewer/card-view/card-view.component.ts b/src/app/issues-viewer/card-view/card-view.component.ts
@@ -53,6 +53,8 @@ export class CardViewComponent implements OnInit, AfterViewInit, OnDestroy, Filt
   isLoading = true;
   issueLength = 0;
 
+  currentFilter: 'all' | 'issues' | 'prs' = 'all';
+
   pageSize = 20;
 
   @Output() issueLengthChange: EventEmitter<Number> = new EventEmitter<Number>();
@@ -146,6 +148,18 @@ export class CardViewComponent implements OnInit, AfterViewInit, OnDestroy, Filt
     return this.issues.prCount + ' Pull Requests';
   }
 
+  filterByIssues(): void {
+    const issueFilter = this.currentFilter === 'issues' ? 'all' : 'issues';
+    this.currentFilter = issueFilter;
+    this.issues.setIssueTypeFilter(issueFilter);
+  }
+
+  filterByPrs(): void {
+    const issueFilter = this.currentFilter === 'prs' ? 'all' : 'prs';
+    this.currentFilter = issueFilter;
+    this.issues.setIssueTypeFilter(issueFilter);
+  }
+
   getAssigneeTooltip(assignee: any): string {
     return assignee.login;
   }
diff --git a/src/app/shared/issue-pr-card/issue-pr-card.component.html b/src/app/shared/issue-pr-card/issue-pr-card.component.html
@@ -1,4 +1,4 @@
-<mat-card class="card" [ngClass]="getIssueOpenOrCloseColorCSSClass()">
+<mat-card class="card" [class.issue-card]="isIssue()" [ngClass]="getIssueOpenOrCloseColorCSSClass()">
   <a class="no-underline link-grey-dark">
     <span [matTooltip]="this.issue.updated_at">
       <app-issue-pr-card-header [issue]="issue" (click)="viewIssueInBrowser($event)"></app-issue-pr-card-header>
diff --git a/src/app/shared/issue-pr-card/issue-pr-card.component.ts b/src/app/shared/issue-pr-card/issue-pr-card.component.ts
@@ -22,6 +22,10 @@ export class IssuePrCardComponent {
     public milestoneService: MilestoneService
   ) {}
 
+  isIssue(): boolean {
+    return this.issue.issueOrPr === 'Issue';
+  }
+
   isNotFollowingForkingWorkflow() {
     return (
       this.issue.issueOrPr === 'PullRequest' && this.issue.headRepository?.toLowerCase() === this.githubService.getRepoURL().toLowerCase()
diff --git a/src/app/shared/issue-tables/IssuesDataTable.ts b/src/app/shared/issue-tables/IssuesDataTable.ts
@@ -21,9 +21,12 @@ export class IssuesDataTable extends DataSource<Issue> implements FilterableSour
   public count = 0;
   public issueCount = 0;
   public prCount = 0;
+  public hasIssue = false;
+  public hasPR = false;
   private filterChange = new BehaviorSubject(this.filtersService.defaultFilter);
   private issuesSubject = new BehaviorSubject<Issue[]>([]);
   private issueSubscription: Subscription;
+  private issueTypeFilter: 'all' | 'issues' | 'prs' = 'all'; // initialise as 'all'
 
   public isLoading$ = this.issueService.isLoading.asObservable();
 
@@ -69,6 +72,15 @@ export class IssuesDataTable extends DataSource<Issue> implements FilterableSour
     this.issueService.stopPollIssues();
   }
 
+  setIssueTypeFilter(filter: 'all' | 'issues' | 'prs') {
+    this.issueTypeFilter = filter;
+    this.loadIssues();
+  }
+
+  getIssueTypeFilter(): 'all' | 'issues' | 'prs' {
+    return this.issueTypeFilter;
+  }
+
   loadIssues() {
     let page;
     if (this.paginator !== undefined) {
@@ -98,8 +110,24 @@ export class IssuesDataTable extends DataSource<Issue> implements FilterableSour
           data = applyDropdownFilter(this.filter, data, !this.milestoneService.hasNoMilestones, !this.assigneeService.hasNoAssignees);
 
           data = applySearchFilter(this.filter.title, this.displayedColumn, this.issueService, data);
+
           this.issueCount = data.filter((issue) => issue.issueOrPr !== 'PullRequest').length;
           this.prCount = data.filter((issue) => issue.issueOrPr === 'PullRequest').length;
+          this.hasIssue = this.issueCount > 0;
+          this.hasPR = this.prCount > 0;
+
+          // Apply Issue Type Filter for header component
+          if (this.issueTypeFilter !== 'all') {
+            const issueType = this.issueTypeFilter === 'issues' ? 'Issue' : 'PullRequest';
+            const filteredData = data.filter((issue) => issue.issueOrPr === issueType);
+
+            if (filteredData.length === 0) {
+              this.issueTypeFilter = 'all';
+            } else {
+              data = filteredData;
+            }
+          }
+
           this.count = data.length;
 
           data = applySort(this.filter.sort, data);

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<mat-card class="card" [ngClass]="getIssueOpenOrCloseColorCSSClass()">`
	`1`	`+<mat-card class="card" [class.issue-card]="isIssue()" [ngClass]="getIssueOpenOrCloseColorCSSClass()">`
`2`	`2`	`<a class="no-underline link-grey-dark">`
`3`	`3`	`<span [matTooltip]="this.issue.updated_at">`
`4`	`4`	`<app-issue-pr-card-header [issue]="issue" (click)="viewIssueInBrowser($event)"></app-issue-pr-card-header>`