Merge branch 'master' of https://github.com/ioet/time-tracker-ui into…

… Time_Clock-Clock-In

src/app/app.module.ts

@@ -14,6 +14,9 @@ import { TimeClockComponent } from './components/options-sidebar/time-clock/time
 import { ProjectManagementComponent } from './components/options-sidebar/project-management/project-management.component';
 import { ProjectListComponent } from './components/shared/project-list/project-list.component';
 import { CreateProjectComponent } from './components/shared/create-project/create-project.component';
+import { DetailsFieldsComponent } from './components/shared/details-fields/details-fields.component';
+import { ProjectListHoverComponent } from './components/shared/project-list-hover/project-list-hover.component';
+
 
 @NgModule({
   declarations: [

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

@@ -42,22 +42,13 @@ <h6 class="text-left"><strong>Projects</strong></h6>
             </form>
             <p class="text-left"><i class="fas fa-folder"></i><strong>  Top</strong></p>
             <ul class="list-group">
-                <li class="list-group-item d-flex justify-content-between align-items-center">
-                    Customer › ernst-and-young
-                    <button type="button" class="btn btn-success btn-sm">Clock In</button>
-                </li>
-                <li class="list-group-item d-flex justify-content-between align-items-center">
-                    Customer
-                    <i class="fas fa-chevron-right"></i>
 
-                </li>
-                <li class="list-group-item d-flex justify-content-between align-items-center">
-                    Training
-                    <i class="fas fa-chevron-right"></i>
-                </li>
+                <app-project-list-hover [projects]="projects" (showFields)="setShowFields($event)"></app-project-list-hover>
+
+
             </ul>
             <br>
-            <form *ngIf="!isClockIn">
+            <form *ngIf="!isClockIn || showFields ">
                 <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">

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

@@ -1,11 +1,11 @@
-import { async, ComponentFixture, TestBed } from "@angular/core/testing";
-import { By } from "@angular/platform-browser";
-import { DebugElement } from "@angular/core";
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
 
-import { TimeClockComponent } from "./time-clock.component";
-import { ProjectListHoverComponent } from "../../shared/project-list-hover/project-list-hover.component";
+import { TimeClockComponent } from './time-clock.component';
+import { ProjectListHoverComponent } from '../../shared/project-list-hover/project-list-hover.component';
 
-describe("TimeClockComponent", () => {
+describe('TimeClockComponent', () => {
   let component: TimeClockComponent;
   let fixture: ComponentFixture<TimeClockComponent>;
   let de: DebugElement;
@@ -30,7 +30,7 @@ describe("TimeClockComponent", () => {
     fixture.detectChanges();
   });
 
-  it("should be created", () => {
+  it('should be created', () => {
     expect(component).toBeTruthy();
   });
 
@@ -41,9 +41,10 @@ describe("TimeClockComponent", () => {
     const compile = fixture.debugElement.nativeElement;
     const ptag = compile.querySelector('p');
     expect(ptag.textContent).toBe('Dario clocked out at hh:mm:ss');
+
   }));
 
-  it("should set showfileds as true", () => {
+  it('should set showfileds as true', () => {
     const show = true;
     component.setShowFields(show);
     expect(component.showFields).toBe(true);

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

@@ -1,11 +1,19 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: "app-time-clock",
-  templateUrl: "./time-clock.component.html",
-  styleUrls: ["./time-clock.component.css"]
+  selector: 'app-time-clock',
+  templateUrl: './time-clock.component.html',
+  styleUrls: ['./time-clock.component.css']
 })
-export class TimeClockComponent {
+export class TimeClockComponent  implements OnInit {
+  projects = [
+    { id: 'P1', name: 'Project 1' },
+    { id: 'P2', name: 'Project 2' },
+    { id: 'P3', name: 'Project 3' },
+    { id: 'P4', name: 'Project 4' }
+  ];
+
+  showFields: boolean;
 
   username = 'Dario';
   clockInUsername = 'hh:mm:ss';
@@ -43,4 +51,10 @@ export class TimeClockComponent {
        this.isEnterTechnology = false;
      }
    }
+
+   setShowFields(show: boolean) {
+    this.showFields = show;
+  }
+
+  ngOnInit(): void {}
 }