Skip to content
Prev Previous commit
Next Next commit
#3 serach project in view project
  • Loading branch information
daros10 committed Mar 27, 2020
commit 56247f6685b72b713f7889a2c1e412161cd8bf54
6 changes: 5 additions & 1 deletion src/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ import { ModalComponent } from './components/shared/modal/modal.component';
import { MonthPickerComponent } from './components/shared/month-picker/month-picker.component';
import { EmptyStateComponent } from './components/shared/empty-state/empty-state.component';
import { GroupByDatePipe } from './components/shared/pipes/group-by-date/group-by-date.pipe';
import { SearchProjectComponent } from './components/shared/search-project/search-project.component';
import { FilterProjectPipe } from './components/shared/pipes/filter-project/filter-project.pipe';


@NgModule({
Expand All @@ -41,7 +43,9 @@ import { GroupByDatePipe } from './components/shared/pipes/group-by-date/group-b
TimeEntriesComponent,
MonthPickerComponent,
EmptyStateComponent,
GroupByDatePipe
GroupByDatePipe,
SearchProjectComponent,
FilterProjectPipe
],
imports: [
CommonModule,
Expand Down
Original file line number Diff line number Diff line change
@@ -1,18 +1,8 @@

<div class="parent">
<app-create-project class="item" [projectToEdit]="project" (savedProject)="updateProject($event)" (cancelForm)="cancelForm()">
</app-create-project>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please, fix the indentation, remember that we are using an indentation based in 2 spaces.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done


<app-create-project class="item"
[projectToEdit] = "project"
(savedProject)="updateProject($event)"
(cancelForm) = "cancelForm()"
>
</app-create-project>

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

<app-project-list class="item" [projects]="projects" (editProject)="editProject($event)" (deleteProject)="deleteProject($event)">
</app-project-list>
</div>
Original file line number Diff line number Diff line change
Expand Up @@ -31,11 +31,7 @@ <h3>00:00</h3>
</div>
</div>
<h6 class="text-left"><strong>Projects</strong></h6>
<form>
<div class="form-group">
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="&#xF002; Search project" style="font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif, FontAwesome">
</div>
</form>
<app-search-project></app-search-project>
<p class="text-left"><i class="fas fa-folder"></i><strong> Top</strong></p>
<ul class="list-group">
<app-project-list-hover [projects]="projects" (showFields)="setShowFields($event)"></app-project-list-hover>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { FilterProjectPipe } from './filter-project.pipe';

describe('FilterProjectPipe', () => {
it('create an instance', () => {
const pipe = new FilterProjectPipe();
expect(pipe).toBeTruthy();
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
name: 'filterProject'
})
export class FilterProjectPipe implements PipeTransform {

transform(value: any, arg: any): any {
const restultProjects = [];
for ( const projects of value ) {
if ( projects.name.toLowerCase().indexOf(arg.toLowerCase()) > -1 ) {
restultProjects.push(projects);
}
}
return restultProjects;
}
}
76 changes: 38 additions & 38 deletions src/app/components/shared/project-list/project-list.component.html
Original file line number Diff line number Diff line change
@@ -1,47 +1,47 @@
<div class="card-body">
<h1 class="card-title">Project List</h1>
<div class="scroll">
<div class="accordion" id="accordionProject">
<div *ngIf="projects?.length > 0; else notShow">
<div class="card" *ngFor="let project of projects; let rowIndex = index">
<div class="card-header">
<h2 class="mb-0">
<a type="button" data-toggle="collapse" [attr.data-target]="'#row'+rowIndex" [attr.aria-controls]="'row'+rowIndex">
<h1 class="card-title">Project List</h1>
<hr>
<app-search-project (changeFilterProject)="filterProjects = $event"></app-search-project>
<hr>
<div class="scroll">
<div class="accordion" id="accordionProject">
<div *ngIf="projects?.length > 0; else notShow">
<div class="card" *ngFor="let project of projects | filterProject:filterProjects; let rowIndex = index">
<div class="card-header">
<h2 class="mb-0">
<a type="button" data-toggle="collapse" [attr.data-target]="'#row'+rowIndex" [attr.aria-controls]="'row'+rowIndex">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please, fix the indentation, remember that we are using an indentation based in 2 spaces.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

{{project.name}}
</a>
<div class="btn-group float-right" role="group" >
<i (click)="editProject.emit(project.id)" class="far fa-edit btn btn-link"></i>
<i (click)="openModal(project)" data-toggle="modal" data-target="#deleteModal" class="far fa-trash-alt btn btn-link"></i>
</div>
</h2>
</div>
<div class="btn-group float-right" role="group">
<i (click)="editProject.emit(project.id)" class="far fa-edit btn btn-link"></i>
<i (click)="openModal(project)" data-toggle="modal" data-target="#deleteModal" class="far fa-trash-alt btn btn-link"></i>
</div>
</h2>
</div>

<div [id]="'row'+rowIndex" class="collapse" data-parent="#accordionProject">
<div class="card-body">
<h5>Details:</h5>
<p>{{project.details}}</p>
<h5>Status:</h5>
<p>{{project.status}}</p>
<h5>Completed project:</h5>
<p>{{project.completed ? 'Yes' : 'No'}}</p>
<div [id]="'row'+rowIndex" class="collapse" data-parent="#accordionProject">
<div class="card-body">
<h5>Details:</h5>
<p>{{project.details}}</p>
<h5>Status:</h5>
<p>{{project.status}}</p>
<h5>Completed project:</h5>
<p>{{project.completed ? 'Yes' : 'No'}}</p>
</div>
</div>
</div>
</div>
</div>
<ng-template #notShow>
<div class="card">
<div class="card-body">
<h4 class="card-text">There is no any project.</h4>
<h5 class="card-text">Please, create one.</h5>
</div>
</div>
</ng-template>
</div>
</div>
<ng-template #notShow>
<div class="card">
<div class="card-body">
<h4 class="card-text">There is no any project.</h4>
<h5 class="card-text">Please, create one.</h5>
</div>
</div>
</ng-template>
</div>
</div>
</div>

<app-modal *ngIf = "openDeleteModal" class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-hidden="true"
[list] = "projectToDelete"
(removeList) = "removeProject($event)"
>
</app-modal>
<app-modal *ngIf="openDeleteModal" class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-hidden="true" [list]="projectToDelete" (removeList)="removeProject($event)">
</app-modal>
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,12 @@ export class ProjectListComponent implements OnInit {
@Input() projects: Project[] = [];
@Output() editProject = new EventEmitter();
@Output() deleteProject = new EventEmitter();
filterProjects = '';

projectToDelete: Project;
openDeleteModal: Boolean = false;

constructor() { }
constructor() {}

ngOnInit(): void {
}
Expand Down
Empty file.
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<div class="form-group">
<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">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please, fix the indentation, remember that we are using an indentation based in 2 spaces.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { SearchProjectComponent } from './search-project.component';

describe('SearchProjectComponent', () => {
let component: SearchProjectComponent;
let fixture: ComponentFixture<SearchProjectComponent>;

beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ SearchProjectComponent ]
})
.compileComponents();
}));

beforeEach(() => {
fixture = TestBed.createComponent(SearchProjectComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

@Component({
selector: 'app-search-project',
templateUrl: './search-project.component.html',
styleUrls: ['./search-project.component.css']
})
export class SearchProjectComponent implements OnInit {

filterProject: string;
@Output() changeFilterProject = new EventEmitter();

constructor() { }

ngOnInit(): void {
}

changeFilterValue() {
this.changeFilterProject.emit( this.filterProject );
}
}