Add column of hidden users (#235)

After #192, assignees of a repo without any issues or PRs
are hidden. Now, add the column to display such users
with 0 PRs and issues.

Co-authored-by: Gabriel Goh <77230723+gycgabriel@users.noreply.github.com>

src/app/issues-viewer/card-view/card-view.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { Observable } from 'rxjs';
@@ -31,6 +31,8 @@ export class CardViewComponent implements OnInit, AfterViewInit, OnDestroy, Filt
   isLoading = true;
   issueLength = 0;
 
+  @Output() issueLengthChange: EventEmitter<Number> = new EventEmitter<Number>();
+
   constructor(public element: ElementRef, public issueService: IssueService) {}
 
   ngOnInit() {
@@ -45,6 +47,7 @@ export class CardViewComponent implements OnInit, AfterViewInit, OnDestroy, Filt
       // Emit event when issues change
       this.issues$.subscribe((issues) => {
         this.issueLength = issues.length;
+        this.issueLengthChange.emit(this.issueLength);
       });
 
       // Emit event when loading state changes

src/app/issues-viewer/hidden-users/hidden-users.component.css

@@ -0,0 +1,82 @@
+.hidden-users {
+  margin: 8px;
+  min-width: 150px;
+  max-width: 300px;
+}
+
+.row-count {
+  background-color: rgb(222, 222, 222);
+  border-radius: 3px;
+  cursor: default;
+  padding: 6px;
+  color: rgb(0, 0, 0);
+  font-weight: 410;
+  display: inline-flex;
+  font-size: 14px;
+}
+
+.mat-card-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+}
+
+.mat-card {
+  margin: 8px 0px;
+  height: 40px;
+  padding: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+}
+
+.mat-card-title {
+  font-size: 14px;
+  text-align: center;
+  margin: 0;
+  flex-grow: 1;
+  margin: 2px;
+  word-break: break-word;
+}
+
+.mat-card-avatar {
+  height: 30px;
+  width: 30px;
+}
+
+.mat-card-header .mat-card-title {
+  font-size: 12px;
+}
+
+.scrollable-container {
+  height: 67vh;
+  overflow: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  position: relative;
+}
+
+.scrollable-containers::-webkit-scrollbar {
+  display: none;
+}
+
+.scrollable-container::before,
+.scrollable-container::after {
+  pointer-events: none;
+  content: '';
+  z-index: 2;
+  height: 6px;
+  width: 100%;
+  display: block;
+  background-image: linear-gradient(to bottom, white 66%, transparent);
+}
+
+.scrollable-container::before {
+  position: absolute;
+}
+
+.scrollable-container::after {
+  position: sticky;
+}

src/app/issues-viewer/hidden-users/hidden-users.component.html

@@ -0,0 +1,22 @@
+<div *ngIf="users.length > 0" class="hidden-users">
+  <mat-card>
+    <mat-card-title>Hidden users</mat-card-title>
+    <div class="row-count">{{ users.length }}</div>
+  </mat-card>
+  <div class="scrollable-container">
+    <div *ngFor="let user of users">
+      <mat-card>
+        <mar-card-header class="mat-card-header">
+          <div
+            mat-card-avatar
+            [ngStyle]="{
+              background: 'url(' + user.avatar_url + ')',
+              'background-size': '30px'
+            }"
+          ></div>
+          <mat-card-title>{{ user.login }}</mat-card-title>
+        </mar-card-header>
+      </mat-card>
+    </div>
+  </div>
+</div>

src/app/issues-viewer/hidden-users/hidden-users.component.ts

@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+import { GithubUser } from '../../core/models/github-user.model';
+
+@Component({
+  selector: 'app-hidden-users',
+  templateUrl: './hidden-users.component.html',
+  styleUrls: ['./hidden-users.component.css']
+})
+export class HiddenUsersComponent {
+  @Input() users: GithubUser[] = [];
+}

src/app/issues-viewer/issues-viewer.component.html

@@ -15,6 +15,7 @@
         [assignee]="assignee"
         [headers]="this.displayedColumns"
         [sort]="filterbar.matSort"
+        (issueLengthChange)="updateHiddenUsers($event, assignee)"
       ></app-card-view>
       <app-card-view
         class="issue-table"
@@ -24,6 +25,7 @@
         [sort]="filterbar.matSort"
       >
       </app-card-view>
+      <app-hidden-users [users]="hiddenAssignees"></app-hidden-users>
     </div>
   </ng-template>
 </div>

src/app/issues-viewer/issues-viewer.component.ts

@@ -28,6 +28,9 @@ export class IssuesViewerComponent implements OnInit, AfterViewInit, OnDestroy {
   /** Users to show as columns */
   assignees: GithubUser[];
 
+  /** The list of users with 0 issues (hidden) */
+  hiddenAssignees: GithubUser[] = [];
+
   @ViewChildren(CardViewComponent) cardViews: QueryList<CardViewComponent>;
 
   views = new BehaviorSubject<QueryList<CardViewComponent>>(undefined);
@@ -71,6 +74,7 @@ export class IssuesViewerComponent implements OnInit, AfterViewInit, OnDestroy {
 
     // Fetch assignees
     this.assignees = [];
+    this.hiddenAssignees = [];
 
     this.githubService.getUsersAssignable().subscribe((x) => (this.assignees = x));
 
@@ -90,4 +94,27 @@ export class IssuesViewerComponent implements OnInit, AfterViewInit, OnDestroy {
 
     return this.githubService.isRepositoryPresent(currentRepo.owner, currentRepo.name);
   }
+
+  /**
+   * Update the list of hidden user based on the new info.
+   * @param issueLength The number of issues assigned to this user.
+   * @param assignee The assignee.
+   */
+  updateHiddenUsers(issueLength: number, assignee: GithubUser) {
+    if (issueLength === 0) {
+      this.updateHiddenUser(assignee);
+    } else {
+      this.removeHiddenUser(assignee);
+    }
+  }
+
+  private updateHiddenUser(assignee: GithubUser) {
+    if (!this.hiddenAssignees.includes(assignee)) {
+      this.hiddenAssignees.push(assignee);
+    }
+  }
+
+  private removeHiddenUser(assignee: GithubUser) {
+    this.hiddenAssignees = this.hiddenAssignees.filter((user) => user !== assignee);
+  }
 }

src/app/issues-viewer/issues-viewer.module.ts

@@ -3,12 +3,13 @@ import { FilterBarModule } from '../shared/filter-bar/filter-bar.module';
 import { IssuesPrCardModule } from '../shared/issue-pr-card/issue-pr-card.module';
 import { SharedModule } from '../shared/shared.module';
 import { CardViewComponent } from './card-view/card-view.component';
+import { HiddenUsersComponent } from './hidden-users/hidden-users.component';
 import { IssuesViewerRoutingModule } from './issues-viewer-routing.module';
 import { IssuesViewerComponent } from './issues-viewer.component';
 
 @NgModule({
   imports: [FilterBarModule, IssuesViewerRoutingModule, IssuesPrCardModule, SharedModule],
-  declarations: [IssuesViewerComponent, CardViewComponent],
+  declarations: [IssuesViewerComponent, CardViewComponent, HiddenUsersComponent],
   exports: [IssuesViewerComponent, CardViewComponent]
 })
 export class IssuesViewerModule {}