[Fix] #7836 admin edit all types of order comments

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

@@ -119,6 +119,7 @@
     <textarea
       id="addressComment"
       class="form-control"
+      [readonly]="isUneditableStatus"
       formControlName="addressComment"
       placeholder="{{ 'personal-info.pop-up-comment-placeholder' | translate }}"
       (change)="onCommentChange()"

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

@@ -206,7 +206,6 @@ export class AddressInputComponent implements OnInit, AfterViewInit, OnDestroy,
     }
 
     if (this.isFromAdminPage) {
-      this.addressComment.disable();
       this.region.disable();
     }
   }
@@ -519,7 +518,6 @@ export class AddressInputComponent implements OnInit, AfterViewInit, OnDestroy,
 
   private OnChangeAndTouched(): void {
     if (this.isFromAdminPage) {
-      this.addressComment.disable();
       this.region.disable();
     }
     this.onChange(this.addressData.getValues());

src/app/ubs/ubs-admin/components/shared/components/comment-pop-up/comment-pop-up.component.html

@@ -0,0 +1,14 @@
+<div class="wrapper">
+  <div class="set_comment_container">
+    <h3>{{ header }}</h3>
+    <div class="set_comment">
+      <form [formGroup]="commentForm">
+        <textarea formControlName="comment" placeholder="{{ 'order-edit.comment.placeholder' | translate }}" cols="50" rows="6"></textarea>
+      </form>
+    </div>
+    <div class="comment_btns">
+      <button class="cancel" [mat-dialog-close]="false">{{ 'order-edit.btn.cancel' | translate }}</button>
+      <button (click)="onSubmit()" class="save">{{ 'order-edit.btn.save' | translate }}</button>
+    </div>
+  </div>
+</div>

src/app/ubs/ubs-admin/components/shared/components/comment-pop-up/comment-pop-up.component.scss

@@ -0,0 +1,56 @@
+* {
+  font-family: var(--ubs-quaternary-font);
+}
+
+.wrapper {
+  .set_comment_container {
+    border-radius: 10px;
+    font-size: 16px;
+
+    h3 {
+      font-size: 20px;
+      font-weight: 600;
+    }
+
+    .comment_btns {
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+
+  .set_comment {
+    padding-block: 20px;
+    display: flex;
+    justify-content: space-between;
+
+    textarea {
+      padding: 10px;
+      border: 1px solid var(--ubs-tertiary-grey);
+      border-radius: 5px;
+      resize: none;
+      outline: none;
+    }
+
+    textarea:focus {
+      border: 1px solid var(--ubs-tertiary-grey);
+    }
+  }
+}
+
+.cancel {
+  background: white;
+  border-radius: 5px;
+  border: none;
+  color: var(--ubs-primary-black);
+  font-weight: 600;
+}
+
+.save {
+  height: 43px;
+  background: var(--ubs-button-light-green);
+  border-radius: 5px;
+  border: 1px solid var(--ubs-button-light-green);
+  padding: 0 30px;
+  color: var(--ubs-tertiary-dark-grey);
+  font-weight: 600;
+}

src/app/ubs/ubs-admin/components/shared/components/comment-pop-up/comment-pop-up.component.spec.ts

@@ -0,0 +1,30 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CommentPopUpComponent } from './comment-pop-up.component';
+import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { TranslateModule } from '@ngx-translate/core';
+import { ReactiveFormsModule } from '@angular/forms';
+
+describe('CommentPopUpComponent', () => {
+  let component: CommentPopUpComponent;
+  let fixture: ComponentFixture<CommentPopUpComponent>;
+
+  const MatDialogRefMock = {
+    close: () => {}
+  };
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [CommentPopUpComponent],
+      imports: [MatDialogModule, ReactiveFormsModule, TranslateModule.forRoot()],
+      providers: [{ provide: MatDialogRef, useValue: MatDialogRefMock }]
+    });
+    fixture = TestBed.createComponent(CommentPopUpComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/ubs/ubs-admin/components/shared/components/comment-pop-up/comment-pop-up.component.ts

@@ -0,0 +1,35 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MatDialogRef } from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-comment-pop-up',
+  templateUrl: './comment-pop-up.component.html',
+  styleUrls: ['./comment-pop-up.component.scss']
+})
+export class CommentPopUpComponent implements OnInit {
+  @Input() header: string;
+  @Input() comment: string;
+
+  commentForm: FormGroup;
+
+  constructor(
+    public fb: FormBuilder,
+    private dialogRef: MatDialogRef<CommentPopUpComponent>
+  ) {}
+
+  ngOnInit(): void {
+    this.initForm();
+  }
+
+  initForm(): void {
+    this.commentForm = this.fb.group({
+      comment: [this.comment, [Validators.maxLength(255)]]
+    });
+  }
+
+  onSubmit(): void {
+    const data = this.commentForm.get('comment').value;
+    this.dialogRef.close(data);
+  }
+}

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]="uneditableStatus || !this.isEmployeeCanEditOrder"
+                  [readonly]="isUneditableStatus || !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]="uneditableStatus || !this.isEmployeeCanEditOrder"
+                  [readonly]="isUneditableStatus || !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]="uneditableStatus || !this.isEmployeeCanEditOrder"
+              [readonly]="isUneditableStatus || !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]="uneditableStatus || !this.isEmployeeCanEditOrder"
+              [readonly]="isUneditableStatus || !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;
-  uneditableStatus: boolean;
+  isUneditableStatus: boolean;
 
   constructor(private dialog: MatDialog) {}
 
