#3 search active projects in view projects

package.json

@@ -28,8 +28,8 @@
     "zone.js": "~0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.900.5",
-    "@angular/cli": "~9.0.4",
+    "@angular-devkit/build-angular": "^0.901.0",
+    "@angular/cli": "^9.1.0",
     "@angular/compiler-cli": "~9.0.3",
     "@angular/language-service": "~9.0.3",
     "@types/jasmine": "~3.5.0",

src/app/app.module.ts

@@ -24,6 +24,8 @@ import { GroupByDatePipe } from './modules/shared/pipes/group-by-date/group-by-d
 import { ActivitiesManagementComponent } from './modules/activities-management/pages/activities-management.component';
 import { ActivityListComponent } from './modules/activities-management/components/activity-list/activity-list.component';
 import { CreateActivityComponent } from './modules/activities-management/components/create-activity/create-activity.component';
+import { FilterProjectPipe } from './modules/shared/pipes/filter-project/filter-project.pipe';
+import { SearchProjectComponent } from './modules/shared/components/search-project/search-project.component';
 
 
 @NgModule({
@@ -47,7 +49,9 @@ import { CreateActivityComponent } from './modules/activities-management/compone
     GroupByDatePipe,
     ActivitiesManagementComponent,
     CreateActivityComponent,
-    ActivityListComponent
+    ActivityListComponent,
+    FilterProjectPipe,
+    SearchProjectComponent
   ],
   imports: [
     CommonModule,

src/app/modules/project-management/components/create-project/create-project.component.html

@@ -5,21 +5,23 @@ <h1 class="card-title">Project</h1>
     <div class="form-group">
       <label for="name">Name:</label>
       <input class="form-control" id="name" type="text" formControlName="name" required>
-      <p class="alert alert-danger" *ngIf="(name.dirty || name.touched) && name.invalid && name.errors.required">Name Project is required.</p>
+      <p class="alert alert-danger" *ngIf="(name.dirty || name.touched) && name.invalid && name.errors.required">NameProject is required.</p>
     </div>
 
     <div class="form-group">
       <label for="details">Details:</label>
       <textarea class="form-control" rows="3" id="details" type="text" formControlName="details" required></textarea>
-      <p class="alert alert-danger" *ngIf="(details.dirty || details.touched) && details.invalid && details.errors.required">Details Project is required.</p>
+      <p class="alert alert-danger" *ngIf="(details.dirty || details.touched) && details.invalid && details.errors.required">Details Project is
+        required.</p>
     </div>
 
     <div class="form-group">
       <label for="status">Status:</label>
       <select class="form-control" formControlName="status">
         <option *ngFor="let status of projectStatus" [value]="status">{{status}}</option>
       </select>
-      <p class="alert alert-danger" *ngIf="(status.dirty || status.touched) && status.invalid && status.errors.required">Status Project is required.</p>
+      <p class="alert alert-danger" *ngIf="(status.dirty || status.touched) && status.invalid && status.errors.required">Status Project is required.
+      </p>
     </div>
 
     <div class="form-group form-check" [hidden]="!projectToEdit">
@@ -35,4 +37,4 @@ <h1 class="card-title">Project</h1>
       </div>
     </div>
   </form>
-</div>
+</div>

src/app/modules/project-management/components/project-list/project-list.component.html

@@ -1,14 +1,16 @@
 <div class="card-body">
+  <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; let rowIndex = index">
+        <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">
                 {{project.name}}
               </a>
-              <div class="btn-group float-right" role="group" >
+              <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>
@@ -34,8 +36,5 @@ <h5>Completed project:</h5>
   </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>

src/app/modules/project-management/components/project-list/project-list.component.ts

@@ -21,6 +21,8 @@ export class ProjectListComponent implements OnInit {
   projectToDelete: Project;
   openDeleteModal = false;
 
+  filterProjects: string = '';
+
   constructor() { }
 
   ngOnInit(): void {

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

@@ -0,0 +1,3 @@
+<div class="form-group">
+  <input (keyup)="changeFilterValue()" type="text" class="form-control" placeholder="&#xF002; Search active projects..." name="filterProject" [(ngModel)]="filterProject" style="font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif, FontAwesome">
+</div>

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

@@ -0,0 +1,32 @@
+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();
+  });
+
+  it('called method', () => {
+    component.changeFilterProject.emit('angular');
+    component.filterProject = 'angular';
+    component.changeFilterValue();
+    expect(component.filterProject).toEqual('angular');
+  });
+});

src/app/modules/shared/components/search-project/search-project.component.ts

@@ -0,0 +1,22 @@
+import { Component, OnInit, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'app-search-project',
+  templateUrl: './search-project.component.html',
+  styleUrls: ['./search-project.component.scss']
+})
+export class SearchProjectComponent implements OnInit {
+
+  filterProject: string;
+  @Output() changeFilterProject = new EventEmitter();
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  changeFilterValue() {
+    this.changeFilterProject.emit(this.filterProject);
+  }
+
+}

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

