feat: #571 technology report

Author: scastillo-jp

src/app/app-routing.module.ts

@@ -11,6 +11,7 @@ import { HomeComponent } from './modules/home/home.component';
 import { LoginComponent } from './modules/login/login.component';
 import { CustomerComponent } from './modules/customer-management/pages/customer.component';
 import { UsersComponent } from './modules/users/pages/users.component';
+import { TechnologyReportComponent } from './modules/technology-report/pages/technology-report.component';
 
 const routes: Routes = [
   {
@@ -24,6 +25,7 @@ const routes: Routes = [
       { path: 'activities-management', component: ActivitiesManagementComponent },
       { path: 'customers-management', canActivate: [AdminGuard], component: CustomerComponent },
       { path: 'users', canActivate: [AdminGuard], component: UsersComponent },
+      { path: 'technology-report', canActivate: [AdminGuard], component: TechnologyReportComponent},
       { path: '', pathMatch: 'full', redirectTo: 'time-clock' },
     ],
   },

src/app/app.module.ts

@@ -73,6 +73,9 @@ import { LoadingBarComponent } from './modules/shared/components/loading-bar/loa
 import { UsersComponent } from './modules/users/pages/users.component';
 import { UsersListComponent } from './modules/users/components/users-list/users-list.component';
 import {NgxMaterialTimepickerModule} from 'ngx-material-timepicker';
+// tslint:disable-next-line: max-line-length
+import { TechnologyReportTableComponent } from './modules/technology-report/components/technology-report-table/technology-report-table.component';
+import { TechnologyReportComponent } from './modules/technology-report/pages/technology-report.component';
 
 const maskConfig: Partial<IConfig> = {
   validation: false,
@@ -122,7 +125,9 @@ const maskConfig: Partial<IConfig> = {
     DialogComponent,
     LoadingBarComponent,
     UsersComponent,
-    UsersListComponent
+    UsersListComponent,
+    TechnologyReportComponent,
+    TechnologyReportTableComponent
   ],
   imports: [
     NgxMaskModule.forRoot(maskConfig),

src/app/modules/shared/components/sidebar/sidebar.component.ts

@@ -46,6 +46,7 @@ export class SidebarComponent implements OnInit {
         {route: '/activities-management', icon: 'fas fa-file-alt', text: 'Activities', active: false},
         {route: '/customers-management', icon: 'fas fa-user', text: 'Customers', active: false},
         {route: '/users', icon: 'fas fa-user', text: 'Users', active: false},
+        {route: '/technology-report', icon: 'fas fa-user', text: 'Technology Report', active: false},
       ];
     } else {
       this.itemsSidebar = [

src/app/modules/technology-report/components/.gitkeep

@@ -0,0 +1,34 @@
+<div class="row mt-5">
+  <div class="col">
+    <table
+      class="table table-sm table-striped"
+      datatable
+      [dtTrigger]="dtTrigger"
+      [dtOptions]="dtOptions"
+      *ngIf="(reportDataSource$ | async) as dataSource"
+    >
+      <thead class="thead-blue">
+        <tr class="d-flex">
+          <th class="col md-col">User email</th>
+          <th class="col lg-col">Technology</th>
+          <th class="col x-sm-col" title="Duration (hours)">Time spend</th>
+        </tr>
+      </thead>
+      <app-loading-bar
+        *ngIf="dataSource.isLoading"
+      ></app-loading-bar>
+      <tbody *ngIf="!dataSource.isLoading">
+        <tr
+          class="d-flex"
+          *ngFor="let entry of dataSource.data"
+        >
+          <td class="col md-col">{{ entry.owner_email }}</td>
+          <td class="col lg-col">{{ entry.technologies }}</td>
+          <td class="col sm-col">
+            {{ entry.start_date | date: 'MM/dd/yyyy' }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>

src/app/modules/technology-report/components/technology-report-table/technology-report-table.component.html

@@ -0,0 +1,28 @@
+.col{
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: small;
+}
+.x-sm-col{
+  width: 5em;
+  max-width: 7em;
+}
+
+.sm-col{
+  width: 6em;
+  max-width: 8em;
+}
+
+.md-col{
+  width: 9em;
+}
+
+.lg-col{
+  width: 12em;
+  overflow: hidden;
+  white-space: normal;
+}
+.hidden-col{
+  display: none;
+}

src/app/modules/technology-report/components/technology-report-table/technology-report-table.component.scss

@@ -0,0 +1,83 @@
+// import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+// import { MockStore, provideMockStore } from '@ngrx/store/testing';
+// 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';
+// import { EntryState } from '../../../time-clock/store/entry.reducer';
+// import { TimeEntriesTableComponent } from './time-entries-table.component';
+
+// describe('Reports Page', () => {
+//   describe('TimeEntriesTableComponent', () => {
+//     let component: TimeEntriesTableComponent;
+//     let fixture: ComponentFixture<TimeEntriesTableComponent>;
+//     let store: MockStore<EntryState>;
+//     let getReportDataSourceSelectorMock;
+//     const timeEntry: Entry = {
+//       id: '123',
+//       start_date: new Date(),
+//       end_date: new Date(),
+//       activity_id: '123',
+//       technologies: ['react', 'redux'],
+//       description: 'any comment',
+//       uri: 'custom uri',
+//       project_id: '123',
+//       project_name: 'Time-Tracker'
+//     };
+
+//     const state: EntryState = {
+//       active: timeEntry,
+//       isLoading: false,
+//       message: '',
+//       createError: false,
+//       updateError: false,
+//       timeEntriesSummary: null,
+//       timeEntriesDataSource: {
+//         data: [timeEntry],
+//         isLoading: false
+//       },
+//       reportDataSource: {
+//         data: [timeEntry],
+//         isLoading: false
+//       }
+//     };
+
+//     beforeEach(async(() => {
+//       TestBed.configureTestingModule({
+//         imports: [],
+//         declarations: [TimeEntriesTableComponent, SubstractDatePipe],
+//         providers: [provideMockStore({ initialState: state })],
+//       }).compileComponents();
+//       store = TestBed.inject(MockStore);
+
+//     }));
+
+//     beforeEach(async(() => {
+//       fixture = TestBed.createComponent(TimeEntriesTableComponent);
+//       component = fixture.componentInstance;
+//       store.setState(state);
+//       getReportDataSourceSelectorMock = store.overrideSelector(getReportDataSource, state.reportDataSource);
+//       fixture.detectChanges();
+//     }));
+
+//     it('component should be created', async () => {
+//       expect(component).toBeTruthy();
+//     });
+
+//     it('on success load time entries, the report should be populated', () => {
+//       component.reportDataSource$.subscribe(ds => {
+//         expect(ds.data).toEqual(state.reportDataSource.data);
+//       });
+//     });
+
+//     it('after the component is initialized it should initialize the table', () => {
+//       spyOn(component.dtTrigger, 'next');
+//       component.ngAfterViewInit();
+
+//       expect(component.dtTrigger.next).toHaveBeenCalled();
+//     });
+
+//     afterEach(() => {
+//       fixture.destroy();
+//     });
+//   });
+// });

src/app/modules/technology-report/components/technology-report-table/technology-report-table.component.spec.ts

@@ -0,0 +1,94 @@
+import { formatDate } from '@angular/common';
+import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { select, Store } from '@ngrx/store';
+import { DataTableDirective } from 'angular-datatables';
+import * as moment from 'moment';
+import { Observable, Subject } from 'rxjs';
+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';
+
+@Component({
+  selector: 'app-technology-report-table',
+  templateUrl: './technology-report-table.component.html',
+  styleUrls: ['./technology-report-table.component.scss']
+})
+export class TechnologyReportTableComponent implements OnInit, OnDestroy, AfterViewInit {
+  dtOptions: any = {
+    scrollY: '600px',
+    paging: false,
+    dom: 'Bfrtip',
+    buttons: [
+      {
+        extend: 'colvis',
+        columns: ':not(.hidden-col)',
+
+      },
+      'print',
+      {
+        extend: 'excel',
+        exportOptions: {
+          format: {
+            body: (data, row, column, node) => {
+              return column === 3 ?
+                moment.duration(data).asHours().toFixed(4).slice(0, -1) :
+                data;
+            }
+          }
+        },
+        text: 'Excel',
+        filename: `time-entries-${formatDate(new Date(), 'MM_dd_yyyy-HH_mm', 'en')}`
+      },
+      {
+        extend: 'csv',
+        exportOptions: {
+          format: {
+            body: (data, row, column, node) => {
+              return column === 3 ?
+                moment.duration(data).asHours().toFixed(4).slice(0, -1) :
+                data;
+            }
+          }
+        },
+        text: 'CSV',
+        filename: `time-entries-${formatDate(new Date(), 'MM_dd_yyyy-HH_mm', 'en')}`
+      }
+    ]
+  };
+  dtTrigger: Subject<any> = new Subject();
+  @ViewChild(DataTableDirective, { static: false })
+  dtElement: DataTableDirective;
+  isLoading$: Observable<boolean>;
+  reportDataSource$: Observable<DataSource<Entry>>;
+
+  constructor(private store: Store<EntryState>) {
+    this.reportDataSource$ = this.store.pipe(select(getReportDataSource));
+  }
+
+  ngOnInit(): void {
+    this.reportDataSource$.subscribe((ds) => {
+      this.rerenderDataTable();
+    });
+  }
+
+  ngAfterViewInit(): void {
+    this.rerenderDataTable();
+  }
+
+  ngOnDestroy(): void {
+    this.dtTrigger.unsubscribe();
+  }
+
+  private rerenderDataTable(): void {
+    if (this.dtElement && this.dtElement.dtInstance) {
+      this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
+        dtInstance.destroy();
+        this.dtTrigger.next();
+      });
+    } else {
+      this.dtTrigger.next();
+    }
+  }
+}

src/app/modules/technology-report/components/technology-report-table/technology-report-table.component.ts

@@ -0,0 +1,26 @@
+<form [formGroup]="reportForm" (ngSubmit)="onSubmit()">
+
+  <div class="form-group row">
+    <label class="col-12 col-md-2 col-form-label my-1">Start date:</label>
+    <div class="col-12 col-sm-6 col-md-3 my-1">
+    <app-input-date
+          formControlName="startDate"
+          id="startDate"
+          required="true"
+        ></app-input-date>
+    </div>
+
+    <label class="col-12 col-md-2 col-form-label my-1">End date:</label>
+    <div class="col-12 col-sm-6 col-md-3 my-1">
+    <app-input-date
+          formControlName="endDate"
+          id="endDate"
+          required="true"
+      ></app-input-date>
+    </div>
+
+    <div class="col-12 col-md-2 my-1">
+      <button type="submit" class="btn btn-primary">Search</button>
+    </div>
+  </div>
+</form>

src/app/modules/technology-report/components/time-range-form/time-range-form.component.html

@@ -0,0 +1,49 @@
+import { ToastrService } from 'ngx-toastr';
+import { formatDate } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+import * as entryActions from '../../../time-clock/store/entry.actions';
+import {Store} from '@ngrx/store';
+import {EntryState} from '../../../time-clock/store/entry.reducer';
+import * as moment from 'moment';
+
+@Component({
+  selector: 'app-time-range-form',
+  templateUrl: './time-range-form.component.html',
+})
+export class TimeRangeFormComponent implements OnInit {
+  public reportForm: FormGroup;
+  private startDate = new FormControl('');
+  private endDate = new FormControl('');
+
+  constructor(private store: Store<EntryState>, private toastrService: ToastrService) {
+    this.reportForm = new FormGroup({
+      startDate: this.startDate,
+      endDate: this.endDate
+    });
+  }
+  ngOnInit(): void {
+    this.setInitialDataOnScreen();
+  }
+
+  setInitialDataOnScreen() {
+    this.reportForm.setValue({
+      startDate: formatDate(moment().startOf('week').toString(), 'yyyy-MM-dd', 'en'),
+      endDate: formatDate(moment().endOf('week').toString(), 'yyyy-MM-dd', 'en')
+    });
+    this.onSubmit();
+  }
+
+  onSubmit() {
+    const endDate = moment(this.endDate.value).endOf('day');
+    const startDate = moment(this.startDate.value).startOf('day');
+    if (endDate.isBefore(startDate)) {
+      this.toastrService.error('The end date should be after the start date');
+    } else {
+      this.store.dispatch(new entryActions.LoadEntriesByTimeRange({
+        start_date: moment(this.startDate.value).startOf('day'),
+        end_date: moment(this.endDate.value).endOf('day'),
+      }));
+    }
+  }
+}