Skip to content

Commit 56247f6

Browse files
daros10daros10
committed
#3 serach project in view project
1 parent c501044 commit 56247f6

File tree

11 files changed

+125
-60
lines changed

11 files changed

+125
-60
lines changed

‎src/app/app.module.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@ import { ModalComponent } from './components/shared/modal/modal.component';
2121
import { MonthPickerComponent } from './components/shared/month-picker/month-picker.component';
2222
import { EmptyStateComponent } from './components/shared/empty-state/empty-state.component';
2323
import { GroupByDatePipe } from './components/shared/pipes/group-by-date/group-by-date.pipe';
24+
import { SearchProjectComponent } from './components/shared/search-project/search-project.component';
25+
import { FilterProjectPipe } from './components/shared/pipes/filter-project/filter-project.pipe';
2426

2527

2628
@NgModule({
@@ -41,7 +43,9 @@ import { GroupByDatePipe } from './components/shared/pipes/group-by-date/group-b
4143
TimeEntriesComponent,
4244
MonthPickerComponent,
4345
EmptyStateComponent,
44-
GroupByDatePipe
46+
GroupByDatePipe,
47+
SearchProjectComponent,
48+
FilterProjectPipe
4549
],
4650
imports: [
4751
CommonModule,

‎src/app/components/options-sidebar/project-management/project-management.component.html‎

Lines changed: 5 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,8 @@
1-
21
<div class="parent">
2+
<app-create-project class="item" [projectToEdit]="project" (savedProject)="updateProject($event)" (cancelForm)="cancelForm()">
3+
</app-create-project>
34

4-
<app-create-project class="item"
5-
[projectToEdit] = "project"
6-
(savedProject)="updateProject($event)"
7-
(cancelForm) = "cancelForm()"
8-
>
9-
</app-create-project>
10-
11-
<app-project-list class="item"
12-
[projects] = "projects"
13-
(editProject) = "editProject($event)"
14-
(deleteProject) = "deleteProject($event)"
15-
>
16-
</app-project-list>
17-
</div>
185

6+
<app-project-list class="item" [projects]="projects" (editProject)="editProject($event)" (deleteProject)="deleteProject($event)">
7+
</app-project-list>
8+
</div>

‎src/app/components/options-sidebar/time-clock/time-clock.component.html‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -31,11 +31,7 @@ <h3>00:00</h3>
3131
</div>
3232
</div>
3333
<h6 class="text-left"><strong>Projects</strong></h6>
34-
<form>
35-
<div class="form-group">
36-
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="&#xF002; Search project" style="font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif, FontAwesome">
37-
</div>
38-
</form>
34+
<app-search-project></app-search-project>
3935
<p class="text-left"><i class="fas fa-folder"></i><strong> Top</strong></p>
4036
<ul class="list-group">
4137
<app-project-list-hover [projects]="projects" (showFields)="setShowFields($event)"></app-project-list-hover>

‎src/app/components/shared/pipes/filter-project/filter-project.pipe.spec.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { FilterProjectPipe } from './filter-project.pipe';
2+
3+
describe('FilterProjectPipe', () => {
4+
it('create an instance', () => {
5+
const pipe = new FilterProjectPipe();
6+
expect(pipe).toBeTruthy();
7+
});
8+
});

‎src/app/components/shared/pipes/filter-project/filter-project.pipe.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { Pipe, PipeTransform } from '@angular/core';
2+
3+
@Pipe({
4+
name: 'filterProject'
5+
})
6+
export class FilterProjectPipe implements PipeTransform {
7+
8+
transform(value: any, arg: any): any {
9+
const restultProjects = [];
10+
for ( const projects of value ) {
11+
if ( projects.name.toLowerCase().indexOf(arg.toLowerCase()) > -1 ) {
12+
restultProjects.push(projects);
13+
}
14+
}
15+
return restultProjects;
16+
}
17+
}

‎src/app/components/shared/project-list/project-list.component.html‎

Lines changed: 38 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,47 @@
11
<div class="card-body">
2-
<h1 class="card-title">Project List</h1>
3-
<div class="scroll">
4-
<div class="accordion" id="accordionProject">
5-
<div *ngIf="projects?.length > 0; else notShow">
6-
<div class="card" *ngFor="let project of projects; let rowIndex = index">
7-
<div class="card-header">
8-
<h2 class="mb-0">
9-
<a type="button" data-toggle="collapse" [attr.data-target]="'#row'+rowIndex" [attr.aria-controls]="'row'+rowIndex">
2+
<h1 class="card-title">Project List</h1>
3+
<hr>
4+
<app-search-project (changeFilterProject)="filterProjects = $event"></app-search-project>
5+
<hr>
6+
<div class="scroll">
7+
<div class="accordion" id="accordionProject">
8+
<div *ngIf="projects?.length > 0; else notShow">
9+
<div class="card" *ngFor="let project of projects | filterProject:filterProjects; let rowIndex = index">
10+
<div class="card-header">
11+
<h2 class="mb-0">
12+
<a type="button" data-toggle="collapse" [attr.data-target]="'#row'+rowIndex" [attr.aria-controls]="'row'+rowIndex">
1013
{{project.name}}
1114
</a>
12-
<div class="btn-group float-right" role="group" >
13-
<i (click)="editProject.emit(project.id)" class="far fa-edit btn btn-link"></i>
14-
<i (click)="openModal(project)" data-toggle="modal" data-target="#deleteModal" class="far fa-trash-alt btn btn-link"></i>
15-
</div>
16-
</h2>
17-
</div>
15+
<div class="btn-group float-right" role="group">
16+
<i (click)="editProject.emit(project.id)" class="far fa-edit btn btn-link"></i>
17+
<i (click)="openModal(project)" data-toggle="modal" data-target="#deleteModal" class="far fa-trash-alt btn btn-link"></i>
18+
</div>
19+
</h2>
20+
</div>
1821

19-
<div [id]="'row'+rowIndex" class="collapse" data-parent="#accordionProject">
20-
<div class="card-body">
21-
<h5>Details:</h5>
22-
<p>{{project.details}}</p>
23-
<h5>Status:</h5>
24-
<p>{{project.status}}</p>
25-
<h5>Completed project:</h5>
26-
<p>{{project.completed ? 'Yes' : 'No'}}</p>
22+
<div [id]="'row'+rowIndex" class="collapse" data-parent="#accordionProject">
23+
<div class="card-body">
24+
<h5>Details:</h5>
25+
<p>{{project.details}}</p>
26+
<h5>Status:</h5>
27+
<p>{{project.status}}</p>
28+
<h5>Completed project:</h5>
29+
<p>{{project.completed ? 'Yes' : 'No'}}</p>
30+
</div>
31+
</div>
32+
</div>
2733
</div>
28-
</div>
34+
<ng-template #notShow>
35+
<div class="card">
36+
<div class="card-body">
37+
<h4 class="card-text">There is no any project.</h4>
38+
<h5 class="card-text">Please, create one.</h5>
39+
</div>
40+
</div>
41+
</ng-template>
2942
</div>
30-
</div>
31-
<ng-template #notShow>
32-
<div class="card">
33-
<div class="card-body">
34-
<h4 class="card-text">There is no any project.</h4>
35-
<h5 class="card-text">Please, create one.</h5>
36-
</div>
37-
</div>
38-
</ng-template>
3943
</div>
40-
</div>
4144
</div>
4245

43-
<app-modal *ngIf = "openDeleteModal" class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-hidden="true"
44-
[list] = "projectToDelete"
45-
(removeList) = "removeProject($event)"
46-
>
47-
</app-modal>
46+
<app-modal *ngIf="openDeleteModal" class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-hidden="true" [list]="projectToDelete" (removeList)="removeProject($event)">
47+
</app-modal>

‎src/app/components/shared/project-list/project-list.component.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,12 @@ export class ProjectListComponent implements OnInit {
1313
@Input() projects: Project[] = [];
1414
@Output() editProject = new EventEmitter();
1515
@Output() deleteProject = new EventEmitter();
16+
filterProjects = '';
1617

1718
projectToDelete: Project;
1819
openDeleteModal: Boolean = false;
1920

20-
constructor() { }
21+
constructor() {}
2122

2223
ngOnInit(): void {
2324
}

‎src/app/components/shared/search-project/search-project.component.css‎

Whitespace-only changes.

‎src/app/components/shared/search-project/search-project.component.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<div class="form-group">
2+
<input (keyup)="changeFilterValue()" type="text" class="form-control" placeholder="&#xF002; Search project" name="filterProject" [(ngModel)]="filterProject" style="font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif, FontAwesome">
3+
</div>

‎src/app/components/shared/search-project/search-project.component.spec.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { SearchProjectComponent } from './search-project.component';
4+
5+
describe('SearchProjectComponent', () => {
6+
let component: SearchProjectComponent;
7+
let fixture: ComponentFixture<SearchProjectComponent>;
8+
9+
beforeEach(async(() => {
10+
TestBed.configureTestingModule({
11+
declarations: [ SearchProjectComponent ]
12+
})
13+
.compileComponents();
14+
}));
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(SearchProjectComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

0 commit comments

Comments
 (0)