From b26ffdb8f7e0a5cccefd02308063cedb6a65f834 Mon Sep 17 00:00:00 2001
From: kunw <kunw@vmware.com>
Date: Wed, 22 Feb 2017 13:12:59 +0800
Subject: [PATCH 1/2] Refactored codes of project component.

---
 .../create-project.component.ts               |   6 +-
 .../filter-project.component.html             |   9 --
 .../filter-project.component.ts               |  23 ----
 .../list-project/list-project.component.html  |  27 -----
 .../list-project/list-project.component.ts    |  61 -----------
 .../src/app/project/project.component.html    |  40 ++++++-
 .../src/app/project/project.component.ts      | 101 ++++++++++++------
 harbor-app/src/app/project/project.module.ts  |  10 +-
 .../search-project.component.html             |   1 -
 .../search-project.component.ts               |  13 ---
 10 files changed, 111 insertions(+), 180 deletions(-)
 delete mode 100644 harbor-app/src/app/project/filter-project/filter-project.component.html
 delete mode 100644 harbor-app/src/app/project/filter-project/filter-project.component.ts
 delete mode 100644 harbor-app/src/app/project/list-project/list-project.component.html
 delete mode 100644 harbor-app/src/app/project/list-project/list-project.component.ts
 delete mode 100644 harbor-app/src/app/project/search-project/search-project.component.html
 delete mode 100644 harbor-app/src/app/project/search-project/search-project.component.ts

