Abstract repo click as a output event

src/ui_ng/lib/README.md

@@ -93,6 +93,12 @@ On specific project mode, without need projectId, but also need to provide proje
 
 * **Repository and Tag Management View**
 
+The `hbr-repository-stackview` directive is deprecated. Using `hbr-repository-listview` and `hbr-repository` instead. You should define two routers one for render 
+`hbr-repository-listview` the other is for `hbr-repository`. `hbr-repository-listview` will output an event, you need catch this event and redirect to related
+page contains `hbr-repository`.
+
+**hbr-repository-listview Directive**
+
 **projectId** is used to specify which projects the repositories are from.
 
 **projectName** is used to generate the related commands for pushing images.
@@ -101,18 +107,52 @@ On specific project mode, without need projectId, but also need to provide proje
 
 **hasProjectAdminRole** is a user session related property to determined whether the current user has project administrator role. Some action menus might be disabled based on this property.
 
-**tagClickEvent** is an @output event emitter for you to catch the tag click events.
+**repoClickEvent** is an @output event emitter for you to catch the repository click events.
+
 
 ```
-<hbr-repository-stackview [projectId]="..." [projectName]="" [hasSignedIn]="..." [hasProjectAdminRole]="..." (tagClickEvent)="watchTagClickEvent($event)"></hbr-repository-stackview>
+<hbr-repository-listview [projectId]="" [projectName]="" [hasSignedIn]="" [hasProjectAdminRole]="" 
+(repoClickEvent)="watchRepoClickEvent($event)"></hbr-repository-listview>
 
 ...
 
-watchTagClickEvent(tag: Tag): void {
+
-    //Process tag
+watchRepoClickEvent(repo: RepositoryItem): void {
+    //Process repo
+    ...
+}
+```
+
+
+**hbr-repository Directive**
+
+**projectId** is used to specify which projects the repositories are from.
+
+**repoName** is used to generate the related commands for pushing images.
+
+**hasSignedIn** is a user session related property to determined whether a valid user signed in session existing. This component supports anonymous user.
+
+**hasProjectAdminRole** is a user session related property to determined whether the current user has project administrator role. Some action menus might be disabled based on this property.
+
+**withClair** is Clair installed
+
+**withNotary** is Notary installed
+
+**tagClickEvent** is an @output event emitter for you to catch the tag click events.
+
+**goBackClickEvent** is an @output event emitter for you to catch the go back events.
+
+```
+<hbr-repository [projectId]="" [repoName]="" [hasSignedIn]="" [hasProjectAdminRole]=""  [withClair]="" [withNotary]=""
+(tagClickEvent)="watchTagClickEvt($event)" (backEvt)="watchGoBackEvt($event)" ></hbr-repository>
+
+watchTagClickEvt(tagEvt: TagClickEvent): void {
     ...
 }
 
+watchGoBackEvt(projectId: string): void {
+    ...
+}
 ```
 
 * **Tag detail view**

src/ui_ng/lib/package.json

