Merge pull request #1420 from wknet123/harbor-clarity

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,10 +1,10 @@
-<clr-datagrid [(clrDgSelected)]="selected">
+<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" [(clrDgSelected)]="p.selected">
+  <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>
@@ -19,9 +19,6 @@
         <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,4 +1,4 @@
-import { Component, EventEmitter, Output } from '@angular/core';
+import { Component, EventEmitter, Output, Input } from '@angular/core';
 import { Project } from '../project';
 import { ProjectService } from '../project.service';
 
@@ -9,53 +9,17 @@ import { ProjectService } from '../project.service';
 })
 export class ListProjectComponent {
 
-   projects: Project[];
-   errorMessage: string;
+   @Input() projects: Project[];
 
-   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);
-   }
+   @Output() toggle = new EventEmitter<Project>();
+   @Output() delete = new EventEmitter<Project>();
 
    toggleProject(p: Project) {
-     this.projectService
-         .toggleProjectPublic(p.project_id, p.public)
-         .subscribe(
-           response=>console.log(response),
-           error=>console.log(error)
-         );
+     this.toggle.emit(p);
    }
 
    deleteProject(p: Project) {
-     this.projectService
-         .deleteProject(p.project_id)
-         .subscribe(
-           response=>{
-             console.log(response);
-             this.actionPerform.emit(true);
-           },
-           error=>console.log(error)
-         );
+     this.delete.emit(p);
    }
 
-   deleteSelectedProjects() {
-     this.selected.forEach(p=>this.deleteProject(p));
-   }
-
-   onEdit(p: Project) {
-
-   }
-
-   onDelete(p: Project) {
-
-   }
 }

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

@@ -1,15 +1,23 @@
 <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">
-    <filter-project (filter)="filterProjects($event)"></filter-project>
-    <search-project (search)="searchProjects($event)"></search-project>
+  <div class="col-xs-5">
+    <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>
+    <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">
-    <list-project (actionPerform)="actionPerform($event)"></list-project>
+    <list-project [projects]="changedProjects" (toggle)="toggleProject($event)" (delete)="deleteProject($event)"></list-project>
   </div>
 </div>

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

@@ -2,9 +2,17 @@ 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 { ListProjectComponent } from './list-project/list-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 +20,74 @@ import { CreateProjectComponent } from './create-project/create-project.componen
 })
 export class ProjectComponent implements OnInit {
     
-    @ViewChild(ListProjectComponent)
-    listProjects: ListProjectComponent;
+  selected = [];
+  changedProjects: Project[];
+  projectTypes = types;
   
   @ViewChild(CreateProjectComponent)
   creationProject: CreateProjectComponent;
 
+  @ViewChild(ListProjectComponent)
+  listProject: ListProjectComponent;
+
+  currentFilteredType: number = 0;
   lastFilteredType: number = 0;
 
+  constructor(private projectService: ProjectService, private messageService: MessageService){}
+
+  ngOnInit(): void {
+    this.retrieve('', this.lastFilteredType);
+  }
+
+  retrieve(name: string, isPublic: number): void {
+    this.projectService
+        .listProjects(name, isPublic)
+        .subscribe(
+          response => this.changedProjects = response,
+          error => this.messageService.announceMessage(error));
+  }
+
   openModal(): void {
     this.creationProject.newProject();
   }
   
-    deleteSelectedProjects(): void {
-      this.listProjects.deleteSelectedProjects();
+  createProject(created: boolean) {
+    if(created) {
+      this.retrieve('', this.lastFilteredType);
+    }
   }
 
-    createProject(created: boolean): void {
-      console.log('Project has been created:' + created);
-      this.listProjects.retrieve('', 0);
-    }
-
-    filterProjects(type: number): void {
-      this.lastFilteredType = type;
-      this.listProjects.retrieve('', type);
-      console.log('Projects were filtered by:' + type);
-      
-    }
-
-    searchProjects(projectName: string): void {
+  doSearchProjects(projectName: string): void {
     console.log('Search for project name:' + projectName);
-      this.listProjects.retrieve(projectName, this.lastFilteredType);
+    this.retrieve(projectName, this.lastFilteredType);
   }
 
-    actionPerform(performed: boolean): void {
-      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);
   }
 
-    ngOnInit(): void {
-      this.listProjects.retrieve('', 0); 
+  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)
+        );
+  }
+
+  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)
+        );
   }
 
 }

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/project.ts

@@ -29,5 +29,4 @@ export class Project {
     update_time: Date;
     current_user_role_id: number;
     repo_count: number;
-    selected: boolean;
 }

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