refactor: centralize logic in service

Author: yuliiakaras

src/app/ubs/ubs-admin/components/ubs-admin-export-details/ubs-admin-export-details.component.html

@@ -1,7 +1,7 @@
 <div class="container mb-3">
   <div class="form" [formGroup]="exportDetailsDto">
     <div class="empty_card" (click)="openDetails()">
-      <img [src]="getArrowImageSrc()" alt="arrow" />
+      <img [src]="loadArrowImage().imgUrl" [alt]="loadArrowImage().imgAlt" />
       <h1 class="form__headline">{{ 'export-details.title' | translate }}</h1>
       <div *ngIf="isFormRequired" class="alert-message">{{ 'export-details.alert-message' | translate }}</div>
     </div>

src/app/ubs/ubs-admin/components/ubs-admin-export-details/ubs-admin-export-details.component.spec.ts

@@ -105,7 +105,7 @@ describe('UbsAdminExportDetailsComponent', () => {
 
   it('should return true when pageOpen is false, exportDetailsDto is invalid and orderStatus is not cancel or done', () => {
     component.pageOpen = false;
-    component.uneditableStatus = false;
+    component.isUneditableStatus = false;
     expect(component.isFormRequired).toBeFalsy();
   });
 });

src/app/ubs/ubs-admin/components/ubs-admin-export-details/ubs-admin-export-details.component.ts

@@ -29,7 +29,7 @@ export class UbsAdminExportDetailsComponent implements OnInit, OnDestroy, OnChan
   currentHour: string;
   allReceivingStations: string[];
   currentDate: string;
-  uneditableStatus = false;
+  isUneditableStatus = false;
   resetFieldImg = './assets/img/ubs-tariff/bigClose.svg';
   private readonly statuses = [OrderStatus.BROUGHT_IT_HIMSELF, OrderStatus.CANCELED];
 
@@ -62,7 +62,7 @@ export class UbsAdminExportDetailsComponent implements OnInit, OnDestroy, OnChan
       this.orderStatus === OrderStatus.DONE ||
       this.orderStatus === OrderStatus.BROUGHT_IT_HIMSELF
     ) {
-      this.uneditableStatus = true;
+      this.isUneditableStatus = true;
     }
 
     this.cdr.detectChanges();
@@ -74,6 +74,10 @@ export class UbsAdminExportDetailsComponent implements OnInit, OnDestroy, OnChan
     this.currentDate = new Date().toISOString().split('T')[0];
   }
 
+  loadArrowImage() {
+    return this.orderService.getArrowImageSrc(this.isFormRequired, this.pageOpen, this.exportDetailsDto.valid, this.isUneditableStatus);
+  }
+
   resetValue(): void {
     this.exportDetailsDto.get('receivingStationId').setValue(null);
   }
@@ -83,7 +87,7 @@ export class UbsAdminExportDetailsComponent implements OnInit, OnDestroy, OnChan
   }
 
   get isFormRequired(): boolean {
-    return !this.pageOpen && !this.exportDetailsDto.valid && !this.uneditableStatus;
+    return !this.pageOpen && !this.exportDetailsDto.valid && !this.isUneditableStatus;
   }
 
   showTimePickerClick(): void {
@@ -121,19 +125,6 @@ export class UbsAdminExportDetailsComponent implements OnInit, OnDestroy, OnChan
     return this.exportDetailsDto.get('timeDeliveryFrom').invalid || this.exportDetailsDto.get('timeDeliveryTo').invalid;
   }
 