@@ -44,7 +44,7 @@ export class UbsAdminOrderClientInfoComponent implements OnInit, OnChanges, OnDe
   ngOnChanges(changes: SimpleChanges): void {
     if (changes.orderStatus?.currentValue) {
       this.isOrderDone = changes.orderStatus.currentValue === OrderStatus.DONE;
-      this.uneditableStatus =
+      this.isUneditableStatus =
         this.isOrderDone ||
         changes.orderStatus.currentValue === OrderStatus.CANCELED ||
         changes.orderStatus.currentValue === OrderStatus.BROUGHT_IT_HIMSELF;

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

@@ -230,12 +230,15 @@ <h3 class="form__headline">{{ 'order-details.title' | translate }}</h3>
           <label for="customer-comment">{{ 'order-details.client-comment.label' | translate }}</label>
           <textarea
             class="form-control comment"
+            [ngClass]="!isEmployeeCanEditOrder && 'readonly'"
             formControlName="customerComment"
             placeholder="{{ 'order-details.client-comment.placeholder' | translate }}"
             id="customer-comment"
-            [readOnly]="true"
-          >
-          </textarea>
+            [readonly]="isDisabledStatus"
+          ></textarea>
+          <div class="validation" *ngIf="customerComment.invalid && customerComment.touched">
+            <app-ubs-input-error [formElement]="customerComment"> </app-ubs-input-error>
+          </div>
         </div>
       </div>
     </div>

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

@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
-import { FormArray, FormControl, FormGroup, Validators } from '@angular/forms';
+import { AbstractControl, 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';
@@ -37,6 +37,7 @@ export class UbsAdminOrderDetailsFormComponent implements OnInit, OnChanges {
   isOrderNotTakenOut = false;
   isDisabledWriteOffStation = false;
   isDisabledStatus = false;
+  isUneditableStatus: boolean;
 
   @Output() deleteNumberOrderFromEcoShopChanged = new EventEmitter<boolean>();
   @Output() checkMinOrder = new EventEmitter<boolean>();
@@ -57,10 +58,13 @@ export class UbsAdminOrderDetailsFormComponent implements OnInit, OnChanges {
 
   constructor(private readonly orderService: OrderService) {}
 
+  get customerComment(): AbstractControl {
+    return this.orderDetailsForm.get('customerComment');
+  }
+
   ngOnChanges(changes: SimpleChanges) {
     const curStatus = changes.orderStatusInfo?.currentValue;
     const prevStatus = changes.orderStatusInfo?.previousValue;
-
     if (curStatus?.key) {
       this.isOrderCancelled = curStatus?.key === OrderStatus.CANCELED;
       this.isOrderBroughtByHimself = curStatus?.key === OrderStatus.BROUGHT_IT_HIMSELF;

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

@@ -458,6 +458,9 @@ export class UbsAdminOrderComponent implements OnInit, OnDestroy, AfterContentCh
 
     if (changedValues.orderDetailsForm) {
       changedValues.orderDetailDto = this.formatBagsValue(changedValues.orderDetailsForm);
+      if (changedValues.orderDetailsForm.customerComment) {
+        changedValues.orderDetailDto.userComment = changedValues.orderDetailsForm.customerComment;
+      }
       const keyEcoNumberFromShop = 'ecoNumberFromShop';
       if (changedValues.orderDetailsForm.storeOrderNumbers || this.deleteNumberOrderFromEcoShop) {
         changedValues[keyEcoNumberFromShop] = {

src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.html

@@ -0,0 +1,11 @@
+<div
+  class="comments"
+  #tooltip="matTooltip"
+  matTooltip="{{ data }}"
+  (mouseenter)="onMouseEnter($event, tooltip)"
+  (mouseleave)="tooltip.hide()"
+>
+  <span>{{ data }}</span>
+  <span *ngIf="!isEditable && !isBlocked && !isUneditableStatus" class="pointer" (keydown.enter)="edit()" (click)="edit()">&#9998;</span>
+  <mat-spinner class="spinner" *ngIf="isBlocked" strokeWidth="3" diameter="20"></mat-spinner>
+</div>

src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.scss

@@ -0,0 +1,26 @@
+.comments {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 0 10px;
+  margin: 0 10px;
+  cursor: default;
+  position: relative;
+}
+
+.pointer {
+  cursor: pointer;
+  position: absolute;
+  right: 0;
+}
+
+.spinner {
+  position: absolute;
+  right: 0;
+  top: 20%;
+}
+
+div {
+  width: 100%;
+  height: 100%;
+}