Deploy v1.2.2

package.json

@@ -1,6 +1,6 @@
 {
   "name": "WATcher",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "main": "main.js",
   "scripts": {
     "ng": "ng",

src/app/core/services/filters.service.ts

@@ -16,6 +16,7 @@ export type Filter = {
   milestones: string[];
   hiddenLabels: Set<string>;
   deselectedLabels: Set<string>;
+  itemsPerPage: number;
 };
 
 @Injectable({
@@ -27,6 +28,8 @@ export type Filter = {
  */
 export class FiltersService {
   public static readonly PRESET_VIEW_QUERY_PARAM_KEY = 'presetview';
+  private itemsPerPage = 20;
+
   readonly presetViews: {
     [key: string]: () => Filter;
   } = {
@@ -38,7 +41,8 @@ export class FiltersService {
       labels: [],
       milestones: this.getMilestonesForCurrentlyActive().map((milestone) => milestone.title),
       hiddenLabels: new Set<string>(),
-      deselectedLabels: new Set<string>()
+      deselectedLabels: new Set<string>(),
+      itemsPerPage: this.itemsPerPage
     }),
     contributions: () => ({
       title: '',
@@ -48,7 +52,8 @@ export class FiltersService {
       labels: [],
       milestones: this.milestoneService.milestones.map((milestone) => milestone.title),
       hiddenLabels: new Set<string>(),
-      deselectedLabels: new Set<string>()
+      deselectedLabels: new Set<string>(),
+      itemsPerPage: this.itemsPerPage
     }),
     custom: () => this.filter$.value
   };
@@ -69,7 +74,11 @@ export class FiltersService {
     private router: Router,
     private route: ActivatedRoute,
     private milestoneService: MilestoneService
-  ) {}
+  ) {
+    this.filter$.subscribe((filter: Filter) => {
+      this.itemsPerPage = filter.itemsPerPage;
+    });
+  }
 
   private pushFiltersToUrl(): void {
     const queryParams = { ...this.route.snapshot.queryParams };
@@ -111,6 +120,9 @@ export class FiltersService {
         case 'sort':
           queryParams[filterName] = JSON.stringify(filterValue);
           break;
+        case 'itemsPerPage':
+          queryParams[filterName] = filterValue.toString();
+          break;
         default:
       }
     }
@@ -174,6 +186,9 @@ export class FiltersService {
           case 'sort':
             nextFilter[filterName] = JSON.parse(filterData[0]);
             break;
+          case 'itemsPerPage':
+            nextFilter[filterName] = Number(filterData[0]);
+            break;
           default:
         }
       }

src/app/core/services/github.service.ts

@@ -115,31 +115,25 @@ export class GithubService {
     /*
      * Github Issues consists of issues and pull requests in WATcher.
      */
-    const issueObs = this.toFetchIssues(issuesFilter).pipe(
+    return this.toFetchIssues(issuesFilter).pipe(
       filter((toFetch) => toFetch),
       flatMap(() => {
-        return this.fetchGraphqlList<FetchIssuesQuery, GithubGraphqlIssueOrPr>(
-          FetchIssues,
-          { owner: ORG_NAME, name: REPO, filter: graphqlFilter },
-          (result) => result.data.repository.issues.edges,
-          GithubGraphqlIssueOrPr
+        return merge(
+          this.fetchGraphqlList<FetchIssuesQuery, GithubGraphqlIssueOrPr>(
+            FetchIssues,
+            { owner: ORG_NAME, name: REPO, filter: graphqlFilter },
+            (result) => result.data.repository.issues.edges,
+            GithubGraphqlIssueOrPr
+          ),
+          this.fetchGraphqlList<FetchPullRequestsQuery, GithubGraphqlIssueOrPr>(
+            FetchPullRequests,
+            { owner: ORG_NAME, name: REPO },
+            (result) => result.data.repository.pullRequests.edges,
+            GithubGraphqlIssueOrPr
+          )
         );
       })
     );
-    const prObs = this.toFetchIssues(issuesFilter).pipe(
-      filter((toFetch) => toFetch),
-      flatMap(() => {
-        return this.fetchGraphqlList<FetchPullRequestsQuery, GithubGraphqlIssueOrPr>(
-          FetchPullRequests,
-          { owner: ORG_NAME, name: REPO },
-          (result) => result.data.repository.pullRequests.edges,
-          GithubGraphqlIssueOrPr
-        );
-      })
-    );
-
-    // Concatenate both streams together.
-    return merge(issueObs, prObs);
   }
 
   /**

src/app/core/services/grouping/grouping-context.service.ts

@@ -58,8 +58,10 @@ export class GroupingContextService {
    * @param groupBy The grouping type to set.
    */
   setCurrentGroupingType(groupBy: GroupBy): void {
-    this.currGroupBy = groupBy;
-    this.currGroupBySubject.next(this.currGroupBy);
+    if (groupBy !== this.currGroupBy) {
+      this.currGroupBy = groupBy;
+      this.currGroupBySubject.next(this.currGroupBy);
+    }
 
     this.router.navigate([], {
       relativeTo: this.route,

src/app/core/services/issue.service.ts

@@ -18,7 +18,7 @@ import { ViewService } from './view.service';
  * using GitHub.
  */
 export class IssueService {
-  static readonly POLL_INTERVAL = 5000; // 5 seconds
+  static readonly POLL_INTERVAL = 20000; // 20 seconds
 
   issues: Issues;
   issues$: BehaviorSubject<Issue[]>;

src/app/core/services/label.service.ts

@@ -22,7 +22,7 @@ const COLOR_WHITE = 'ffffff'; // Light color for text with dark background
  * from the GitHub repository for the WATcher application.
  */
 export class LabelService {
-  static readonly POLL_INTERVAL = 5000; // 5 seconds
+  static readonly POLL_INTERVAL = 20000; // 20 seconds
 
   labels: Label[];
   simpleLabels: SimpleLabel[];

src/app/core/services/milestone.service.ts

@@ -47,22 +47,37 @@ export class MilestoneService {
   }
 
   /**
-   * Gets the open milestone with the earliest deadline.
-   * Returns null if there is no open milestone with deadline.
+   * Returns the open milestone with earliest deadline.
+   * If no deadline exists, returns milestone with alphabetically smallest title.
+   * Returns null if there are no open milestones.
    */
   getEarliestOpenMilestone(): Milestone {
-    let earliestOpenMilestone: Milestone = null;
-    for (const milestone of this.milestones) {
-      if (!milestone.deadline || milestone.state !== 'open') {
-        continue;
+    const openMilestones: Milestone[] = this.milestones.filter((milestone: Milestone) => milestone.state === 'open');
+
+    if (openMilestones.length === 0) {
+      return null;
+    }
+
+    const target = openMilestones.reduce((prev, curr) => {
+      if (prev === null) {
+        return curr;
       }
-      if (earliestOpenMilestone === null) {
-        earliestOpenMilestone = milestone;
-      } else if (milestone.deadline < earliestOpenMilestone.deadline) {
-        earliestOpenMilestone = milestone;
+
+      if (prev.deadline !== curr.deadline) {
+        if (!prev.deadline) {
+          return curr;
+        }
+        if (!curr.deadline) {
+          return prev;
+        }
+        return prev.deadline < curr.deadline ? prev : curr;
       }
-    }
-    return earliestOpenMilestone;
+
+      // Both without due date or with the same due date
+      return prev.title.localeCompare(curr.title) < 0 ? prev : curr;
+    }, null);
+
+    return target;
   }
 
   /**

src/app/core/services/view.service.ts

@@ -105,11 +105,12 @@ export class ViewService {
       /** Adds past repositories to view */
       (this.otherRepos || []).push(this.currentRepo);
     }
-    this.setRepository(repo, this.otherRepos);
+    if (!repo.equals(this.currentRepo)) {
+      this.setRepository(repo, this.otherRepos);
+      this.repoChanged$.next(repo);
+    }
 
     this.repoUrlCacheService.cache(repo.toString());
-
-    this.repoChanged$.next(repo);
   }
 
   /**

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

@@ -52,7 +52,26 @@ div.column-header .mat-card-header {
   position: relative;
 }
 
-/* Ref: https://css-scroll-shadows.vercel.app */
+/* Ref: https://lea.verou.me/blog/2012/04/background-attachment-local/ */
+.scroll-shadow {
+  background:
+    /* Shadow covers */ linear-gradient(white 30%, rgba(255, 255, 255, 0)),
+    linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%,
+    /* Shadows */ radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)),
+    radial-gradient(50% 100%, farthest-side, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;
+  background:
+    /* Shadow covers */ linear-gradient(white 30%, rgba(255, 255, 255, 0)),
+    linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%,
+    /* Shadows */ radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)),
+    radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)) 0 100%;
+  background-repeat: no-repeat;
+  background-color: white;
+  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
+
+  /* Opera doesn't support this in the shorthand */
+  background-attachment: local, local, scroll, scroll;
+}
+
 .scrollable-container::before {
   pointer-events: none;
   content: '';
@@ -87,30 +106,6 @@ div.column-header .mat-card-header {
   display: none;
 }
 
-.scrollable-container-wrapper::before {
-  pointer-events: none;
-  content: '';
-  position: absolute;
-  z-index: 1;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 5px;
-  background-image: radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.5), transparent);
-}
-
-.scrollable-container-wrapper::after {
-  pointer-events: none;
-  content: '';
-  position: absolute;
-  z-index: 1;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 5px;
-  background-image: radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.5), transparent);
-}
-
 .loading-spinner {
   display: flex;
   justify-content: center;

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

@@ -3,7 +3,7 @@
     [ngTemplateOutlet]="getHeaderTemplate() || defaultHeader"
     [ngTemplateOutletContext]="{ $implicit: this.group }"
   ></ng-container>
-  <div class="scrollable-container-wrapper">
+  <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>
@@ -15,9 +15,9 @@
   </div>
   <mat-paginator
     [pageSize]="pageSize"
+    [hidePageSize]="true"
     [pageSizeOptions]="[10, 20, 50]"
     [class]="pageSize >= issueLength ? 'pagination-hide-arrow' : ''"
-    (page)="updatePageSize($event.pageSize)"
   ></mat-paginator>
 </div>
 

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

@@ -46,6 +46,7 @@ export class CardViewComponent implements OnInit, AfterViewInit, OnDestroy, Filt
   private timeoutId: NodeJS.Timeout | null = null;
   private issuesLengthSubscription: Subscription;
   private issuesLoadingStateSubscription: Subscription;
+  private filterSubscription: Subscription;
 
   isLoading = true;
   issueLength = 0;
@@ -73,6 +74,10 @@ export class CardViewComponent implements OnInit, AfterViewInit, OnDestroy, Filt
       this.group,
       this.filters
     );
+
+    this.filterSubscription = this.filtersService.filter$.subscribe((filter: any) => {
+      this.pageSize = filter.itemsPerPage;
+    });
   }
 
   ngAfterViewInit(): void {
@@ -125,8 +130,4 @@ export class CardViewComponent implements OnInit, AfterViewInit, OnDestroy, Filt
   retrieveFilterable(): FilterableSource {
     return this.issues;
   }
-
-  updatePageSize(newPageSize: number) {
-    this.pageSize = newPageSize;
-  }
 }

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

@@ -106,20 +106,11 @@ export class IssuesViewerComponent implements OnInit, AfterViewInit, OnDestroy {
       this.availableGroupsSubscription.unsubscribe();
     }
 
-    this.checkIfValidRepository().subscribe((isValidRepository) => {
-      if (!isValidRepository) {
-        throw new Error(ErrorMessageService.repositoryNotPresentMessage());
-      }
-    });
-
     // Fetch assignees
     this.groups = [];
     this.hiddenGroups = [];
 
     this.availableGroupsSubscription = this.groupingContextService.getGroups().subscribe((x) => (this.groups = x));
-
-    // Fetch issues
-    this.issueService.reloadAllIssues();
   }
 
   /**

src/app/shared/filter-bar/filter-bar.component.css

@@ -2,11 +2,11 @@
   margin: 8px;
   font-size: 14px;
   max-width: 20%;
-  width: 17%; /* depends on number of filters*/
+  width: 14%; /* depends on number of filters*/
 }
 
 .search-bar {
-  width: 90%;
+  width: 80%;
 }
 
 .dropdown-filters {

src/app/shared/filter-bar/filter-bar.component.html

@@ -1,5 +1,5 @@
 <mat-grid-list cols="7" rowHeight="80px">
-  <mat-grid-tile colspan="3">
+  <mat-grid-tile colspan="2">
     <mat-form-field class="search-bar">
       <input
         matInput
@@ -10,7 +10,7 @@
     </mat-form-field>
   </mat-grid-tile>
 
-  <mat-grid-tile colspan="3">
+  <mat-grid-tile colspan="4">
     <div class="dropdown-filters">
       <mat-form-field appearance="standard">
         <mat-label>Group by</mat-label>
@@ -80,6 +80,17 @@
           <mat-option *ngIf="isFilterPullRequest()" [value]="'PR without a milestone'">PRs without a milestone</mat-option>
         </mat-select>
       </mat-form-field>
+      <mat-form-field appearance="standard">
+        <mat-label>Items per page</mat-label>
+        <mat-select
+          [value]="this.filter.itemsPerPage"
+          (selectionChange)="this.filtersService.updateFilters({ itemsPerPage: $event.value })"
+        >
+          <mat-option [value]="10">10</mat-option>
+          <mat-option [value]="20">20</mat-option>
+          <mat-option [value]="50">50</mat-option>
+        </mat-select>
+      </mat-form-field>
     </div>
   </mat-grid-tile>