[Fix] #7778 add more specific message to the confirm popup

src/app/ubs/ubs-admin/components/ubs-admin-confirm-status-change-pop-up/ubs-admin-confirm-status-change-pop-up.component.html

@@ -5,7 +5,7 @@
     </button>
   </div>
   <div class="content-container">
-    <h4>{{ 'order-status-confirm.confirm-message' | translate }}</h4>
+    <h4>{{ 'order-status-confirm.confirm-message' | translate }} {{ data.newOption }}?</h4>
   </div>
   <div>
     <div class="btn-container">

src/app/ubs/ubs-admin/components/ubs-admin-confirm-status-change-pop-up/ubs-admin-confirm-status-change-pop-up.component.scss

@@ -8,6 +8,7 @@
 
 .container {
   position: relative;
+  max-width: 500px;
 
   .close-container {
     position: absolute;

src/app/ubs/ubs-admin/components/ubs-admin-confirm-status-change-pop-up/ubs-admin-confirm-status-change-pop-up.component.spec.ts

@@ -1,5 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { TranslateModule } from '@ngx-translate/core';
 
 import { UbsAdminConfirmStatusChangePopUpComponent } from './ubs-admin-confirm-status-change-pop-up.component';
@@ -14,7 +14,10 @@ describe('UbsAdminConfirmStatusChangePopUpComponent', () => {
     TestBed.configureTestingModule({
       declarations: [UbsAdminConfirmStatusChangePopUpComponent],
       imports: [MatDialogModule, TranslateModule.forRoot()],
-      providers: [{ provide: MatDialogRef, useValue: matDialogRefStub }]
+      providers: [
+        { provide: MatDialogRef, useValue: matDialogRefStub },
+        { provide: MAT_DIALOG_DATA, useValue: {} }
+      ]
     });
     fixture = TestBed.createComponent(UbsAdminConfirmStatusChangePopUpComponent);
     component = fixture.componentInstance;

src/app/ubs/ubs-admin/components/ubs-admin-confirm-status-change-pop-up/ubs-admin-confirm-status-change-pop-up.component.ts

@@ -1,5 +1,5 @@
-import { Component } from '@angular/core';
-import { MatDialogRef } from '@angular/material/dialog';
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-ubs-admin-confirm-status-change-pop-up',
@@ -8,7 +8,10 @@ import { MatDialogRef } from '@angular/material/dialog';
 })
 export class UbsAdminConfirmStatusChangePopUpComponent {
   closeButton = './assets/img/profile/icons/cancel.svg';
-  constructor(public dialogRef: MatDialogRef<UbsAdminConfirmStatusChangePopUpComponent>) {}
+  constructor(
+    public dialogRef: MatDialogRef<UbsAdminConfirmStatusChangePopUpComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: { newOption: string }
+  ) {}
   closeDialog(result: boolean): void {
     this.dialogRef.close(result);
   }

src/app/ubs/ubs-admin/components/ubs-admin-order/ubs-admin-order.component.ts

@@ -694,7 +694,7 @@ export class UbsAdminOrderComponent implements OnInit, OnDestroy, AfterContentCh
       this.isFormResetted = true;
     } else {
       exportDetaisFields.forEach((el) => exportDetails.get(el).setValidators([Validators.required]));
-      responsiblePersonNames.forEach((el) => responsiblePersons.get(el).setValidators([Validators.required]));
+      responsiblePersons.get('responsibleCaller')?.setValidators([Validators.required]);
     }
     this.statusCanceledOrDone();
   }

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

@@ -21,58 +21,17 @@ <h1 class="form__headline">{{ 'responsible-persons.title' | translate }}</h1>
     <div *ngIf="isFormRequired()" class="alert-message">{{ 'responsible-persons.alert-message' | translate }}</div>
   </div>
   <div *ngIf="pageOpen">
-    <div class="form-row">
+    <div class="form-row" *ngFor="let person of responsiblePersonsData">
       <div class="form-group col-md-4">
-        <label for="responsible-caller" class="form__label">{{ 'responsible-persons.call-manager' | translate }}</label>
+        <label class="form__label">
+          {{ person.translate | translate }}
+          <span class="form__label" *ngIf="isFieldOptional(person.formControlName)">({{ 'order-edit.optional-field' | translate }}) </span>
+        </label>
         <select
-          id="responsible-caller"
-          formControlName="responsibleCaller"
-          class="form-control form__select"
+          [formControlName]="person.formControlName"
           [ngClass]="isEmployeeCanEditOrder ? 'form-control form__select' : 'form-control form__select readonly'"
         >
-          <option *ngFor="let employee of allCallManagers" [value]="employee">
-            {{ employee }}
-          </option>
-        </select>
-      </div>
-    </div>
-    <div class="form-row">
-      <div class="form-group col-md-4">
-        <label for="logistician" class="form__label">{{ 'responsible-persons.logistician' | translate }}</label>
-        <select
-          id="logistician"
-          formControlName="responsibleLogicMan"
-          [ngClass]="isEmployeeCanEditOrder ? 'form-control form__select' : 'form-control form__select readonly'"
-        >
-          <option *ngFor="let employee of allLogisticians" [value]="employee">
-            {{ employee }}
-          </option>
-        </select>
-      </div>
-    </div>
-    <div class="form-row">
-      <div class="form-group col-md-4">
-        <label for="navigator" class="form__label">{{ 'responsible-persons.navigator' | translate }}</label>
-        <select
-          id="navigator"
-          formControlName="responsibleNavigator"
-          [ngClass]="isEmployeeCanEditOrder ? 'form-control form__select' : 'form-control form__select readonly'"
-        >
-          <option *ngFor="let employee of allNavigators" [value]="employee">
-            {{ employee }}
-          </option>
-        </select>
-      </div>
-    </div>
-    <div class="form-row">
-      <div class="form-group col-md-4">
-        <label for="driver" class="form__label">{{ 'responsible-persons.driver' | translate }}</label>
-        <select
-          id="driver"
-          formControlName="responsibleDriver"
-          [ngClass]="isEmployeeCanEditOrder ? 'form-control form__select' : 'form-control form__select readonly'"
-        >
-          <option *ngFor="let employee of allDrivers" [value]="employee">
+          <option *ngFor="let employee of person.responsiblePersonsArray" [value]="employee">
             {{ employee }}
           </option>
         </select>

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

@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { TranslateModule } from '@ngx-translate/core';
-import { ReactiveFormsModule, FormGroup } from '@angular/forms';
+import { ReactiveFormsModule, Validators, FormBuilder } from '@angular/forms';
 
 import { UbsAdminResponsiblePersonsComponent } from './ubs-admin-responsible-persons.component';
 
@@ -21,13 +21,23 @@ describe('UbsAdminResponsiblePersonsComponent', () => {
     }).compileComponents();
   }));
 
