From 547198c4dc0d2513a4ca188ea99480a215e0c027 Mon Sep 17 00:00:00 2001 From: yuliia_karas Date: Thu, 5 Dec 2024 14:56:06 +0200 Subject: [PATCH 1/8] provide ability to change all types of comments to admin --- src/app/shared/address-input/address-input.component.ts | 2 -- .../ubs-admin-order-details-form.component.html | 8 +++++--- .../ubs-admin-order-details-form.component.ts | 5 ++++- .../ubs-admin-order/ubs-admin-order.component.ts | 3 +++ 4 files changed, 12 insertions(+), 6 deletions(-) diff --git a/src/app/shared/address-input/address-input.component.ts b/src/app/shared/address-input/address-input.component.ts index 1a0447c95b..5f93019f2f 100644 --- a/src/app/shared/address-input/address-input.component.ts +++ b/src/app/shared/address-input/address-input.component.ts @@ -181,7 +181,6 @@ export class AddressInputComponent implements OnInit, AfterViewInit, OnDestroy, this.updateDistrictEditState(); } if (this.isFromAdminPage) { - this.addressComment.disable(); this.region.disable(); } this.cdr.detectChanges(); @@ -477,7 +476,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()); diff --git a/src/app/ubs/ubs-admin/components/ubs-admin-order-details-form/ubs-admin-order-details-form.component.html b/src/app/ubs/ubs-admin/components/ubs-admin-order-details-form/ubs-admin-order-details-form.component.html index 440b175726..cbf213a52b 100644 --- a/src/app/ubs/ubs-admin/components/ubs-admin-order-details-form/ubs-admin-order-details-form.component.html +++ b/src/app/ubs/ubs-admin/components/ubs-admin-order-details-form/ubs-admin-order-details-form.component.html @@ -217,12 +217,14 @@

{{ 'order-details.title' | translate }}