-  getArrowImageSrc(): string {
-    if (this.isFormRequired) {
-      return 'assets/img/ubs-admin-orders/red_arrow_up.svg';
-    } else if (!this.pageOpen && (this.exportDetailsDto.valid || this.uneditableStatus)) {
-      return 'assets/img/ubs-admin-orders/arrow_up.svg';
-    } else if (this.pageOpen && (this.exportDetailsDto.valid || this.uneditableStatus)) {
-      return 'assets/img/ubs-admin-orders/arrow_down.svg';
-    } else if (this.pageOpen && !this.exportDetailsDto.valid && !this.uneditableStatus) {
-      return 'assets/img/ubs-admin-orders/red_arrow_down.svg';
-    }
-    return '';
-  }
-
   ngOnDestroy(): void {
     this.destroy$.next(true);
     this.destroy$.complete();

src/app/ubs/ubs-admin/components/ubs-admin-responsible-persons/ubs-admin-responsible-persons.component.html

@@ -1,22 +1,6 @@
 <div class="container" [formGroup]="responsiblePersonsForm">
   <div class="empty_card" (click)="openDetails()">
-    <img
-      *ngIf="!pageOpen && (responsiblePersonsForm.valid || uneditableStatus)"
-      src="assets/img/ubs-admin-orders/arrow_up.svg"
-      alt="arrow up"
-    />
-    <img
-      *ngIf="pageOpen && (responsiblePersonsForm.valid || uneditableStatus)"
-      src="assets/img/ubs-admin-orders/arrow_down.svg"
-      alt="arrow down"
-    />
-    <img
-      *ngIf="pageOpen && !responsiblePersonsForm.valid && !uneditableStatus"
-      src="assets/img/ubs-admin-orders/red_arrow_down.svg"
-      alt="arrow down"
-    />
-    <img *ngIf="isFormRequired()" src="assets/img/ubs-admin-orders/red_arrow_up.svg" alt="arrow up" />
-
+    <img [src]="loadArrowImage().imgUrl" [alt]="loadArrowImage().imgAlt" />
     <h1 class="form__headline">{{ 'responsible-persons.title' | translate }}</h1>
     <div *ngIf="isFormRequired()" class="alert-message">{{ 'responsible-persons.alert-message' | translate }}</div>
   </div>

src/app/ubs/ubs-admin/components/ubs-admin-responsible-persons/ubs-admin-responsible-persons.component.spec.ts

@@ -3,6 +3,7 @@ import { TranslateModule } from '@ngx-translate/core';
 import { ReactiveFormsModule, Validators, FormBuilder } from '@angular/forms';
 
 import { UbsAdminResponsiblePersonsComponent } from './ubs-admin-responsible-persons.component';
+import { HttpClient, HttpClientModule } from '@angular/common/http';
 
 describe('UbsAdminResponsiblePersonsComponent', () => {
   let component: UbsAdminResponsiblePersonsComponent;
@@ -17,7 +18,8 @@ describe('UbsAdminResponsiblePersonsComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [UbsAdminResponsiblePersonsComponent],
-      imports: [TranslateModule.forRoot(), ReactiveFormsModule]
+      imports: [TranslateModule.forRoot(), ReactiveFormsModule, HttpClientModule],
+      providers: [HttpClient]
     }).compileComponents();
   }));
 
