Upstream/harbor
1
0
Fork 0
mirror of https://github.com/goharbor/harbor.git synced 2024-11-23 02:35:17 +01:00
Code Issues Projects Releases Wiki Activity

Refactored codes of project component.

Browse Source
This commit is contained in:
kunw 2017-02-22 13:12:59 +08:00
parent ced142e5b8
commit b26ffdb8f7
10 changed files with 111 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
harbor-app/src/app/project/create-project/create-project.component.ts
View File

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

9
harbor-app/src/app/project/filter-project/filter-project.component.html
View File

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

23
harbor-app/src/app/project/filter-project/filter-project.component.ts
View File

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

27
harbor-app/src/app/project/list-project/list-project.component.html
View File

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

61
harbor-app/src/app/project/list-project/list-project.component.ts
View File

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

40
harbor-app/src/app/project/project.component.html
View File

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

101
harbor-app/src/app/project/project.component.ts
View File

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

10
harbor-app/src/app/project/project.module.ts
View 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 {

1
harbor-app/src/app/project/search-project/search-project.component.html
View File

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

13
harbor-app/src/app/project/search-project/search-project.component.ts
View File

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