Lastest Changes

src/app/app.module.ts

@@ -133,6 +133,7 @@ export function getBaseHref(platformLocation: PlatformLocation): string {
     CacheService,
     SettingsService,
     MatDatepickerModule,
+    CustomDatePipe,
     {provide: 'APP_ENVIRONMENT', useClass: ThisEnvironment},
     {provide: APP_BASE_HREF, useFactory: getBaseHref, deps: [PlatformLocation]},
     {provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {appearance: 'outline'}},

src/app/custom-date-adapter.ts

@@ -6,7 +6,7 @@ import {Injectable} from '@angular/core';
 import { Pipe, PipeTransform } from '@angular/core';
 import { DatePipe } from '@angular/common';
 
-@Pipe({ name: 'dated' })
+@Pipe({ name: 'changed_date' })
 export class CustomDatePipe implements PipeTransform {
   // adding a default value in case you don't want to pass the format then 'yyyy-MM-dd' will be used
   transform(date: Date | string, day: number, format: string = 'yyyy-MM-dd'): string {
@@ -15,6 +15,8 @@ export class CustomDatePipe implements PipeTransform {
     return new DatePipe('en-US').transform(date, format);
   }
 }
+
+@Pipe({ name: 'date' })
 @Injectable()
 export class CustomDateAdapter extends NativeDateAdapter {
 

src/app/graphs/graphs.component.html

@@ -8,17 +8,17 @@
     </mat-card>
 
     <mat-card class="col">
-      <h5 class="card-title text-uppercase text-muted mb-0">Total Samples within <br> {{startDate1 | date}}
+      <h5 class="card-title text-uppercase text-muted mb-0">Total Samples within <br> {{form.startDate | changed_date: 7:'mediumDate'}}
         -
-        {{endDate1 | date}}</h5>
+        {{form.endDate | changed_date: 7:'mediumDate'}}</h5>
       <span class="h2 font-weight-bold ">{{topBarData[1]}}</span>
     </mat-card>
 
     <mat-card class="col">
-      <h5 class="card-title text-uppercase text-muted ">Total Samples within <br> {{startDate2 |
-        date}}
+      <h5 class="card-title text-uppercase text-muted ">Total Samples within <br> {{form.startDate |
+        changed_date: 14:'mediumDate'}}
         -
-        {{endDate2 | date}}</h5>
+        {{form.endDate | changed_date: 14:'mediumDate'}}</h5>
       <span class="h2 font-weight-bold ">{{topBarData[2]}}</span>
     </mat-card>
 

src/app/graphs/graphs.component.spec.ts

@@ -9,7 +9,8 @@ import {APP_BASE_HREF} from '@angular/common';
 import {Router} from '@angular/router';
 import {MockEnvironment} from '../testing/environment.mock';
 import {DateAdapter} from '@angular/material/core';
-import {CustomDateAdapter} from '../custom-date-adapter';
+import {DatePipe} from '@angular/common';
+import {CustomDateAdapter, CustomDatePipe} from '../custom-date-adapter';
 
 describe('GraphsComponent', () => {
   let component: GraphsComponent;
@@ -23,6 +24,10 @@ describe('GraphsComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
+      declarations: [
+        CustomDatePipe,
+        CustomDateAdapter
+      ],
       imports: [
         HttpClientTestingModule,
         MatBottomSheetModule,
@@ -30,12 +35,12 @@ describe('GraphsComponent', () => {
       ],
       providers: [
         ApiService,
+        DatePipe,
         {provide: 'APP_ENVIRONMENT', useValue: mockEnvironment},
         {provide: APP_BASE_HREF, useValue: '/'},
         {provide: Router, useValue: mockRouter},
         {provide: Location, useValue: location},
-        {provide: DateAdapter, useValue: CustomDateAdapter}
-
+        {provide: DateAdapter, useValue: CustomDateAdapter},
       ]
     });
     httpMock = TestBed.inject(HttpTestingController);

src/app/graphs/graphs.component.ts

@@ -90,11 +90,6 @@ export class GraphsComponent implements OnInit {
   startDate: Date = new Date();
   endDate: Date = new Date();
 
-  startDate1 = '';
-  endDate1 = '';
-  startDate2 = '';
-  endDate2 = '';
-
   currentPage = 0;
   pageSize = 10;
   pageSizeOptions: number[] = [10, 20, 50, 100];
@@ -140,21 +135,6 @@ export class GraphsComponent implements OnInit {
     this.form.startDate = this.startDate.toLocaleDateString();
     this.form.endDate = this.endDate.toLocaleDateString();
 
-    const date = new Date();
-    const date2 = new Date();
-
-    date.setDate(this.startDate.getDate() - 7);
-    this.startDate1 = date.toLocaleDateString();
-
-    date2.setDate(this.endDate.getDate() - 7);
-    this.endDate1 = date2.toLocaleDateString();
-
-    date.setDate(date.getDate() - 7);
-    this.startDate2 = date.toLocaleDateString();
-
-    date2.setDate(date2.getDate() - 7);
-    this.endDate2 = date2.toLocaleDateString();
-
     const temp = new Date(this.startDate.getTime());
     this.dailyChartLabels = [];
     while (true) {