+ > +
+ +
diff --git a/src/app/ubs/ubs-admin/components/ubs-admin-order-details-form/ubs-admin-order-details-form.component.ts b/src/app/ubs/ubs-admin/components/ubs-admin-order-details-form/ubs-admin-order-details-form.component.ts index 2a76e70341..4a54394573 100644 --- a/src/app/ubs/ubs-admin/components/ubs-admin-order-details-form/ubs-admin-order-details-form.component.ts +++ b/src/app/ubs/ubs-admin/components/ubs-admin-order-details-form/ubs-admin-order-details-form.component.ts @@ -58,10 +58,13 @@ export class UbsAdminOrderDetailsFormComponent implements OnInit, OnChanges { constructor(private orderService: OrderService) {} + get customerComment() { + 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; diff --git a/src/app/ubs/ubs-admin/components/ubs-admin-order/ubs-admin-order.component.ts b/src/app/ubs/ubs-admin/components/ubs-admin-order/ubs-admin-order.component.ts index 6477956cf5..22ed3c2e4b 100644 --- a/src/app/ubs/ubs-admin/components/ubs-admin-order/ubs-admin-order.component.ts +++ b/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] = { From 52b46e707099fda0e297369a22b81df32da76547 Mon Sep 17 00:00:00 2001 From: yuliia_karas Date: Tue, 10 Dec 2024 19:24:46 +0200 Subject: [PATCH 2/8] add comment popup on a big table --- .../comment-pop-up.component.html | 14 +++ .../comment-pop-up.component.scss | 56 ++++++++++ .../comment-pop-up.component.spec.ts | 21 ++++ .../comment-pop-up.component.ts | 35 ++++++ .../table-cell-input.component.html | 12 ++ .../table-cell-input.component.scss | 32 ++++++ .../table-cell-input.component.spec.ts | 21 ++++ .../table-cell-input.component.ts | 103 ++++++++++++++++++ .../ubs-admin-table.component.html | 13 +++ .../ubs-admin-table.component.ts | 2 +- src/app/ubs/ubs-admin/ubs-admin.module.ts | 6 +- 11 files changed, 313 insertions(+), 2 deletions(-) create mode 100644 src/app/ubs/ubs-admin/components/shared/components/comment-pop-up/comment-pop-up.component.html create mode 100644 src/app/ubs/ubs-admin/components/shared/components/comment-pop-up/comment-pop-up.component.scss create mode 100644 src/app/ubs/ubs-admin/components/shared/components/comment-pop-up/comment-pop-up.component.spec.ts create mode 100644 src/app/ubs/ubs-admin/components/shared/components/comment-pop-up/comment-pop-up.component.ts create mode 100644 src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.html create mode 100644 src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.scss create mode 100644 src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.spec.ts create mode 100644 src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.ts diff --git a/src/app/ubs/ubs-admin/components/shared/components/comment-pop-up/comment-pop-up.component.html b/src/app/ubs/ubs-admin/components/shared/components/comment-pop-up/comment-pop-up.component.html new file mode 100644 index 0000000000..f5b0c172ed --- /dev/null +++ b/src/app/ubs/ubs-admin/components/shared/components/comment-pop-up/comment-pop-up.component.html @@ -0,0 +1,14 @@ +
+
+

{{ header }}

+
+
+ +
+
+
+ + +
+
+
diff --git a/src/app/ubs/ubs-admin/components/shared/components/comment-pop-up/comment-pop-up.component.scss b/src/app/ubs/ubs-admin/components/shared/components/comment-pop-up/comment-pop-up.component.scss new file mode 100644 index 0000000000..5bbdc49c65 --- /dev/null +++ b/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; +} diff --git a/src/app/ubs/ubs-admin/components/shared/components/comment-pop-up/comment-pop-up.component.spec.ts b/src/app/ubs/ubs-admin/components/shared/components/comment-pop-up/comment-pop-up.component.spec.ts new file mode 100644 index 0000000000..01c5ac2c13 --- /dev/null +++ b/src/app/ubs/ubs-admin/components/shared/components/comment-pop-up/comment-pop-up.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CommentPopUpComponent } from './comment-pop-up.component'; + +describe('CommentPopUpComponent', () => { + let component: CommentPopUpComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [CommentPopUpComponent] + }); + fixture = TestBed.createComponent(CommentPopUpComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/ubs/ubs-admin/components/shared/components/comment-pop-up/comment-pop-up.component.ts b/src/app/ubs/ubs-admin/components/shared/components/comment-pop-up/comment-pop-up.component.ts new file mode 100644 index 0000000000..246e26774a --- /dev/null +++ b/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 + ) {} + + 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); + } +} diff --git a/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.html b/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.html new file mode 100644 index 0000000000..3a932a4666 --- /dev/null +++ b/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.html @@ -0,0 +1,12 @@ +
+ {{ data }} + + ✎ + +
diff --git a/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.scss b/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.scss new file mode 100644 index 0000000000..caee668d93 --- /dev/null +++ b/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.scss @@ -0,0 +1,32 @@ +.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%; +} + +::ng-deep .mat-tooltip { + font-size: 12px; + text-align: justify; + max-width: 350px !important; +} diff --git a/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.spec.ts b/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.spec.ts new file mode 100644 index 0000000000..727ec02107 --- /dev/null +++ b/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TableCellInputComponent } from './table-cell-input.component'; + +describe('TableCellInputComponent', () => { + let component: TableCellInputComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [TableCellInputComponent] + }); + fixture = TestBed.createComponent(TableCellInputComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.ts b/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.ts new file mode 100644 index 0000000000..92b4403415 --- /dev/null +++ b/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.ts @@ -0,0 +1,103 @@ +import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { IAlertInfo, IEditCell } from '@ubs/ubs-admin/models/edit-cell.model'; +import { IColumnBelonging } from '@ubs/ubs-admin/models/ubs-admin.interface'; +import { AdminTableService } from '@ubs/ubs-admin/services/admin-table.service'; +import { take } from 'rxjs'; +import { CommentPopUpComponent } from '../../shared/components/comment-pop-up/comment-pop-up.component'; +import { MatDialog, MatDialogConfig } from '@angular/material/dialog'; +import { LocalStorageService } from '@global-service/localstorage/local-storage.service'; +import { MouseEvents } from 'src/app/shared/mouse-events'; + +@Component({ + selector: 'app-table-cell-input', + templateUrl: './table-cell-input.component.html', + styleUrls: ['./table-cell-input.component.scss'] +}) +export class TableCellInputComponent { + @Input() column: IColumnBelonging; + @Input() id: number; + @Input() ordersToChange: number[]; + @Input() isAllChecked: boolean; + @Input() data; + + @Output() cancelEdit = new EventEmitter(); + @Output() editCommentCell = new EventEmitter(); + @Output() showBlockedInfo = new EventEmitter(); + @Output() isCommentEditorOpened = new EventEmitter(); + + isEditable: boolean; + isBlocked: boolean; + + private typeOfChange: number[]; + private font = '12px Lato, sans-serif'; + + private dialogConfig = new MatDialogConfig(); + + constructor( + private adminTableService: AdminTableService, + private localStorageService: LocalStorageService, + public dialog: MatDialog + ) {} + + edit(): void { + this.isEditable = false; + this.isBlocked = true; + + this.typeOfChange = this.adminTableService.howChangeCell(this.isAllChecked, this.ordersToChange, this.id); + + this.adminTableService + .blockOrders(this.typeOfChange) + .pipe(take(1)) + .subscribe((res: IAlertInfo[]) => { + if (res[0] === undefined) { + this.isBlocked = false; + this.isEditable = true; + this.openPopUp(); + } else { + this.isEditable = false; + this.isBlocked = false; + this.showBlockedInfo.emit(res); + } + }); + } + + private openPopUp(): void { + this.dialogConfig.disableClose = true; + const modalRef = this.dialog.open(CommentPopUpComponent, this.dialogConfig); + modalRef.componentInstance.header = this.localStorageService.getCurrentLanguage() === 'ua' ? this.column.ua : this.column.en; + modalRef.componentInstance.comment = this.data; + modalRef.afterClosed().subscribe((data) => { + if (data) { + const newCommentValue: IEditCell = { + id: this.id, + nameOfColumn: this.column.key, + newValue: data + }; + this.editCommentCell.emit(newCommentValue); + } + this.cancelEdit.emit(this.typeOfChange); + this.isEditable = false; + }); + } + + showTooltip(event: any, tooltip: any, maxLength = 50): void { + event.stopImmediatePropagation(); + const lengthStr = event.target?.innerText.split('').length; + if (lengthStr > maxLength) { + tooltip.toggle(); + } + + event.type === MouseEvents.MouseEnter ? this.calculateTextWidth(event, tooltip) : tooltip.hide(); + } + + calculateTextWidth(event: any, tooltip: any, maxLength = 40): void { + const textContainerWidth = event.target.offsetWidth; + const canvas = document.createElement('canvas'); + const context = canvas.getContext('2d'); + context.font = this.font; + const textWidth = Math.round(context.measureText(event.target.innerText).width); + if (textContainerWidth < textWidth || Math.abs(textContainerWidth - textWidth) < maxLength) { + tooltip.show(); + } + } +} diff --git a/src/app/ubs/ubs-admin/components/ubs-admin-table/ubs-admin-table.component.html b/src/app/ubs/ubs-admin/components/ubs-admin-table/ubs-admin-table.component.html index 781da54cd7..f289c1f98d 100644 --- a/src/app/ubs/ubs-admin/components/ubs-admin-table/ubs-admin-table.component.html +++ b/src/app/ubs/ubs-admin/components/ubs-admin-table/ubs-admin-table.component.html @@ -355,6 +355,19 @@ (isTimePickerOpened)="setIsTimePickerOpened($event)" > + + Date: Wed, 11 Dec 2024 10:39:13 +0200 Subject: [PATCH 3/8] unable editing orders` comments in statuses done/cancelled/brought_it_himself --- src/app/shared/address-input/address-input.component.html | 1 + .../ubs-admin-order-client-info.component.html | 8 ++++---- .../ubs-admin-order-client-info.component.ts | 4 ++-- .../ubs-admin-order-details-form.component.html | 1 + .../ubs-admin-order-details-form.component.ts | 1 + .../table-cell-input/table-cell-input.component.html | 2 +- .../table-cell-input/table-cell-input.component.ts | 1 + .../ubs-admin-table/ubs-admin-table.component.html | 1 + 8 files changed, 12 insertions(+), 7 deletions(-) diff --git a/src/app/shared/address-input/address-input.component.html b/src/app/shared/address-input/address-input.component.html index 70bdaabdf1..8a7c8c7bd3 100644 --- a/src/app/shared/address-input/address-input.component.html +++ b/src/app/shared/address-input/address-input.component.html @@ -119,6 +119,7 @@
diff --git a/src/app/ubs/ubs-admin/components/ubs-admin-order-details-form/ubs-admin-order-details-form.component.ts b/src/app/ubs/ubs-admin/components/ubs-admin-order-details-form/ubs-admin-order-details-form.component.ts index 06e42111b6..5f619850ca 100644 --- a/src/app/ubs/ubs-admin/components/ubs-admin-order-details-form/ubs-admin-order-details-form.component.ts +++ b/src/app/ubs/ubs-admin/components/ubs-admin-order-details-form/ubs-admin-order-details-form.component.ts @@ -37,6 +37,7 @@ export class UbsAdminOrderDetailsFormComponent implements OnInit, OnChanges { isOrderNotTakenOut = false; isDisabledWriteOffStation = false; isDisabledStatus = false; + isUneditableStatus: boolean; @Output() deleteNumberOrderFromEcoShopChanged = new EventEmitter(); @Output() checkMinOrder = new EventEmitter(); diff --git a/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.html b/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.html index 3a932a4666..31f08326f5 100644 --- a/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.html +++ b/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.html @@ -7,6 +7,6 @@ (mouseleave)="tooltip.hide()" >{{ data }} - ✎ + ✎
diff --git a/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.ts b/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.ts index 92b4403415..0579a6a050 100644 --- a/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.ts +++ b/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.ts @@ -18,6 +18,7 @@ export class TableCellInputComponent { @Input() id: number; @Input() ordersToChange: number[]; @Input() isAllChecked: boolean; + @Input() isUneditableStatus: boolean; @Input() data; @Output() cancelEdit = new EventEmitter(); diff --git a/src/app/ubs/ubs-admin/components/ubs-admin-table/ubs-admin-table.component.html b/src/app/ubs/ubs-admin/components/ubs-admin-table/ubs-admin-table.component.html index 389a7e00f3..3a444ca15a 100644 --- a/src/app/ubs/ubs-admin/components/ubs-admin-table/ubs-admin-table.component.html +++ b/src/app/ubs/ubs-admin/components/ubs-admin-table/ubs-admin-table.component.html @@ -364,6 +364,7 @@ [id]="row.id" [ordersToChange]="idsToChange" [isAllChecked]="allChecked" + [isUneditableStatus]="checkStatusOfOrders(row.id)" (cancelEdit)="cancelEditCell($event)" (editCommentCell)="editCell($event)" (showBlockedInfo)="showBlockedMessage($event)" From fdb4c10fdfca9df1f5a1d7a0ced77f5e7f8a203a Mon Sep 17 00:00:00 2001 From: yuliia_karas Date: Wed, 11 Dec 2024 11:48:18 +0200 Subject: [PATCH 4/8] refactor tooltip for readonly and input cells --- .../table-cell-input.component.html | 17 +++--- .../table-cell-input.component.scss | 6 -- .../table-cell-input.component.ts | 21 +------ .../table-cell-readonly.comoponent.spec.ts | 53 ------------------ .../table-cell-readonly.component.html | 2 +- .../table-cell-readonly.component.ts | 25 ++------- .../services/admin-table.service.spec.ts | 56 +++++++++++++++++++ .../ubs-admin/services/admin-table.service.ts | 22 ++++++++ 8 files changed, 94 insertions(+), 108 deletions(-) diff --git a/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.html b/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.html index 31f08326f5..f3f4e71f43 100644 --- a/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.html +++ b/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.html @@ -1,12 +1,11 @@ -
- {{ data }} - +
+ {{ data }} ✎
diff --git a/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.scss b/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.scss index caee668d93..20735b60ed 100644 --- a/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.scss +++ b/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.scss @@ -24,9 +24,3 @@ div { width: 100%; height: 100%; } - -::ng-deep .mat-tooltip { - font-size: 12px; - text-align: justify; - max-width: 350px !important; -} diff --git a/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.ts b/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.ts index 0579a6a050..5fbff8a848 100644 --- a/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.ts +++ b/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.ts @@ -81,24 +81,7 @@ export class TableCellInputComponent { }); } - showTooltip(event: any, tooltip: any, maxLength = 50): void { - event.stopImmediatePropagation(); - const lengthStr = event.target?.innerText.split('').length; - if (lengthStr > maxLength) { - tooltip.toggle(); - } - - event.type === MouseEvents.MouseEnter ? this.calculateTextWidth(event, tooltip) : tooltip.hide(); - } - - calculateTextWidth(event: any, tooltip: any, maxLength = 40): void { - const textContainerWidth = event.target.offsetWidth; - const canvas = document.createElement('canvas'); - const context = canvas.getContext('2d'); - context.font = this.font; - const textWidth = Math.round(context.measureText(event.target.innerText).width); - if (textContainerWidth < textWidth || Math.abs(textContainerWidth - textWidth) < maxLength) { - tooltip.show(); - } + onMouseEnter(event: MouseEvent, tooltip: any): void { + this.adminTableService.showTooltip(event, tooltip, this.font); } } diff --git a/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-readonly/table-cell-readonly.comoponent.spec.ts b/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-readonly/table-cell-readonly.comoponent.spec.ts index cfeb6791e1..e95e5cde7d 100644 --- a/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-readonly/table-cell-readonly.comoponent.spec.ts +++ b/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-readonly/table-cell-readonly.comoponent.spec.ts @@ -85,59 +85,6 @@ describe('TableCellReadonlyComponent', () => { }); }); - it('should not show tooltip if textContainerWidth is greater than or equal to textWidth', () => { - const event = { - target: { - offsetWidth: 100, - innerText: 'Short text' - } - }; - const tooltip = { - show: jasmine.createSpy('show') - }; - - component.calculateTextWidth(event, tooltip); - - expect(tooltip.show).not.toHaveBeenCalled(); - }); - - it('should not show tooltip if the difference between textContainerWidth and textWidth is greater than or equal to maxLength', () => { - const event = { - target: { - offsetWidth: 120, - innerText: 'Long text' - } - }; - const tooltip = { - show: jasmine.createSpy('show') - }; - const maxLength = 20; - - component.calculateTextWidth(event, tooltip, maxLength); - - expect(tooltip.show).not.toHaveBeenCalled(); - }); - - it('should hide tooltip if lengthStr is not greater than maxLength', () => { - const event = { - stopImmediatePropagation: jasmine.createSpy('stopImmediatePropagation'), - target: { - innerText: 'Short text' - } - }; - const tooltip = { - toggle: jasmine.createSpy('toggle'), - hide: jasmine.createSpy('hide') - }; - const maxLength = 50; - - component.showTooltip(event, tooltip, maxLength); - - expect(event.stopImmediatePropagation).toHaveBeenCalled(); - expect(tooltip.toggle).not.toHaveBeenCalled(); - expect(tooltip.hide).toHaveBeenCalled(); - }); - it('should update title and data on changes', () => { component.key = TableKeys.generalDiscount; component.title = '0.00 UAH'; diff --git a/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-readonly/table-cell-readonly.component.html b/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-readonly/table-cell-readonly.component.html index 7d2d257895..310356082c 100644 --- a/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-readonly/table-cell-readonly.component.html +++ b/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-readonly/table-cell-readonly.component.html @@ -8,7 +8,7 @@ #tooltip="matTooltip" matTooltip="{{ title | serverTranslate: lang }}" matTooltipClass="my-custom-tooltip" - (mouseenter)="showTooltip($event, tooltip)" + (mouseenter)="onMouseEnter($event, tooltip)" (mouseleave)="tooltip.hide()" > {{ (dataObj ? dataObj : data) | serverTranslate: lang }} diff --git a/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-readonly/table-cell-readonly.component.ts b/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-readonly/table-cell-readonly.component.ts index fab8e5f331..c7c5cffe6b 100644 --- a/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-readonly/table-cell-readonly.component.ts +++ b/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-readonly/table-cell-readonly.component.ts @@ -5,6 +5,7 @@ import { Language } from 'src/app/main/i18n/Language'; import { TableKeys } from '../../../services/table-keys.enum'; import { Patterns } from 'src/assets/patterns/patterns'; import { PaymnetStatus } from 'src/app/ubs/ubs/order-status.enum'; +import { AdminTableService } from '@ubs/ubs-admin/services/admin-table.service'; @Component({ selector: 'app-table-cell-readonly', @@ -25,6 +26,8 @@ export class TableCellReadonlyComponent implements OnInit, OnChanges { private font = '12px Lato, sans-serif'; typeof: any; + constructor(private adminTableService: AdminTableService) {} + ngOnInit(): void { if (this.optional?.length) { this.dataObj = this.optional.filter((item) => item.key === this.title)[0]; @@ -73,25 +76,7 @@ export class TableCellReadonlyComponent implements OnInit, OnChanges { } } - showTooltip(event: any, tooltip: any, maxLength = 50): void { - event.stopImmediatePropagation(); - const lengthStr = event.target?.innerText.split('').length; - if (lengthStr > maxLength) { - tooltip.toggle(); - } - - event.type === MouseEvents.MouseEnter ? this.calculateTextWidth(event, tooltip) : tooltip.hide(); - } - - calculateTextWidth(event: any, tooltip: any, maxLength = 40): void { - const textContainerWidth = event.target.offsetWidth; - const canvas = document.createElement('canvas'); - const context = canvas.getContext('2d'); - context.font = this.font; - const textWidth = Math.round(context.measureText(event.target.innerText).width); - - if (textContainerWidth < textWidth || Math.abs(textContainerWidth - textWidth) < maxLength) { - tooltip.show(); - } + onMouseEnter(event: MouseEvent, tooltip: any): void { + this.adminTableService.showTooltip(event, tooltip, this.font); } } diff --git a/src/app/ubs/ubs-admin/services/admin-table.service.spec.ts b/src/app/ubs/ubs-admin/services/admin-table.service.spec.ts index 150ba3e5ac..3164bf7471 100644 --- a/src/app/ubs/ubs-admin/services/admin-table.service.spec.ts +++ b/src/app/ubs/ubs-admin/services/admin-table.service.spec.ts @@ -473,4 +473,60 @@ describe('AdminTableService', () => { expect(service.setDateFormat('2024-05-21T14:30:00Z')).toEqual('2024-05-21'); expect(service.setDateFormat('2024-01-01T00:00:00Z')).toEqual('2024-01-01'); }); + + it('should not show tooltip if textContainerWidth is greater than or equal to textWidth', () => { + const event = { + target: { + offsetWidth: 100, + innerText: 'Short text' + } + }; + const tooltip = { + show: jasmine.createSpy('show') + }; + const font = '12px Lato, sans-serif'; + + service.calculateTextWidth(event, tooltip, font); + + expect(tooltip.show).not.toHaveBeenCalled(); + }); + + it('should not show tooltip if the difference between textContainerWidth and textWidth is greater than or equal to maxLength', () => { + const event = { + target: { + offsetWidth: 120, + innerText: 'Long text' + } + }; + const tooltip = { + show: jasmine.createSpy('show') + }; + const font = '12px Lato, sans-serif'; + const maxLength = 20; + + service.calculateTextWidth(event, tooltip, font, maxLength); + + expect(tooltip.show).not.toHaveBeenCalled(); + }); + + it('should hide tooltip if lengthStr is not greater than maxLength', () => { + const event = { + stopImmediatePropagation: jasmine.createSpy('stopImmediatePropagation'), + target: { + innerText: 'Short text' + } + }; + const tooltip = { + toggle: jasmine.createSpy('toggle'), + hide: jasmine.createSpy('hide') + }; + const font = '12px Lato, sans-serif'; + const maxLength = 50; + + service.showTooltip(event, tooltip, font, maxLength); + + expect(event.stopImmediatePropagation).toHaveBeenCalled(); + expect(tooltip.toggle).not.toHaveBeenCalled(); + expect(tooltip.hide).toHaveBeenCalled(); + }); }); diff --git a/src/app/ubs/ubs-admin/services/admin-table.service.ts b/src/app/ubs/ubs-admin/services/admin-table.service.ts index 8d301ea7a9..151752f853 100644 --- a/src/app/ubs/ubs-admin/services/admin-table.service.ts +++ b/src/app/ubs/ubs-admin/services/admin-table.service.ts @@ -8,6 +8,7 @@ import { MatCheckboxChange } from '@angular/material/checkbox'; import { LocalStorageService } from '@global-service/localstorage/local-storage.service'; import moment from 'moment'; import { Observable } from 'rxjs'; +import { MouseEvents } from 'src/app/shared/mouse-events'; const columnMapping: { [key: string]: string } = { dateOfExportFrom: 'deliveryDate.from', @@ -354,6 +355,27 @@ export class AdminTableService { this.filters = this.filters.filter((filteredElem) => !filteredElem[colName]); } + showTooltip(event: any, tooltip: any, font: string, maxLength = 50): void { + event.stopImmediatePropagation(); + const lengthStr = event.target?.innerText.split('').length; + if (lengthStr > maxLength) { + tooltip.toggle(); + } + + event.type === MouseEvents.MouseEnter ? this.calculateTextWidth(event, tooltip, font) : tooltip.hide(); + } + + calculateTextWidth(event: any, tooltip: any, font: string, maxLength = 40): void { + const textContainerWidth = event.target.offsetWidth; + const canvas = document.createElement('canvas'); + const context = canvas.getContext('2d'); + context.font = font; + const textWidth = Math.round(context.measureText(event.target.innerText).width); + if (textContainerWidth < textWidth || Math.abs(textContainerWidth - textWidth) < maxLength) { + tooltip.show(); + } + } + setUbsAdminOrdersTableColumnsWidthPreference(preference: Map) { const columnWidthDto = Object.fromEntries(preference.entries()); return this.http.put(`${this.url}orderTableColumnsWidth`, columnWidthDto); From fca9eca8388d000d66237a1d090b9d662eb584de Mon Sep 17 00:00:00 2001 From: yuliia_karas Date: Wed, 11 Dec 2024 14:43:02 +0200 Subject: [PATCH 5/8] add tests --- .../table-cell-input.component.spec.ts | 79 ++++++++++++++++++- .../table-cell-input.component.ts | 6 +- 2 files changed, 76 insertions(+), 9 deletions(-) diff --git a/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.spec.ts b/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.spec.ts index 727ec02107..6aec2bbcc8 100644 --- a/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.spec.ts +++ b/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.spec.ts @@ -1,21 +1,92 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing'; import { TableCellInputComponent } from './table-cell-input.component'; +import { AdminTableService } from '@ubs/ubs-admin/services/admin-table.service'; +import { of } from 'rxjs'; +import { IAlertInfo } from '@ubs/ubs-admin/models/edit-cell.model'; +import { MatDialog, MatDialogModule } from '@angular/material/dialog'; +import { MatTooltipModule } from '@angular/material/tooltip'; +import { TranslateModule } from '@ngx-translate/core'; +import { IColumnBelonging } from '@ubs/ubs-admin/models/ubs-admin.interface'; describe('TableCellInputComponent', () => { let component: TableCellInputComponent; let fixture: ComponentFixture; + let adminTableService: jasmine.SpyObj; beforeEach(() => { + const adminTableServiceSpy = jasmine.createSpyObj('AdminTableService', ['howChangeCell', 'blockOrders', 'showTooltip']); + const matDialogSpy = jasmine.createSpyObj('MatDialog', ['open']); + + const mockModalRef = { + componentInstance: { + header: '', + comment: '' + }, + afterClosed: jasmine.createSpy().and.returnValue(of('New Comment')) + }; + + matDialogSpy.open.and.returnValue(mockModalRef as any); + TestBed.configureTestingModule({ - declarations: [TableCellInputComponent] - }); + declarations: [TableCellInputComponent], + imports: [MatDialogModule, MatTooltipModule, TranslateModule.forRoot()], + providers: [ + { provide: AdminTableService, useValue: adminTableServiceSpy }, + { provide: MatDialog, useValue: matDialogSpy } + ] + }).compileComponents(); + fixture = TestBed.createComponent(TableCellInputComponent); component = fixture.componentInstance; - fixture.detectChanges(); + adminTableService = TestBed.inject(AdminTableService) as jasmine.SpyObj; }); it('should create', () => { expect(component).toBeTruthy(); }); + + it('should call showBlockedInfo.emit() when orders are blocked', () => { + const mockColumn: IColumnBelonging = { key: 'test', ua: 'Test', en: 'Test' }; + const mockData = 'Test Comment'; + component.column = mockColumn; + component.id = 1; + component.ordersToChange = [1, 2, 3]; + component.isAllChecked = true; + component.isUneditableStatus = false; + component.data = mockData; + + adminTableService.howChangeCell.and.returnValue([1, 2, 3]); + adminTableService.blockOrders.and.returnValue(of([{ message: 'Blocked' } as unknown as IAlertInfo])); // Blocked orders + + spyOn(component.showBlockedInfo, 'emit'); + + component.edit(); + + expect(component.showBlockedInfo.emit).toHaveBeenCalledWith([{ message: 'Blocked' }]); + expect(component.isBlocked).toBeFalse(); + expect(component.isEditable).toBeFalse(); + }); + + it('should call onMouseEnter() and show tooltip', () => { + const event = new MouseEvent('mouseenter'); + const tooltip = {}; + + component.onMouseEnter(event, tooltip); + + expect(adminTableService.showTooltip).toHaveBeenCalledWith(event, tooltip, '12px Lato, sans-serif'); + }); + + it('should emit showBlockedInfo when blockOrders returns data', () => { + const mockResponse: IAlertInfo[] = [{ orderId: 10, userName: 'user' }]; + adminTableService.howChangeCell.and.returnValue([10]); + adminTableService.blockOrders.and.returnValue(of(mockResponse)); + spyOn(component.showBlockedInfo, 'emit'); + + component.edit(); + + expect(component.isEditable).toBeFalse(); + expect(component.isBlocked).toBeFalse(); + expect(component.showBlockedInfo.emit).toHaveBeenCalledWith(mockResponse); + }); }); diff --git a/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.ts b/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.ts index 5fbff8a848..cdecb0f41b 100644 --- a/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.ts +++ b/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.ts @@ -6,8 +6,6 @@ import { take } from 'rxjs'; import { CommentPopUpComponent } from '../../shared/components/comment-pop-up/comment-pop-up.component'; import { MatDialog, MatDialogConfig } from '@angular/material/dialog'; import { LocalStorageService } from '@global-service/localstorage/local-storage.service'; -import { MouseEvents } from 'src/app/shared/mouse-events'; - @Component({ selector: 'app-table-cell-input', templateUrl: './table-cell-input.component.html', @@ -19,12 +17,11 @@ export class TableCellInputComponent { @Input() ordersToChange: number[]; @Input() isAllChecked: boolean; @Input() isUneditableStatus: boolean; - @Input() data; + @Input() data: string; @Output() cancelEdit = new EventEmitter(); @Output() editCommentCell = new EventEmitter(); @Output() showBlockedInfo = new EventEmitter(); - @Output() isCommentEditorOpened = new EventEmitter(); isEditable: boolean; isBlocked: boolean; @@ -45,7 +42,6 @@ export class TableCellInputComponent { this.isBlocked = true; this.typeOfChange = this.adminTableService.howChangeCell(this.isAllChecked, this.ordersToChange, this.id); - this.adminTableService .blockOrders(this.typeOfChange) .pipe(take(1)) From 683c98719990997a0dd39a539656faa9ec9ee950 Mon Sep 17 00:00:00 2001 From: yuliia_karas Date: Wed, 11 Dec 2024 15:41:58 +0200 Subject: [PATCH 6/8] fix tests --- .../comment-pop-up/comment-pop-up.component.spec.ts | 11 ++++++++++- .../table-cell-readonly.comoponent.spec.ts | 3 +++ 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/src/app/ubs/ubs-admin/components/shared/components/comment-pop-up/comment-pop-up.component.spec.ts b/src/app/ubs/ubs-admin/components/shared/components/comment-pop-up/comment-pop-up.component.spec.ts index 01c5ac2c13..8d1b8b9f3d 100644 --- a/src/app/ubs/ubs-admin/components/shared/components/comment-pop-up/comment-pop-up.component.spec.ts +++ b/src/app/ubs/ubs-admin/components/shared/components/comment-pop-up/comment-pop-up.component.spec.ts @@ -1,14 +1,23 @@ 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; + const MatDialogRefMock = { + close: () => {} + }; + beforeEach(() => { TestBed.configureTestingModule({ - declarations: [CommentPopUpComponent] + declarations: [CommentPopUpComponent], + imports: [MatDialogModule, ReactiveFormsModule, TranslateModule.forRoot()], + providers: [{ provide: MatDialogRef, useValue: MatDialogRefMock }] }); fixture = TestBed.createComponent(CommentPopUpComponent); component = fixture.componentInstance; diff --git a/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-readonly/table-cell-readonly.comoponent.spec.ts b/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-readonly/table-cell-readonly.comoponent.spec.ts index e95e5cde7d..bbe6a38d0d 100644 --- a/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-readonly/table-cell-readonly.comoponent.spec.ts +++ b/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-readonly/table-cell-readonly.comoponent.spec.ts @@ -6,6 +6,7 @@ import { TableCellReadonlyComponent } from './table-cell-readonly.component'; import { Language } from 'src/app/main/i18n/Language'; import { TableKeys } from '../../../services/table-keys.enum'; import { PaymnetStatus } from '../../../../ubs/order-status.enum'; +import { AdminTableService } from '@ubs/ubs-admin/services/admin-table.service'; describe('TableCellReadonlyComponent', () => { let component: TableCellReadonlyComponent; @@ -17,11 +18,13 @@ describe('TableCellReadonlyComponent', () => { ua: 'ua', en: 'en' }; + const adminTableServiceSpy = jasmine.createSpyObj('AdminTableService', ['howChangeCell', 'blockOrders', 'showTooltip']); beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [MatTooltipModule], declarations: [TableCellReadonlyComponent, ServerTranslatePipe], + providers: [{ provide: AdminTableService, useValue: adminTableServiceSpy }], schemas: [CUSTOM_ELEMENTS_SCHEMA] }).compileComponents(); })); From 23b682de4cdded7be11955fc37b47d55da66e42d Mon Sep 17 00:00:00 2001 From: yuliia_karas Date: Wed, 11 Dec 2024 16:40:27 +0200 Subject: [PATCH 7/8] fix sonar issues --- .../table-cell-input/table-cell-input.component.html | 2 +- .../table-cell-input/table-cell-input.component.spec.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.html b/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.html index f3f4e71f43..810e0e698f 100644 --- a/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.html +++ b/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.html @@ -6,6 +6,6 @@ (mouseleave)="tooltip.hide()" > {{ data }} - ✎ + ✎
diff --git a/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.spec.ts b/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.spec.ts index 6aec2bbcc8..3da8f0e923 100644 --- a/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.spec.ts +++ b/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.spec.ts @@ -57,7 +57,7 @@ describe('TableCellInputComponent', () => { component.data = mockData; adminTableService.howChangeCell.and.returnValue([1, 2, 3]); - adminTableService.blockOrders.and.returnValue(of([{ message: 'Blocked' } as unknown as IAlertInfo])); // Blocked orders + adminTableService.blockOrders.and.returnValue(of([{ message: 'Blocked' } as unknown as IAlertInfo])); spyOn(component.showBlockedInfo, 'emit'); From 95308df2176511fb9b2c3ee72aba5aaeb9d9322e Mon Sep 17 00:00:00 2001 From: yuliia_karas Date: Thu, 12 Dec 2024 11:05:58 +0200 Subject: [PATCH 8/8] improve code safety --- .../ubs-admin-order-details-form.component.ts | 4 +- .../table-cell-input.component.spec.ts | 2 +- .../table-cell-input.component.ts | 23 ++++++----- .../table-cell-readonly.comoponent.spec.ts | 4 +- .../table-cell-readonly.component.ts | 2 +- .../services/admin-table.service.spec.ts | 39 ++++++++++--------- .../ubs-admin/services/admin-table.service.ts | 12 +++--- 7 files changed, 48 insertions(+), 38 deletions(-) diff --git a/src/app/ubs/ubs-admin/components/ubs-admin-order-details-form/ubs-admin-order-details-form.component.ts b/src/app/ubs/ubs-admin/components/ubs-admin-order-details-form/ubs-admin-order-details-form.component.ts index 5f619850ca..3705d51330 100644 --- a/src/app/ubs/ubs-admin/components/ubs-admin-order-details-form/ubs-admin-order-details-form.component.ts +++ b/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'; @@ -58,7 +58,7 @@ export class UbsAdminOrderDetailsFormComponent implements OnInit, OnChanges { constructor(private readonly orderService: OrderService) {} - get customerComment() { + get customerComment(): AbstractControl { return this.orderDetailsForm.get('customerComment'); } diff --git a/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.spec.ts b/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.spec.ts index 3da8f0e923..9c63e4e684 100644 --- a/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.spec.ts +++ b/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.spec.ts @@ -1,4 +1,4 @@ -import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; import { TableCellInputComponent } from './table-cell-input.component'; import { AdminTableService } from '@ubs/ubs-admin/services/admin-table.service'; diff --git a/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.ts b/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.ts index cdecb0f41b..a4fa87a8da 100644 --- a/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.ts +++ b/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.ts @@ -2,7 +2,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core'; import { IAlertInfo, IEditCell } from '@ubs/ubs-admin/models/edit-cell.model'; import { IColumnBelonging } from '@ubs/ubs-admin/models/ubs-admin.interface'; import { AdminTableService } from '@ubs/ubs-admin/services/admin-table.service'; -import { take } from 'rxjs'; +import { catchError, of, take } from 'rxjs'; import { CommentPopUpComponent } from '../../shared/components/comment-pop-up/comment-pop-up.component'; import { MatDialog, MatDialogConfig } from '@angular/material/dialog'; import { LocalStorageService } from '@global-service/localstorage/local-storage.service'; @@ -27,7 +27,7 @@ export class TableCellInputComponent { isBlocked: boolean; private typeOfChange: number[]; - private font = '12px Lato, sans-serif'; + private readonly font = '12px Lato, sans-serif'; private dialogConfig = new MatDialogConfig(); @@ -44,16 +44,21 @@ export class TableCellInputComponent { this.typeOfChange = this.adminTableService.howChangeCell(this.isAllChecked, this.ordersToChange, this.id); this.adminTableService .blockOrders(this.typeOfChange) - .pipe(take(1)) - .subscribe((res: IAlertInfo[]) => { - if (res[0] === undefined) { + .pipe( + take(1), + catchError(() => { this.isBlocked = false; this.isEditable = true; - this.openPopUp(); - } else { - this.isEditable = false; - this.isBlocked = false; + return of([]); + }) + ) + .subscribe((res: IAlertInfo[]) => { + this.isBlocked = false; + if (res && res[0]) { this.showBlockedInfo.emit(res); + } else { + this.isEditable = true; + this.openPopUp(); } }); } diff --git a/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-readonly/table-cell-readonly.comoponent.spec.ts b/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-readonly/table-cell-readonly.comoponent.spec.ts index bbe6a38d0d..4c693e5e96 100644 --- a/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-readonly/table-cell-readonly.comoponent.spec.ts +++ b/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-readonly/table-cell-readonly.comoponent.spec.ts @@ -4,8 +4,8 @@ import { MatTooltipModule } from '@angular/material/tooltip'; import { ServerTranslatePipe } from 'src/app/shared/translate-pipe/translate-pipe.pipe'; import { TableCellReadonlyComponent } from './table-cell-readonly.component'; import { Language } from 'src/app/main/i18n/Language'; -import { TableKeys } from '../../../services/table-keys.enum'; -import { PaymnetStatus } from '../../../../ubs/order-status.enum'; +import { TableKeys } from '@ubs/ubs-admin/services/table-keys.enum'; +import { PaymnetStatus } from '@ubs/ubs/order-status.enum'; import { AdminTableService } from '@ubs/ubs-admin/services/admin-table.service'; describe('TableCellReadonlyComponent', () => { diff --git a/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-readonly/table-cell-readonly.component.ts b/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-readonly/table-cell-readonly.component.ts index c7c5cffe6b..829fca94cb 100644 --- a/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-readonly/table-cell-readonly.component.ts +++ b/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-readonly/table-cell-readonly.component.ts @@ -23,7 +23,7 @@ export class TableCellReadonlyComponent implements OnInit, OnChanges { halfpaid: boolean; dataObj: IColumnBelonging = null; data: string | number | { ua: string; en: string } | null; - private font = '12px Lato, sans-serif'; + private readonly font = '12px Lato, sans-serif'; typeof: any; constructor(private adminTableService: AdminTableService) {} diff --git a/src/app/ubs/ubs-admin/services/admin-table.service.spec.ts b/src/app/ubs/ubs-admin/services/admin-table.service.spec.ts index 3164bf7471..f003bd9855 100644 --- a/src/app/ubs/ubs-admin/services/admin-table.service.spec.ts +++ b/src/app/ubs/ubs-admin/services/admin-table.service.spec.ts @@ -475,12 +475,13 @@ describe('AdminTableService', () => { }); it('should not show tooltip if textContainerWidth is greater than or equal to textWidth', () => { - const event = { - target: { - offsetWidth: 100, - innerText: 'Short text' - } - }; + const event = new MouseEvent('mouseover'); + spyOn(event, 'stopImmediatePropagation'); + Object.defineProperty(event, 'target', { + value: { innerText: 'Short text' }, + writable: true + }); + const tooltip = { show: jasmine.createSpy('show') }; @@ -492,12 +493,13 @@ describe('AdminTableService', () => { }); it('should not show tooltip if the difference between textContainerWidth and textWidth is greater than or equal to maxLength', () => { - const event = { - target: { - offsetWidth: 120, - innerText: 'Long text' - } - }; + const event = new MouseEvent('mouseover'); + spyOn(event, 'stopImmediatePropagation'); + Object.defineProperty(event, 'target', { + value: { innerText: 'Short text' }, + writable: true + }); + const tooltip = { show: jasmine.createSpy('show') }; @@ -510,12 +512,13 @@ describe('AdminTableService', () => { }); it('should hide tooltip if lengthStr is not greater than maxLength', () => { - const event = { - stopImmediatePropagation: jasmine.createSpy('stopImmediatePropagation'), - target: { - innerText: 'Short text' - } - }; + const event = new MouseEvent('mouseover'); + spyOn(event, 'stopImmediatePropagation'); + Object.defineProperty(event, 'target', { + value: { innerText: 'Short text' }, + writable: true + }); + const tooltip = { toggle: jasmine.createSpy('toggle'), hide: jasmine.createSpy('hide') diff --git a/src/app/ubs/ubs-admin/services/admin-table.service.ts b/src/app/ubs/ubs-admin/services/admin-table.service.ts index 151752f853..17ad6f23a0 100644 --- a/src/app/ubs/ubs-admin/services/admin-table.service.ts +++ b/src/app/ubs/ubs-admin/services/admin-table.service.ts @@ -355,9 +355,10 @@ export class AdminTableService { this.filters = this.filters.filter((filteredElem) => !filteredElem[colName]); } - showTooltip(event: any, tooltip: any, font: string, maxLength = 50): void { + showTooltip(event: MouseEvent, tooltip: any, font: string, maxLength = 50): void { event.stopImmediatePropagation(); - const lengthStr = event.target?.innerText.split('').length; + const target = event.target as HTMLElement; + const lengthStr = target?.innerText.split('').length; if (lengthStr > maxLength) { tooltip.toggle(); } @@ -365,12 +366,13 @@ export class AdminTableService { event.type === MouseEvents.MouseEnter ? this.calculateTextWidth(event, tooltip, font) : tooltip.hide(); } - calculateTextWidth(event: any, tooltip: any, font: string, maxLength = 40): void { - const textContainerWidth = event.target.offsetWidth; + calculateTextWidth(event: MouseEvent, tooltip: any, font: string, maxLength = 40): void { + const target = event.target as HTMLElement; + const textContainerWidth = target?.offsetWidth; const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); context.font = font; - const textWidth = Math.round(context.measureText(event.target.innerText).width); + const textWidth = Math.round(context.measureText(target?.innerText).width); if (textContainerWidth < textWidth || Math.abs(textContainerWidth - textWidth) < maxLength) { tooltip.show(); }