Merge pull request #3471 from ita-social-projects/bugfix/#7749-cancelled-order-unable-to-edit

[Bugfix] #7749 order with status cancelled/brought_by_himself/done unable to edit

Author: hnativlyubomyr

src/app/shared/address-input/address-input.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit } from '@angular/core';
 import {
   AbstractControl,
   ControlValueAccessor,
@@ -43,12 +43,13 @@ import { AddressService } from '../services/address/address.service';
     }
   ]
 })
-export class AddressInputComponent implements OnInit, AfterViewInit, OnDestroy, ControlValueAccessor, Validator {
+export class AddressInputComponent implements OnInit, AfterViewInit, OnDestroy, OnChanges, ControlValueAccessor, Validator {
   @Input() edit: boolean;
   @Input() address: Address;
   @Input() addFromProfile: boolean;
   @Input() isShowCommentInput = true;
   @Input() isFromAdminPage: boolean;
+  @Input() isUneditableStatus: boolean;
 
   addressForm: FormGroup;
   currentLanguage: string;
@@ -69,6 +70,7 @@ export class AddressInputComponent implements OnInit, AfterViewInit, OnDestroy,
 
   private buildingPattern = Patterns.numericAndAlphabetic;
   private $destroy: Subject<void> = new Subject();
+  private viewInitialized = false;
 
   autocompleteRegionRequest = {
     input: '',
@@ -170,6 +172,28 @@ export class AddressInputComponent implements OnInit, AfterViewInit, OnDestroy,
   }
 
   ngAfterViewInit(): void {
+    if (this.isUneditableStatus) {
+      this.disableAllFields();
+    }
+    this.initializeFieldStates();
+    this.viewInitialized = true;
+    this.cdr.detectChanges();
+  }
+
+  ngOnChanges(): void {
+    if (!this.viewInitialized) {
+      return;
+    }
+
+    if (this.isUneditableStatus) {
+      this.disableAllFields();
+    } else {
+      this.enableAllFields();
+      this.initializeFieldStates();
+    }
+  }
+
+  private initializeFieldStates(): void {
     if (!this.edit) {
       this.region.value ? this.city.enable() : this.city.disable();
       this.street.disable();
@@ -180,11 +204,29 @@ export class AddressInputComponent implements OnInit, AfterViewInit, OnDestroy,
     } else {
       this.updateDistrictEditState();
     }
+
     if (this.isFromAdminPage) {
       this.addressComment.disable();
       this.region.disable();
     }
-    this.cdr.detectChanges();
+  }
+
+  private disableAllFields(): void {
+    this.city.disable();
+    this.street.disable();
+    this.houseNumber.disable();
+    this.houseCorpus.disable();
+    this.entranceNumber.disable();
+    this.district.disable();
+  }
+
+  private enableAllFields(): void {
+    this.city.enable();
+    this.street.enable();
+    this.houseNumber.enable();
+    this.houseCorpus.enable();
+    this.entranceNumber.enable();
+    this.district.enable();
   }
 
   initListeners(): void {

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

@@ -10,6 +10,7 @@ <h1 class="form__headline py-3">{{ 'address-details.title' | translate }}</h1>
     [address]="address"
     [edit]="true"
     [isFromAdminPage]="true"
+    [isUneditableStatus]="isEditableStatus$ | async"
   ></app-address-input>
   <hr />
 </div>

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

@@ -1,17 +1,30 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnChanges } from '@angular/core';
 import { FormControl } from '@angular/forms';
+import { OrderStatus } from '@ubs/ubs/order-status.enum';
+import { BehaviorSubject } from 'rxjs';
 import { Address } from 'src/app/ubs/ubs/models/ubs.interface';
 
 @Component({
   selector: 'app-ubs-admin-address-details',
   templateUrl: './ubs-admin-address-details.component.html',
   styleUrls: ['./ubs-admin-address-details.component.scss']
 })
-export class UbsAdminAddressDetailsComponent {
+export class UbsAdminAddressDetailsComponent implements OnChanges {
   @Input() addressExportDetailsDto: FormControl;
   @Input() address: Address;
+  @Input() orderStatus: string;
   pageOpen: boolean;
+  isEditableStatus$ = new BehaviorSubject<boolean>(false);
+
   openDetails(): void {
     this.pageOpen = !this.pageOpen;
   }
+
+  ngOnChanges(): void {
+    const status =
+      this.orderStatus === OrderStatus.CANCELED ||
+      this.orderStatus === OrderStatus.DONE ||
+      this.orderStatus === OrderStatus.BROUGHT_IT_HIMSELF;
+    this.isEditableStatus$.next(status);
+  }
 }

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

@@ -1,23 +1,7 @@
 <div class="container mb-3">
   <div class="form" [formGroup]="exportDetailsDto">
     <div class="empty_card" (click)="openDetails()">
-      <img
-        *ngIf="!pageOpen && (exportDetailsDto.valid || isOrderStatusCancelOrDone)"
-        src="assets/img/ubs-admin-orders/arrow_up.svg"
-        alt="arrow up"
-      />
-      <img
-        *ngIf="pageOpen && (exportDetailsDto.valid || isOrderStatusCancelOrDone)"
-        src="assets/img/ubs-admin-orders/arrow_down.svg"
-        alt="arrow down"
-      />
-      <img
-        *ngIf="pageOpen && !exportDetailsDto.valid && !isOrderStatusCancelOrDone"
-        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">{{ '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.isOrderStatusCancelOrDone = false;
+    component.isUneditableStatus = false;
     expect(component.isFormRequired).toBeFalsy();
   });
 });

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

