Skip to content

Commit 1997bb0

Browse files
jorgecodjorgecod
committed
Time Entries Section
1 parent 85dbadd commit 1997bb0

28 files changed

+593
-70
lines changed

‎src/app/app.module.ts

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { BrowserModule } from '@angular/platform-browser';
33
import { NgModule } from '@angular/core';
44
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
55
import { HttpClientModule } from '@angular/common/http';
6-
76
import { AppRoutingModule } from './app-routing.module';
87

98
import { AppComponent } from './app.component';
@@ -13,11 +12,17 @@ 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,
@@ -45,5 +54,4 @@ import { ModalComponent } from './components/shared/modal/modal.component';
4554
providers: [],
4655
bootstrap: [AppComponent]
4756
})
48-
export class AppModule { }
49-
57+
export class AppModule {}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,4 +82,4 @@ <h6 class="text-left"><strong>Projects</strong></h6>
8282
</div>
8383
</div>
8484
</div>
85-
</div>
85+
</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+
}

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

Lines changed: 65 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,66 @@
1-
<div class="text-center mt-5">
1+
<div class="container-time-entries">
2+
<div class="card">
3+
<div class="card-header">Time Entries</div>
4+
<app-month-picker (monthSelected)="getMonth($event)"></app-month-picker>
5+
<div class="row m-0 header-entries">
6+
<div class="col">Project</div>
7+
<div class="col">Duration</div>
8+
<div class="col-2">Actions</div>
9+
</div>
10+
<!--Accordion wrapper-->
11+
<div *ngIf="dataByMonth.length > 0; else emptyState" class="accordion accordion-container" role="tablist"
12+
aria-multiselectable="true">
13+
<div class="card" *ngFor="let entry of dataByMonth | groupByDate; let rowIndex = index">
14+
<!-- Card header -->
15+
<div class="date-header" role="tab" id="heading10">
16+
<a data-toggle="collapse" [href]="'#entry' + rowIndex">
17+
<div class="mb-0">
18+
{{ entry.date }}
19+
</div>
20+
</a>
21+
</div>
222

3-
<p>time-entries works!</p>
4-
5-
</div>
23+
<!-- Card body -->
24+
<div *ngFor="let item of entry.details" [id]="'entry' + rowIndex" class="collapse show" role="tabpanel"
25+
aria-labelledby="heading10">
26+
<div class="row m-0 entries">
27+
<div class="col">
28+
{{ item.project }}
29+
</div>
30+
<div class="col">
31+
{{ item.duration }}
32+
</div>
33+
<div class="col-2">
34+
<button class="btn btn-sm btn-small" data-toggle="modal" data-target="#editRecordsByDate"
35+
(click)="editEntry(item.id)">
36+
<i class="fa fa-edit"></i>
37+
</button>
38+
<button class="btn btn-sm btn-small" data-toggle="modal" data-target="#deleteModal"
39+
(click)="openModal(item)">
40+
<i class="fa fa-trash"></i>
41+
</button>
42+
</div>
43+
</div>
44+
</div>
45+
</div>
46+
</div>
47+
<ng-template #emptyState>
48+
<app-empty-state></app-empty-state>
49+
</ng-template>
50+
</div>
51+
</div>
52+
<div class="modal fade" id="editRecordsByDate" tabindex="-1" role="dialog" aria-hidden="true">
53+
<div class="modal-dialog modal-dialog-centered" role="document">
54+
<div class="modal-content">
55+
<div class="modal-header">
56+
<h5 class="modal-title" id="exampleModalLongTitle">Edit Entry</h5>
57+
</div>
58+
<div class="modal-body">
59+
<app-details-fields [formType]='"entries"' [entryToEdit]="entry" (saveEntry)="saveEntry($event)"></app-details-fields>
60+
</div>
61+
</div>
62+
</div>
63+
</div>
64+
<app-modal *ngIf="showModal" class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-hidden="true" [list]="entryToDelete"
65+
(removeList)="removeEntry($event)">
66+
</app-modal>

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

Lines changed: 56 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,21 @@
11
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
22

33
import { TimeEntriesComponent } from './time-entries.component';
4+
import { GroupByDatePipe } from '../../shared/pipes/group-by-date/group-by-date.pipe';
45

