fix: Custom dates and few more (#4016)

* initial commit

* eslint fix

* eslint fix

* eslint fix

* test fix

* test fix

* test fix

* test fix

* test fix

Author: sret-farhan2021

src/app/core/models/display-object.model.ts

@@ -0,0 +1,4 @@
+export interface DisplayObject {
+  display: string;
+}
+

src/app/core/models/statuses-diff-value-type.model.ts

@@ -0,0 +1,4 @@
+import { DisplayObject } from './display-object.model';
+
+export type ValueType = string | number | boolean | null | undefined | DisplayObject | unknown[];
+

src/app/fyle/view-team-report/view-team-report.page.ts

@@ -375,9 +375,14 @@ export class ViewTeamReportPage {
 
     this.loadReportDetails$.next(null);
 
-    this.report$ = this.loadReports().pipe(
-      map((report) => this.setupReportData(report)),
-      filter((report): report is Report => !!report),
+    this.report$ = this.loadReportDetails$.pipe(
+      switchMap(() =>
+        this.loadReports().pipe(
+          map((report) => this.setupReportData(report)),
+          filter((report): report is Report => !!report),
+        ),
+      ),
+      shareReplay(1),
     );
 
     this.eou$ = from(this.authService.getEou());
@@ -621,6 +626,7 @@ export class ViewTeamReportPage {
       this.isCommentAdded = true;
 
       this.approverReportsService.postComment(this.objectId, comment).subscribe(() => {
+        this.loadReportDetails$.next();
         this.refreshApprovals$.next(null);
         setTimeout(() => {
           this.content().scrollToBottom(500);

src/app/shared/components/comments-history/audit-history/statuses-diff/statuses-diff.component.html

@@ -1,18 +1,18 @@
 @if (isValueList) {
   <div class="statuses-diff">
     <div class="statuses-diff--expense-issues">
-      @if (key === 'Please contact your admin to configure the following') {
-        <span>{{ key | snakeCaseToSpaceCase }} </span>
+      @if (key() === 'Please contact your admin to configure the following') {
+        <span>{{ key() | snakeCaseToSpaceCase }} </span>
       }
-      @if (key === 'Violating Transactions') {
-        <span class="statuses-diff--violating-txns">{{ key | snakeCaseToSpaceCase }}</span>
+      @if (key() === 'Violating Transactions') {
+        <span class="statuses-diff--violating-txns">{{ key() | snakeCaseToSpaceCase }}</span>
       }
-      @if (key !== 'Please contact your admin to configure the following' && key !== 'Violating Transactions') {
-        <span class="text-capitalize">{{ key | snakeCaseToSpaceCase }}</span>
+      @if (key() !== 'Please contact your admin to configure the following' && key() !== 'Violating Transactions') {
+        <span class="text-capitalize">{{ key() | snakeCaseToSpaceCase }}</span>
       }
     </div>
     <ul class="statuses-diff--values-list">
-      @for (detail of value; track detail) {
+      @for (detail of value(); track detail) {
         <div>
           <li class="text-capitalize">{{ detail }}</li>
         </div>
@@ -23,7 +23,7 @@
 @if (!isValueList) {
   <div>
     <li class="text-capitalize">
-      {{ key === 'vehicle type' ? ('statusesDiff.mileageRateName' | transloco) : key }} : {{ value }}
+      {{ key() === 'vehicle type' ? ('statusesDiff.mileageRateName' | transloco) : key() }} : {{ displayValue }}
     </li>
   </div>
 }

src/app/shared/components/comments-history/audit-history/statuses-diff/statuses-diff.component.spec.ts

@@ -46,28 +46,29 @@ describe('StatusesDiffComponent', () => {
 
       return translation;
     });
-    fixture.detectChanges();
   }));
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
 
   it('should set isValueList to true if value is an array', () => {
-    component.value = ['[email protected]', '[email protected]', '[email protected]'];
+    fixture.componentRef.setInput('value', ['[email protected]', '[email protected]', '[email protected]']);
     component.ngOnInit();
     expect(component.isValueList).toBeTrue();
   });
 
   it('should set isValueList to false if value is not an array', () => {
-    component.value = 4000;
+    fixture.componentRef.setInput('value', 4000);
     component.ngOnInit();
     expect(component.isValueList).toBeFalse();
   });
 
   it('should render key and value as list items if value is an array', () => {
-    component.key = 'User List';
-    component.value = ['[email protected]', '[email protected]', '[email protected]'];
+    fixture.componentRef.setInput('key', 'User List');
+    fixture.componentRef.setInput('value', ['[email protected]', '[email protected]', '[email protected]']);
+    component.isValueList = undefined;
+    component.displayValue = undefined;
     component.ngOnInit();
     fixture.detectChanges();
     const listItems = getAllElementsBySelector(fixture, 'li');
@@ -78,17 +79,21 @@ describe('StatusesDiffComponent', () => {
   });
 
   it('should render key and value as plain text if value is not an array', () => {
-    component.key = 'Distance';
-    component.value = 4000;
+    fixture.componentRef.setInput('key', 'Distance');
+    fixture.componentRef.setInput('value', 4000);
+    component.isValueList = undefined;
+    component.displayValue = undefined;
     component.ngOnInit();
     fixture.detectChanges();
     const listItem = getElementBySelector(fixture, 'li');
     expect(getTextContent(listItem)).toEqual('Distance : 4000');
   });
 
   it('should render key as Mileage Rate Name if key is vehicle type', fakeAsync(() => {
-    component.key = 'vehicle type';
-    component.value = 'Two Wheeler';
+    fixture.componentRef.setInput('key', 'vehicle type');
+    fixture.componentRef.setInput('value', 'Two Wheeler');
+    component.isValueList = undefined;
+    component.displayValue = undefined;
     component.ngOnInit();
     fixture.detectChanges();
     tick();
@@ -98,20 +103,47 @@ describe('StatusesDiffComponent', () => {
   }));
 
   it('should render Please contact your admin to configure the following key correctly', () => {
-    component.key = 'Please contact your admin to configure the following';
-    component.value = ['Designated Level Approver'];
+    fixture.componentRef.setInput('key', 'Please contact your admin to configure the following');
+    fixture.componentRef.setInput('value', ['Designated Level Approver']);
     component.ngOnInit();
     fixture.detectChanges();
     const title = getElementBySelector(fixture, 'span');
     expect(getTextContent(title)).toEqual('Please contact your admin to configure the following');
   });
 
   it('should render Violating Transactions key correctly', () => {
-    component.key = 'Violating Transactions';
-    component.value = ['E/2022/10/T/14 (INR 555, Flight)', 'E/2022/10/T/18 (INR 128, Mileage)'];
+    fixture.componentRef.setInput('key', 'Violating Transactions');
+    fixture.componentRef.setInput('value', ['E/2022/10/T/14 (INR 555, Flight)', 'E/2022/10/T/18 (INR 128, Mileage)']);
     component.ngOnInit();
     fixture.detectChanges();
     const title = getElementBySelector(fixture, 'span.statuses-diff--violating-txns');
     expect(getTextContent(title)).toEqual('Violating Transactions');
   });
+
+  it('should display "-" when value is null', () => {
+    fixture.componentRef.setInput('key', 'Location');
+    fixture.componentRef.setInput('value', null);
+    component.ngOnInit();
+    fixture.detectChanges();
+    const listItem = getElementBySelector(fixture, 'li');
+    expect(getTextContent(listItem)).toEqual('Location : -');
+  });
+
+  it('should display "-" when value is undefined', () => {
+    fixture.componentRef.setInput('key', 'Category');
+    fixture.componentRef.setInput('value', undefined);
+    component.ngOnInit();
+    fixture.detectChanges();
+    const listItem = getElementBySelector(fixture, 'li');
+    expect(getTextContent(listItem)).toEqual('Category : -');
+  });
+
+  it('should extract display property from DisplayObject', () => {
+    fixture.componentRef.setInput('key', 'Location');
+    fixture.componentRef.setInput('value', { display: 'San Francisco, CA' });
+    component.ngOnInit();
+    fixture.detectChanges();
+    const listItem = getElementBySelector(fixture, 'li');
+    expect(getTextContent(listItem)).toEqual('Location : San Francisco, CA');
+  });
 });

src/app/shared/components/comments-history/audit-history/statuses-diff/statuses-diff.component.ts

@@ -1,6 +1,8 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, input } from '@angular/core';
 import { TranslocoPipe } from '@jsverse/transloco';
 import { SnakeCaseToSpaceCase } from '../../../../pipes/snake-case-to-space-case.pipe';
+import { DisplayObject } from '../../../../../core/models/display-object.model';
+import { ValueType } from '../../../../../core/models/statuses-diff-value-type.model';
 
 @Component({
   selector: 'app-statuses-diff',
@@ -9,19 +11,45 @@ import { SnakeCaseToSpaceCase } from '../../../../pipes/snake-case-to-space-case
   imports: [TranslocoPipe, SnakeCaseToSpaceCase],
 })
 export class StatusesDiffComponent implements OnInit {
-  // TODO: Skipped for migration because:
-  //  Your application code writes to the input. This prevents migration.
-  @Input() key;
+  readonly key = input<string>();
 
-  // TODO: Skipped for migration because:
-  //  Your application code writes to the input. This prevents migration.
-  @Input() value;
+  readonly value = input<ValueType>();
 
   isValueList: boolean;
 
+  displayValue: string;
+
   constructor() {}
 
   ngOnInit() {
-    this.isValueList = this.value instanceof Array;
+    const value = this.value();
+    this.isValueList = value instanceof Array;
+    if (!this.isValueList) {
+      this.displayValue = this.formatValue(value);
+    }
+  }
+
+  private formatValue(value: ValueType): string {
+    if (value === null || value === undefined) {
+      return '-';
+    }
+
+    // Handle location objects with display property
+    if (this.isDisplayObject(value)) {
+      return value.display;
+    }
+
+    // For primitives, return as string
+    return String(value);
+  }
+
+  private isDisplayObject(value: ValueType): value is DisplayObject {
+    return (
+      typeof value === 'object' &&
+      value !== null &&
+      !Array.isArray(value) &&
+      'display' in value &&
+      typeof value.display === 'string'
+    );
   }
 }

src/app/shared/components/fy-filters/fy-filters.component.html

@@ -123,9 +123,10 @@
                   [(ngModel)]="startDate"
                   (ngModelChange)="onDateChange()"
                   [matDatepicker]="picker1"
+                  (click)="openPicker1()"
                 />
-                <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
-                <mat-datepicker #picker1></mat-datepicker>
+                <mat-datepicker-toggle matSuffix [for]="picker1" (click)="openPicker1()"></mat-datepicker-toggle>
+                <mat-datepicker touchUi="true" #picker1></mat-datepicker>
               </mat-form-field>
               <mat-form-field>
                 <mat-label>{{ 'fyFilters.endDate' | transloco }}</mat-label>
@@ -135,9 +136,10 @@
                   [(ngModel)]="endDate"
                   (ngModelChange)="onDateChange()"
                   [matDatepicker]="picker2"
+                  (click)="openPicker2()"
                 />
-                <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
-                <mat-datepicker #picker2></mat-datepicker>
+                <mat-datepicker-toggle matSuffix [for]="picker2" (click)="openPicker2()"></mat-datepicker-toggle>
+                <mat-datepicker touchUi="true" #picker2></mat-datepicker>
               </mat-form-field>
             </div>
           }

src/app/shared/components/fy-filters/fy-filters.component.ts

@@ -3,7 +3,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Component, Input, OnInit, inject } from '@angular/core';
+import { Component, Input, OnInit, inject, viewChild } from '@angular/core';
 import { FilterOptions } from './filter-options.interface';
 import { SelectedFilters } from './selected-filters.interface';
 import { FilterOptionType } from './filter-option-type.enum';
@@ -50,6 +50,10 @@ import { TranslocoPipe } from '@jsverse/transloco';
 export class FyFiltersComponent implements OnInit {
   private modalController = inject(ModalController);
 
+  readonly picker1 = viewChild<MatDatepicker<Date>>('picker1');
+
+  readonly picker2 = viewChild<MatDatepicker<Date>>('picker2');
+
   // TODO: Skipped for migration because:
   //  Your application code writes to the input. This prevents migration.
   @Input() simplifyReportsSettings$: Observable<any> = of({ enabled: false });
@@ -125,6 +129,14 @@ export class FyFiltersComponent implements OnInit {
     });
   }
 
+  openPicker1(): void {
+    this.picker1()?.open();
+  }
+
+  openPicker2(): void {
+    this.picker2()?.open();
+  }
+
   getNoOfFilters() {
     return Object.values(this.currentFilterValueMap).filter((value) => value && value.length).length;
   }

src/main.ts

@@ -26,6 +26,7 @@ import { ConfigService } from './app/core/services/config.service';
 import { TIMEZONE, PAGINATION_SIZE, DEVICE_PLATFORM, FORMAT_PREFERENCES } from './app/constants';
 import { appRoutes } from './app/app-routes';
 import { provideAnimations } from '@angular/platform-browser/animations';
+import { provideNativeDateAdapter } from '@angular/material/core';
 import { NgOtpInputModule } from 'ng-otp-input';
 import { AppComponent } from './app/app.component';
 import { FyCurrencyPipe } from './app/shared/pipes/fy-currency.pipe';
@@ -194,6 +195,7 @@ bootstrapApplication(AppComponent, {
     },
     provideHttpClient(withInterceptorsFromDi(), withJsonpSupport()),
     provideAnimations(),
+    provideNativeDateAdapter(),
     provideIonicAngular({
       innerHTMLTemplatesEnabled: true,
       useSetInputAPI: true,