@@ -1,5 +1,5 @@
 import { formatDate } from '@angular/common';
-import { Component, Input, OnDestroy, OnInit, AfterViewChecked, ChangeDetectorRef, AfterViewInit, OnChanges } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit, ChangeDetectorRef, OnChanges } from '@angular/core';
 import { FormGroup, Validators } from '@angular/forms';
 import { Subject } from 'rxjs';
 import { IExportDetails } from '../../models/ubs-admin.interface';
@@ -29,12 +29,12 @@ export class UbsAdminExportDetailsComponent implements OnInit, OnDestroy, OnChan
   currentHour: string;
   allReceivingStations: string[];
   currentDate: string;
-  isOrderStatusCancelOrDone = false;
+  isUneditableStatus = false;
   resetFieldImg = './assets/img/ubs-tariff/bigClose.svg';
-  private statuses = [OrderStatus.BROUGHT_IT_HIMSELF, OrderStatus.CANCELED];
+  private readonly statuses = [OrderStatus.BROUGHT_IT_HIMSELF, OrderStatus.CANCELED];
 
   constructor(
-    private cdr: ChangeDetectorRef,
+    private readonly cdr: ChangeDetectorRef,
     public orderService: OrderService
   ) {}
 
@@ -57,8 +57,12 @@ export class UbsAdminExportDetailsComponent implements OnInit, OnDestroy, OnChan
       this.exportDetailsDto.updateValueAndValidity();
     });
 
-    if (this.orderStatus === OrderStatus.CANCELED || this.orderStatus === OrderStatus.DONE) {
-      this.isOrderStatusCancelOrDone = true;
+    if (
+      this.orderStatus === OrderStatus.CANCELED ||
+      this.orderStatus === OrderStatus.DONE ||
+      this.orderStatus === OrderStatus.BROUGHT_IT_HIMSELF
+    ) {
+      this.isUneditableStatus = true;
     }
 
     this.cdr.detectChanges();
@@ -70,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);
   }