56
describe('TimeEntriesComponent', () => {
67
let component: TimeEntriesComponent;
78
let fixture: ComponentFixture<TimeEntriesComponent>;
9+
const entry = {
10+
id: "entry_1",
11+
project: "Mido - 05 de Febrero",
12+
startDate: "2020-02-05T15:36:15.887Z",
13+
endDate: "2020-02-05T18:36:15.887Z",
14+
activity: "development",
15+
technology: "Angular, TypeScript",
16+
comments: "No comments",
17+
ticket: "EY-25"
18+
};
819

920
function setup() {
1021
// tslint:disable-next-line: no-shadowed-variable
@@ -15,7 +26,7 @@ describe('TimeEntriesComponent', () => {
1526

1627
beforeEach(async(() => {
1728
TestBed.configureTestingModule({
18-
declarations: [ TimeEntriesComponent ]
29+
declarations: [ TimeEntriesComponent, GroupByDatePipe ]
1930
})
2031
.compileComponents();
2132
}));
@@ -30,13 +41,55 @@ describe('TimeEntriesComponent', () => {
3041
expect(component).toBeTruthy();
3142
});
3243

33-
it('should have p tag as \'time-entries works!\'', async(() => {
44+
/* it('should have p tag as \'time-entries works!\'', async(() => {
3445
// tslint:disable-next-line: no-shadowed-variable
3546
const { app, fixture } = setup();
3647
fixture.detectChanges();
3748
const compile = fixture.debugElement.nativeElement;
3849
const ptag = compile.querySelector('p');
3950
expect(ptag.textContent).toBe('time-entries works!');
51+
})); */
52+
53+
it('should call filter entry', async(() => {
54+
component.ngOnInit();
55+
expect(component.dataByMonth.length).toEqual(3);
4056
}));
4157

42-
});
58+
it('should open Delete Modal', () => {
59+
component.openModal(entry);
60+
expect(component.entryToDelete).toBe(entry);
61+
expect(component.showModal).toBe(true);
62+
});
63+
64+
it('should filter the Entry to edit', () => {
65+
const entryId = "entry_1"
66+
component.editEntry(entryId);
67+
expect(component.entry.project).toBe(entry.project);
68+
expect(component.entry.startDate).toBe(entry.startDate);
69+
expect(component.entry.endDate).toBe(entry.endDate);
70+
expect(component.entry.activity).toBe(entry.activity);
71+
expect(component.entry.technology).toBe(entry.technology);
72+
});
73+
74+
it('should save an Entry', () => {
75+
component.entryId = 'entry_1';
76+
component.saveEntry(entry);
77+
expect(component.entryList[0].project).toBe('Mido - 05 de Febrero');
78+
expect(component.entryList[0].startDate).toBe('2020-02-05T15:36:15.887Z');
79+
expect(component.entryList[0].endDate).toBe('2020-02-05T18:36:15.887Z');
80+
expect(component.entryList[0].activity).toBe('development');
81+
expect(component.entryList[0].technology).toBe('Angular, TypeScript');
82+
});
83+
84+
it('should delete a Entry', () => {
85+
const entryId = "entry_2";
86+
component.removeEntry(entryId);
87+
expect(component.dataByMonth.length).toBe(2);
88+
});
89+
90+
it('should get the entry List by Month', () => {
91+
const month = 3;
92+
component.getMonth(month);
93+
expect(component.dataByMonth.length).toEqual(1);
94+
});
95+
});

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

Lines changed: 91 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,102 @@
1-
import { Component, OnInit } from '@angular/core';
1+
import { Component, OnInit } from "@angular/core";
2+
import { Entry } from '../../../interfaces/entry';
23

34
@Component({
4-
selector: 'app-time-entries',
5-
templateUrl: './time-entries.component.html',
6-
styleUrls: ['./time-entries.component.css']
5+
selector: "app-time-entries",
6+
templateUrl: "./time-entries.component.html",
7+
styleUrls: ["./time-entries.component.css"]
78
})
89
export class TimeEntriesComponent implements OnInit {
910

11+
showModal: boolean = false;
12+
entryId: string;
13+
entry: Entry;
14+
entryToDelete: Entry;
15+
dataByMonth: Entry[];
16+
17+
entryList = [
18+
{
19+
id: "entry_1",
20+
project: "Mido - 05 de Febrero",
21+
startDate: "2020-02-05T15:36:15.887Z",
22+
endDate: "2020-02-05T18:36:15.887Z",
23+
activity: "development",
24+
technology: "Angular, TypeScript",
25+
comments: "No comments",
26+
ticket: "EY-25"
27+
},
28+
{
29+
id: "entry_2",
30+
project: "Mido 15 de Marzo",
31+
startDate: "2020-03-15T20:36:15.887Z",
32+
endDate: "2020-03-15T23:36:15.887Z",
33+
activity: "development",
34+
technology: "Angular, TypeScript",
35+
comments: "No comments",
36+
ticket: "EY-38"
37+
},
38+
{
39+
id: "entry_3",
40+
project: "GoSpace 15 y 16 de Marzo",
41+
startDate: "2020-03-15T23:36:15.887Z",
42+
endDate: "2020-03-16T05:36:15.887Z",
43+
activity: "development",
44+
technology: "Angular, TypeScript",
45+
comments: "No comments",
46+
ticket: "EY-225"
47+
},
48+
{
49+
id: "entry_4",
50+
project: "Mido 16 de Marzo",
51+
startDate: "2020-03-16T15:36:15.887Z",
52+
endDate: "2020-03-16T18:36:15.887Z",
53+
activity: "development",
54+
technology: "Angular, TypeScript",
55+
comments: "No comments",
56+
ticket: "EY-89"
57+
},
58+
{
59+
id: "entry_5",
60+
project: "Ernst&Young 01 de Abril",
61+
startDate: "2020-04-01T09:36:15.887Z",
62+
endDate: "2020-04-01T15:36:15.887Z",
63+
activity: "development",
64+
technology: "Angular, TypeScript",
65+
comments: "No comments",
66+
ticket: "EY-59"
67+
}
68+
];
69+
1070
constructor() { }
1171

1272
ngOnInit(): void {
73+
this.dataByMonth = this.entryList.filter(entry => new Date(entry.startDate).getMonth() === new Date().getMonth());
74+
}
75+
76+
openModal(itemToDelete: Entry) {
77+
this.entryToDelete = itemToDelete;
78+
this.showModal = true;
79+
}
80+
81+
editEntry(entryId: string) {
82+
this.entryId = entryId;
83+
this.entry = this.entryList.find((entry) => entry.id === entryId);
1384
}
1485

86+
saveEntry(newData): void {
87+
const entryIndex = this.entryList.findIndex((entry => entry.id === this.entryId));
88+
this.entryList[entryIndex].project = newData.project;
89+
this.entryList[entryIndex].activity = newData.activity;
90+
this.entryList[entryIndex].technology = newData.technology;
91+
this.entryList[entryIndex].ticket = newData.jiraTicket;
92+
this.entryList[entryIndex].comments = newData.notes;
93+
}
94+
95+
removeEntry(entryId: string) {
96+
this.dataByMonth = this.dataByMonth.filter((entry: Entry) => entry.id !== entryId);
97+
}
98+
99+
getMonth(month: number) {
100+
this.dataByMonth = this.entryList.filter(entry => new Date(entry.startDate).getMonth() === month);
101+
}
15102
}

‎src/app/components/shared/clock/clock.component.spec.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,14 +24,14 @@ describe('ClockComponent', () => {
2424
expect(component).toBeTruthy();
2525
});
2626

27-
it('should show the current hour of day', () => {
27+
/* it('should show the current hour of day', () => {
2828
const currentHour = 11;
2929
expect(component.currentDate.getHours()).toEqual(currentHour);
30-
});
30+
}); */
3131

32-
it('should show the current minutes of day', () => {
32+
/* it('should show the current minutes of day', () => {
3333
const currenMinutes = 5;
3434
expect(component.currentDate.getMinutes()).toEqual(currenMinutes);
35-
});
35+
}); */
3636

3737
});

0 commit comments

Comments
 (0)