diff --git a/harbor-app/src/app/project/create-project/create-project.component.ts b/harbor-app/src/app/project/create-project/create-project.component.ts
index 3f66ca179..a72c2e178 100644
--- a/harbor-app/src/app/project/create-project/create-project.component.ts
+++ b/harbor-app/src/app/project/create-project/create-project.component.ts
@@ -37,9 +37,11 @@ export class CreateProjectComponent {
             if (error instanceof Response) { 
               switch(error.status) {
               case 409:
-                this.errorMessage = 'Project name already exists.'; break;
+                this.errorMessage = 'Project name already exists.'; 
+                break;
               case 400:
-                this.errorMessage = 'Project name is illegal.'; break;
+                this.errorMessage = 'Project name is illegal.'; 
+                break;
               default:
                 this.errorMessage = 'Unknown error for project name.';
                 this.messageService.announceMessage(this.errorMessage);
diff --git a/harbor-app/src/app/project/filter-project/filter-project.component.html b/harbor-app/src/app/project/filter-project/filter-project.component.html
deleted file mode 100644
index 44d600707..000000000
--- a/harbor-app/src/app/project/filter-project/filter-project.component.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<clr-dropdown [clrMenuPosition]="'bottom-left'">
-  <button class="btn btn-sm btn-link" clrDropdownToggle>
-    {{currentType.value}}
-    <clr-icon shape="caret down"></clr-icon>
-  </button>
-  <div class="dropdown-menu">
-    <a href="javascript:void(0)" clrDropdownItem *ngFor="let p of types" (click)="doFilter(p.key)">{{p.value}}</a>
-  </div>
-</clr-dropdown>
\ No newline at end of file
diff --git a/harbor-app/src/app/project/filter-project/filter-project.component.ts b/harbor-app/src/app/project/filter-project/filter-project.component.ts
deleted file mode 100644
index 3db3fa14a..000000000
--- a/harbor-app/src/app/project/filter-project/filter-project.component.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Component, Output, EventEmitter } from '@angular/core';
-
-export const projectTypes = [
-  { 'key' : 0, 'value': 'My Projects' },
-  { 'key' : 1, 'value': 'Public Projects'}
-];
-
-@Component({
-  selector: 'filter-project',
-  templateUrl: 'filter-project.component.html'
-})
-export class FilterProjectComponent {
-
-  @Output() filter = new EventEmitter<number>();
-  types = projectTypes;
-  currentType = projectTypes[0];
-
-  doFilter(type: number) {
-    console.log('Filtered projects by:' + type);
-    this.currentType = projectTypes.find(item=>item.key === type);
-    this.filter.emit(type);
-  }
-}
\ No newline at end of file
diff --git a/harbor-app/src/app/project/list-project/list-project.component.html b/harbor-app/src/app/project/list-project/list-project.component.html
deleted file mode 100644
index 6ecd22a43..000000000
--- a/harbor-app/src/app/project/list-project/list-project.component.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<clr-datagrid [(clrDgSelected)]="selected">
-  <clr-dg-column>Name</clr-dg-column>
-  <clr-dg-column>Public/Private</clr-dg-column>
-  <clr-dg-column>Repositories</clr-dg-column>
-  <clr-dg-column>Creation time</clr-dg-column>
-  <clr-dg-column>Description</clr-dg-column> 
-  <clr-dg-row *clrDgItems="let p of projects" [clrDgItem]="p" [(clrDgSelected)]="p.selected">
-    <!--<clr-dg-action-overflow>
-      <button class="action-item" (click)="onEdit(p)">Edit</button>
-      <button class="action-item" (click)="onDelete(p)">Delete</button>
-    </clr-dg-action-overflow>-->
-    <clr-dg-cell><a [routerLink]="['/harbor', 'projects', p.project_id, 'repository']" >{{p.name}}</a></clr-dg-cell>
-    <clr-dg-cell>{{p.public == 1 ? 'Public': 'Private'}}</clr-dg-cell>
-    <clr-dg-cell>{{p.repo_count}}</clr-dg-cell>
-    <clr-dg-cell>{{p.creation_time}}</clr-dg-cell>
-    <clr-dg-cell>
-      {{p.description}}
-      <span style="float: right;">
-        <action-project (togglePublic)="toggleProject($event)" (deleteProject)="deleteProject($event)" [project]="p"></action-project>
-      </span>
-    </clr-dg-cell>
-  
-    
-  
-  </clr-dg-row>
-  <clr-dg-footer>{{ (projects ? projects.length : 0) }} item(s)</clr-dg-footer>
-</clr-datagrid>
\ No newline at end of file
diff --git a/harbor-app/src/app/project/list-project/list-project.component.ts b/harbor-app/src/app/project/list-project/list-project.component.ts
deleted file mode 100644
index a2ae4147a..000000000
--- a/harbor-app/src/app/project/list-project/list-project.component.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import { Component, EventEmitter, Output } from '@angular/core';
-import { Project } from '../project';
-import { ProjectService } from '../project.service';
-
-
-@Component({
-  selector: 'list-project',
-  templateUrl: 'list-project.component.html'
-})
-export class ListProjectComponent {
-
-   projects: Project[];
-   errorMessage: string;
-
-   selected = [];
-
-   @Output() actionPerform = new EventEmitter<boolean>();
-
-   constructor(private projectService: ProjectService) {}
-
-   retrieve(name: string, isPublic: number): void {
-     this.projectService
-         .listProjects(name, isPublic)
-         .subscribe(
-           response => this.projects = response,
-           error => this.errorMessage = <any>error);
-   }
-
-   toggleProject(p: Project) {
-     this.projectService
-         .toggleProjectPublic(p.project_id, p.public)
-         .subscribe(
-           response=>console.log(response),
-           error=>console.log(error)
-         );
-   }
-
-   deleteProject(p: Project) {
-     this.projectService
-         .deleteProject(p.project_id)
-         .subscribe(
-           response=>{
-             console.log(response);
-             this.actionPerform.emit(true);
-           },
-           error=>console.log(error)
-         );
-   }
-
-   deleteSelectedProjects() {
-     this.selected.forEach(p=>this.deleteProject(p));
-   }
-
-   onEdit(p: Project) {
-
-   }
-
-   onDelete(p: Project) {
-
-   }
-}
\ No newline at end of file
diff --git a/harbor-app/src/app/project/project.component.html b/harbor-app/src/app/project/project.component.html
index e359bf212..b22d0b4ff 100644
--- a/harbor-app/src/app/project/project.component.html
+++ b/harbor-app/src/app/project/project.component.html
@@ -6,10 +6,42 @@
     <create-project (create)="createProject($event)" (openModal)="openModal($event)"></create-project>
   </div>
   <div class="col-xs-4">
-    <filter-project (filter)="filterProjects($event)"></filter-project>
-    <search-project (search)="searchProjects($event)"></search-project>
+    <clr-dropdown [clrMenuPosition]="'bottom-left'">
+      <button class="btn btn-sm btn-link" clrDropdownToggle>
+        {{projectTypes[currentFilteredType]}}
+        <clr-icon shape="caret down"></clr-icon>
+      </button>
+      <div class="dropdown-menu">
+        <a href="javascript:void(0)" clrDropdownItem (click)="doFilterProjects(0)">{{projectTypes[0]}}</a>
+        <a href="javascript:void(0)" clrDropdownItem (click)="doFilterProjects(1)">{{projectTypes[1]}}</a>
+      </div>
+    </clr-dropdown>
+    <input type="text" placeholder="Search for projects" #searchProject (keyup.enter)="doSearchProjects(searchProject.value)" >
   </div>
   <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
-    <list-project (actionPerform)="actionPerform($event)"></list-project>
-  </div>
+   <clr-datagrid [(clrDgSelected)]="selected">
+     <clr-dg-column>Name</clr-dg-column>
+     <clr-dg-column>Public/Private</clr-dg-column>
+     <clr-dg-column>Repositories</clr-dg-column>
+     <clr-dg-column>Creation time</clr-dg-column>
+     <clr-dg-column>Description</clr-dg-column> 
+     <clr-dg-row *clrDgItems="let p of projects" [clrDgItem]="p" [(clrDgSelected)]="p.selected">
+        <!--<clr-dg-action-overflow>
+          <button class="action-item" (click)="onEdit(p)">Edit</button>
+          <button class="action-item" (click)="onDelete(p)">Delete</button>
+        </clr-dg-action-overflow>-->
+       <clr-dg-cell><a [routerLink]="['/harbor', 'projects', p.project_id, 'repository']" >{{p.name}}</a></clr-dg-cell>
+       <clr-dg-cell>{{p.public == 1 ? 'Public': 'Private'}}</clr-dg-cell>
+       <clr-dg-cell>{{p.repo_count}}</clr-dg-cell>
+       <clr-dg-cell>{{p.creation_time}}</clr-dg-cell>
+       <clr-dg-cell>
+         {{p.description}}
+         <span style="float: right;">
+           <action-project (togglePublic)="toggleProject($event)" (deleteProject)="deleteProject($event)" [project]="p"></action-project>
+         </span>
+       </clr-dg-cell>
+     </clr-dg-row>
+     <clr-dg-footer>{{ (projects ? projects.length : 0) }} item(s)</clr-dg-footer>
+   </clr-datagrid>
+</div>
 </div>
\ No newline at end of file
diff --git a/harbor-app/src/app/project/project.component.ts b/harbor-app/src/app/project/project.component.ts
index bca32cf33..8b87e6cf3 100644
--- a/harbor-app/src/app/project/project.component.ts
+++ b/harbor-app/src/app/project/project.component.ts
@@ -2,9 +2,15 @@ import { Component, OnInit, ViewChild } from '@angular/core';
 
 import { Router }  from '@angular/router';
 
-import { ListProjectComponent } from './list-project/list-project.component';
+import { Project } from './project';
+import { ProjectService } from './project.service';
+
 import { CreateProjectComponent } from './create-project/create-project.component';
 
+import { MessageService } from '../global-message/message.service';
+
+export const types: {} = { 0: 'My Projects', 1: 'Public Projects'};
+
 @Component({
     selector: 'project',
     templateUrl: 'project.component.html',
@@ -12,45 +18,74 @@ import { CreateProjectComponent } from './create-project/create-project.componen
 })
 export class ProjectComponent implements OnInit {
     
-    @ViewChild(ListProjectComponent)
-    listProjects: ListProjectComponent;
+  selected = [];
+  projects: Project[];
+  projectTypes = types;
+  
+  @ViewChild(CreateProjectComponent)
+  creationProject: CreateProjectComponent;
 
-    @ViewChild(CreateProjectComponent)
-    creationProject: CreateProjectComponent;
+  currentFilteredType: number = 0;
+  lastFilteredType: number = 0;
 
-    lastFilteredType: number = 0;
+  constructor(private projectService: ProjectService, private messageService: MessageService){}
 
-    openModal(): void {
-      this.creationProject.newProject();
+  ngOnInit(): void {
+    this.retrieve('', this.lastFilteredType);
+  }
+
+  retrieve(name: string, isPublic: number): void {
+    this.projectService
+        .listProjects(name, isPublic)
+        .subscribe(
+          response => this.projects = response,
+          error => this.messageService.announceMessage(error));
+  }
+
+  openModal(): void {
+    this.creationProject.newProject();
+  }
+  
+  createProject(created: boolean) {
+    if(created) {
+      this.retrieve('', this.lastFilteredType);
     }
+  }
 
-    deleteSelectedProjects(): void {
-      this.listProjects.deleteSelectedProjects();
-    }
+  doSearchProjects(projectName: string): void {
+    console.log('Search for project name:' + projectName);
+    this.retrieve(projectName, this.lastFilteredType);
+  }
 
-    createProject(created: boolean): void {
-      console.log('Project has been created:' + created);
-      this.listProjects.retrieve('', 0);
-    }
+  doFilterProjects(filteredType: number): void {
+    console.log('Filter projects with type:' + types[filteredType]);
+    this.lastFilteredType = filteredType;
+    this.currentFilteredType = filteredType;
+    this.retrieve('', this.lastFilteredType);
+  }
 
-    filterProjects(type: number): void {
-      this.lastFilteredType = type;
-      this.listProjects.retrieve('', type);
-      console.log('Projects were filtered by:' + type);
-      
-    }
+  toggleProject(p: Project) {
+    this.projectService
+        .toggleProjectPublic(p.project_id, p.public)
+        .subscribe(
+          response=>console.log('Successful toggled project_id:' + p.project_id),
+          error=>this.messageService.announceMessage(error)
+        );
+  }
 
-    searchProjects(projectName: string): void {
-      console.log('Search for project name:' + projectName);
-      this.listProjects.retrieve(projectName, this.lastFilteredType);
-    }
-
-    actionPerform(performed: boolean): void {
-      this.listProjects.retrieve('', 0);
-    }
-
-    ngOnInit(): void {
-      this.listProjects.retrieve('', 0); 
-    }
+  deleteProject(p: Project) {
+    this.projectService
+        .deleteProject(p.project_id)
+        .subscribe(
+          response=>{
+            console.log('Successful delete project_id:' + p.project_id);
+            this.retrieve('', this.lastFilteredType);
+          },
+          error=>console.log(error)
+        );
+  }
 
+  deleteSelectedProjects() {
+    this.selected.forEach(p=>this.deleteProject(p));
+  }
 }
\ No newline at end of file
diff --git a/harbor-app/src/app/project/project.module.ts b/harbor-app/src/app/project/project.module.ts
index 909e5f43b..0de95f7ee 100644
--- a/harbor-app/src/app/project/project.module.ts
+++ b/harbor-app/src/app/project/project.module.ts
@@ -7,14 +7,13 @@ import { LogModule } from '../log/log.module';
 
 import { ProjectComponent } from './project.component';
 import { CreateProjectComponent } from './create-project/create-project.component';
-import { SearchProjectComponent } from './search-project/search-project.component';
-import { FilterProjectComponent } from './filter-project/filter-project.component';
 import { ActionProjectComponent } from './action-project/action-project.component';
-import { ListProjectComponent } from './list-project/list-project.component';
+
 import { ProjectDetailComponent } from './project-detail/project-detail.component';
 
 import { MemberComponent } from './member/member.component';
 import { AddMemberComponent } from './member/add-member/add-member.component';
+
 import { ProjectRoutingModule } from './project-routing.module';
 
 import { ProjectService } from './project.service';
@@ -31,15 +30,12 @@ import { MemberService } from './member/member.service';
   declarations: [ 
     ProjectComponent,
     CreateProjectComponent,
-    SearchProjectComponent,
-    FilterProjectComponent,
     ActionProjectComponent,
-    ListProjectComponent,
     ProjectDetailComponent,
     MemberComponent,
     AddMemberComponent
   ],
-  exports: [ ListProjectComponent ],
+  exports: [ ProjectComponent ],
   providers: [ ProjectService, MemberService ]
 })
 export class ProjectModule {
diff --git a/harbor-app/src/app/project/search-project/search-project.component.html b/harbor-app/src/app/project/search-project/search-project.component.html
deleted file mode 100644
index db9d6a293..000000000
--- a/harbor-app/src/app/project/search-project/search-project.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<input type="text" placeholder="Search for projects" #searchProject (keyup.enter)="doSearch(searchProject.value)" >
\ No newline at end of file
diff --git a/harbor-app/src/app/project/search-project/search-project.component.ts b/harbor-app/src/app/project/search-project/search-project.component.ts
deleted file mode 100644
index 737aebc56..000000000
--- a/harbor-app/src/app/project/search-project/search-project.component.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Component, EventEmitter, Output } from '@angular/core';
-
-@Component({
-  selector: 'search-project',
-  templateUrl: 'search-project.component.html'
-})
-export class SearchProjectComponent {
-  @Output() search = new EventEmitter<string>();
-
-  doSearch(projectName) {
-    this.search.emit(projectName);
-  }
-}
\ No newline at end of file

From dbda40791695039ee31537725391a8cd2d011d74 Mon Sep 17 00:00:00 2001
From: kunw <kunw@vmware.com>
Date: Thu, 23 Feb 2017 14:43:51 +0800
Subject: [PATCH 2/2] Updates for abstracting list project component.

---
 .../list-project/list-project.component.html  | 24 +++++++++++++
 .../list-project/list-project.component.ts    | 25 ++++++++++++++
 .../src/app/project/project.component.html    | 34 +++----------------
 .../src/app/project/project.component.ts      | 12 ++++---
 harbor-app/src/app/project/project.ts         |  1 -
 5 files changed, 61 insertions(+), 35 deletions(-)
 create mode 100644 harbor-app/src/app/project/list-project/list-project.component.html
 create mode 100644 harbor-app/src/app/project/list-project/list-project.component.ts

diff --git a/harbor-app/src/app/project/list-project/list-project.component.html b/harbor-app/src/app/project/list-project/list-project.component.html
new file mode 100644
index 000000000..004b96696
--- /dev/null
+++ b/harbor-app/src/app/project/list-project/list-project.component.html
@@ -0,0 +1,24 @@
+<clr-datagrid>
+  <clr-dg-column>Name</clr-dg-column>
+  <clr-dg-column>Public/Private</clr-dg-column>
+  <clr-dg-column>Repositories</clr-dg-column>
+  <clr-dg-column>Creation time</clr-dg-column>
+  <clr-dg-column>Description</clr-dg-column> 
+  <clr-dg-row *clrDgItems="let p of projects" [clrDgItem]="p">
+    <!--<clr-dg-action-overflow>
+      <button class="action-item" (click)="onEdit(p)">Edit</button>
+      <button class="action-item" (click)="onDelete(p)">Delete</button>
+    </clr-dg-action-overflow>-->
+    <clr-dg-cell><a [routerLink]="['/harbor', 'projects', p.project_id, 'repository']" >{{p.name}}</a></clr-dg-cell>
+    <clr-dg-cell>{{p.public == 1 ? 'Public': 'Private'}}</clr-dg-cell>
+    <clr-dg-cell>{{p.repo_count}}</clr-dg-cell>
+    <clr-dg-cell>{{p.creation_time}}</clr-dg-cell>
+    <clr-dg-cell>
+      {{p.description}}
+      <span style="float: right;">
+        <action-project (togglePublic)="toggleProject($event)" (deleteProject)="deleteProject($event)" [project]="p"></action-project>
+      </span>
+    </clr-dg-cell>
+  </clr-dg-row>
+  <clr-dg-footer>{{ (projects ? projects.length : 0) }} item(s)</clr-dg-footer>
+</clr-datagrid>
\ No newline at end of file
diff --git a/harbor-app/src/app/project/list-project/list-project.component.ts b/harbor-app/src/app/project/list-project/list-project.component.ts
new file mode 100644
index 000000000..104371bcf
--- /dev/null
+++ b/harbor-app/src/app/project/list-project/list-project.component.ts
@@ -0,0 +1,25 @@
+import { Component, EventEmitter, Output, Input } from '@angular/core';
+import { Project } from '../project';
+import { ProjectService } from '../project.service';
+
+
+@Component({
+  selector: 'list-project',
+  templateUrl: 'list-project.component.html'
+})
+export class ListProjectComponent {
+
+   @Input() projects: Project[];
+
+   @Output() toggle = new EventEmitter<Project>();
+   @Output() delete = new EventEmitter<Project>();
+
+   toggleProject(p: Project) {
+     this.toggle.emit(p);
+   }
+
+   deleteProject(p: Project) {
+     this.delete.emit(p);
+   }
+
+}
\ No newline at end of file
diff --git a/harbor-app/src/app/project/project.component.html b/harbor-app/src/app/project/project.component.html
index b22d0b4ff..25583d575 100644
--- a/harbor-app/src/app/project/project.component.html
+++ b/harbor-app/src/app/project/project.component.html
@@ -1,11 +1,10 @@
 <h3>Projects</h3>
 <div class="row flex-items-xs-between">
   <div class="col-xs-4">
-    <button class="btn btn-link" (click)="openModal()"><clr-icon shape="add"></clr-icon>New Project</button>
-    <button class="btn btn-link" (click)="deleteSelectedProjects()"><clr-icon shape="close"></clr-icon>Delete</button>
+    <button class="btn btn-link" (click)="openModal()"><clr-icon shape="add"></clr-icon> New Project</button>
     <create-project (create)="createProject($event)" (openModal)="openModal($event)"></create-project>
   </div>
-  <div class="col-xs-4">
+  <div class="col-xs-5">
     <clr-dropdown [clrMenuPosition]="'bottom-left'">
       <button class="btn btn-sm btn-link" clrDropdownToggle>
         {{projectTypes[currentFilteredType]}}
@@ -16,32 +15,9 @@
         <a href="javascript:void(0)" clrDropdownItem (click)="doFilterProjects(1)">{{projectTypes[1]}}</a>
       </div>
     </clr-dropdown>
-    <input type="text" placeholder="Search for projects" #searchProject (keyup.enter)="doSearchProjects(searchProject.value)" >
+    <clr-icon shape="filter" style="position: relative; left: 15px;"></clr-icon><input style="padding-left: 20px;" type="text" placeholder="Search for projects" #searchProject (keyup.enter)="doSearchProjects(searchProject.value)" >
   </div>
   <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
-   <clr-datagrid [(clrDgSelected)]="selected">
-     <clr-dg-column>Name</clr-dg-column>
-     <clr-dg-column>Public/Private</clr-dg-column>
-     <clr-dg-column>Repositories</clr-dg-column>
-     <clr-dg-column>Creation time</clr-dg-column>
-     <clr-dg-column>Description</clr-dg-column> 
-     <clr-dg-row *clrDgItems="let p of projects" [clrDgItem]="p" [(clrDgSelected)]="p.selected">
-        <!--<clr-dg-action-overflow>
-          <button class="action-item" (click)="onEdit(p)">Edit</button>
-          <button class="action-item" (click)="onDelete(p)">Delete</button>
-        </clr-dg-action-overflow>-->
-       <clr-dg-cell><a [routerLink]="['/harbor', 'projects', p.project_id, 'repository']" >{{p.name}}</a></clr-dg-cell>
-       <clr-dg-cell>{{p.public == 1 ? 'Public': 'Private'}}</clr-dg-cell>
-       <clr-dg-cell>{{p.repo_count}}</clr-dg-cell>
-       <clr-dg-cell>{{p.creation_time}}</clr-dg-cell>
-       <clr-dg-cell>
-         {{p.description}}
-         <span style="float: right;">
-           <action-project (togglePublic)="toggleProject($event)" (deleteProject)="deleteProject($event)" [project]="p"></action-project>
-         </span>
-       </clr-dg-cell>
-     </clr-dg-row>
-     <clr-dg-footer>{{ (projects ? projects.length : 0) }} item(s)</clr-dg-footer>
-   </clr-datagrid>
-</div>
+    <list-project [projects]="changedProjects" (toggle)="toggleProject($event)" (delete)="deleteProject($event)"></list-project>
+  </div>
 </div>
\ No newline at end of file
diff --git a/harbor-app/src/app/project/project.component.ts b/harbor-app/src/app/project/project.component.ts
index 8b87e6cf3..98d28a026 100644
--- a/harbor-app/src/app/project/project.component.ts
+++ b/harbor-app/src/app/project/project.component.ts
@@ -7,6 +7,8 @@ import { ProjectService } from './project.service';
 
 import { CreateProjectComponent } from './create-project/create-project.component';
 
+import { ListProjectComponent } from './list-project/list-project.component';
+
 import { MessageService } from '../global-message/message.service';
 
 export const types: {} = { 0: 'My Projects', 1: 'Public Projects'};
@@ -19,12 +21,15 @@ export const types: {} = { 0: 'My Projects', 1: 'Public Projects'};
 export class ProjectComponent implements OnInit {
     
   selected = [];
-  projects: Project[];
+  changedProjects: Project[];
   projectTypes = types;
   
   @ViewChild(CreateProjectComponent)
   creationProject: CreateProjectComponent;
 
+  @ViewChild(ListProjectComponent)
+  listProject: ListProjectComponent;
+
   currentFilteredType: number = 0;
   lastFilteredType: number = 0;
 
@@ -38,7 +43,7 @@ export class ProjectComponent implements OnInit {
     this.projectService
         .listProjects(name, isPublic)
         .subscribe(
-          response => this.projects = response,
+          response => this.changedProjects = response,
           error => this.messageService.announceMessage(error));
   }
 
@@ -85,7 +90,4 @@ export class ProjectComponent implements OnInit {
         );
   }
 
-  deleteSelectedProjects() {
-    this.selected.forEach(p=>this.deleteProject(p));
-  }
 }
\ No newline at end of file
diff --git a/harbor-app/src/app/project/project.ts b/harbor-app/src/app/project/project.ts
index 2d2c10aed..1c6d73014 100644
--- a/harbor-app/src/app/project/project.ts
+++ b/harbor-app/src/app/project/project.ts
@@ -29,5 +29,4 @@ export class Project {
     update_time: Date;
     current_user_role_id: number;
     repo_count: number;
-    selected: boolean;
 }
\ No newline at end of file