-  const FormGroupMock = new FormGroup({});
-
   beforeEach(() => {
     fixture = TestBed.createComponent(UbsAdminResponsiblePersonsComponent);
     component = fixture.componentInstance;
+
+    const fb = new FormBuilder();
+    const mockControlWithRequired = fb.control('');
+    const mockControlWithoutRequired = fb.control('');
+
+    mockControlWithRequired.hasValidator = (validator) => validator === Validators.required;
+    mockControlWithoutRequired.hasValidator = () => false;
+
+    component.responsiblePersonsForm = fb.group({
+      responsibleCaller: mockControlWithRequired,
+      responsibleDriver: mockControlWithoutRequired
+    });
+
     component.responsiblePersonInfo = ResponsiblePersonInfoFake as any;
-    component.responsiblePersonsForm = FormGroupMock;
     fixture.detectChanges();
   });
 
@@ -63,4 +73,22 @@ describe('UbsAdminResponsiblePersonsComponent', () => {
     component.isOrderStatusCancelOrDone = false;
     expect(component.isFormRequired()).toBeFalsy();
   });
+
+  it('should return false if orderStatus is not ADJUSTMENT', () => {
+    component.orderStatus = 'CANCELED';
+    const result = component.isFieldOptional('responsibleCaller');
+    expect(result).toBeFalse();
+  });
+
+  it('should return false if the control has Validators.required and status is ADJUSTMENT', () => {
+    component.orderStatus = 'ADJUSTMENT';
+    const result = component.isFieldOptional('responsibleCaller');
+    expect(result).toBeFalse();
+  });
+
+  it('should return true if the control does not have Validators.required and status is ADJUSTMENT', () => {
+    component.orderStatus = 'ADJUSTMENT';
+    const result = component.isFieldOptional('responsibleDriver');
+    expect(result).toBeTrue();
+  });
 });

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

@@ -1,7 +1,7 @@
 import { Component, Input, OnDestroy, OnInit, OnChanges, SimpleChanges } from '@angular/core';
-import { FormGroup } from '@angular/forms';
+import { FormGroup, Validators } from '@angular/forms';
 import { Subject } from 'rxjs';