@@ -1,6 +1,6 @@
 {
     "name": "harbor-ui",
-    "version": "0.6.45",
+    "version": "0.6.52",
     "description": "Harbor shared UI components based on Clarity and Angular4",
     "scripts": {
         "start": "ng serve --host 0.0.0.0 --port 4500 --proxy-config proxy.config.json",

src/ui_ng/lib/pkg/package.json

@@ -1,6 +1,6 @@
 {
     "name": "harbor-ui",
-    "version": "0.6.45",
+    "version": "0.6.52",
     "description": "Harbor shared UI components based on Clarity and Angular4",
     "author": "VMware",
     "module": "index.js",

src/ui_ng/lib/src/repository-listview/repository-listview.component.html.ts

@@ -20,7 +20,7 @@ export const REPOSITORY_LISTVIEW_TEMPLATE = `
         <clr-dg-column [clrDgSortBy]="pullCountComparator">{{'REPOSITORY.PULL_COUNT' | translate}}</clr-dg-column>
         <clr-dg-placeholder>{{'REPOSITORY.PLACEHOLDER' | translate }}</clr-dg-placeholder>
         <clr-dg-row *ngFor="let r of repositories"  [clrDgItem]="r">
-          <clr-dg-cell><a href="javascript:void(0)" (click)="gotoLink(projectId || r.project_id, r.name || r.repository_name)">{{r.name}}</a></clr-dg-cell>
+          <clr-dg-cell><a href="javascript:void(0)" (click)="watchRepoClickEvt(r)">{{r.name}}</a></clr-dg-cell>
           <clr-dg-cell>{{r.tags_count}}</clr-dg-cell>
           <clr-dg-cell>{{r.pull_count}}</clr-dg-cell>
         </clr-dg-row>

src/ui_ng/lib/src/repository-listview/repository-listview.component.ts

@@ -60,14 +60,14 @@ export class RepositoryListviewComponent implements OnChanges, OnInit {
 
   @Input() hasSignedIn: boolean;
   @Input() hasProjectAdminRole: boolean;
-  @Output() tagClickEvent = new EventEmitter<TagClickEvent>();
+  @Output() repoClickEvent = new EventEmitter<RepositoryItem>();
 
   lastFilteredRepoName: string;
   repositories: RepositoryItem[];
   systemInfo: SystemInfo;
   selectedRow: RepositoryItem[] = [];
 
-  loading: boolean = true;
+  loading = true;
 
   @ViewChild('confirmationDialog')
   confirmationDialog: ConfirmationDialogComponent;
@@ -279,10 +279,6 @@ export class RepositoryListviewComponent implements OnChanges, OnInit {
     this.doSearchRepoNames('');
   }
 
-  watchTagClickEvt(tagClickEvt: TagClickEvent): void {
-    this.tagClickEvent.emit(tagClickEvt);
-  }
-
   clrLoad(state: State): void {
     this.selectedRow = [];
     // Keep it for future filtering and sorting
@@ -344,8 +340,8 @@ export class RepositoryListviewComponent implements OnChanges, OnInit {
 
     return st;
   }
-  public gotoLink(projectId: number, repoName: string): void {
+
-    let linkUrl = [this.router.url, repoName];
+  watchRepoClickEvt(repo: RepositoryItem) {
-    this.router.navigate(linkUrl);
+    this.repoClickEvent.emit(repo);
   }
 }

src/ui_ng/src/app/repository/repository-page.component.html

@@ -1,3 +1,4 @@
 <div style="margin-top: 24px;">
-    <hbr-repository-listview [projectId]="projectId" [projectName]="projectName" [hasSignedIn]="hasSignedIn" [hasProjectAdminRole]="hasProjectAdminRole" (tagClickEvent)="watchTagClickEvent($event)"></hbr-repository-listview>
+    <hbr-repository-listview [projectId]="projectId" [projectName]="projectName" [hasSignedIn]="hasSignedIn" [hasProjectAdminRole]="hasProjectAdminRole" 
+    (repoClickEvent)="watchRepoClickEvent($event)"></hbr-repository-listview>
 </div>

src/ui_ng/src/app/repository/repository-page.component.ts

@@ -17,7 +17,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { Project } from '../project/project';
 import { SessionService } from '../shared/session.service';
 
-import { TagClickEvent } from 'harbor-ui';
+import { TagClickEvent, RepositoryItem } from 'harbor-ui';
 
 @Component({
   selector: 'repository',
@@ -47,8 +47,8 @@ export class RepositoryPageComponent implements OnInit {
     this.hasSignedIn = this.session.getCurrentUser() !== null;
   }
 
-  watchTagClickEvent(tagEvt: TagClickEvent): void {
+  watchRepoClickEvent(repoEvt: RepositoryItem): void {
-    let linkUrl = ['harbor', 'projects', tagEvt.project_id, 'repositories', tagEvt.repository_name];
+    let linkUrl = ['harbor', 'projects', repoEvt.project_id, 'repositories', repoEvt.name];
     this.router.navigate(linkUrl);
   }
 };

src/ui_ng/src/app/repository/tag-repository/tag-repository.component.html

@@ -1,3 +1,6 @@
 <div>
-    <hbr-repository (tagClickEvent)="watchTagClickEvt($event)" (backEvt)="goBack($event)" [repoName]="repoName" [withClair]="withClair" [withNotary]="withNotary" [withAdmiral]="withAdmiral" [hasSignedIn]="hasSignedIn" [hasProjectAdminRole]="hasProjectAdminRole" [isGuest]="isGuest" [projectId]="projectId"></hbr-repository>
+    <hbr-repository [repoName]="repoName"
+    [withClair]="withClair" [withNotary]="withNotary" [withAdmiral]="withAdmiral"
+    [hasSignedIn]="hasSignedIn" [hasProjectAdminRole]="hasProjectAdminRole" [projectId]="projectId" [isGuest]="isGuest"
+    (tagClickEvent)="watchTagClickEvt($event)" (backEvt)="watchGoBackEvt($event)" ></hbr-repository>
 </div>

src/ui_ng/src/app/repository/tag-repository/tag-repository.component.ts

@@ -84,7 +84,7 @@ export class TagRepositoryComponent implements OnInit {
     this.router.navigate(linkUrl);
   }
 
-  goBack(tag: string): void {
+  watchGoBackEvt(projectId: string): void {
-    this.router.navigate(["harbor", "projects", this.projectId, "repositories"]);
+    this.router.navigate(["harbor", "projects", projectId, "repositories"]);
   }
 }