From 2b64d3028c602eb38f4aaf963b619ac08118c052 Mon Sep 17 00:00:00 2001 From: Nile Walker Date: Tue, 2 Mar 2021 08:51:26 -0500 Subject: [PATCH 1/2] Added First and Last Page Options --- src/app/graphs/graphs.component.html | 15 ++++++++++----- src/app/graphs/graphs.component.ts | 20 ++++++++++++++++---- 2 files changed, 26 insertions(+), 9 deletions(-) diff --git a/src/app/graphs/graphs.component.html b/src/app/graphs/graphs.component.html index c5356e0..1f33797 100644 --- a/src/app/graphs/graphs.component.html +++ b/src/app/graphs/graphs.component.html @@ -23,7 +23,7 @@ -
Email Notifications within
+
Email Notifications sent
{{form.startDate | changed_date : 0}} - {{form.endDate |changed_date : 0}}
{{topBarData[3]}}/ -
Text Notifications within
+
Text Notifications sent
{{form.startDate | changed_date : 0}} - {{form.endDate |changed_date : 0}}
{{topBarData[5]}}/ - - + + diff --git a/src/app/graphs/graphs.component.ts b/src/app/graphs/graphs.component.ts index a96daa6..d352208 100644 --- a/src/app/graphs/graphs.component.ts +++ b/src/app/graphs/graphs.component.ts @@ -90,9 +90,12 @@ export class GraphsComponent implements OnInit { startDate: Date = new Date(); endDate: Date = new Date(); - currentPage = 0; + pageIndex = 0; + totalItems = 0; + pageSize = 10; - pageSizeOptions: number[] = [10, 20, 50, 100]; + pageSizeOptions = [5, 10, 25]; + showFirstLastButtons = true; form: SearchForm = { startDate: '', @@ -104,8 +107,16 @@ export class GraphsComponent implements OnInit { }; updatePage(event: PageEvent) { - this.currentPage = event.pageIndex; - this.graphService.getRawSearchData(this.form, this.currentPage).subscribe(searchResult => this.searchResult = searchResult); + this.pageSize = event.pageSize; + this.pageIndex = event.pageIndex; + this.pageIndex = event.pageIndex; + this.graphService.getRawSearchData(this.form, this.pageIndex).subscribe( + searchResult => {this.searchResult = searchResult; + }); + } + + cancelEvent(event) { + event.preventDefault(); } searchToday(): void { @@ -175,6 +186,7 @@ export class GraphsComponent implements OnInit { this.graphService.getTopBarData(this.form).subscribe(tempData => { this.topBarData = tempData; + this.totalItems = this.topBarData[0]; }); this.graphService.getRawSearchData(this.form, 0).subscribe(searchResult => this.searchResult = searchResult); } From 99f56af4ef01fc49e383618ca72bb098f49efa3f Mon Sep 17 00:00:00 2001 From: Nile Walker Date: Wed, 3 Mar 2021 08:19:52 -0500 Subject: [PATCH 2/2] Switched Date Picker to make the first dow in date picker to monday --- src/app/app.module.ts | 4 +++- src/app/change_date.pipe.ts | 12 ------------ src/app/graphs/graphs.component.ts | 11 ++++++++--- src/app/services/graph.service.ts | 3 ++- src/app/test-week-date-adapter.ts | 9 +++++++++ 5 files changed, 22 insertions(+), 17 deletions(-) create mode 100644 src/app/test-week-date-adapter.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 277df57..de91d45 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -55,6 +55,7 @@ import { SidebarComponent } from './sidebar/sidebar.component'; import {MatListModule} from '@angular/material/list'; import { ChangeDatePipe } from './change_date.pipe'; import {DevHeaderInterceptorInterceptor} from './dev-header-interceptor.interceptor'; +import { TestWeekDateAdapter } from './test-week-date-adapter'; @@ -138,7 +139,8 @@ export function getBaseHref(platformLocation: PlatformLocation): string { {provide: 'APP_ENVIRONMENT', useClass: ThisEnvironment}, {provide: APP_BASE_HREF, useFactory: getBaseHref, deps: [PlatformLocation]}, {provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {appearance: 'outline'}}, - {provide: HTTP_INTERCEPTORS, useClass: DevHeaderInterceptorInterceptor, multi: true} + {provide: HTTP_INTERCEPTORS, useClass: DevHeaderInterceptorInterceptor, multi: true}, + { provide: DateAdapter, useClass: TestWeekDateAdapter }, ], bootstrap: [AppComponent], entryComponents: [] diff --git a/src/app/change_date.pipe.ts b/src/app/change_date.pipe.ts index c80c933..d6ff457 100644 --- a/src/app/change_date.pipe.ts +++ b/src/app/change_date.pipe.ts @@ -13,15 +13,3 @@ export class ChangeDatePipe implements PipeTransform { } } -// @Pipe({ name: 'date' }) -// @Injectable() -// export class CustomDateAdapter extends NativeDateAdapter implements PipeTransform { -// transform(value: any, ...args: any[]) { -// throw new Error('Method not implemented.'); -// } - -// getFirstDayOfWeek(): number { -// return 1; -// } - -// } diff --git a/src/app/graphs/graphs.component.ts b/src/app/graphs/graphs.component.ts index d352208..a4ba1ed 100644 --- a/src/app/graphs/graphs.component.ts +++ b/src/app/graphs/graphs.component.ts @@ -49,7 +49,12 @@ export class GraphsComponent implements OnInit { }, legend: { onClick: (e, i) => { + if (!this.ChartName.includes('Station')){ this.form.location = String(i.text); + } + else { + this.form.location = ''; + } this.updateGraphData(); } }, @@ -110,8 +115,8 @@ export class GraphsComponent implements OnInit { this.pageSize = event.pageSize; this.pageIndex = event.pageIndex; this.pageIndex = event.pageIndex; - this.graphService.getRawSearchData(this.form, this.pageIndex).subscribe( - searchResult => {this.searchResult = searchResult; + this.graphService.getRawSearchData(this.form, this.pageIndex, this.pageSize).subscribe( + searchResult => {this.searchResult = searchResult; }); } @@ -188,7 +193,7 @@ export class GraphsComponent implements OnInit { this.topBarData = tempData; this.totalItems = this.topBarData[0]; }); - this.graphService.getRawSearchData(this.form, 0).subscribe(searchResult => this.searchResult = searchResult); + this.graphService.getRawSearchData(this.form, 0, this.pageSize).subscribe(searchResult => this.searchResult = searchResult); } ngOnInit(): void { diff --git a/src/app/services/graph.service.ts b/src/app/services/graph.service.ts index 7a101cc..728235a 100644 --- a/src/app/services/graph.service.ts +++ b/src/app/services/graph.service.ts @@ -32,9 +32,10 @@ export class GraphService { }); } - getRawSearchData(form: SearchForm, page: number): Observable { + getRawSearchData(form: SearchForm, page: number, itemsPerPage: number ): Observable { let params = this.createParams(form); params = params.set('page', String(page)); + params = params.set('items_per_page', String(itemsPerPage)); return this.httpClient .get(this.apiRoot + `/dashboard/search`, { params }) diff --git a/src/app/test-week-date-adapter.ts b/src/app/test-week-date-adapter.ts new file mode 100644 index 0000000..98e55ae --- /dev/null +++ b/src/app/test-week-date-adapter.ts @@ -0,0 +1,9 @@ +import { NativeDateAdapter } from '@angular/material/core'; + + +/** Adapts the native JS Date for use with cdk-based components that work with dates. */ +export class TestWeekDateAdapter extends NativeDateAdapter { + getFirstDayOfWeek(): number { + return 1; + } +}