From 601da9153dd1a17da61428adfb94a30aa4772a84 Mon Sep 17 00:00:00 2001 From: David Cadena Date: Mon, 28 Mar 2022 19:02:38 -0500 Subject: [PATCH 01/14] feat: TT-593 add filter for searching a specific user * Created user-search component * Loaded all users to the select * sent the user.id to the api reports --- src/app/app.module.ts | 2 ++ .../time-entries-table.component.html | 1 + .../time-entries-table.component.ts | 35 +++++++++++++++---- .../time-range-form.component.ts | 14 ++++++-- .../reports/pages/reports.component.html | 5 ++- .../reports/pages/reports.component.ts | 8 ++++- .../search-user/search-user.component.html | 8 +++++ .../search-user/search-user.component.scss | 11 ++++++ .../search-user/search-user.component.ts | 22 ++++++++++++ .../users-list/users-list.component.ts | 2 +- 10 files changed, 95 insertions(+), 13 deletions(-) create mode 100644 src/app/modules/shared/components/search-user/search-user.component.html create mode 100644 src/app/modules/shared/components/search-user/search-user.component.scss create mode 100644 src/app/modules/shared/components/search-user/search-user.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 98a6d5ea9..e226c5626 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -89,6 +89,7 @@ import { NgSelectModule } from '@ng-select/ng-select'; import { DarkModeComponent } from './modules/shared/components/dark-mode/dark-mode.component'; import { SocialLoginModule, SocialAuthServiceConfig } from 'angularx-social-login'; import { GoogleLoginProvider } from 'angularx-social-login'; +import { SearchUserComponent } from './modules/shared/components/search-user/search-user.component'; const maskConfig: Partial = { validation: false, @@ -128,6 +129,7 @@ const maskConfig: Partial = { EntryFieldsComponent, SubstractDatePipe, TechnologiesComponent, + SearchUserComponent, TimeEntriesSummaryComponent, TimeDetailsPipe, InputLabelComponent, diff --git a/src/app/modules/reports/components/time-entries-table/time-entries-table.component.html b/src/app/modules/reports/components/time-entries-table/time-entries-table.component.html index 9b4880904..8a9f6e06b 100644 --- a/src/app/modules/reports/components/time-entries-table/time-entries-table.component.html +++ b/src/app/modules/reports/components/time-entries-table/time-entries-table.component.html @@ -1,4 +1,5 @@
+ (); + selectOptionValues = [15, 30, 50, 100, -1]; selectOptionNames = [15, 30, 50, 100, 'All']; + users: User[] = []; dtOptions: any = { scrollY: '590px', dom: '<"d-flex justify-content-between"B<"d-flex"<"mr-5"l>f>>rtip', @@ -61,14 +69,24 @@ export class TimeEntriesTableComponent implements OnInit, OnDestroy, AfterViewIn reportDataSource$: Observable>; rerenderTableSubscription: Subscription; - constructor(private store: Store) { + constructor(private store: Store, private actionsSubject$: ActionsSubject, private storeUser: Store ) { this.reportDataSource$ = this.store.pipe(select(getReportDataSource)); } + uploadUsers(): void { + this.storeUser.dispatch(new LoadUsers()); + this.actionsSubject$ + .pipe(filter((action: any) => action.type === UserActionTypes.LOAD_USERS_SUCCESS)) + .subscribe((action) => { + this.users = action.payload; + }); + } + ngOnInit(): void { this.rerenderTableSubscription = this.reportDataSource$.subscribe((ds) => { this.rerenderDataTable(); }); + this.uploadUsers(); } ngAfterViewInit(): void { @@ -83,11 +101,11 @@ export class TimeEntriesTableComponent implements OnInit, OnDestroy, AfterViewIn private rerenderDataTable(): void { if (this.dtElement && this.dtElement.dtInstance) { this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => { - dtInstance.destroy(); - this.dtTrigger.next(); + dtInstance.destroy(); + this.dtTrigger.next(); }); } else { - this.dtTrigger.next(); + this.dtTrigger.next(); } } @@ -100,10 +118,15 @@ export class TimeEntriesTableComponent implements OnInit, OnDestroy, AfterViewIn return regex.test(uri); } - bodyExportOptions(data, row, column, node){ + bodyExportOptions(data, row, column, node) { const dataFormated = data.toString().replace(/<((.|\n){0,200}?)>/gi, ''); const durationColumnIndex = 3; return column === durationColumnIndex ? moment.duration(dataFormated).asHours().toFixed(2) : dataFormated; } + + user(userId: string){ + this.selectedUserId.emit(userId); + } + } diff --git a/src/app/modules/reports/components/time-range-form/time-range-form.component.ts b/src/app/modules/reports/components/time-range-form/time-range-form.component.ts index 0c9c01e28..65268e012 100644 --- a/src/app/modules/reports/components/time-range-form/time-range-form.component.ts +++ b/src/app/modules/reports/components/time-range-form/time-range-form.component.ts @@ -1,6 +1,7 @@ import { ToastrService } from 'ngx-toastr'; import { formatDate } from '@angular/common'; -import { Component, OnInit } from '@angular/core'; +import { SimpleChanges } from '@angular/core'; +import { Component, Input, OnInit } from '@angular/core'; import { FormControl, FormGroup } from '@angular/forms'; import { DATE_FORMAT } from 'src/environments/environment'; import * as entryActions from '../../../time-clock/store/entry.actions'; @@ -13,6 +14,9 @@ import * as moment from 'moment'; templateUrl: './time-range-form.component.html', }) export class TimeRangeFormComponent implements OnInit { + + @Input() userId: string; + public reportForm: FormGroup; private startDate = new FormControl(''); private endDate = new FormControl(''); @@ -27,6 +31,12 @@ export class TimeRangeFormComponent implements OnInit { this.setInitialDataOnScreen(); } + OnChanges(changes: SimpleChanges){ + if (!changes.userId.firstChange){ + this.onSubmit(); + } + } + setInitialDataOnScreen() { this.reportForm.setValue({ startDate: formatDate(moment().startOf('week').format('l'), DATE_FORMAT, 'en'), @@ -43,7 +53,7 @@ export class TimeRangeFormComponent implements OnInit { this.store.dispatch(new entryActions.LoadEntriesByTimeRange({ start_date: moment(this.startDate.value).startOf('day'), end_date: moment(this.endDate.value).endOf('day'), - })); + }, this.userId)); } } } diff --git a/src/app/modules/reports/pages/reports.component.html b/src/app/modules/reports/pages/reports.component.html index 661823546..1b8fde066 100644 --- a/src/app/modules/reports/pages/reports.component.html +++ b/src/app/modules/reports/pages/reports.component.html @@ -1,3 +1,2 @@ - - - + + \ No newline at end of file diff --git a/src/app/modules/reports/pages/reports.component.ts b/src/app/modules/reports/pages/reports.component.ts index dbdc3e14c..0aa2a5a81 100644 --- a/src/app/modules/reports/pages/reports.component.ts +++ b/src/app/modules/reports/pages/reports.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { Component, Input } from '@angular/core'; @Component({ selector: 'app-reports', @@ -6,4 +6,10 @@ import { Component } from '@angular/core'; styleUrls: ['./reports.component.scss'] }) export class ReportsComponent { + + userId: string; + + user(userId: string){ + this.userId = userId; + } } diff --git a/src/app/modules/shared/components/search-user/search-user.component.html b/src/app/modules/shared/components/search-user/search-user.component.html new file mode 100644 index 000000000..05a214947 --- /dev/null +++ b/src/app/modules/shared/components/search-user/search-user.component.html @@ -0,0 +1,8 @@ +
+ + + + 👤{{user.name}}📨{{ user.email}} + + +
\ No newline at end of file diff --git a/src/app/modules/shared/components/search-user/search-user.component.scss b/src/app/modules/shared/components/search-user/search-user.component.scss new file mode 100644 index 000000000..fbae9a866 --- /dev/null +++ b/src/app/modules/shared/components/search-user/search-user.component.scss @@ -0,0 +1,11 @@ +@import '../../../../../styles/colors.scss'; + +label { + width: 225px; +} +.selectUser { + display: inline-block; + width: 350px; + padding: 0 12px 20px 12px; +} + diff --git a/src/app/modules/shared/components/search-user/search-user.component.ts b/src/app/modules/shared/components/search-user/search-user.component.ts new file mode 100644 index 000000000..9e274c189 --- /dev/null +++ b/src/app/modules/shared/components/search-user/search-user.component.ts @@ -0,0 +1,22 @@ +import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { UsersService } from 'src/app/modules/users/services/users.service'; +@Component({ + selector: 'app-search-user', + templateUrl: './search-user.component.html', + styleUrls: ['./search-user.component.scss'], +}) + +export class SearchUserComponent { + + readonly ALLOW_SELECT_MULTIPLE = true; + selectedUser: string; + + @Input() users: string[] = []; + + @Output() selectedUserId = new EventEmitter(); + + updateUser() { + this.selectedUserId.emit(this.selectedUser || '*'); + } +} + diff --git a/src/app/modules/users/components/users-list/users-list.component.ts b/src/app/modules/users/components/users-list/users-list.component.ts index e5d1d5f6b..2f88d9767 100644 --- a/src/app/modules/users/components/users-list/users-list.component.ts +++ b/src/app/modules/users/components/users-list/users-list.component.ts @@ -47,7 +47,7 @@ export class UsersListComponent implements OnInit, OnDestroy, AfterViewInit { }); this.switchGroupsSubscription = this.filterUserGroup().subscribe((action) => { - this.store.dispatch(new LoadUsers()); + this.store.dispatch(new LoadUsers()); }); } From 1d794332689c420eed5e3036eb1086f6cadf19ae Mon Sep 17 00:00:00 2001 From: David Cadena Date: Tue, 29 Mar 2022 22:55:58 -0500 Subject: [PATCH 02/14] feat: TT-593 added the ngOnChanges event --- .../time-range-form/time-range-form.component.ts | 8 ++++---- .../components/search-user/search-user.component.scss | 2 -- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/src/app/modules/reports/components/time-range-form/time-range-form.component.ts b/src/app/modules/reports/components/time-range-form/time-range-form.component.ts index 65268e012..596ccd733 100644 --- a/src/app/modules/reports/components/time-range-form/time-range-form.component.ts +++ b/src/app/modules/reports/components/time-range-form/time-range-form.component.ts @@ -1,7 +1,6 @@ import { ToastrService } from 'ngx-toastr'; import { formatDate } from '@angular/common'; -import { SimpleChanges } from '@angular/core'; -import { Component, Input, OnInit } from '@angular/core'; +import { Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core'; import { FormControl, FormGroup } from '@angular/forms'; import { DATE_FORMAT } from 'src/environments/environment'; import * as entryActions from '../../../time-clock/store/entry.actions'; @@ -13,7 +12,8 @@ import * as moment from 'moment'; selector: 'app-time-range-form', templateUrl: './time-range-form.component.html', }) -export class TimeRangeFormComponent implements OnInit { + +export class TimeRangeFormComponent implements OnInit, OnChanges { @Input() userId: string; @@ -31,7 +31,7 @@ export class TimeRangeFormComponent implements OnInit { this.setInitialDataOnScreen(); } - OnChanges(changes: SimpleChanges){ + ngOnChanges(changes: SimpleChanges): void{ if (!changes.userId.firstChange){ this.onSubmit(); } diff --git a/src/app/modules/shared/components/search-user/search-user.component.scss b/src/app/modules/shared/components/search-user/search-user.component.scss index fbae9a866..34890f2e0 100644 --- a/src/app/modules/shared/components/search-user/search-user.component.scss +++ b/src/app/modules/shared/components/search-user/search-user.component.scss @@ -1,5 +1,3 @@ -@import '../../../../../styles/colors.scss'; - label { width: 225px; } From bd407e28b0935b860e701c33931eb09d2ea740e0 Mon Sep 17 00:00:00 2001 From: wilc0519 Date: Tue, 29 Mar 2022 17:12:39 -0500 Subject: [PATCH 03/14] style: TT-593 added the length of the search button --- .../components/time-range-form/time-range-form.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/modules/reports/components/time-range-form/time-range-form.component.ts b/src/app/modules/reports/components/time-range-form/time-range-form.component.ts index 596ccd733..de427e32f 100644 --- a/src/app/modules/reports/components/time-range-form/time-range-form.component.ts +++ b/src/app/modules/reports/components/time-range-form/time-range-form.component.ts @@ -31,7 +31,7 @@ export class TimeRangeFormComponent implements OnInit, OnChanges { this.setInitialDataOnScreen(); } - ngOnChanges(changes: SimpleChanges): void{ + ngOnChanges(changes: SimpleChanges){ if (!changes.userId.firstChange){ this.onSubmit(); } From 4708862e2601faa962ddf9416d5e5dd33e0e682c Mon Sep 17 00:00:00 2001 From: wilc0519 Date: Wed, 30 Mar 2022 12:20:47 -0500 Subject: [PATCH 04/14] fix: TT-593 resolved keys --- .../components/time-range-form/time-range-form.component.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/modules/reports/components/time-range-form/time-range-form.component.ts b/src/app/modules/reports/components/time-range-form/time-range-form.component.ts index de427e32f..d327fde4b 100644 --- a/src/app/modules/reports/components/time-range-form/time-range-form.component.ts +++ b/src/app/modules/reports/components/time-range-form/time-range-form.component.ts @@ -1,6 +1,7 @@ import { ToastrService } from 'ngx-toastr'; import { formatDate } from '@angular/common'; -import { Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core'; +import { OnChanges, SimpleChanges } from '@angular/core'; +import { Component, Input, OnInit } from '@angular/core'; import { FormControl, FormGroup } from '@angular/forms'; import { DATE_FORMAT } from 'src/environments/environment'; import * as entryActions from '../../../time-clock/store/entry.actions'; @@ -12,7 +13,6 @@ import * as moment from 'moment'; selector: 'app-time-range-form', templateUrl: './time-range-form.component.html', }) - export class TimeRangeFormComponent implements OnInit, OnChanges { @Input() userId: string; From 7e0c9dbff67adbbea34b69db4e2249f27c415af1 Mon Sep 17 00:00:00 2001 From: wilc0519 Date: Wed, 30 Mar 2022 13:27:50 -0500 Subject: [PATCH 05/14] fix: TT-593 added the time-tracker-ui CD-prod file --- .../time-entries-table/time-entries-table.component.ts | 4 +--- .../components/time-range-form/time-range-form.component.ts | 3 +-- src/app/modules/reports/pages/reports.component.ts | 2 +- .../shared/components/search-user/search-user.component.ts | 2 +- 4 files changed, 4 insertions(+), 7 deletions(-) diff --git a/src/app/modules/reports/components/time-entries-table/time-entries-table.component.ts b/src/app/modules/reports/components/time-entries-table/time-entries-table.component.ts index ce5c761ed..d7003a2ac 100644 --- a/src/app/modules/reports/components/time-entries-table/time-entries-table.component.ts +++ b/src/app/modules/reports/components/time-entries-table/time-entries-table.component.ts @@ -1,7 +1,6 @@ import { formatDate } from '@angular/common'; import { AfterViewInit, Component, EventEmitter, OnDestroy, Output, OnInit, ViewChild } from '@angular/core'; -import { DomSanitizer } from '@angular/platform-browser'; -import { select, Store } from '@ngrx/store'; +import { select, Store, ActionsSubject } from '@ngrx/store'; import { DataTableDirective } from 'angular-datatables'; import * as moment from 'moment'; import { Observable, Subject, Subscription } from 'rxjs'; @@ -10,7 +9,6 @@ import { Entry } from 'src/app/modules/shared/models'; import { DataSource } from 'src/app/modules/shared/models/data-source.model'; import { EntryState } from '../../../time-clock/store/entry.reducer'; import { getReportDataSource } from '../../../time-clock/store/entry.selectors'; -import { ActionsSubject } from '@ngrx/store'; import { User } from 'src/app/modules/users/models/users'; import { LoadUsers, UserActionTypes } from 'src/app/modules/users/store/user.actions'; diff --git a/src/app/modules/reports/components/time-range-form/time-range-form.component.ts b/src/app/modules/reports/components/time-range-form/time-range-form.component.ts index d327fde4b..eea7f3a65 100644 --- a/src/app/modules/reports/components/time-range-form/time-range-form.component.ts +++ b/src/app/modules/reports/components/time-range-form/time-range-form.component.ts @@ -1,7 +1,6 @@ import { ToastrService } from 'ngx-toastr'; import { formatDate } from '@angular/common'; -import { OnChanges, SimpleChanges } from '@angular/core'; -import { Component, Input, OnInit } from '@angular/core'; +import { OnChanges, SimpleChanges, Component, Input, OnInit } from '@angular/core'; import { FormControl, FormGroup } from '@angular/forms'; import { DATE_FORMAT } from 'src/environments/environment'; import * as entryActions from '../../../time-clock/store/entry.actions'; diff --git a/src/app/modules/reports/pages/reports.component.ts b/src/app/modules/reports/pages/reports.component.ts index 0aa2a5a81..6b02adef8 100644 --- a/src/app/modules/reports/pages/reports.component.ts +++ b/src/app/modules/reports/pages/reports.component.ts @@ -1,4 +1,4 @@ -import { Component, Input } from '@angular/core'; +import { Component } from '@angular/core'; @Component({ selector: 'app-reports', diff --git a/src/app/modules/shared/components/search-user/search-user.component.ts b/src/app/modules/shared/components/search-user/search-user.component.ts index 9e274c189..4ed732f3c 100644 --- a/src/app/modules/shared/components/search-user/search-user.component.ts +++ b/src/app/modules/shared/components/search-user/search-user.component.ts @@ -1,5 +1,5 @@ import { Component, EventEmitter, Input, Output } from '@angular/core'; -import { UsersService } from 'src/app/modules/users/services/users.service'; + @Component({ selector: 'app-search-user', templateUrl: './search-user.component.html', From 832bf7ac11d7e2ac55f183e21bd6642f7b81105b Mon Sep 17 00:00:00 2001 From: wilc0519 Date: Wed, 30 Mar 2022 13:27:50 -0500 Subject: [PATCH 06/14] fix: TT-593 added the time-tracker-ui-cd-prod file --- .../time-entries-table/time-entries-table.component.ts | 4 +--- .../components/time-range-form/time-range-form.component.ts | 3 +-- src/app/modules/reports/pages/reports.component.ts | 2 +- .../shared/components/search-user/search-user.component.scss | 2 +- .../shared/components/search-user/search-user.component.ts | 2 +- 5 files changed, 5 insertions(+), 8 deletions(-) diff --git a/src/app/modules/reports/components/time-entries-table/time-entries-table.component.ts b/src/app/modules/reports/components/time-entries-table/time-entries-table.component.ts index ce5c761ed..d7003a2ac 100644 --- a/src/app/modules/reports/components/time-entries-table/time-entries-table.component.ts +++ b/src/app/modules/reports/components/time-entries-table/time-entries-table.component.ts @@ -1,7 +1,6 @@ import { formatDate } from '@angular/common'; import { AfterViewInit, Component, EventEmitter, OnDestroy, Output, OnInit, ViewChild } from '@angular/core'; -import { DomSanitizer } from '@angular/platform-browser'; -import { select, Store } from '@ngrx/store'; +import { select, Store, ActionsSubject } from '@ngrx/store'; import { DataTableDirective } from 'angular-datatables'; import * as moment from 'moment'; import { Observable, Subject, Subscription } from 'rxjs'; @@ -10,7 +9,6 @@ import { Entry } from 'src/app/modules/shared/models'; import { DataSource } from 'src/app/modules/shared/models/data-source.model'; import { EntryState } from '../../../time-clock/store/entry.reducer'; import { getReportDataSource } from '../../../time-clock/store/entry.selectors'; -import { ActionsSubject } from '@ngrx/store'; import { User } from 'src/app/modules/users/models/users'; import { LoadUsers, UserActionTypes } from 'src/app/modules/users/store/user.actions'; diff --git a/src/app/modules/reports/components/time-range-form/time-range-form.component.ts b/src/app/modules/reports/components/time-range-form/time-range-form.component.ts index d327fde4b..eea7f3a65 100644 --- a/src/app/modules/reports/components/time-range-form/time-range-form.component.ts +++ b/src/app/modules/reports/components/time-range-form/time-range-form.component.ts @@ -1,7 +1,6 @@ import { ToastrService } from 'ngx-toastr'; import { formatDate } from '@angular/common'; -import { OnChanges, SimpleChanges } from '@angular/core'; -import { Component, Input, OnInit } from '@angular/core'; +import { OnChanges, SimpleChanges, Component, Input, OnInit } from '@angular/core'; import { FormControl, FormGroup } from '@angular/forms'; import { DATE_FORMAT } from 'src/environments/environment'; import * as entryActions from '../../../time-clock/store/entry.actions'; diff --git a/src/app/modules/reports/pages/reports.component.ts b/src/app/modules/reports/pages/reports.component.ts index 0aa2a5a81..6b02adef8 100644 --- a/src/app/modules/reports/pages/reports.component.ts +++ b/src/app/modules/reports/pages/reports.component.ts @@ -1,4 +1,4 @@ -import { Component, Input } from '@angular/core'; +import { Component } from '@angular/core'; @Component({ selector: 'app-reports', diff --git a/src/app/modules/shared/components/search-user/search-user.component.scss b/src/app/modules/shared/components/search-user/search-user.component.scss index 34890f2e0..6d3b6756d 100644 --- a/src/app/modules/shared/components/search-user/search-user.component.scss +++ b/src/app/modules/shared/components/search-user/search-user.component.scss @@ -4,6 +4,6 @@ label { .selectUser { display: inline-block; width: 350px; - padding: 0 12px 20px 12px; + padding: 0 12px 15px 12px; } diff --git a/src/app/modules/shared/components/search-user/search-user.component.ts b/src/app/modules/shared/components/search-user/search-user.component.ts index 9e274c189..4ed732f3c 100644 --- a/src/app/modules/shared/components/search-user/search-user.component.ts +++ b/src/app/modules/shared/components/search-user/search-user.component.ts @@ -1,5 +1,5 @@ import { Component, EventEmitter, Input, Output } from '@angular/core'; -import { UsersService } from 'src/app/modules/users/services/users.service'; + @Component({ selector: 'app-search-user', templateUrl: './search-user.component.html', From dede01bcbeb6b043953c3a7eddbe87f70f85a3e7 Mon Sep 17 00:00:00 2001 From: David Cadena Date: Wed, 6 Apr 2022 12:09:44 -0500 Subject: [PATCH 07/14] fix: TT-593 fixed the CI-time-tracker-ui.yml file --- .github/workflows/CI-time-tracker-ui.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/CI-time-tracker-ui.yml b/.github/workflows/CI-time-tracker-ui.yml index da410589a..6f55613b9 100644 --- a/.github/workflows/CI-time-tracker-ui.yml +++ b/.github/workflows/CI-time-tracker-ui.yml @@ -52,7 +52,7 @@ jobs: sh ./scripts/populate-keys.sh - name: Running tests - run: npm run ci-test --if-present + run: npm run test - name: Generate coverage report env: From a58b78ae20dbfeb592e9cf27e29c411d9cbce212 Mon Sep 17 00:00:00 2001 From: wilc0519 Date: Wed, 20 Apr 2022 18:04:54 -0500 Subject: [PATCH 08/14] fix: TT-593 refactor --- .../time-entries-table.component.html | 6 +-- .../time-entries-table.component.scss | 38 ++++++++++++++++++- 2 files changed, 40 insertions(+), 4 deletions(-) diff --git a/src/app/modules/reports/components/time-entries-table/time-entries-table.component.html b/src/app/modules/reports/components/time-entries-table/time-entries-table.component.html index 8a9f6e06b..204c62a5b 100644 --- a/src/app/modules/reports/components/time-entries-table/time-entries-table.component.html +++ b/src/app/modules/reports/components/time-entries-table/time-entries-table.component.html @@ -26,7 +26,7 @@ - + - - +
{{ entry.id }} {{ entry.owner_email }} @@ -49,8 +49,8 @@ {{ entry.description }} + {{ entry.description }}
{{ technology }} diff --git a/src/app/modules/reports/components/time-entries-table/time-entries-table.component.scss b/src/app/modules/reports/components/time-entries-table/time-entries-table.component.scss index 0708ffecd..af4ed403c 100644 --- a/src/app/modules/reports/components/time-entries-table/time-entries-table.component.scss +++ b/src/app/modules/reports/components/time-entries-table/time-entries-table.component.scss @@ -2,9 +2,14 @@ .col{ white-space: nowrap; overflow: hidden; - text-overflow: ellipsis; font-size: small; } + +.col-height { + min-height: auto; + max-height: 8rem; +} + .x-sm-col{ width: 5em; max-width: 7em; @@ -23,6 +28,37 @@ width: 12em; overflow: hidden; white-space: normal; + border: none; +} + +@mixin scroll-style { + width: 40em; + overflow: hidden; + white-space: normal; + display: -webkit-box; + -webkit-box-orient: vertical; + margin: 8px 10px 0px 10px; + border: none; + overflow-y: auto; + overflow-wrap: break-word; + + &::-webkit-scrollbar { + width: 0.5em; + } + + &::-webkit-scrollbar-track { + box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); + } + + &::-webkit-scrollbar-thumb { + background-color: #7a8486; + outline: 1px solid #7a8486; + border-radius: 0.5em; + } +} + +.lg-scroll { + @include scroll-style; } .hidden-col{ display: none; From 6e55792b14cb8667124ad6094a52699388c0f8b5 Mon Sep 17 00:00:00 2001 From: wilc0519 Date: Wed, 20 Apr 2022 18:13:10 -0500 Subject: [PATCH 09/14] fix: TT-593 refactor --- .github/workflows/CI-time-tracker-ui.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/CI-time-tracker-ui.yml b/.github/workflows/CI-time-tracker-ui.yml index bea5f9de7..f63625e00 100644 --- a/.github/workflows/CI-time-tracker-ui.yml +++ b/.github/workflows/CI-time-tracker-ui.yml @@ -52,7 +52,7 @@ jobs: sh ./scripts/populate-var-file.sh - name: Running tests - run: npm run test + run: npm run ci-test --if-present - name: Generate coverage report env: From 91f5114fd55a93b70f57db0053b9957640054043 Mon Sep 17 00:00:00 2001 From: wilc0519 Date: Fri, 22 Apr 2022 09:12:57 -0500 Subject: [PATCH 10/14] fix: TT-593 unit test --- .../time-entries-table.component.spec.ts | 8 ++++++++ .../time-range-form/time-range.component.spec.ts | 10 ++++++++++ .../modules/reports/pages/reports.component.spec.ts | 6 ++++++ 3 files changed, 24 insertions(+) diff --git a/src/app/modules/reports/components/time-entries-table/time-entries-table.component.spec.ts b/src/app/modules/reports/components/time-entries-table/time-entries-table.component.spec.ts index 4f7c460f1..a6f747e5c 100644 --- a/src/app/modules/reports/components/time-entries-table/time-entries-table.component.spec.ts +++ b/src/app/modules/reports/components/time-entries-table/time-entries-table.component.spec.ts @@ -147,6 +147,14 @@ describe('Reports Page', () => { expect(component.dtElement.dtInstance.then).toHaveBeenCalled(); }); + it(`When the user method is called, the emit method is called`, () => { + const userId = 'abc123'; + spyOn(component.selectedUserId,'emit'); + component.user(userId); + expect(component.selectedUserId.emit).toHaveBeenCalled(); + + }); + afterEach(() => { fixture.destroy(); }); diff --git a/src/app/modules/reports/components/time-range-form/time-range.component.spec.ts b/src/app/modules/reports/components/time-range-form/time-range.component.spec.ts index 8e78d3a00..d08af7eea 100644 --- a/src/app/modules/reports/components/time-range-form/time-range.component.spec.ts +++ b/src/app/modules/reports/components/time-range-form/time-range.component.spec.ts @@ -7,6 +7,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { InputDateComponent } from '../../../shared/components/input-date/input-date.component'; import * as entryActions from '../../../time-clock/store/entry.actions'; import * as moment from 'moment'; +import { SimpleChange } from '@angular/core'; describe('Reports Page', () => { describe('TimeRangeFormComponent', () => { @@ -114,6 +115,15 @@ describe('Reports Page', () => { expect(component.onSubmit).toHaveBeenCalled(); }); + it('When the ngOnChanges method is called, the onSubmit method is called', () =>{ + const userId = 'abcd'; + spyOn(component, 'onSubmit'); + + component.ngOnChanges({userId: new SimpleChange(null, userId, false)}); + + expect(component.onSubmit).toHaveBeenCalled(); + }); + afterEach(() => { fixture.destroy(); }); diff --git a/src/app/modules/reports/pages/reports.component.spec.ts b/src/app/modules/reports/pages/reports.component.spec.ts index 4a131f56e..b749a03f3 100644 --- a/src/app/modules/reports/pages/reports.component.spec.ts +++ b/src/app/modules/reports/pages/reports.component.spec.ts @@ -32,4 +32,10 @@ describe('ReportsComponent', () => { expect(reportForm).toBeTruthy(); expect(reportDataTable).toBeTruthy(); })); + + it(`Given the id of the user 'abc123' this is assigned to the variable userId`, () => { + const userId = 'abc123'; + component.user(userId); + expect(component.userId).toEqual('abc123'); + }); }); From d8bdea8b891b8cab92c3f24f1f8068a8d2216942 Mon Sep 17 00:00:00 2001 From: wilc0519 Date: Fri, 22 Apr 2022 09:46:53 -0500 Subject: [PATCH 11/14] fix: TT-593 refactor unit tets --- .../time-entries-table/time-entries-table.component.spec.ts | 2 +- .../components/time-range-form/time-range.component.spec.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/modules/reports/components/time-entries-table/time-entries-table.component.spec.ts b/src/app/modules/reports/components/time-entries-table/time-entries-table.component.spec.ts index a6f747e5c..41d0fb1ae 100644 --- a/src/app/modules/reports/components/time-entries-table/time-entries-table.component.spec.ts +++ b/src/app/modules/reports/components/time-entries-table/time-entries-table.component.spec.ts @@ -149,7 +149,7 @@ describe('Reports Page', () => { it(`When the user method is called, the emit method is called`, () => { const userId = 'abc123'; - spyOn(component.selectedUserId,'emit'); + spyOn(component.selectedUserId, 'emit'); component.user(userId); expect(component.selectedUserId.emit).toHaveBeenCalled(); diff --git a/src/app/modules/reports/components/time-range-form/time-range.component.spec.ts b/src/app/modules/reports/components/time-range-form/time-range.component.spec.ts index d08af7eea..a8d6bf66f 100644 --- a/src/app/modules/reports/components/time-range-form/time-range.component.spec.ts +++ b/src/app/modules/reports/components/time-range-form/time-range.component.spec.ts @@ -115,7 +115,7 @@ describe('Reports Page', () => { expect(component.onSubmit).toHaveBeenCalled(); }); - it('When the ngOnChanges method is called, the onSubmit method is called', () =>{ + it('When the ngOnChanges method is called, the onSubmit method is called', () => { const userId = 'abcd'; spyOn(component, 'onSubmit'); From 1d5656afb89055c4a1547d0e2de07e155eeca96b Mon Sep 17 00:00:00 2001 From: wilc0519 Date: Wed, 27 Apr 2022 18:04:11 -0500 Subject: [PATCH 12/14] fix: TT-593 unit test coverage --- .../time-entries-table.component.spec.ts | 12 +++++------- .../parse-date-time-offset.spec.ts | 16 ++++++++-------- .../parse-date-time-offset.ts | 6 +++--- .../time-entries/pages/time-entries.component.ts | 2 +- 4 files changed, 17 insertions(+), 19 deletions(-) diff --git a/src/app/modules/reports/components/time-entries-table/time-entries-table.component.spec.ts b/src/app/modules/reports/components/time-entries-table/time-entries-table.component.spec.ts index 41d0fb1ae..ca24e49d3 100644 --- a/src/app/modules/reports/components/time-entries-table/time-entries-table.component.spec.ts +++ b/src/app/modules/reports/components/time-entries-table/time-entries-table.component.spec.ts @@ -1,6 +1,7 @@ import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing'; import { MockStore, provideMockStore } from '@ngrx/store/testing'; -import { DataTableDirective } from 'angular-datatables'; +import { DataTablesModule } from 'angular-datatables'; +import { NgxPaginationModule } from 'ngx-pagination'; import { Entry } from 'src/app/modules/shared/models'; import { SubstractDatePipe } from 'src/app/modules/shared/pipes/substract-date/substract-date.pipe'; import { getReportDataSource } from 'src/app/modules/time-clock/store/entry.selectors'; @@ -49,7 +50,7 @@ describe('Reports Page', () => { beforeEach( waitForAsync(() => { TestBed.configureTestingModule({ - imports: [], + imports: [NgxPaginationModule, DataTablesModule], declarations: [TimeEntriesTableComponent, SubstractDatePipe], providers: [provideMockStore({ initialState: state })], }).compileComponents(); @@ -85,7 +86,9 @@ describe('Reports Page', () => { }); it('after the component is initialized it should initialize the table', () => { + component.dtElement = null; spyOn(component.dtTrigger, 'next'); + component.ngAfterViewInit(); expect(component.dtTrigger.next).toHaveBeenCalled(); @@ -137,11 +140,6 @@ describe('Reports Page', () => { it('when the rerenderDataTable method is called and dtElement and dtInstance are defined, the destroy and next methods are called ', () => { - component.dtElement = { - dtInstance: { - then : (dtInstance: DataTables.Api) => { dtInstance.destroy(); } - } - } as unknown as DataTableDirective; spyOn(component.dtElement.dtInstance, 'then'); component.ngAfterViewInit(); expect(component.dtElement.dtInstance.then).toHaveBeenCalled(); diff --git a/src/app/modules/shared/formatters/parse-date-time-offset/parse-date-time-offset.spec.ts b/src/app/modules/shared/formatters/parse-date-time-offset/parse-date-time-offset.spec.ts index 93c567e64..d5c6ebb70 100644 --- a/src/app/modules/shared/formatters/parse-date-time-offset/parse-date-time-offset.spec.ts +++ b/src/app/modules/shared/formatters/parse-date-time-offset/parse-date-time-offset.spec.ts @@ -3,21 +3,21 @@ import { ParseDateTimeOffset } from './parse-date-time-offset'; describe('ParseDateToUtcComponent', () => { it('returns converted date when his offset is 300', () => { - let parseTimeOffset = new ParseDateTimeOffset(); + const parseTimeOffset = new ParseDateTimeOffset(); const date = '2022-03-30T13:00:00Z'; - const timezone_offset = 300; - const dateOffset:string = '08:00'; + const timezoneOffset = 300; + const dateOffset = '08:00'; - expect(parseTimeOffset.parseDateTimeOffset(date, timezone_offset)).toEqual(dateOffset); + expect(parseTimeOffset.parseDateTimeOffset(date, timezoneOffset)).toEqual(dateOffset); }); it('returns converted date when his offset is 420', () => { - let parseTimeOffset = new ParseDateTimeOffset(); + const parseTimeOffset = new ParseDateTimeOffset(); const date = '2022-03-30T16:30:00Z'; - const timezone_offset = 420; - const dateOffset:string = '09:30'; + const timezoneOffset = 420; + const dateOffset = '09:30'; - expect(parseTimeOffset.parseDateTimeOffset(date, timezone_offset)).toEqual(dateOffset); + expect(parseTimeOffset.parseDateTimeOffset(date, timezoneOffset)).toEqual(dateOffset); }); }); diff --git a/src/app/modules/shared/formatters/parse-date-time-offset/parse-date-time-offset.ts b/src/app/modules/shared/formatters/parse-date-time-offset/parse-date-time-offset.ts index b0f090a68..e94282bcd 100644 --- a/src/app/modules/shared/formatters/parse-date-time-offset/parse-date-time-offset.ts +++ b/src/app/modules/shared/formatters/parse-date-time-offset/parse-date-time-offset.ts @@ -1,8 +1,8 @@ import * as moment from 'moment'; export class ParseDateTimeOffset { - - parseDateTimeOffset(date:string, offset): string{ - return moment.utc(date).utcOffset(-1*offset).format("HH:mm"); + + parseDateTimeOffset(date: string, offset): string { + return moment.utc(date).utcOffset(-1 * offset).format('HH:mm'); } } diff --git a/src/app/modules/time-entries/pages/time-entries.component.ts b/src/app/modules/time-entries/pages/time-entries.component.ts index 7c6e9d993..6cdb0607c 100644 --- a/src/app/modules/time-entries/pages/time-entries.component.ts +++ b/src/app/modules/time-entries/pages/time-entries.component.ts @@ -53,7 +53,7 @@ export class TimeEntriesComponent implements OnInit, OnDestroy, AfterViewInit { isActiveEntryOverlapping = false; calendarView: CalendarView = CalendarView.Month; actualDate: Date; - dateTimeOffset : ParseDateTimeOffset; + dateTimeOffset: ParseDateTimeOffset; constructor( private store: Store, private toastrService: ToastrService, From b9ea8e908901f236a1baff5bce95d1c392c21b4b Mon Sep 17 00:00:00 2001 From: wilc0519 Date: Wed, 27 Apr 2022 19:44:47 -0500 Subject: [PATCH 13/14] fix: TT-593 coverage time-entries-table --- .../time-entries-table.component.spec.ts | 20 +++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/src/app/modules/reports/components/time-entries-table/time-entries-table.component.spec.ts b/src/app/modules/reports/components/time-entries-table/time-entries-table.component.spec.ts index ca24e49d3..796f3f642 100644 --- a/src/app/modules/reports/components/time-entries-table/time-entries-table.component.spec.ts +++ b/src/app/modules/reports/components/time-entries-table/time-entries-table.component.spec.ts @@ -7,6 +7,7 @@ import { SubstractDatePipe } from 'src/app/modules/shared/pipes/substract-date/s import { getReportDataSource } from 'src/app/modules/time-clock/store/entry.selectors'; import { EntryState } from '../../../time-clock/store/entry.reducer'; import { TimeEntriesTableComponent } from './time-entries-table.component'; +import { ActionsSubject } from '@ngrx/store'; describe('Reports Page', () => { describe('TimeEntriesTableComponent', () => { @@ -47,25 +48,28 @@ describe('Reports Page', () => { }, }; + const actionSub: ActionsSubject = new ActionsSubject(); + beforeEach( waitForAsync(() => { TestBed.configureTestingModule({ imports: [NgxPaginationModule, DataTablesModule], declarations: [TimeEntriesTableComponent, SubstractDatePipe], - providers: [provideMockStore({ initialState: state })], + providers: [provideMockStore({ initialState: state }), { provide: ActionsSubject, useValue: actionSub }], }).compileComponents(); - store = TestBed.inject(MockStore); + }) ); beforeEach( - waitForAsync(() => { + () => { fixture = TestBed.createComponent(TimeEntriesTableComponent); component = fixture.componentInstance; + store = TestBed.inject(MockStore); store.setState(state); getReportDataSourceSelectorMock = store.overrideSelector(getReportDataSource, state.reportDataSource); fixture.detectChanges(); - }) + } ); beforeEach(() => { @@ -140,9 +144,13 @@ describe('Reports Page', () => { it('when the rerenderDataTable method is called and dtElement and dtInstance are defined, the destroy and next methods are called ', () => { - spyOn(component.dtElement.dtInstance, 'then'); + spyOn(component.dtTrigger, 'next'); + component.ngAfterViewInit(); - expect(component.dtElement.dtInstance.then).toHaveBeenCalled(); + + component.dtElement.dtInstance.then( (dtInstance) => { + expect(component.dtTrigger.next).toHaveBeenCalled(); + }); }); it(`When the user method is called, the emit method is called`, () => { From 17208d29f708e958d75fa7cb8c6b05025e2a1ecb Mon Sep 17 00:00:00 2001 From: wilc0519 Date: Wed, 27 Apr 2022 19:58:59 -0500 Subject: [PATCH 14/14] fix: TT-593 coverage time-entries-table --- .../time-entries-table.component.spec.ts | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/app/modules/reports/components/time-entries-table/time-entries-table.component.spec.ts b/src/app/modules/reports/components/time-entries-table/time-entries-table.component.spec.ts index 796f3f642..1263c4706 100644 --- a/src/app/modules/reports/components/time-entries-table/time-entries-table.component.spec.ts +++ b/src/app/modules/reports/components/time-entries-table/time-entries-table.component.spec.ts @@ -8,6 +8,7 @@ import { getReportDataSource } from 'src/app/modules/time-clock/store/entry.sele import { EntryState } from '../../../time-clock/store/entry.reducer'; import { TimeEntriesTableComponent } from './time-entries-table.component'; import { ActionsSubject } from '@ngrx/store'; +import { UserActionTypes } from 'src/app/modules/users/store'; describe('Reports Page', () => { describe('TimeEntriesTableComponent', () => { @@ -161,6 +162,20 @@ describe('Reports Page', () => { }); + it('Should populate the users with the payload from the action executed', () => { + const actionSubject = TestBed.inject(ActionsSubject) as ActionsSubject; + const usersArray = [] + const action = { + type: UserActionTypes.LOAD_USERS_SUCCESS, + payload: usersArray + }; + + actionSubject.next(action); + + + expect(component.users).toEqual(usersArray); + }); + afterEach(() => { fixture.destroy(); });