Skip to content

Commit ee5a5e6

Browse files
jorgecodjorgecod
committed
Add Clock In
1 parent 82f4785 commit ee5a5e6

13 files changed

+252
-20
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)="getShowFields($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: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
1-
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
1+
import { async, ComponentFixture, TestBed } from "@angular/core/testing";
22

3-
import { TimeClockComponent } from './time-clock.component';
3+
import { TimeClockComponent } from "./time-clock.component";
44

5-
describe('TimeClockComponent', () => {
5+
describe("TimeClockComponent", () => {
66
let component: TimeClockComponent;
77
let fixture: ComponentFixture<TimeClockComponent>;
88

99
beforeEach(async(() => {
1010
TestBed.configureTestingModule({
11-
declarations: [ TimeClockComponent ]
12-
})
13-
.compileComponents();
11+
declarations: [TimeClockComponent]
12+
}).compileComponents();
1413
}));
1514

1615
beforeEach(() => {
@@ -19,7 +18,14 @@ describe('TimeClockComponent', () => {
1918
fixture.detectChanges();
2019
});
2120

22-
it('should be created', () => {
21+
it("should be created", () => {
2322
expect(component).toBeTruthy();
2423
});
24+
25+
it("should set showfileds as true", () => {
26+
const show = true;
27+
component.showFields = show;
28+
component.getShowFields(show);
29+
expect(component.showFields).toBe(true);
30+
});
2531
});

‎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+
getShowFields(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)