Skip to content

Commit 257cb2c

Browse files
daros10daros10
committed
2 parents 58afe14 + 4aae2ed commit 257cb2c

37 files changed

+731
-221
lines changed

‎src/app/app.module.ts‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,24 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
55
import { HttpClientModule } from '@angular/common/http';
66

77
import { AppRoutingModule } from './app-routing.module';
8-
98
import { AppComponent } from './app.component';
109
import { NavbarComponent } from './components/shared/navbar/navbar.component';
1110
import { UserComponent } from './components/shared/user/user.component';
1211
import { SidebarComponent } from './components/shared/sidebar/sidebar.component';
1312
import { ClockComponent } from './components/shared/clock/clock.component';
1413
import { TimeClockComponent } from './components/options-sidebar/time-clock/time-clock.component';
1514
import { ProjectManagementComponent } from './components/options-sidebar/project-management/project-management.component';
15+
import { TimeEntriesComponent } from './components/options-sidebar/time-entries/time-entries.component';
1616
import { ProjectListComponent } from './components/shared/project-list/project-list.component';
1717
import { CreateProjectComponent } from './components/shared/create-project/create-project.component';
1818
import { DetailsFieldsComponent } from './components/shared/details-fields/details-fields.component';
1919
import { ProjectListHoverComponent } from './components/shared/project-list-hover/project-list-hover.component';
2020
import { ModalComponent } from './components/shared/modal/modal.component';
21+
import { MonthPickerComponent } from './components/shared/month-picker/month-picker.component';
22+
import { EmptyStateComponent } from './components/shared/empty-state/empty-state.component';
23+
import { GroupByDatePipe } from './components/shared/pipes/group-by-date/group-by-date.pipe';
24+
25+
2126
@NgModule({
2227
declarations: [
2328
AppComponent,
@@ -32,7 +37,11 @@ import { ModalComponent } from './components/shared/modal/modal.component';
3237
TimeClockComponent,
3338
DetailsFieldsComponent,
3439
ProjectListHoverComponent,
35-
ModalComponent
40+
ModalComponent,
41+
TimeEntriesComponent,
42+
MonthPickerComponent,
43+
EmptyStateComponent,
44+
GroupByDatePipe
3645
],
3746
imports: [
3847
CommonModule,
@@ -46,4 +55,3 @@ import { ModalComponent } from './components/shared/modal/modal.component';
4655
bootstrap: [AppComponent]
4756
})
4857
export class AppModule { }
49-

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

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,34 @@
11
import { async, ComponentFixture, TestBed, inject } from '@angular/core/testing';
2+
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
3+
24
import { ProjectManagementComponent } from './project-management.component';
3-
import { Project } from '../../../interfaces/project';
5+
import { Project } from '../../../interfaces';
46
import { ProjectService } from '../../../services/project.service';
57
import { of } from 'rxjs';
68
import { CreateProjectComponent } from '../../../components/shared/create-project/create-project.component';
79
import { ProjectListComponent } from '../../../components/shared/project-list/project-list.component';
8-
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
910

1011
describe('ProjectManagementComponent', () => {
1112
let component: ProjectManagementComponent;
1213
let fixture: ComponentFixture<ProjectManagementComponent>;
1314
let projectService: ProjectService;
1415

1516
const projects: Project[] = [{
16-
id: 1,
17+
id: '1',
1718
name: 'app 1',
1819
details: 'It is a good app',
1920
status: 'inactive',
2021
completed: true
2122
},
2223
{
23-
id: 2,
24+
id: '2',
2425
name: 'app 2',
2526
details: 'It is a good app',
2627
status: 'inactive',
2728
completed: false
2829
},
2930
{
30-
id: 3,
31+
id: '3',
3132
name: 'app 3',
3233
details: 'It is a good app',
3334
status: 'active',
@@ -89,14 +90,14 @@ describe('ProjectManagementComponent', () => {
8990

9091
it('should edit a project #updateProject', () => {
9192
const project = {
92-
id: 1,
93+
id: '1',
9394
name: 'app test',
9495
details: 'It is a excelent app',
9596
status: 'inactive',
9697
completed: true
9798
};
9899

99-
component.editedProjectId = 1;
100+
component.editedProjectId = '1';
100101
component.updateProject(project);
101102
expect(component.projects.length).toEqual(3);
102103
expect(component.projects[0].name).toBe('app test');
@@ -106,14 +107,14 @@ describe('ProjectManagementComponent', () => {
106107
});
107108

108109
it('should filter the project to edit #editProject', () => {
109-
const editProjectId = 2;
110+
const editProjectId = '2';
110111
component.editProject(editProjectId);
111112
expect(component.project.name).toBe('app 2');
112113
});
113114

114115
it('should clean the project #cancelForm', () => {
115116
const project = {
116-
id: 1,
117+
id: '1',
117118
name: 'app 1',
118119
details: 'It is a good app',
119120
status: 'inactive',
@@ -149,7 +150,7 @@ describe('ProjectManagementComponent', () => {
149150
}));
150151

151152
it('should delete a project #deleteProject', () => {
152-
const projectId = 1;
153+
const projectId = '1';
153154

154155
component.deleteProject(projectId);
155156
expect(component.projects.length).toEqual(2);

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Component, OnInit } from '@angular/core';
2-
import { Project } from '../../../interfaces/project';
2+
import { Project } from '../../../interfaces';
33
import { ProjectService } from '../../../services/project.service';
44

55
@Component({
@@ -30,7 +30,7 @@ export class ProjectManagementComponent implements OnInit {
3030
this.projects[projectIndex].status = projectData.status;
3131
this.projects[projectIndex].completed = projectData.completed;
3232
} else {
33-
const newProject: Project = { id: this.projects.length + 1, name: projectData.name,
33+
const newProject: Project = { id: (this.projects.length + 1).toString(), name: projectData.name,
3434
details: projectData.details, status: projectData.status, completed: false
3535
};
3636
this.projects = this.projects.concat(newProject);

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

Lines changed: 85 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,89 @@
1-
<div class="text-center mt-5">
2-
<div class="card">
3-
<div class="card-header">
4-
<div class="row">
5-
<div class="col-2 text-left">
6-
<strong>Time clock</strong>
7-
</div>
8-
<div class="col-10 text-right">
9-
<i class="far fa-question-circle"></i>
10-
</div>
11-
</div>
1+
<div class="text-center mt-3">
2+
3+
<div *ngIf="showAlertEnterTecnology" class="alert alert-danger" role="alert">
4+
Field technology is requiered. Enter this field for clock out.
5+
</div>
6+
7+
<div class="card">
8+
<div class="card-header">
9+
<div class="row">
10+
<div class="col-2 text-left">
11+
<strong>Time clock</strong>
12+
</div>
13+
<div class="col-10 text-right">
14+
<i class="far fa-question-circle"></i>
1215
</div>
16+
</div>
17+
</div>
1318

14-
<div class="card-body">
15-
<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>
16-
<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>
17-
<h6 class="text-left"><strong>Totals</strong></h6>
18-
<hr>
19-
<div class="row">
20-
<div class="col-4">
21-
<h6>Current</h6>
22-
<h3>{{ hourCounterRealTime | number: '2.0-2' }}:{{ minuteCounterRealTime | number: '2.0-2' }}:{{ secondsCounterRealTime | number: '2.0-2' }}</h3>
23-
</div>
24-
<div class="col-4">
25-
<h6>Day</h6>
26-
<h3>00:00</h3>
27-
</div>
28-
<div class="col-4">
29-
<h6>Week</h6>
30-
<h3>00:00</h3>
31-
</div>
32-
</div>
33-
<h6 class="text-left"><strong>Projects</strong></h6>
34-
<form>
35-
<div class="form-group">
36-
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="&#xF002; Search project" style="font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif, FontAwesome">
37-
</div>
38-
</form>
39-
<p class="text-left"><i class="fas fa-folder"></i><strong> Top</strong></p>
40-
<ul class="list-group">
41-
<app-project-list-hover [projects]="projects" (showFields)="setShowFields($event)"></app-project-list-hover>
42-
</ul>
43-
<br>
44-
<form *ngIf="(!isClockIn || showFields) && !isHidenForm">
45-
<div class="form-group row">
46-
<label for="inputActivity" class="col-sm-2 col-form-label text-center"><strong>Activity</strong></label>
47-
<div class="col-sm-10">
48-
<input type="text" class="form-control">
49-
</div>
50-
</div>
51-
<div class="form-group row">
52-
<label for="inputJiraTicket" class="col-sm-2 col-form-label text-center"><strong>Jira Ticket</strong></label>
53-
<div class="col-sm-10">
54-
<input type="text" class="form-control">
55-
</div>
56-
</div>
57-
<div class="form-group row">
58-
<label for="inputTechnology" class="col-sm-2 col-form-label text-center"><strong>Technology</strong></label>
59-
<div class="col-sm-10">
60-
<input *ngIf="!showAlertEnterTecnology" #data type="text" (keyup)="enterTechnology(data.value)" class="form-control">
61-
<input *ngIf="showAlertEnterTecnology" #data type="text" (keyup)="enterTechnology(data.value)" class="form-control border-danger">
62-
<div>
63-
<h6 *ngIf="showAlertEnterTecnology" class="text-danger text-left">Technology field is required. Enter this field to clock out.</h6>
64-
</div>
65-
</div>
66-
</div>
67-
</form>
68-
<hr>
69-
<div class="container">
70-
<div class="row">
71-
<div class="col text-left" id="optionsContainer">
72-
<button class="btn btn-light btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
73-
Options
74-
</button>
75-
</div>
76-
<div class="col text-right" id="clockInOutContainer">
77-
<button *ngIf="isClockIn" class="btn btn-success btn-sm" type="button" (click)="employeClockIn()">Clock In</button>
78-
<button *ngIf="!isClockIn" class="btn btn-danger btn-sm" type="button" (click)="employeClockOut()">Clock Out</button>
79-
</div>
80-
</div>
81-
</div>
19+
<div class="card-body">
20+
<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>
21+
<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>
22+
<h6 class="text-left"><strong>Totals</strong></h6>
23+
<hr>
24+
<div class="row">
25+
<div class="col-4">
26+
<h6>Current</h6>
27+
<h3>{{ hour | number: '2.0-2' }}:{{ minute | number: '2.0-2' }}:{{ seconds | number: '2.0-2' }}</h3>
28+
</div>
29+
<div class="col-4">
30+
<h6>Day</h6>
31+
<h3>4:22</h3>
32+
</div>
33+
<div class="col-4">
34+
<h6>Week</h6>
35+
<h3>14:00</h3>
36+
</div>
37+
</div>
38+
<h6 class="text-left"><strong>Projects</strong></h6>
39+
<form>
40+
<div class="form-group">
41+
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="&#xF002; Search project"
42+
style="font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif, FontAwesome">
43+
</div>
44+
</form>
45+
<p class="text-left"><i class="fas fa-folder"></i><strong> Top</strong></p>
46+
<ul class="list-group">
47+
<app-project-list-hover [projects]="projects" (showFields)="setShowFields($event)"></app-project-list-hover>
48+
</ul>
49+
<br>
50+
<form *ngIf="!isClockIn || showFields">
51+
<div class="form-group row">
52+
<label for="inputActivity" class="col-sm-2 col-form-label text-center"><strong>Activity</strong></label>
53+
<div class="col-sm-10">
54+
<input type="text" class="form-control">
55+
</div>
56+
</div>
57+
<div class="form-group row">
58+
<label for="inputJiraTicket" class="col-sm-2 col-form-label text-center"><strong>Jira Ticket</strong></label>
59+
<div class="col-sm-10">
60+
<input type="text" class="form-control">
61+
</div>
62+
</div>
63+
<div class="form-group row">
64+
<label for="inputTechnology" class="col-sm-2 col-form-label text-center"><strong>Technology</strong></label>
65+
<div class="col-sm-10">
66+
<input #data type="text" (keyup)="enterTechnology(data.value)" class="form-control">
67+
</div>
68+
</div>
69+
</form>
70+
<hr>
71+
<div class="container">
72+
<div class="row">
73+
<div class="col text-left">
74+
<button class="btn btn-light btn-sm dropdown-toggle" type="button" data-toggle="dropdown"
75+
aria-haspopup="true" aria-expanded="false">
76+
Options
77+
</button>
78+
</div>
79+
<div class="col text-right">
80+
<button *ngIf="isClockIn" class="btn btn-success btn-sm" type="button" (click)="employeClockIn()">Clock
81+
In</button>
82+
<button *ngIf="!isClockIn" class="btn btn-danger btn-sm" type="button" (click)="employeClockOut()">Clock
83+
Out</button>
84+
</div>
8285
</div>
86+
</div>
8387
</div>
84-
</div>
88+
</div>
89+
</div>

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

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
.container-time-entries {
2+
padding: 1rem;
3+
}
4+
5+
.header-entries {
6+
background-color: rgba(0, 0, 0, 0.03);
7+
border-top: 1px solid rgba(0, 0, 0, 0.125);
8+
}
9+
10+
.accordion-container {
11+
max-height: 25rem;
12+
overflow-y: auto;
13+
}
14+
15+
.accordion-container::-webkit-scrollbar {
16+
display: none;
17+
}
18+
19+
.date-header {
20+
background-color: #e6e6e6;
21+
border-radius: 0;
22+
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
23+
font-size: small;
24+
padding: 0 0.9rem;
25+
}
26+
27+
.date-header > a {
28+
color: #000000;
29+
}
30+
31+
.btn-small > i {
32+
font-size: 0.8rem;
33+
opacity: 0.7;
34+
}
35+
36+
.entries {
37+
align-items: center;
38+
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
39+
display: flex;
40+
font-size: small;
41+
}
42+
43+
.entries:hover {
44+
background-color: #d5edf0;
45+
cursor: pointer;
46+
}

0 commit comments

Comments
 (0)