-import { IEmployee, IResponsiblePersons } from '../../models/ubs-admin.interface';
+import { IEmployee, IResponsiblePersons, IResponsiblePersonsData } from 'src/app/ubs/ubs-admin/models/ubs-admin.interface';
 import { OrderStatus } from 'src/app/ubs/ubs/order-status.enum';
 
 @Component({
@@ -21,6 +21,7 @@ export class UbsAdminResponsiblePersonsComponent implements OnInit, OnDestroy, O
   allDrivers: string[];
   isOrderStatusCancelOrDone = false;
   pageOpen: boolean;
+  responsiblePersonsData: IResponsiblePersonsData[];
   private destroy$: Subject<boolean> = new Subject<boolean>();
 
   ngOnChanges(changes: SimpleChanges): void {
@@ -43,6 +44,7 @@ export class UbsAdminResponsiblePersonsComponent implements OnInit, OnDestroy, O
     this.allLogisticians = this.getEmployeesById(employees, 3);
     this.allNavigators = this.getEmployeesById(employees, 4);
     this.allDrivers = this.getEmployeesById(employees, 5);
+    this.getResponsiblePersonsData();
   }
 
   isFormRequired(): boolean {
@@ -66,8 +68,42 @@ export class UbsAdminResponsiblePersonsComponent implements OnInit, OnDestroy, O
     return [];
   }
 
+  isFieldOptional(controlName: string): boolean {
+    if (this.orderStatus !== 'ADJUSTMENT') {
+      return false;
+    }
+
+    const control = this.responsiblePersonsForm.get(controlName);
+    return control && !control.hasValidator(Validators.required);
+  }
+
   ngOnDestroy(): void {
     this.destroy$.next(true);
     this.destroy$.complete();
   }
+
+  getResponsiblePersonsData(): void {
+    this.responsiblePersonsData = [
+      {
+        translate: 'responsible-persons.call-manager',
+        formControlName: 'responsibleCaller',
+        responsiblePersonsArray: this.allCallManagers
+      },
+      {
+        translate: 'responsible-persons.logistician',
+        formControlName: 'responsibleLogicMan',
+        responsiblePersonsArray: this.allLogisticians
+      },
+      {
+        translate: 'responsible-persons.navigator',
+        formControlName: 'responsibleNavigator',
+        responsiblePersonsArray: this.allNavigators
+      },
+      {
+        translate: 'responsible-persons.driver',
+        formControlName: 'responsibleDriver',
+        responsiblePersonsArray: this.allDrivers
+      }
+    ];
+  }
 }

src/app/ubs/ubs-admin/components/ubs-admin-several-orders-pop-up/ubs-admin-several-orders-pop-up.component.ts

@@ -73,16 +73,16 @@ export class UbsAdminSeveralOrdersPopUpComponent implements OnInit {
   }
 
   initForm(): void {
-    const currentEmployees = this.responsiblePersonInfo.currentPositionEmployees;
+    const currentEmployees = this.responsiblePersonInfo?.currentPositionEmployees;
     this.ordersForm = this.fb.group({
       exportDetailsDto: this.fb.group({
         dateExport: [
-          this.exportInfo.dateExport ? formatDate(this.exportInfo.dateExport, 'yyyy-MM-dd', this.currentLang) : '',
+          this.exportInfo?.dateExport ? formatDate(this.exportInfo.dateExport, 'yyyy-MM-dd', this.currentLang) : '',
           [Validators.required]
         ],
-        timeDeliveryFrom: [this.parseTimeToStr(this.exportInfo.timeDeliveryFrom), [Validators.required]],
-        timeDeliveryTo: [this.parseTimeToStr(this.exportInfo.timeDeliveryTo), [Validators.required]],
-        receivingStationId: [this.getReceivingStationById(this.exportInfo.receivingStationId), [Validators.required]]
+        timeDeliveryFrom: [this.parseTimeToStr(this.exportInfo?.timeDeliveryFrom), [Validators.required]],
+        timeDeliveryTo: [this.parseTimeToStr(this.exportInfo?.timeDeliveryTo), [Validators.required]],
+        receivingStationId: [this.getReceivingStationById(this.exportInfo?.receivingStationId), [Validators.required]]
       }),
 
       responsiblePersonsForm: this.fb.group({
@@ -143,7 +143,7 @@ export class UbsAdminSeveralOrdersPopUpComponent implements OnInit {
   }
 
   getReceivingStationById(receivingStationId: number): string {
-    return this.exportInfo.allReceivingStations.find((element) => receivingStationId === element.id)?.name || '';
+    return this.exportInfo?.allReceivingStations.find((element) => receivingStationId === element.id)?.name || '';
   }
 
   setEmployeesByPosition(): void {

src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-select/table-cell-select.component.ts

@@ -175,6 +175,7 @@ export class TableCellSelectComponent implements OnInit {
   }
 
   openConfirmPopUp(): void {
+    this.dialogConfig.data = { newOption: this.newOption };
     this.dialog
       .open(UbsAdminConfirmStatusChangePopUpComponent, this.dialogConfig)
       .afterClosed()

src/assets/i18n/ubs-admin/en.json

@@ -225,7 +225,7 @@
     "added": "Added"
   },
   "order-status-confirm": {
-    "confirm-message": "Do you realy want to change order status?",
+    "confirm-message": "Do you realy want to change order status to",
     "yes": "Yes",
     "no": "No"
   },

src/assets/i18n/ubs-admin/ua.json

@@ -224,7 +224,7 @@
     "added": "Додано"
   },
   "order-status-confirm": {
-    "confirm-message": "Ви справді хочете змінити статус замовлення?",
+    "confirm-message": "Ви справді хочете змінити статус замовлення на",
     "yes": "Так",
     "no": "Ні"
   },