#3-Time clock find project

src/app/app.module.ts

@@ -23,10 +23,10 @@ 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';
-// tslint:disable-next-line:max-line-length
+import { SearchProjectComponent } from './components/shared/search-project/search-project.component';
+import { FilterProjectPipe } from './components/shared/pipes/filter-project/filter-project.pipe';
 import { ActivitiesManagementComponent } from './components/options-sidebar/activities/activities-management/activities-management.component';
 
-
 @NgModule({
   declarations: [
     AppComponent,
@@ -46,6 +46,8 @@ import { ActivitiesManagementComponent } from './components/options-sidebar/acti
     MonthPickerComponent,
     EmptyStateComponent,
     GroupByDatePipe,
+    SearchProjectComponent,
+    FilterProjectPipe,
     ActivitiesManagementComponent,
     CreateActivityComponent,
     ActivityListComponent

src/app/components/options-sidebar/activities/activities-management/activities-management.component.html

@@ -1,7 +1,4 @@
 <div class="parent">
-    <app-create-activity class="item">
-    </app-create-activity>
-
-    <app-activity-list [activities]="activities" class="item">
-    </app-activity-list>
+  <app-create-activity class="item"></app-create-activity>
+  <app-activity-list [activities]="activities" class="item"></app-activity-list>
 </div>

src/app/components/options-sidebar/activities/activity-list/activity-list.component.html

@@ -1,37 +1,35 @@
 <div class="card-body">
-    <div class="scroll">
-        <div class="accordion" id="accordionActivities">
-            <div *ngIf="activities?.length > 0; else notShow">
-                <div class="card" *ngFor="let activity of activities; let rowIndex = index">
-                    <div class="card-header">
-                        <h2 class="mb-0">
-                            <a type="button" data-toggle="collapse" [attr.data-target]="'#row'+rowIndex">
-                                {{activity.name}}
-                            </a>
-                            <div class="btn-group float-right" role="group">
-                                <i class="far fa-edit btn btn-link"></i>
-                                <i class="far fa-trash-alt btn btn-link"></i>
-                            </div>
-                        </h2>
-                    </div>
-
-                    <div [id]="'row'+rowIndex" class="collapse" data-parent="#accordionActivities">
-                        <div class="card-body">
-                            <h5>Description:</h5>
-                            <p>{{activity.description}}</p>
-                        </div>
-                    </div>
-
-                </div>
+  <div class="scroll">
+    <div class="accordion" id="accordionActivities">
+      <div *ngIf="activities?.length > 0; else notShow">
+        <div class="card" *ngFor="let activity of activities; let rowIndex = index">
+          <div class="card-header">
+            <h2 class="mb-0">
+              <a type="button" data-toggle="collapse" [attr.data-target]="'#row'+rowIndex">
+                {{activity.name}}
+              </a>
+              <div class="btn-group float-right" role="group">
+                <i class="far fa-edit btn btn-link"></i>
+                <i class="far fa-trash-alt btn btn-link"></i>
+              </div>
+            </h2>
+          </div>
+          <div [id]="'row'+rowIndex" class="collapse" data-parent="#accordionActivities">
+            <div class="card-body">
+              <h5>Description:</h5>
+              <p>{{activity.description}}</p>
             </div>
-            <ng-template #notShow>
-                <div class="card">
-                    <div class="card-body">
-                        <h4 class="card-text">There are no activities.</h4>
-                        <h5 class="card-text">Please, create one.</h5>
-                    </div>
-                </div>
-            </ng-template>
+          </div>
         </div>
+      </div>
+      <ng-template #notShow>
+        <div class="card">
+          <div class="card-body">
+            <h4 class="card-text">There are no activities.</h4>
+            <h5 class="card-text">Please, create one.</h5>
+          </div>
+        </div>
+      </ng-template>
     </div>
+  </div>
 </div>

src/app/components/options-sidebar/activities/create-activity/create-activity.component.spec.ts

@@ -18,5 +18,4 @@ describe('CreateActivityComponent', () => {
   it('should create the component', () => {
     expect(component).toBeTruthy();
   });
-
 });

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

@@ -1,17 +1,9 @@
 <div class="parent">
-
-  <app-create-project class="item"
-    [projectToEdit] = "project"
-    (savedProject)="updateProject($event)"
-    (cancelForm) = "cancelForm()"
-  >
+  <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 class="item" [projects]="projects" (editProject)="editProject($event)"
+    (deleteProject)="deleteProject($event)">
   </app-project-list>
-</div>
-
+</div>

src/app/components/options-sidebar/project-management/project-management.component.spec.ts

@@ -7,6 +7,7 @@ import { ProjectService } from '../../../services/project.service';
 import { of } from 'rxjs';
 import { CreateProjectComponent } from '../../../components/shared/create-project/create-project.component';
 import { ProjectListComponent } from '../../../components/shared/project-list/project-list.component';
+import { FilterProjectPipe } from 'src/app/components/shared/pipes/filter-project/filter-project.pipe';
 
 describe('ProjectManagementComponent', () => {
   let component: ProjectManagementComponent;
@@ -45,7 +46,7 @@ describe('ProjectManagementComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ProjectManagementComponent, CreateProjectComponent, ProjectListComponent ],
+      declarations: [ ProjectManagementComponent, CreateProjectComponent, ProjectListComponent, FilterProjectPipe ],
       providers: [ { provide: ProjectService, useValue: projectServiceStub }],
       imports: [
         FormsModule,

src/app/components/options-sidebar/reports/reports.component.html

@@ -1,5 +1,3 @@
 <div class="text-center mt-5">
-
-    <p>reports works!</p>
-
+  <p>reports works!</p>
 </div>

src/app/components/options-sidebar/time-clock/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>

src/app/components/options-sidebar/time-clock/time-clock.component.spec.ts

@@ -3,6 +3,7 @@ import { By } from '@angular/platform-browser';
 import { DebugElement, Component } from '@angular/core';
 import { TimeClockComponent } from './time-clock.component';
 import { ProjectListHoverComponent } from '../../shared/project-list-hover/project-list-hover.component';
+import { FilterProjectPipe } from 'src/app/components/shared/pipes/filter-project/filter-project.pipe';
 
 describe('TimeClockComponent', () => {
   let component: TimeClockComponent;
@@ -11,7 +12,7 @@ describe('TimeClockComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [TimeClockComponent, ProjectListHoverComponent]
+      declarations: [TimeClockComponent, ProjectListHoverComponent, FilterProjectPipe]
     }).compileComponents();
   }));
 
@@ -197,6 +198,13 @@ describe('TimeClockComponent', () => {
       expect(component.secondsCounterRealTime).not.toEqual(0);
     });
 
+  it('inside timer first if' , () => {
+    component.secondsCounterRealTime = component.secondsCounterRealTime + 58;
+    component.timer();
+    expect(component.minuteCounterRealTime).toEqual(1);
+    expect(component.secondsCounterRealTime).toEqual(0);
+  });
+
     /* ---------------------- ARRIVALS ------------------------------------- */
   it('should execute intern methods of arrivals' , () => {
       const currentDate = new Date();