Refactored codes of project component.

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);

harbor-app/src/app/project/filter-project/filter-project.component.html

@@ -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>

harbor-app/src/app/project/filter-project/filter-project.component.ts

@@ -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);
-  }
-}

harbor-app/src/app/project/list-project/list-project.component.html

@@ -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>

harbor-app/src/app/project/list-project/list-project.component.ts

@@ -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) {
-
-   }
-}

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>
+    <clr-dropdown [clrMenuPosition]="'bottom-left'">
-    <search-project (search)="searchProjects($event)"></search-project>
+      <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>
+   <clr-datagrid [(clrDgSelected)]="selected">
-  </div>
+     <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>

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)
+  selected = [];
-    listProjects: ListProjectComponent;
+  projects: Project[];
+  projectTypes = types;
+  
+  @ViewChild(CreateProjectComponent)
+  creationProject: CreateProjectComponent;
 
-    @ViewChild(CreateProjectComponent)
+  currentFilteredType: number = 0;
-    creationProject: CreateProjectComponent;
+  lastFilteredType: number = 0;
 
-    lastFilteredType: number = 0;
+  constructor(private projectService: ProjectService, private messageService: MessageService){}
 
-    openModal(): void {
+  ngOnInit(): void {
-      this.creationProject.newProject();
+    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 {
+  doSearchProjects(projectName: string): void {
-      this.listProjects.deleteSelectedProjects();
+    console.log('Search for project name:' + projectName);
-    }
+    this.retrieve(projectName, this.lastFilteredType);
+  }
 
-    createProject(created: boolean): void {
+  doFilterProjects(filteredType: number): void {
-      console.log('Project has been created:' + created);
+    console.log('Filter projects with type:' + types[filteredType]);
-      this.listProjects.retrieve('', 0);
+    this.lastFilteredType = filteredType;
-    }
+    this.currentFilteredType = filteredType;
+    this.retrieve('', this.lastFilteredType);
+  }
 
-    filterProjects(type: number): void {
+  toggleProject(p: Project) {
-      this.lastFilteredType = type;
+    this.projectService
-      this.listProjects.retrieve('', type);
+        .toggleProjectPublic(p.project_id, p.public)
-      console.log('Projects were filtered by:' + type);
+        .subscribe(
-      
+          response=>console.log('Successful toggled project_id:' + p.project_id),
-    }
+          error=>this.messageService.announceMessage(error)
+        );
+  }
 
-    searchProjects(projectName: string): void {
+  deleteProject(p: Project) {
-      console.log('Search for project name:' + projectName);
+    this.projectService
-      this.listProjects.retrieve(projectName, this.lastFilteredType);
+        .deleteProject(p.project_id)
-    }
+        .subscribe(
-
+          response=>{
-    actionPerform(performed: boolean): void {
+            console.log('Successful delete project_id:' + p.project_id);
-      this.listProjects.retrieve('', 0);
+            this.retrieve('', this.lastFilteredType);
-    }
+          },
-
+          error=>console.log(error)
-    ngOnInit(): void {
+        );
-      this.listProjects.retrieve('', 0); 
+  }
-    }
 
+  deleteSelectedProjects() {
+    this.selected.forEach(p=>this.deleteProject(p));
+  }
 }

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 {

harbor-app/src/app/project/search-project/search-project.component.html

@@ -1 +0,0 @@
-<input type="text" placeholder="Search for projects" #searchProject (keyup.enter)="doSearch(searchProject.value)" >

harbor-app/src/app/project/search-project/search-project.component.ts

@@ -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);
-  }
-}