@@ -79,11 +87,7 @@ export class UbsAdminExportDetailsComponent implements OnInit, OnDestroy, OnChan
   }
 
   get isFormRequired(): boolean {
-    const isNotOpen = !this.pageOpen;
-    const isNotValid = !this.exportDetailsDto.valid;
-    const isNotCancelOrDone = !this.isOrderStatusCancelOrDone;
-
-    return isNotOpen && isNotValid && isNotCancelOrDone;
+    return !this.pageOpen && !this.exportDetailsDto.valid && !this.isUneditableStatus;
   }
 
   showTimePickerClick(): void {

src/app/ubs/ubs-admin/components/ubs-admin-order-client-info/ubs-admin-order-client-info.component.html

@@ -57,7 +57,7 @@ <h3 class="form__headline">{{ 'customer-info.title' | translate }}</h3>
                   class="form-control name-input"
                   type="text"
                   id="recipient-name"
-                  [readonly]="isOrderCanceled || !this.isEmployeeCanEditOrder"
+                  [readonly]="uneditableStatus || !this.isEmployeeCanEditOrder"
                   formControlName="recipientName"
                 />
                 <div *ngIf="userInfoDto.controls['recipientName'].invalid && userInfoDto.controls['recipientName'].touched">
@@ -69,7 +69,7 @@ <h3 class="form__headline">{{ 'customer-info.title' | translate }}</h3>
               <div>
                 <input
                   class="form-control name-input"
-                  [readonly]="isOrderCanceled || !this.isEmployeeCanEditOrder"
+                  [readonly]="uneditableStatus || !this.isEmployeeCanEditOrder"
                   type="text"
                   id="recipient-surname"
                   formControlName="recipientSurName"
@@ -88,7 +88,7 @@ <h3 class="form__headline">{{ 'customer-info.title' | translate }}</h3>
             </label>
             <input
               class="form-control"
-              [readonly]="isOrderCanceled || !this.isEmployeeCanEditOrder"
+              [readonly]="uneditableStatus || !this.isEmployeeCanEditOrder"
               type="tel"
               id="recipient-tel"
               placeholder="{{ 'customer-info.recipient.tel-placeholder' | translate }}"
@@ -108,7 +108,7 @@ <h3 class="form__headline">{{ 'customer-info.title' | translate }}</h3>
             </label>
             <input
               class="form-control"
-              [readonly]="isOrderCanceled || !this.isEmployeeCanEditOrder"
+              [readonly]="uneditableStatus || !this.isEmployeeCanEditOrder"
               type="email"
               id="recipient-email"
               placeholder="{{ 'customer-info.recipient.email-placeholder' | translate }}"

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

@@ -29,7 +29,7 @@ export class UbsAdminOrderClientInfoComponent implements OnInit, OnChanges, OnDe
   totalUserViolations: number;
   isOrderDone: boolean;
   isOrderNotTakenOut: boolean;
-  isOrderCanceled: boolean;
+  uneditableStatus: boolean;
 
   constructor(private dialog: MatDialog) {}
 
@@ -44,7 +44,10 @@ export class UbsAdminOrderClientInfoComponent implements OnInit, OnChanges, OnDe
   ngOnChanges(changes: SimpleChanges): void {
     if (changes.orderStatus?.currentValue) {
       this.isOrderDone = changes.orderStatus.currentValue === OrderStatus.DONE;
-      this.isOrderCanceled = changes.orderStatus.currentValue === OrderStatus.CANCELED;
+      this.uneditableStatus =
+        this.isOrderDone ||
+        changes.orderStatus.currentValue === OrderStatus.CANCELED ||
+        changes.orderStatus.currentValue === OrderStatus.BROUGHT_IT_HIMSELF;
       this.isOrderNotTakenOut = changes.orderStatus.currentValue === OrderStatus.NOT_TAKEN_OUT;
     }
   }

src/app/ubs/ubs-admin/components/ubs-admin-order-details-form/ubs-admin-order-details-form.component.html

@@ -199,12 +199,25 @@ <h3 class="form__headline">{{ 'order-details.title' | translate }}</h3>
                     [unmask]="false"
                     placeholder="XXXXXXXXXX"
                     formControlName="{{ i }}"
-                    [readonly]="!isEmployeeCanEditOrder"
+                    [readonly]="isDisabledStatus || !isEmployeeCanEditOrder"
+                    [ngClass]="{ 'disabled-field': isDisabledStatus }"
                   />
-                  <span input-close-button (click)="deleteOrder(i)">&times;</span>
+                  <span
+                    input-close-button
+                    tabindex="0"
+                    role="button"
+                    (click)="deleteOrder(i)"
+                    (keydown.enter)="deleteOrder(i)"
+                    *ngIf="isEmployeeCanEditOrder && !isDisabledStatus"
+                    >&times;</span
+                  >
                 </div>
               </ng-container>
-              <button *ngIf="checkMaxOrdersFromShop() && isEmployeeCanEditOrder" class="add-order-num" (click)="addOrderNumberFromShop()">
+              <button
+                *ngIf="checkMaxOrdersFromShop() && isEmployeeCanEditOrder && !isDisabledStatus"
+                class="add-order-num"
+                (click)="addOrderNumberFromShop()"
+              >
                 {{ 'order-details.additional-orders' | translate }}
               </button>
             </div>

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

@@ -3,7 +3,7 @@ import { FormArray, FormControl, FormGroup, Validators } from '@angular/forms';
 import { OrderService } from 'src/app/ubs/ubs-admin/services/order.service';
 import { OrderStatus, PaymnetStatus } from 'src/app/ubs/ubs/order-status.enum';
 import { Masks, Patterns } from 'src/assets/patterns/patterns';
-import { IOrderDetails, IOrderInfo, IPaymentInfo, orderPaymentInfo } from '../../models/ubs-admin.interface';
+import { IOrderDetails, IOrderInfo, orderPaymentInfo } from '../../models/ubs-admin.interface';
 import { limitStatus } from '../ubs-admin-tariffs/ubs-tariffs.enum';
 
 @Component({
@@ -17,8 +17,6 @@ export class UbsAdminOrderDetailsFormComponent implements OnInit, OnChanges {
   SHOP_NUMBER_MASK = Masks.ecoStoreMask;
   SHOP_NUMBER_PATTERN = Patterns.ordersPattern;
   amountOfBigBags: number;
-  payMore = true;
-  isInputDisabled = false;
   isVisible: boolean;
   isOrderBroughtByHimself = false;
   bagsInfo;
@@ -38,7 +36,8 @@ export class UbsAdminOrderDetailsFormComponent implements OnInit, OnChanges {
   isOrderDone = false;
   isOrderNotTakenOut = false;
   isDisabledWriteOffStation = false;
-  sumOrder: number;
+  isDisabledStatus = false;
+
   @Output() deleteNumberOrderFromEcoShopChanged = new EventEmitter<boolean>();
   @Output() checkMinOrder = new EventEmitter<boolean>();
   @Output() changeCurrentPrice = new EventEmitter<number>();
@@ -56,7 +55,7 @@ export class UbsAdminOrderDetailsFormComponent implements OnInit, OnChanges {
   @Input() updateBonusAccount: number;
   @Input() paymentInfo: orderPaymentInfo;
 
-  constructor(private orderService: OrderService) {}
+  constructor(private readonly orderService: OrderService) {}
 
   ngOnChanges(changes: SimpleChanges) {
     const curStatus = changes.orderStatusInfo?.currentValue;
@@ -86,8 +85,8 @@ export class UbsAdminOrderDetailsFormComponent implements OnInit, OnChanges {
       this.isVisible = !this.isVisible;
     }
 
-    if (!changes?.orderStatusInfo?.firstChange) {
-      this.isDisabledConfirmQuantity();
+    if (changes?.orderStatusInfo) {
+      this.isDisabledOrderDetails();
     }
     this.recalculateSum();
   }
@@ -114,12 +113,23 @@ export class UbsAdminOrderDetailsFormComponent implements OnInit, OnChanges {
     this.orderDetails = JSON.parse(JSON.stringify(this.orderDetailsOriginal));
   }
 
-  private isDisabledConfirmQuantity() {
-    if (this.isOrderBroughtByHimself || this.isOrderCancelled || this.isOrderNotTakenOut || this.isOrderDone) {
+  private isDisabledOrderDetails() {
+    const shouldDisable = this.isOrderBroughtByHimself || this.isOrderCancelled || this.isOrderNotTakenOut || this.isOrderDone;
+
+    if (shouldDisable) {
       this.orderDetails.bags.forEach((bag) => {
         this.orderDetailsForm.controls[`confirmedQuantity${bag.id}`].disable();
       });
+      this.orderDetailsForm.controls['certificates'].disable();
+      this.orderDetailsForm.controls['storeOrderNumbers'].disable();
+    } else {
+      this.orderDetails.bags.forEach((bag) => {
+        this.orderDetailsForm.controls[`confirmedQuantity${bag.id}`].enable();
+      });
+      this.orderDetailsForm.controls['certificates'].enable();
+      this.orderDetailsForm.controls['storeOrderNumbers'].enable();
     }
+    this.isDisabledStatus = shouldDisable;
   }
 
   recalculateSum() {