Hide 0 issue columns (#223)

Hide 0 issue columns.

0 Issue columns are shown.

Hiding issues with 0 columns reduces the clutter on screen, 
creating a better user experience. 
Illogical columns such as issues that are unassigned when sorting by
pull requests are also removed inherently.

Let's add logic to hide the columns when they have no issues 
associated to them.

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

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { Observable } from 'rxjs';
@@ -28,7 +28,10 @@ export class CardViewComponent implements OnInit, AfterViewInit, OnDestroy, Filt
   issues: IssuesDataTable;
   issues$: Observable<Issue[]>;
 
-  constructor(public issueService: IssueService) {}
+  isLoading = true;
+  issueLength = 0;
+
+  constructor(public element: ElementRef, public issueService: IssueService) {}
 
   ngOnInit() {
     this.issues = new IssuesDataTable(this.issueService, this.sort, this.paginator, this.headers, this.assignee, this.filters);
@@ -38,6 +41,16 @@ export class CardViewComponent implements OnInit, AfterViewInit, OnDestroy, Filt
     setTimeout(() => {
       this.issues.loadIssues();
       this.issues$ = this.issues.connect();
+
+      // Emit event when issues change
+      this.issues$.subscribe((issues) => {
+        this.issueLength = issues.length;
+      });
+
+      // Emit event when loading state changes
+      this.issues.isLoading$.subscribe((isLoadingUpdate) => {
+        this.isLoading = isLoadingUpdate;
+      });
     });
   }
 

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

@@ -10,11 +10,20 @@
       <app-card-view
         *ngFor="let assignee of assignees"
         class="issue-table"
+        #card
+        [ngStyle]="{ display: card.isLoading || card.issueLength > 0 ? 'initial' : 'none' }"
         [assignee]="assignee"
         [headers]="this.displayedColumns"
         [sort]="filterbar.matSort"
       ></app-card-view>
-      <app-card-view class="issue-table" [headers]="this.displayedColumns" [sort]="filterbar.matSort"></app-card-view>
+      <app-card-view
+        class="issue-table"
+        #card
+        [ngStyle]="{ display: card.isLoading || card.issueLength > 0 ? 'initial' : 'none' }"
+        [headers]="this.displayedColumns"
+        [sort]="filterbar.matSort"
+      >
+      </app-card-view>
     </div>
   </ng-template>
 </div>