@@ -0,0 +1,8 @@
+import { FilterProjectPipe } from './filter-project.pipe';
+
+describe('FilterProjectPipe', () => {
+  it('create an instance', () => {
+    const pipe = new FilterProjectPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

src/app/modules/shared/pipes/filter-project/filter-project.pipe.ts

@@ -0,0 +1,26 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { Project } from 'src/app/modules/shared/models/project.model';
+
+@Pipe({
+  name: 'filterProject'
+})
+export class FilterProjectPipe implements PipeTransform {
+
+  transform(value: Project[] = [], arg: string): string[] {
+
+    const restultProjects = [];
+    // tslint:disable-next-line: prefer-for-of
+    for (let i = 0; i < value.length; i++) {
+      if (value[i].name.toLowerCase().indexOf(arg.toLowerCase()) > -1) {
+        if (arg.length < 1) {
+          restultProjects.push(value[i]);
+        } else if (value[i].status === 'Active') {
+          restultProjects.push(value[i]);
+        }
+      }
+    }
+    console.log(restultProjects.length);
+    return restultProjects;
+  }
+
+}

src/app/modules/time-clock/pages/time-clock.component.html

@@ -1,9 +1,4 @@
-<div class="text-center mt-3">
-
-  <div *ngIf="showAlertEnterTecnology" class="alert alert-danger" role="alert">
-    Field technology is requiered. Enter this field for clock out.
-  </div>
-
+<div class="text-center mt-5">
   <div class="card">
     <div class="card-header">
       <div class="row">
@@ -15,39 +10,38 @@
         </div>
       </div>
     </div>
-
     <div class="card-body">
-      <p *ngIf="!isClockIn" class="card-title text-left"><strong>{{ username }}</strong> clocked <strong class="text-success">in</strong> at <strong>{{ hour | number: '2.0-2' }}:{{ minute | number: '2.0-2' }}:{{ seconds | number: '2.0-2' }}</strong></p>
-      <p *ngIf="isClockIn" class="card-title text-left"><strong>{{ username }}</strong> clocked <strong class="text-danger">out</strong> at <strong>{{ hour | number: '2.0-2' }}:{{ minute | number: '2.0-2' }}:{{ seconds | number: '2.0-2' }}</strong></p>
+      <p *ngIf="!isClockIn" class="card-title text-left"><strong>{{ username }}</strong> clocked <strong
+          class="text-success">in</strong> at
+        <strong>{{ hour | number: '2.0-2' }}:{{ minute | number: '2.0-2' }}:{{ seconds | number: '2.0-2' }}</strong></p>
+      <p *ngIf="isClockIn" class="card-title text-left"><strong>{{ username }}</strong> clocked <strong
+          class="text-danger">out</strong> at
+        <strong>{{ hour | number: '2.0-2' }}:{{ minute | number: '2.0-2' }}:{{ seconds | number: '2.0-2' }}</strong></p>
       <h6 class="text-left"><strong>Totals</strong></h6>
       <hr>
       <div class="row">
         <div class="col-4">
           <h6>Current</h6>
-          <h3>{{ hour | number: '2.0-2' }}:{{ minute | number: '2.0-2' }}:{{ seconds | number: '2.0-2' }}</h3>
+          <h3>
+            {{ hourCounterRealTime | number: '2.0-2' }}:{{ minuteCounterRealTime | number: '2.0-2' }}:{{ secondsCounterRealTime | number: '2.0-2' }}
+          </h3>
         </div>
         <div class="col-4">
           <h6>Day</h6>
-          <h3>4:22</h3>
+          <h3>00:00</h3>
         </div>
         <div class="col-4">
           <h6>Week</h6>
-          <h3>14:00</h3>
+          <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>
       <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>
       </ul>
       <br>
-      <form *ngIf="!isClockIn || showFields">
+      <form *ngIf="(!isClockIn || showFields) && !isHidenForm">
         <div class="form-group row">
           <label for="inputActivity" class="col-sm-2 col-form-label text-center"><strong>Activity</strong></label>
           <div class="col-sm-10">
@@ -63,20 +57,27 @@ <h6 class="text-left"><strong>Projects</strong></h6>
         <div class="form-group row">
           <label for="inputTechnology" class="col-sm-2 col-form-label text-center"><strong>Technology</strong></label>
           <div class="col-sm-10">
-            <input #data type="text" (keyup)="enterTechnology(data.value)" class="form-control">
+            <input *ngIf="!showAlertEnterTecnology" #data type="text" (keyup)="enterTechnology(data.value)"
+              class="form-control">
+            <input *ngIf="showAlertEnterTecnology" #data type="text" (keyup)="enterTechnology(data.value)"
+              class="form-control border-danger">
+            <div>
+              <h6 *ngIf="showAlertEnterTecnology" class="text-danger text-left">Technology field is required. Enter this
+                field to clock out.</h6>
+            </div>
           </div>
         </div>
       </form>
       <hr>
       <div class="container">
         <div class="row">
-          <div class="col text-left">
+          <div class="col text-left" id="optionsContainer">
             <button class="btn btn-light btn-sm dropdown-toggle" type="button" data-toggle="dropdown"
               aria-haspopup="true" aria-expanded="false">
               Options
             </button>
           </div>
-          <div class="col text-right">
+          <div class="col text-right" id="clockInOutContainer">
             <button *ngIf="isClockIn" class="btn btn-success btn-sm" type="button" (click)="employeClockIn()">Clock
               In</button>
             <button *ngIf="!isClockIn" class="btn btn-danger btn-sm" type="button" (click)="employeClockOut()">Clock
@@ -86,4 +87,4 @@ <h6 class="text-left"><strong>Projects</strong></h6>
       </div>
     </div>
   </div>
-</div>
+</div>