Skip to content

Commit ddfad12

Browse files
enriquezreneenriquezrene
authored
Merge pull request #8 from ioet/TimeClock-ClockIn
Add Clock In
2 parents 6b20923 + 12a95bb commit ddfad12

13 files changed

+274
-23
lines changed

‎src/app/app.module.ts

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { CommonModule } from '@angular/common';
12
import { BrowserModule } from '@angular/platform-browser';
23
import { NgModule } from '@angular/core';
34
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -11,6 +12,10 @@ import { ClockComponent } from './components/shared/clock/clock.component';
1112
import { ProjectManagementComponent } from './components/options-sidebar/project-management/project-management.component';
1213
import { ProjectListComponent } from './components/shared/project-list/project-list.component';
1314
import { CreateProjectComponent } from './components/shared/create-project/create-project.component';
15+
import { TimeClockComponent } from './components/options-sidebar/time-clock/time-clock.component';
16+
import { DetailsFieldsComponent } from './components/shared/details-fields/details-fields.component';
17+
import { ProjectListHoverComponent } from './components/shared/project-list-hover/project-list-hover.component';
18+
1419
@NgModule({
1520
declarations: [
1621
AppComponent,
@@ -20,9 +25,13 @@ import { CreateProjectComponent } from './components/shared/create-project/creat
2025
ClockComponent,
2126
ProjectManagementComponent,
2227
ProjectListComponent,
23-
CreateProjectComponent
28+
CreateProjectComponent,
29+
TimeClockComponent,
30+
DetailsFieldsComponent,
31+
ProjectListHoverComponent,
2432
],
2533
imports: [
34+
CommonModule,
2635
BrowserModule,
2736
AppRoutingModule,
2837
FormsModule,

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.content-ClockIn {
2+
padding: 2.1rem 1rem;
3+
}
4+
5+
.timer {
6+
align-items: center;
7+
display: flex;
8+
height: 100%;
9+
justify-content: center;
10+
}

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

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,20 @@
1-
<div class="text-center mt-5">
2-
3-
<p>time-clock works!</p>
4-
5-
</div>
1+
<div class="container">
2+
<div class="row">
3+
<div class="col content-ClockIn">
4+
<h5>PROJECTS</h5>
5+
<app-project-list-hover
6+
[projects]="projects"
7+
(showFields)="setShowFields($event)"
8+
></app-project-list-hover>
9+
<br />
10+
<div *ngIf="showFields">
11+
<app-details-fields></app-details-fields>
12+
</div>
13+
</div>
14+
<div class="col content-ClockIn">
15+
<div class="timer">
16+
<h5>Timer Here!</h5>
17+
</div>
18+
</div>
19+
</div>
20+
</div>

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

Lines changed: 35 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
1-
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
1+
import { async, ComponentFixture, TestBed } from "@angular/core/testing";
2+
import { By } from "@angular/platform-browser";
3+
import { DebugElement } from "@angular/core";
24

3-
import { TimeClockComponent } from './time-clock.component';
5+
import { TimeClockComponent } from "./time-clock.component";
6+
import { ProjectListHoverComponent } from "../../shared/project-list-hover/project-list-hover.component";
47

5-
describe('TimeClockComponent', () => {
8+
describe("TimeClockComponent", () => {
69
let component: TimeClockComponent;
710
let fixture: ComponentFixture<TimeClockComponent>;
11+
let de: DebugElement;
812

913
function setup() {
1014
// tslint:disable-next-line: no-shadowed-variable
@@ -15,28 +19,49 @@ describe('TimeClockComponent', () => {
1519

1620
beforeEach(async(() => {
1721
TestBed.configureTestingModule({
18-
declarations: [ TimeClockComponent ]
19-
})
20-
.compileComponents();
22+
declarations: [TimeClockComponent, ProjectListHoverComponent]
23+
}).compileComponents();
2124
}));
2225

2326
beforeEach(() => {
2427
fixture = TestBed.createComponent(TimeClockComponent);
2528
component = fixture.componentInstance;
29+
de = fixture.debugElement;
2630
fixture.detectChanges();
2731
});
2832

29-
it('should be created', () => {
33+
it("should be created", () => {
3034
expect(component).toBeTruthy();
3135
});
3236

33-
it('should have p tag as \'time-clock works!\'', async(() => {
37+
it("should have p tag as 'time-clock works!'", async(() => {
3438
// tslint:disable-next-line: no-shadowed-variable
3539
const { app, fixture } = setup();
3640
fixture.detectChanges();
3741
const compile = fixture.debugElement.nativeElement;
38-
const h1tag = compile.querySelector('p');
39-
expect(h1tag.textContent).toBe('time-clock works!');
42+
const h1tag = compile.querySelector("p");
43+
expect(h1tag.textContent).toBe("time-clock works!");
4044
}));
4145

46+
it("should set showfileds as true", () => {
47+
const show = true;
48+
component.setShowFields(show);
49+
expect(component.showFields).toBe(true);
50+
});
51+
52+
it('should be called the setShowFields event #1', () => {
53+
spyOn(component, 'setShowFields');
54+
const showFields = de.query(By.directive(ProjectListHoverComponent));
55+
const cmp = showFields.componentInstance;
56+
cmp.showFields.emit(true);
57+
expect(component.setShowFields).toHaveBeenCalledWith(true);
58+
});
59+
60+
it('should be called the setShowFields event #2', () => {
61+
spyOn(component, 'setShowFields');
62+
const showFields = de.query(By.directive(ProjectListHoverComponent));
63+
const li = showFields.query(By.css('li'));
64+
li.nativeElement.click();
65+
expect(component.setShowFields).toHaveBeenCalledWith(true);
66+
});
4267
});

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

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,25 @@
1-
import { Component, OnInit } from '@angular/core';
1+
import { Component, OnInit } from "@angular/core";
22

33
@Component({
4-
selector: 'app-time-clock',
5-
templateUrl: './time-clock.component.html',
6-
styleUrls: ['./time-clock.component.css']
4+
selector: "app-time-clock",
5+
templateUrl: "./time-clock.component.html",
6+
styleUrls: ["./time-clock.component.css"]
77
})
88
export class TimeClockComponent implements OnInit {
9+
projects = [
10+
{ id: "P1", name: "Project 1" },
11+
{ id: "P2", name: "Project 2" },
12+
{ id: "P3", name: "Project 3" },
13+
{ id: "P4", name: "Project 4" }
14+
];
915

10-
constructor() { }
16+
showFields: boolean;
1117

12-
ngOnInit(): void {
13-
}
18+
constructor() {}
19+
20+
ngOnInit(): void {}
1421

22+
setShowFields(show: boolean) {
23+
this.showFields = show;
24+
}
1525
}

‎src/app/components/shared/details-fields/details-fields.component.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.span-width {
2+
width: 6rem;
3+
}

‎src/app/components/shared/details-fields/details-fields.component.html

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<form>
2+
<div class="input-group input-group-sm mb-3">
3+
<div class="input-group-prepend">
4+
<label class="input-group-text span-width" for="inputGroupSelect01">Activity</label>
5+
</div>
6+
<select class="custom-select" id="inputGroupSelect01">
7+
<option selected>Choose...</option>
8+
<option value="1">One</option>
9+
<option value="2">Two</option>
10+
<option value="3">Three</option>
11+
</select>
12+
</div>
13+
<div class="input-group input-group-sm mb-3">
14+
<div class="input-group-prepend">
15+
<span class="input-group-text span-width" id="inputGroup-sizing-sm"
16+
>Jira Ticket</span
17+
>
18+
</div>
19+
<input
20+
type="text"
21+
class="form-control"
22+
aria-label="Small"
23+
aria-describedby="inputGroup-sizing-sm"
24+
/>
25+
</div>
26+
<div class="input-group input-group-sm mb-3">
27+
<div class="input-group-prepend">
28+
<span class="input-group-text span-width" id="inputGroup-sizing-sm">Technology</span>
29+
</div>
30+
<input
31+
type="text"
32+
class="form-control"
33+
aria-label="Small"
34+
aria-describedby="inputGroup-sizing-sm"
35+
/>
36+
</div>
37+
<div class="form-group">
38+
<label for="NotesTextarea">Notes</label>
39+
<textarea class="form-control" id="NotesTextarea" rows="3"></textarea>
40+
</div>
41+
</form>
42+
<button class="btn btn-danger btn-sm">
43+
Clock Out
44+
</button>

‎src/app/components/shared/details-fields/details-fields.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 { DetailsFieldsComponent } from './details-fields.component';
4+
5+
describe('DetailsFieldsComponent', () => {
6+
let component: DetailsFieldsComponent;
7+
let fixture: ComponentFixture<DetailsFieldsComponent>;
8+
9+
beforeEach(async(() => {
10+
TestBed.configureTestingModule({
11+
declarations: [ DetailsFieldsComponent ]
12+
})
13+
.compileComponents();
14+
}));
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(DetailsFieldsComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

‎src/app/components/shared/details-fields/details-fields.component.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Component, OnInit } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-details-fields',
5+
templateUrl: './details-fields.component.html',
6+
styleUrls: ['./details-fields.component.css']
7+
})
8+
export class DetailsFieldsComponent implements OnInit {
9+
10+
constructor() { }
11+
12+
ngOnInit(): void {
13+
}
14+
15+
}

‎src/app/components/shared/project-list-hover/project-list-hover.component.css

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
.content-projects {
2+
max-height: 10rem;
3+
overflow-x: auto;
4+
}
5+
6+
.content-projects > li {
7+
cursor: pointer;
8+
font-size: 0.8rem;
9+
padding: 0.5rem 0.8rem;
10+
}
11+
12+
.button-clockIn {
13+
font-size: 0.7rem;
14+
padding: 0 0.3rem;
15+
}

0 commit comments

Comments
 (0)