fix: linting errors from fy-select-project-modal.component (#2931)

src/app/core/mock-data/extended-projects.data.ts

@@ -230,28 +230,26 @@ export const expectedProjects2 = [
     value: null,
   },
   {
-    label: undefined,
-    value: [
-      {
-        ap1_email: null,
-        ap1_full_name: null,
-        ap2_email: null,
-        ap2_full_name: null,
-        project_active: true,
-        project_approver1_id: null,
-        project_approver2_id: null,
-        project_code: null,
-        project_created_at: new Date('2020-06-26T05:32:00.174Z'),
-        project_description: null,
-        project_id: 3943,
-        project_name: 'Staging Project',
-        project_org_category_ids: [16560, 224734, 201949],
-        project_org_id: 'orNVthTo2Zyo',
-        project_updated_at: new Date('2022-11-23T08:55:29.400Z'),
-        projectv2_name: 'Staging Project',
-        sub_project_name: null,
-      },
-    ],
+    label: 'Staging Project',
+    value: {
+      ap1_email: null,
+      ap1_full_name: null,
+      ap2_email: null,
+      ap2_full_name: null,
+      project_active: true,
+      project_approver1_id: null,
+      project_approver2_id: null,
+      project_code: null,
+      project_created_at: new Date('2020-06-26T05:32:00.174Z'),
+      project_description: null,
+      project_id: 3943,
+      project_name: 'Staging Project',
+      project_org_category_ids: [16560, 224734, 201949],
+      project_org_id: 'orNVthTo2Zyo',
+      project_updated_at: new Date('2022-11-23T08:55:29.400Z'),
+      projectv2_name: 'Staging Project',
+      sub_project_name: null,
+    },
   },
   {
     label: 'Customer Mapped Project',

src/app/core/models/project-options.model.ts

@@ -0,0 +1,7 @@
+import { ExtendedProject } from './v2/extended-project.model';
+
+export interface ProjectOption {
+  label: string;
+  value: ExtendedProject;
+  selected?: boolean;
+}

src/app/shared/components/fy-select-project/fy-select-modal/fy-select-project-modal.component.spec.ts

@@ -15,7 +15,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { FormsModule } from '@angular/forms';
 import { MatInputModule } from '@angular/material/input';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { of } from 'rxjs';
+import { map, of } from 'rxjs';
 import { orgUserSettingsData } from 'src/app/core/mock-data/org-user-settings.data';
 import { orgSettingsData, orgSettingsDataWithoutAdvPro } from 'src/app/core/test-data/accounts.service.spec.data';
 import { apiEouRes } from 'src/app/core/mock-data/extended-org-user.data';
@@ -34,7 +34,6 @@ import {
 } from 'src/app/core/mock-data/extended-projects.data';
 import { click, getAllElementsBySelector, getElementBySelector, getTextContent } from 'src/app/core/dom-helpers';
 import { By } from '@angular/platform-browser';
-import { recentlyUsedRes } from 'src/app/core/mock-data/recently-used.data';
 
 describe('FyProjectSelectModalComponent', () => {
   let component: FyProjectSelectModalComponent;
@@ -109,7 +108,7 @@ describe('FyProjectSelectModalComponent', () => {
     projectService = TestBed.inject(ProjectsService) as jasmine.SpyObj<ProjectsService>;
     authService = TestBed.inject(AuthService) as jasmine.SpyObj<AuthService>;
     recentLocalStorageItemsService = TestBed.inject(
-      RecentLocalStorageItemsService,
+      RecentLocalStorageItemsService
     ) as jasmine.SpyObj<RecentLocalStorageItemsService>;
     utilityService = TestBed.inject(UtilityService) as jasmine.SpyObj<UtilityService>;
     orgSettingsService = TestBed.inject(OrgSettingsService) as jasmine.SpyObj<OrgSettingsService>;
@@ -166,7 +165,7 @@ describe('FyProjectSelectModalComponent', () => {
 
     it('should get projects when current selection is defined', (done) => {
       projectService.getByParamsUnformatted.and.returnValue(of(projects));
-      component.currentSelection = [testProjectV2];
+      component.currentSelection = testProjectV2;
       fixture.detectChanges();
 
       component.getProjects('projects').subscribe((res) => {
@@ -258,7 +257,7 @@ describe('FyProjectSelectModalComponent', () => {
             label: 'label',
             value: testProjectV2,
           },
-        ]),
+        ])
       );
       component.recentlyUsed = null;
       component.cacheName = 'project';
@@ -289,8 +288,8 @@ describe('FyProjectSelectModalComponent', () => {
     it('should dismiss the modal with selected option', () => {
       modalController.dismiss.and.returnValue(Promise.resolve(true));
 
-      component.onElementSelect('value');
-      expect(modalController.dismiss).toHaveBeenCalledWith('value');
+      component.onElementSelect({ label: '', value: null });
+      expect(modalController.dismiss).toHaveBeenCalledWith({ label: '', value: null });
       expect(recentLocalStorageItemsService.post).not.toHaveBeenCalled();
     });
 
@@ -300,17 +299,13 @@ describe('FyProjectSelectModalComponent', () => {
       component.cacheName = 'cache';
       fixture.detectChanges();
 
-      component.onElementSelect({
-        value: 'value',
-      });
+      component.onElementSelect({ label: 'Staging Project', value: testProjectV2 });
 
-      expect(modalController.dismiss).toHaveBeenCalledOnceWith({
-        value: 'value',
-      });
+      expect(modalController.dismiss).toHaveBeenCalledOnceWith({ label: 'Staging Project', value: testProjectV2 });
       expect(recentLocalStorageItemsService.post).toHaveBeenCalledOnceWith(
         component.cacheName,
-        { value: 'value' },
-        'label',
+        { label: 'Staging Project', value: testProjectV2 },
+        'label'
       );
     });
   });
@@ -371,13 +366,20 @@ describe('FyProjectSelectModalComponent', () => {
 
   it('should select element on clicking recently used items', () => {
     spyOn(component, 'onElementSelect');
-    component.recentrecentlyUsedItems$ = of([testProjectV2]);
+    component.recentrecentlyUsedItems$ = of(testProjectV2).pipe(
+      map((project) => [
+        {
+          label: project.project_name,
+          value: project,
+        },
+      ])
+    );
     fixture.detectChanges();
 
     const itemsList = getAllElementsBySelector(fixture, '.selection-modal--recently-used-item-content');
 
     click(itemsList[0] as HTMLElement);
-    expect(component.onElementSelect).toHaveBeenCalledOnceWith(testProjectV2);
+    expect(component.onElementSelect).toHaveBeenCalledOnceWith({ label: 'Staging Project', value: testProjectV2 });
   });
 
   it('should select an element on clicking filtered items', () => {

src/app/shared/components/fy-select-project/fy-select-modal/fy-select-project-modal.component.ts

@@ -1,16 +1,7 @@
-import {
-  Component,
-  OnInit,
-  AfterViewInit,
-  ViewChild,
-  ElementRef,
-  Input,
-  ChangeDetectorRef,
-  TemplateRef,
-} from '@angular/core';
+import { Component, AfterViewInit, ViewChild, ElementRef, Input, ChangeDetectorRef, TemplateRef } from '@angular/core';
 import { Observable, fromEvent, iif, of, from } from 'rxjs';
 import { ModalController } from '@ionic/angular';
-import { map, startWith, distinctUntilChanged, switchMap, tap, concatMap, finalize } from 'rxjs/operators';
+import { map, startWith, distinctUntilChanged, switchMap, concatMap, finalize } from 'rxjs/operators';
 import { isEqual } from 'lodash';
 import { ProjectsService } from 'src/app/core/services/projects.service';
 import { AuthService } from 'src/app/core/services/auth.service';
@@ -19,34 +10,36 @@ import { ExtendedProject } from 'src/app/core/models/v2/extended-project.model';
 import { UtilityService } from 'src/app/core/services/utility.service';
 import { OrgSettingsService } from 'src/app/core/services/org-settings.service';
 import { OrgUserSettingsService } from 'src/app/core/services/org-user-settings.service';
+import { OrgUserSettings } from 'src/app/core/models/org_user_settings.model';
+import { ProjectOption } from 'src/app/core/models/project-options.model';
 
 @Component({
   selector: 'app-fy-select-modal',
   templateUrl: './fy-select-project-modal.component.html',
   styleUrls: ['./fy-select-project-modal.component.scss'],
 })
-export class FyProjectSelectModalComponent implements OnInit, AfterViewInit {
-  @ViewChild('searchBar') searchBarRef: ElementRef;
+export class FyProjectSelectModalComponent implements AfterViewInit {
+  @ViewChild('searchBar') searchBarRef: ElementRef<HTMLInputElement>;
 
-  @Input() currentSelection: any;
+  @Input() currentSelection: ExtendedProject;
 
-  @Input() filteredOptions$: Observable<{ label: string; value: any; selected?: boolean }[]>;
+  @Input() filteredOptions$: Observable<ProjectOption[]>;
 
-  @Input() cacheName;
+  @Input() cacheName: string;
 
   @Input() selectionElement: TemplateRef<ElementRef>;
 
   @Input() categoryIds: string[];
 
   @Input() defaultValue = false;
 
-  @Input() recentlyUsed: { label: string; value: ExtendedProject; selected?: boolean }[];
+  @Input() recentlyUsed: ProjectOption[];
 
   @Input() label: string;
 
-  recentrecentlyUsedItems$: Observable<any[]>;
+  recentrecentlyUsedItems$: Observable<ProjectOption[]>;
 
-  value;
+  value: string;
 
   isLoading = false;
 
@@ -61,9 +54,7 @@ export class FyProjectSelectModalComponent implements OnInit, AfterViewInit {
     private orgSettingsService: OrgSettingsService
   ) {}
 
-  ngOnInit() {}
-
-  getProjects(searchNameText) {
+  getProjects(searchNameText: string): Observable<ProjectOption[]> {
     // set isLoading to true
     this.isLoading = true;
     // run ChangeDetectionRef.detectChanges to avoid 'expression has changed after it was checked error'.
@@ -83,7 +74,9 @@ export class FyProjectSelectModalComponent implements OnInit, AfterViewInit {
       switchMap((orgSettings) =>
         iif(
           () => orgSettings.advanced_projects.enable_individual_projects,
-          this.orgUserSettingsService.get().pipe(map((orgUserSettings: any) => orgUserSettings.project_ids || [])),
+          this.orgUserSettingsService
+            .get()
+            .pipe(map((orgUserSettings: OrgUserSettings) => orgUserSettings.project_ids || [])),
           of(null)
         )
       ),
@@ -145,20 +138,20 @@ export class FyProjectSelectModalComponent implements OnInit, AfterViewInit {
     );
   }
 
-  clearValue() {
+  clearValue(): void {
     this.value = '';
-    const searchInput = this.searchBarRef.nativeElement as HTMLInputElement;
+    const searchInput = this.searchBarRef.nativeElement;
     searchInput.value = '';
     searchInput.dispatchEvent(new Event('keyup'));
   }
 
-  getRecentlyUsedItems() {
+  getRecentlyUsedItems(): Observable<ExtendedProject[] | ProjectOption[]> {
     if (this.recentlyUsed) {
       return of(this.recentlyUsed);
     } else {
       return from(this.recentLocalStorageItemsService.get(this.cacheName)).pipe(
-        map((options: any) =>
-          options.map((option) => {
+        map((options) =>
+          options.map((option: ProjectOption) => {
             option.selected = isEqual(option.value, this.currentSelection);
             return option;
           })
@@ -167,27 +160,30 @@ export class FyProjectSelectModalComponent implements OnInit, AfterViewInit {
     }
   }
 
-  ngAfterViewInit() {
-    this.filteredOptions$ = fromEvent(this.searchBarRef.nativeElement, 'keyup').pipe(
-      map((event: any) => event.srcElement.value),
+  ngAfterViewInit(): void {
+    this.filteredOptions$ = fromEvent<{ target: HTMLInputElement }>(this.searchBarRef.nativeElement, 'keyup').pipe(
+      map((event) => event.target.value),
       startWith(''),
       distinctUntilChanged(),
-      switchMap((searchText) => this.getProjects(searchText)),
-      map((projects: any[]) =>
-        projects.map((project) => {
+      switchMap((searchText: string) => this.getProjects(searchText)),
+      map((projects) =>
+        projects.map((project: { label: string; value: ExtendedProject; selected?: boolean }) => {
           if (isEqual(project.value, this.currentSelection)) {
             project.selected = true;
           }
-          return project;
+          return project as ProjectOption;
         })
       )
     );
 
-    this.recentrecentlyUsedItems$ = fromEvent(this.searchBarRef.nativeElement, 'keyup').pipe(
-      map((event: any) => event.srcElement.value),
+    this.recentrecentlyUsedItems$ = fromEvent<{ target: HTMLInputElement }>(
+      this.searchBarRef.nativeElement,
+      'keyup'
+    ).pipe(
+      map((event) => event.target.value),
       startWith(''),
       distinctUntilChanged(),
-      switchMap((searchText) =>
+      switchMap((searchText: string) =>
         this.getRecentlyUsedItems().pipe(
           // filtering of recently used items wrt searchText is taken care in service method
           this.utilityService.searchArrayStream(searchText)
@@ -198,11 +194,11 @@ export class FyProjectSelectModalComponent implements OnInit, AfterViewInit {
     this.cdr.detectChanges();
   }
 
-  onDoneClick() {
+  onDoneClick(): void {
     this.modalController.dismiss();
   }
 
-  onElementSelect(option) {
+  onElementSelect(option: ProjectOption): void {
     if (this.cacheName && option.value) {
       this.recentLocalStorageItemsService.post(this.cacheName, option, 'label');
     }