Commit c64ebc8b authored by kun wang's avatar kun wang Committed by GitHub
Browse files

Merge pull request #1420 from wknet123/harbor-clarity

Refactored codes of project component.
parents 8281194b dbda4079
......@@ -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);
......
<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
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
<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>
\ No newline at end of file
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)
);
}
deleteSelectedProjects() {
this.selected.forEach(p=>this.deleteProject(p));
this.delete.emit(p);
}
onEdit(p: Project) {
}
onDelete(p: Project) {
}
}
\ No newline at end of file
<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>
\ No newline at end of file
......@@ -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(CreateProjectComponent)
creationProject: CreateProjectComponent;
@ViewChild(ListProjectComponent)
listProject: ListProjectComponent;
lastFilteredType: number = 0;
currentFilteredType: number = 0;
lastFilteredType: number = 0;
openModal(): void {
this.creationProject.newProject();
}
constructor(private projectService: ProjectService, private messageService: MessageService){}
deleteSelectedProjects(): void {
this.listProjects.deleteSelectedProjects();
}
ngOnInit(): void {
this.retrieve('', this.lastFilteredType);
}
createProject(created: boolean): void {
console.log('Project has been created:' + created);
this.listProjects.retrieve('', 0);
}
retrieve(name: string, isPublic: number): void {
this.projectService
.listProjects(name, isPublic)
.subscribe(
response => this.changedProjects = response,
error => this.messageService.announceMessage(error));
}
filterProjects(type: number): void {
this.lastFilteredType = type;
this.listProjects.retrieve('', type);
console.log('Projects were filtered by:' + type);
openModal(): void {
this.creationProject.newProject();
}
createProject(created: boolean) {
if(created) {
this.retrieve('', this.lastFilteredType);
}
}
searchProjects(projectName: string): void {
console.log('Search for project name:' + projectName);
this.listProjects.retrieve(projectName, this.lastFilteredType);
}
doSearchProjects(projectName: string): void {
console.log('Search for project name:' + projectName);
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)
);
}
}
\ No newline at end of file
......@@ -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 {
......
......@@ -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
<input type="text" placeholder="Search for projects" #searchProject (keyup.enter)="doSearch(searchProject.value)" >
\ No newline at end of file
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
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment