Merge pull request #3472 from ita-social-projects/feat/#7118-add-popu…

…p-change-name-change-adjustment-form

[Feat] #7118, #7778: add popup, change manager name, provide optional responsible persons

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

@@ -0,0 +1,18 @@
+<div class="container">
+  <div class="close-container">
+    <button class="close-btn" mat-dialog-close (click)="closeDialog(false)">
+      <img src="{{ closeButton }}" alt="close" />
+    </button>
+  </div>
+  <div class="content-container">
+    <h4>{{ 'order-status-confirm.confirm-message' | translate }} {{ data.newOption }}?</h4>
+  </div>
+  <div>
+    <div class="btn-container">
+      <button type="reset" class="disagree btn" (click)="closeDialog(false)">{{ 'order-status-confirm.no' | translate }}</button>
+      <button type="submit" class="agree btn" (click)="closeDialog(true)">
+        {{ 'order-status-confirm.yes' | translate }}
+      </button>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,28 @@
+.content-container {
+  padding: 40px 0 20px;
+}
+
+.btn-container {
+  text-align: right;
+}
+
+.container {
+  position: relative;
+  max-width: 500px;
+
+  .close-container {
+    position: absolute;
+    top: -5px;
+    right: 5px;
+  }
+
+  .close-btn {
+    border: none;
+    background-color: transparent;
+    outline: none;
+
+    img {
+      width: 20px;
+    }
+  }
+}

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

@@ -0,0 +1,30 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+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';
+
+describe('UbsAdminConfirmStatusChangePopUpComponent', () => {
+  let component: UbsAdminConfirmStatusChangePopUpComponent;
+  let fixture: ComponentFixture<UbsAdminConfirmStatusChangePopUpComponent>;
+  const matDialogRefStub = jasmine.createSpyObj('matDialogRefStub', ['close']);
+  matDialogRefStub.close = () => 'Close window';
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [UbsAdminConfirmStatusChangePopUpComponent],
+      imports: [MatDialogModule, TranslateModule.forRoot()],
+      providers: [
+        { provide: MatDialogRef, useValue: matDialogRefStub },
+        { provide: MAT_DIALOG_DATA, useValue: {} }
+      ]
+    });
+    fixture = TestBed.createComponent(UbsAdminConfirmStatusChangePopUpComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,18 @@
+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',
+  templateUrl: './ubs-admin-confirm-status-change-pop-up.component.html',
+  styleUrls: ['./ubs-admin-confirm-status-change-pop-up.component.scss']
+})
+export class UbsAdminConfirmStatusChangePopUpComponent {
+  closeButton = './assets/img/profile/icons/cancel.svg';
+  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-customers/columnsParams.ts

@@ -114,7 +114,7 @@ export const columnsParamsOrders: ColumnParam[] = [
   { title: { key: 'timeOfExport', ua: 'Час вивезення', en: 'Time of export' }, width: 100 },
   { title: { key: 'idOrderFromShop', ua: 'Номер замовлення з магазину', en: 'Id order from shop' }, width: 100 },
   { title: { key: 'receivingStation', ua: 'Станція приймання', en: 'Receiving station' }, width: 100 },
-  { title: { key: 'responsibleCaller', ua: 'Менеджер обдзвону', en: 'Call manager' }, width: 100 },
+  { title: { key: 'responsibleCaller', ua: 'Менеджер', en: 'Manager' }, width: 100 },
   { title: { key: 'responsibleLogicMan', ua: 'Логіст', en: 'Logistician' }, width: 100 },
   { title: { key: 'responsibleDriver', ua: 'Водій', en: 'Driver' }, width: 100 },
   { title: { key: 'responsibleNavigator', ua: 'Штурман', en: 'Navigator' }, width: 100 },

src/app/ubs/ubs-admin/components/ubs-admin-employee/ubs-admin-employee-edit-form/ubs-admin-employee-edit-form.component.ts

@@ -58,7 +58,7 @@ export class UbsAdminEmployeeEditFormComponent implements OnInit, OnDestroy {
   search: FormControl;
   filteredTariffs = [];
   tariffsFromEditForm = [];
-  isAnyTariffSelected: boolean = false;
+  isAnyTariffSelected = false;
 
   private addMappers = {
     tariffs: (tariffData) =>
@@ -221,7 +221,7 @@ export class UbsAdminEmployeeEditFormComponent implements OnInit, OnDestroy {
     if (!this.isInitialTariffsChanged) {
       this.isInitialTariffsChanged = true;
     }
-    this.isAnyTariffSelected = this.filteredTariffs.some((tariff) => tariff.selected);
+    this.isAnyTariffSelected = this.filteredTariffs.some((t) => t.selected);
   }
 
   doesIncludeRole(role) {

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

@@ -5,7 +5,7 @@ import { formatDate } from '@angular/common';
 import { MatDialog } from '@angular/material/dialog';
 import { Subject } from 'rxjs';
 import { take, takeUntil } from 'rxjs/operators';
-import { Store, select } from '@ngrx/store';
+import { Store } from '@ngrx/store';
 import { TranslateService } from '@ngx-translate/core';
 import { MatSnackBarComponent } from '@global-errors/mat-snack-bar/mat-snack-bar.component';
 import { UbsAdminCancelModalComponent } from '../ubs-admin-cancel-modal/ubs-admin-cancel-modal.component';
@@ -36,7 +36,6 @@ import { GoogleScript } from 'src/assets/google-script/google-script';
 import { PhoneNumberValidator } from 'src/app/shared/phone-validator/phone.validator';
 import { OrderStatus, PaymentEnrollment } from 'src/app/ubs/ubs/order-status.enum';
 import { UbsAdminEmployeeService } from '../../services/ubs-admin-employee.service';
-import { AdminTableService } from '../../services/admin-table.service';
 import { TableKeys } from '../../services/table-keys.enum';
 
 @Component({
@@ -47,7 +46,7 @@ import { TableKeys } from '../../services/table-keys.enum';
 export class UbsAdminOrderComponent implements OnInit, OnDestroy, AfterContentChecked {
   deleteNumberOrderFromEcoShop = false;
   currentLanguage: string;
-  private destroy$: Subject<boolean> = new Subject<boolean>();
+  private destroy$: Subject<void> = new Subject<void>();
   orderForm: FormGroup;
   isDataLoaded = false;
   orderId: number;
@@ -93,7 +92,6 @@ export class UbsAdminOrderComponent implements OnInit, OnDestroy, AfterContentCh
   constructor(
     private translate: TranslateService,
     private localStorageService: LocalStorageService,
-    private adminTableService: AdminTableService,
     private fb: FormBuilder,
     private dialog: MatDialog,
     private route: ActivatedRoute,
@@ -703,7 +701,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,54 +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 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
-          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 class="form__label">{{ 'responsible-persons.logistician' | translate }}</label>
-        <select
-          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 class="form__label">{{ 'responsible-persons.navigator' | translate }}</label>
-        <select
-          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 class="form__label">{{ 'responsible-persons.driver' | translate }}</label>
-        <select
-          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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule } from '@ngx-translate/core';
-import { ReactiveFormsModule, FormGroup } from '@angular/forms';
+import { ReactiveFormsModule, FormBuilder, ValidatorFn } 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 as any).hasValidator = (validator: ValidatorFn) => mockControlWithRequired.validator === validator;
+    (mockControlWithoutRequired as any).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).toBeFalsy();
+  });
+
+  it('should return false if the control has Validators.required and status is ADJUSTMENT', () => {
+    component.orderStatus = 'ADJUSTMENT';
+    const result = component.isFieldOptional('responsibleCaller');
+    expect(result).toBeFalsy();
+  });
+
+  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).toBeTruthy();
+  });
 });

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

