Commit dbda4079 authored by kunw's avatar kunw
Browse files

Updates for abstracting list project component.

parent b26ffdb8
<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
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
<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
......@@ -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
......@@ -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
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