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/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..8d1b8b9f3d --- /dev/null +++ b/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; + + 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(); + }); +}); 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-order-client-info/ubs-admin-order-client-info.component.html b/src/app/ubs/ubs-admin/components/ubs-admin-order-client-info/ubs-admin-order-client-info.component.html index 97cb5553f5..4f2a24e62d 100644 --- a/src/app/ubs/ubs-admin/components/ubs-admin-order-client-info/ubs-admin-order-client-info.component.html +++ b/src/app/ubs/ubs-admin/components/ubs-admin-order-client-info/ubs-admin-order-client-info.component.html @@ -57,7 +57,7 @@

{{ 'customer-info.title' | translate }}

class="form-control name-input" type="text" id="recipient-name" - [readonly]="uneditableStatus || !this.isEmployeeCanEditOrder" + [readonly]="isUneditableStatus || !this.isEmployeeCanEditOrder" formControlName="recipientName" />
@@ -69,7 +69,7 @@

{{ 'customer-info.title' | translate }}

{{ 'customer-info.title' | translate }} {{ 'customer-info.title' | translate }} {{ 'order-details.title' | translate }} + [readonly]="isDisabledStatus" + > +
+ +
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 fdbc208bc5..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'; @@ -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(); @@ -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; 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 c8396f69b3..28ed238d35 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] = { 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..810e0e698f --- /dev/null +++ b/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.html @@ -0,0 +1,11 @@ +
+ {{ 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..20735b60ed --- /dev/null +++ b/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%; +} 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..9c63e4e684 --- /dev/null +++ b/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.spec.ts @@ -0,0 +1,92 @@ +import { ComponentFixture, TestBed } 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], + imports: [MatDialogModule, MatTooltipModule, TranslateModule.forRoot()], + providers: [ + { provide: AdminTableService, useValue: adminTableServiceSpy }, + { provide: MatDialog, useValue: matDialogSpy } + ] + }).compileComponents(); + + fixture = TestBed.createComponent(TableCellInputComponent); + component = fixture.componentInstance; + 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])); + + 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 new file mode 100644 index 0000000000..a4fa87a8da --- /dev/null +++ b/src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-input/table-cell-input.component.ts @@ -0,0 +1,88 @@ +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 { 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'; +@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() isUneditableStatus: boolean; + @Input() data: string; + + @Output() cancelEdit = new EventEmitter(); + @Output() editCommentCell = new EventEmitter(); + @Output() showBlockedInfo = new EventEmitter(); + + isEditable: boolean; + isBlocked: boolean; + + private typeOfChange: number[]; + private readonly 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), + catchError(() => { + this.isBlocked = false; + this.isEditable = true; + return of([]); + }) + ) + .subscribe((res: IAlertInfo[]) => { + this.isBlocked = false; + if (res && res[0]) { + this.showBlockedInfo.emit(res); + } else { + this.isEditable = true; + this.openPopUp(); + } + }); + } + + 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; + }); + } + + 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..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,9 @@ 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', () => { 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(); })); @@ -85,59 +88,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..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 @@ -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', @@ -22,9 +23,11 @@ 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) {} + 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/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 30f9d82069..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 @@ -357,6 +357,20 @@ (isTimePickerOpened)="setIsTimePickerOpened($event)" > + + { 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 = new MouseEvent('mouseover'); + spyOn(event, 'stopImmediatePropagation'); + Object.defineProperty(event, 'target', { + value: { innerText: 'Short text' }, + writable: true + }); + + 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 = new MouseEvent('mouseover'); + spyOn(event, 'stopImmediatePropagation'); + Object.defineProperty(event, 'target', { + value: { innerText: 'Short text' }, + writable: true + }); + + 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 = 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') + }; + 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..17ad6f23a0 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,29 @@ export class AdminTableService { this.filters = this.filters.filter((filteredElem) => !filteredElem[colName]); } + showTooltip(event: MouseEvent, tooltip: any, font: string, maxLength = 50): void { + event.stopImmediatePropagation(); + const target = event.target as HTMLElement; + const lengthStr = target?.innerText.split('').length; + if (lengthStr > maxLength) { + tooltip.toggle(); + } + + event.type === MouseEvents.MouseEnter ? this.calculateTextWidth(event, tooltip, font) : tooltip.hide(); + } + + 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(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); diff --git a/src/app/ubs/ubs-admin/ubs-admin.module.ts b/src/app/ubs/ubs-admin/ubs-admin.module.ts index f7cc23b649..3ee3ae3faf 100644 --- a/src/app/ubs/ubs-admin/ubs-admin.module.ts +++ b/src/app/ubs/ubs-admin/ubs-admin.module.ts @@ -101,6 +101,8 @@ import { DeletingProfileReasonPopUpComponent } from 'src/app/ubs/ubs-admin/compo import { UbsAdminEditUserAgreementComponent } from './components/ubs-admin-edit-user-agreement/ubs-admin-edit-user-agreement.component'; import { QuillModule } from 'ngx-quill'; import { UbsAdminConfirmStatusChangePopUpComponent } from './components/ubs-admin-confirm-status-change-pop-up/ubs-admin-confirm-status-change-pop-up.component'; +import { TableCellInputComponent } from './components/ubs-admin-table/table-cell-input/table-cell-input.component'; +import { CommentPopUpComponent } from './components/shared/components/comment-pop-up/comment-pop-up.component'; @NgModule({ declarations: [ @@ -170,7 +172,9 @@ import { UbsAdminConfirmStatusChangePopUpComponent } from './components/ubs-admi DeletingProfileReasonPopUpComponent, TariffSelectorComponent, UbsAdminEditUserAgreementComponent, - UbsAdminConfirmStatusChangePopUpComponent + UbsAdminConfirmStatusChangePopUpComponent, + TableCellInputComponent, + CommentPopUpComponent ], imports: [ CommonModule,