@@ -1,15 +1,14 @@
-import { Component, Input, OnDestroy, OnInit, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core';
 import { FormGroup } 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({
   selector: 'app-ubs-admin-responsible-persons',
   templateUrl: './ubs-admin-responsible-persons.component.html',
   styleUrls: ['./ubs-admin-responsible-persons.component.scss']
 })
-export class UbsAdminResponsiblePersonsComponent implements OnInit, OnDestroy, OnChanges {
+export class UbsAdminResponsiblePersonsComponent implements OnInit, OnChanges {
   @Input() responsiblePersonInfo: IResponsiblePersons;
   @Input() responsiblePersonsForm: FormGroup;
   @Input() orderStatus: string;
@@ -21,7 +20,7 @@ export class UbsAdminResponsiblePersonsComponent implements OnInit, OnDestroy, O
   public allDrivers: string[];
   public isOrderStatusCancelOrDone = false;
   pageOpen: boolean;
-  private destroy$: Subject<boolean> = new Subject<boolean>();
+  responsiblePersonsData: IResponsiblePersonsData[];
 
   ngOnChanges(changes: SimpleChanges): void {
     if (changes.orderStatus?.currentValue === OrderStatus.CANCELED || changes.orderStatus?.currentValue === OrderStatus.DONE) {
@@ -43,6 +42,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();
   }
 
   public isFormRequired(): boolean {
@@ -66,8 +66,32 @@ export class UbsAdminResponsiblePersonsComponent implements OnInit, OnDestroy, O
     return [];
   }
 
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
+  isFieldOptional(controlName: string): boolean {
+    return this.orderStatus === 'ADJUSTMENT' && !['responsibleCaller'].includes(controlName);
+  }
+
+  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.html

@@ -52,7 +52,12 @@ <h4>{{ 'several-orders-pop-up.title' | translate }}</h4>
       <div class="form" formGroupName="responsiblePersonsForm">
         <div class="form-row" *ngFor="let person of responsiblePersonsData">
           <div class="form-group">
-            <label class="form__label">{{ person.translate | 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 formControlName="{{ person.formControlName }}" class="form-control form__select">
               <option *ngFor="let employee of person.responsiblePersonsArray" [value]="employee">
                 {{ employee }}