@@ -70,7 +72,7 @@ describe('UbsAdminResponsiblePersonsComponent', () => {
 
   it('should return true when pageOpen is false, responsiblePersonInfo is invalid and orderStatus is not cancel or done', () => {
     component.pageOpen = false;
-    component.uneditableStatus = false;
+    component.isUneditableStatus = false;
     expect(component.isFormRequired()).toBeFalsy();
   });
 

src/app/ubs/ubs-admin/components/ubs-admin-responsible-persons/ubs-admin-responsible-persons.component.ts

@@ -3,7 +3,7 @@ import { FormGroup, Validators } from '@angular/forms';
 import { Subject } from 'rxjs';
 import { IEmployee, IResponsiblePersons, IResponsiblePersonsData } from 'src/app/ubs/ubs-admin/models/ubs-admin.interface';
 import { OrderStatus } from 'src/app/ubs/ubs/order-status.enum';
-
+import { OrderService } from '../../services/order.service';
 @Component({
   selector: 'app-ubs-admin-responsible-persons',
   templateUrl: './ubs-admin-responsible-persons.component.html',
@@ -19,18 +19,20 @@ export class UbsAdminResponsiblePersonsComponent implements OnInit, OnDestroy, O
   allLogisticians: string[];
   allNavigators: string[];
   allDrivers: string[];
-  uneditableStatus = false;
+  isUneditableStatus = false;
   pageOpen: boolean;
   responsiblePersonsData: IResponsiblePersonsData[];
   private destroy$: Subject<boolean> = new Subject<boolean>();
 
+  constructor(public orderService: OrderService) {}
+
   ngOnChanges(changes: SimpleChanges): void {
     if (
       changes.orderStatus?.currentValue === OrderStatus.CANCELED ||
       changes.orderStatus?.currentValue === OrderStatus.DONE ||
       changes.orderStatus?.currentValue === OrderStatus.BROUGHT_IT_HIMSELF
     ) {
-      this.uneditableStatus = true;
+      this.isUneditableStatus = true;
     }
   }
 
@@ -42,6 +44,15 @@ export class UbsAdminResponsiblePersonsComponent implements OnInit, OnDestroy, O
     this.pageOpen = !this.pageOpen;
   }
 
+  loadArrowImage() {
+    return this.orderService.getArrowImageSrc(
+      this.isFormRequired(),
+      this.pageOpen,
+      this.responsiblePersonsForm.valid,
+      this.isUneditableStatus
+    );
+  }
+
   setEmployeesByPosition() {
     const employees = this.responsiblePersonInfo.allPositionsEmployees;
     this.allCallManagers = this.getEmployeesById(employees, 2);
@@ -54,7 +65,7 @@ export class UbsAdminResponsiblePersonsComponent implements OnInit, OnDestroy, O
   isFormRequired(): boolean {
     const isNotOpen = !this.pageOpen;
     const isNotValid = !this.responsiblePersonsForm.valid;
-    const isUneditable = !this.uneditableStatus;
+    const isUneditable = !this.isUneditableStatus;
 
     return isNotOpen && isNotValid && isUneditable;
   }

src/app/ubs/ubs-admin/services/order.service.spec.ts

@@ -410,4 +410,56 @@ describe('OrderService', () => {
     const res = service.getAvailableOrderStatuses(OrderStatus.CANCELED, arr);
     expect(res).toEqual([{ key: OrderStatus.CANCELED }]);
   });
+
+  it('should return red arrow up when form is required', () => {
+    const result = service.getArrowImageSrc(true, false, false, false);
+    expect(result).toEqual({
+      imgUrl: 'assets/img/ubs-admin-orders/red_arrow_up.svg',
+      imgAlt: 'Red arrow pointing up'
+    });
+  });
+
+  it('should return arrow up when page is not open and valid or uneditable', () => {
+    const result = service.getArrowImageSrc(false, false, true, false);
+    expect(result).toEqual({
+      imgUrl: 'assets/img/ubs-admin-orders/arrow_up.svg',
+      imgAlt: 'Arrow pointing up'
+    });
+
+    const resultUneditable = service.getArrowImageSrc(false, false, false, true);
+    expect(resultUneditable).toEqual({
+      imgUrl: 'assets/img/ubs-admin-orders/arrow_up.svg',
+      imgAlt: 'Arrow pointing up'
+    });
+  });
+
+  it('should return arrow down when page is open and valid or uneditable', () => {
+    const result = service.getArrowImageSrc(false, true, true, false);
+    expect(result).toEqual({
+      imgUrl: 'assets/img/ubs-admin-orders/arrow_down.svg',
+      imgAlt: 'Arrow pointing down'
+    });
+
+    const resultUneditable = service.getArrowImageSrc(false, true, false, true);
+    expect(resultUneditable).toEqual({
+      imgUrl: 'assets/img/ubs-admin-orders/arrow_down.svg',
+      imgAlt: 'Arrow pointing down'
+    });
+  });
+
+  it('should return red arrow down when page is open, not valid, and not uneditable', () => {
+    const result = service.getArrowImageSrc(false, true, false, false);
+    expect(result).toEqual({
+      imgUrl: 'assets/img/ubs-admin-orders/red_arrow_down.svg',
+      imgAlt: 'Red arrow pointing down'
+    });
+  });
+
+  it('should return no image for undefined conditions', () => {
+    const result = service.getArrowImageSrc(false, false, false, false);
+    expect(result).toEqual({
+      imgUrl: '',
+      imgAlt: 'No Image'
+    });
+  });
 });

src/app/ubs/ubs-admin/services/order.service.ts

@@ -94,6 +94,39 @@ export class OrderService {
     }
   }
 
+  getArrowImageSrc(
+    isFormRequired: boolean,
+    isPageOpen: boolean,
+    isValid: boolean,
+    isUneditableStatus: boolean
+  ): { imgUrl: string; imgAlt: string } {
+    if (isFormRequired) {
+      return {
+        imgUrl: 'assets/img/ubs-admin-orders/red_arrow_up.svg',
+        imgAlt: 'Red arrow pointing up'
+      };
+    } else if (!isPageOpen && (isValid || isUneditableStatus)) {
+      return {
+        imgUrl: 'assets/img/ubs-admin-orders/arrow_up.svg',
+        imgAlt: 'Arrow pointing up'
+      };
+    } else if (isPageOpen && (isValid || isUneditableStatus)) {
+      return {
+        imgUrl: 'assets/img/ubs-admin-orders/arrow_down.svg',
+        imgAlt: 'Arrow pointing down'
+      };
+    } else if (isPageOpen && !isValid && !isUneditableStatus) {
+      return {
+        imgUrl: 'assets/img/ubs-admin-orders/red_arrow_down.svg',
+        imgAlt: 'Red arrow pointing down'
+      };
+    }
+    return {
+      imgUrl: '',
+      imgAlt: 'No Image'
+    };
+  }
+
   getOrderInfo(orderId: number): Observable<IOrderInfo> {
     return this.http.get<IOrderInfo>(`${this.backend}/management/get-data-for-order/${orderId}`);
   }