From 30da9b85024ea5b96c9a0445302ecfea1b31fb21 Mon Sep 17 00:00:00 2001 From: crisnicandrei <62384997+crisnicandrei@users.noreply.github.com> Date: Thu, 2 Nov 2023 13:24:06 +0200 Subject: [PATCH 1/5] PER-9385 Added a new flag which listens to the hover event and expands the title --- .../file-viewer/file-viewer.component.html | 1 + .../inline-value-edit.component.html | 3 ++ .../inline-value-edit.component.scss | 40 +++++++++++++------ .../inline-value-edit.component.ts | 14 ++++++- 4 files changed, 44 insertions(+), 14 deletions(-) diff --git a/src/app/file-browser/components/file-viewer/file-viewer.component.html b/src/app/file-browser/components/file-viewer/file-viewer.component.html index e9faf3057..f08bed105 100644 --- a/src/app/file-browser/components/file-viewer/file-viewer.component.html +++ b/src/app/file-browser/components/file-viewer/file-viewer.component.html @@ -65,6 +65,7 @@
{{ displayValue || diff --git a/src/app/shared/components/inline-value-edit/inline-value-edit.component.scss b/src/app/shared/components/inline-value-edit/inline-value-edit.component.scss index 9bdb6f311..5d37d3b53 100644 --- a/src/app/shared/components/inline-value-edit/inline-value-edit.component.scss +++ b/src/app/shared/components/inline-value-edit/inline-value-edit.component.scss @@ -29,7 +29,8 @@ form { } } -.inline-value-display, select { +.inline-value-display, +select { width: calc(100% + #{2 * $inline-padding-x}); height: auto; background-color: white; @@ -93,7 +94,7 @@ select { text-overflow: ellipsis; white-space: nowrap; - &-with-border{ + &-with-border { border: 1px solid $input-border-color; border-radius: $border-radius; } @@ -103,6 +104,12 @@ select { } } +.is-name-hovered { + overflow: visible; + text-overflow: initial; + white-space: initial; +} + .inline-value-select { &.showing-empty-message { select { @@ -129,7 +136,8 @@ div.form-control { } .inline-value-container { - & > input, & > textarea { + & > input, + & > textarea { position: absolute; top: 0px; left: -1 * $inline-padding-x; @@ -150,14 +158,17 @@ div.form-control { .inline-value-container { &.can-edit { - .inline-value-display, select { + .inline-value-display, + select { cursor: pointer; &:hover { border-color: rgba($input-border-color, 0.75); } } - & > input, & > textarea, & > select { + & > input, + & > textarea, + & > select { display: initial; } } @@ -188,14 +199,18 @@ div.form-control { } :host.always-show { - .inline-value-display, select { + .inline-value-display, + select { border-color: rgba($input-border-color, 0.75); } } -input, select, textarea { +input, +select, +textarea { &.ng-invalid { - &.ng-touched, &.ng-dirty { + &.ng-touched, + &.ng-dirty { background-color: rgba($danger, 0.2); border-color: $danger !important; } @@ -206,10 +221,9 @@ input, select, textarea { padding: 0; } - -.description-textarea{ - &.can-edit{ - .description-textarea-value{ +.description-textarea { + &.can-edit { + .description-textarea-value { cursor: pointer; border: 1px solid transparent; &:hover { @@ -217,4 +231,4 @@ input, select, textarea { } } } -} \ No newline at end of file +} diff --git a/src/app/shared/components/inline-value-edit/inline-value-edit.component.ts b/src/app/shared/components/inline-value-edit/inline-value-edit.component.ts index d7e493aa8..4ff2e9a7c 100644 --- a/src/app/shared/components/inline-value-edit/inline-value-edit.component.ts +++ b/src/app/shared/components/inline-value-edit/inline-value-edit.component.ts @@ -1,3 +1,4 @@ +/* @format */ import { Component, OnInit, @@ -46,7 +47,7 @@ type ValueType = string | number; animations: [ngIfScaleAnimation, collapseAnimation], }) export class InlineValueEditComponent implements OnInit, OnChanges { - @Input() displayBorder:boolean = false; + @Input() displayBorder: boolean = false; @Input() displayValue: ValueType; @Input() type: InlineValueEditType = 'text'; @Input() emptyMessage: string; @@ -64,6 +65,7 @@ export class InlineValueEditComponent implements OnInit, OnChanges { @Input() selectOptions: FormInputSelectOption[]; @Input() dateOnly = false; @Input() class: string; + @Input() isPublicArchive = false; @HostBinding('class.horizontal-controls') @Input() horizontalControls = false; @HostBinding('class.always-show') @Input() alwaysShow = false; @@ -84,6 +86,7 @@ export class InlineValueEditComponent implements OnInit, OnChanges { ngbTime: NgbTimeStruct; ngbDate: NgbDate; maxNgbDate: NgbDateStruct; + isNameHovered = false; public extraClasses: string[]; @@ -279,4 +282,13 @@ export class InlineValueEditComponent implements OnInit, OnChanges { this.save(); } } + + onHoverOverName(): void { + console.log('here') + this.isNameHovered = true; + } + + onMoveCursorOutsideName(): void { + this.isNameHovered = false; + } } From 70b25c27b5e4191e68decda1b44b51d41f9f5f09 Mon Sep 17 00:00:00 2001 From: crisnicandrei <62384997+crisnicandrei@users.noreply.github.com> Date: Thu, 2 Nov 2023 13:34:28 +0200 Subject: [PATCH 2/5] PER-9385 Added a unit test to test the functionality --- .../inline-value-edit.component.spec.ts | 94 ++++++++++++++----- 1 file changed, 68 insertions(+), 26 deletions(-) diff --git a/src/app/shared/components/inline-value-edit/inline-value-edit.component.spec.ts b/src/app/shared/components/inline-value-edit/inline-value-edit.component.spec.ts index b28151b75..0b97dd7dc 100644 --- a/src/app/shared/components/inline-value-edit/inline-value-edit.component.spec.ts +++ b/src/app/shared/components/inline-value-edit/inline-value-edit.component.spec.ts @@ -1,13 +1,31 @@ -import { ComponentFixture, TestBed, tick, fakeAsync, waitForAsync } from '@angular/core/testing'; +/* @format */ +import { + ComponentFixture, + TestBed, + tick, + fakeAsync, + waitForAsync, +} from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; -import { NgbDatepickerModule, NgbTimepickerModule, NgbDate, NgbTimeStruct } from '@ng-bootstrap/ng-bootstrap'; +import { + NgbDatepickerModule, + NgbTimepickerModule, + NgbDate, + NgbTimeStruct, +} from '@ng-bootstrap/ng-bootstrap'; import { SharedModule } from '@shared/shared.module'; import { moment } from 'vis-timeline/standalone'; import { RecordVO, RecordVOData } from '@models'; -import { getOffsetMomentFromDTString, formatDateISOString, getUtcMomentFromDTString, momentFormatNum, applyTimezoneOffset } from '@shared/utilities/dateTime'; +import { + getOffsetMomentFromDTString, + formatDateISOString, + getUtcMomentFromDTString, + momentFormatNum, + applyTimezoneOffset, +} from '@shared/utilities/dateTime'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { InlineValueEditComponent } from './inline-value-edit.component'; @@ -17,22 +35,19 @@ describe('InlineValueEditComponent', () => { const TEST_TEXT = 'Test Name'; - const mockDatePicker = { - - }; + const mockDatePicker = {}; beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [ InlineValueEditComponent ], + declarations: [InlineValueEditComponent], imports: [ FormsModule, NgbDatepickerModule, NgbTimepickerModule, NoopAnimationsModule, - SharedModule - ] - }) - .compileComponents(); + SharedModule, + ], + }).compileComponents(); })); beforeEach(() => { @@ -53,7 +68,9 @@ describe('InlineValueEditComponent', () => { }); it('should start editing with click', fakeAsync(() => { - const displayElement = fixture.debugElement.query(By.css('.inline-value-display')); + const displayElement = fixture.debugElement.query( + By.css('.inline-value-display') + ); displayElement.triggerEventHandler('click', null); tick(); expect(component.isEditing).toBeTruthy(); @@ -101,14 +118,17 @@ describe('InlineValueEditComponent', () => { component.displayValue = null; component.startEdit(); - const inputElem = component.inputElementRef.nativeElement as HTMLInputElement; + const inputElem = component.inputElementRef + .nativeElement as HTMLInputElement; expect(document.activeElement).toBe(inputElem); inputElem.value = 'new value!'; fixture.detectChanges(); const rootElement = fixture.debugElement.nativeElement as HTMLElement; - const cancelButton = rootElement.querySelector('button[name=cancel]') as HTMLButtonElement; + const cancelButton = rootElement.querySelector( + 'button[name=cancel]' + ) as HTMLButtonElement; cancelButton.dispatchEvent(new Event('mousedown')); fixture.detectChanges(); @@ -117,7 +137,6 @@ describe('InlineValueEditComponent', () => { expect(onBlurSpy).toHaveBeenCalledTimes(1); expect(doneEditingSpy).not.toHaveBeenCalled(); }); - }); it('should not allow editing if canEdit is false', async () => { @@ -153,7 +172,7 @@ describe('InlineValueEditComponent', () => { dstOffset: '-07:00', stdAbbrev: 'PST', stdOffset: '-08:00', - } + }, }; const record = new RecordVO(voData); component.item = record; @@ -163,7 +182,10 @@ describe('InlineValueEditComponent', () => { component.startEdit(); - const offset = getOffsetMomentFromDTString(record.displayDT, record.TimezoneVO); + const offset = getOffsetMomentFromDTString( + record.displayDT, + record.TimezoneVO + ); expect(component.ngbDate).toBeDefined(); expect(component.ngbDate.day).toBe(momentFormatNum(offset, 'D')); @@ -180,7 +202,7 @@ describe('InlineValueEditComponent', () => { dstOffset: '-07:00', stdAbbrev: 'PST', stdOffset: '-08:00', - } + }, }; const record = new RecordVO(voData); component.item = record; @@ -229,7 +251,7 @@ describe('InlineValueEditComponent', () => { dstOffset: '-07:00', stdAbbrev: 'PST', stdOffset: '-08:00', - } + }, }; const record = new RecordVO(voData); component.item = record; @@ -239,11 +261,14 @@ describe('InlineValueEditComponent', () => { component.startEdit(); - const offset = getOffsetMomentFromDTString(record.displayDT, record.TimezoneVO); + const offset = getOffsetMomentFromDTString( + record.displayDT, + record.TimezoneVO + ); expect(component.ngbTime.hour).toBe(momentFormatNum(offset, 'H')); - const newDate = NgbDate.from({year: 2017, month: 5, day: 10}); + const newDate = NgbDate.from({ year: 2017, month: 5, day: 10 }); component.datePicker.dateSelect.emit(newDate); const utcDt = getUtcMomentFromDTString(component.editValue as string); @@ -261,7 +286,7 @@ describe('InlineValueEditComponent', () => { dstOffset: '-07:00', stdAbbrev: 'PST', stdOffset: '-08:00', - } + }, }; const record = new RecordVO(voData); component.item = record; @@ -285,7 +310,7 @@ describe('InlineValueEditComponent', () => { dstOffset: '-07:00', stdAbbrev: 'PST', stdOffset: '-08:00', - } + }, }; const record = new RecordVO(voData); component.item = record; @@ -328,7 +353,7 @@ describe('InlineValueEditComponent', () => { dstOffset: '-07:00', stdAbbrev: 'PST', stdOffset: '-08:00', - } + }, }; const record = new RecordVO(voData); component.item = record; @@ -338,14 +363,17 @@ describe('InlineValueEditComponent', () => { component.startEdit(); - const offset = getOffsetMomentFromDTString(record.displayDT, record.TimezoneVO); + const offset = getOffsetMomentFromDTString( + record.displayDT, + record.TimezoneVO + ); expect(component.ngbDate.day).toBe(momentFormatNum(offset, 'D')); const newTime: NgbTimeStruct = { hour: 8, minute: 30, - second: 58 + second: 58, }; component.ngbTime = newTime; @@ -357,4 +385,18 @@ describe('InlineValueEditComponent', () => { expect(Number(utcDt.format('D'))).toEqual(13); expect(Number(utcDt.format('h'))).toEqual(3); }); + + it('should expand the title when hovering with the mouse over it', () => { + component.type = 'text'; + component.isPublicArchive = true; + fixture.detectChanges(); + const nameContainer = fixture.debugElement.query( + By.css('.inline-value-text') + ).nativeElement; + nameContainer.dispatchEvent(new Event('mouseenter')); + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(nameContainer.classList).toContain('is-name-hovered'); + }); + }); }); From 6156a83ee3f9f26af78ec1b2b556d20e4538fa12 Mon Sep 17 00:00:00 2001 From: crisnicandrei <62384997+crisnicandrei@users.noreply.github.com> Date: Thu, 2 Nov 2023 13:40:26 +0200 Subject: [PATCH 3/5] Prettier --- .../inline-value-edit.component.spec.ts | 2 ++ .../inline-value-edit/inline-value-edit.component.ts | 9 --------- 2 files changed, 2 insertions(+), 9 deletions(-) diff --git a/src/app/shared/components/inline-value-edit/inline-value-edit.component.spec.ts b/src/app/shared/components/inline-value-edit/inline-value-edit.component.spec.ts index 0b97dd7dc..c0e8fb10b 100644 --- a/src/app/shared/components/inline-value-edit/inline-value-edit.component.spec.ts +++ b/src/app/shared/components/inline-value-edit/inline-value-edit.component.spec.ts @@ -390,11 +390,13 @@ describe('InlineValueEditComponent', () => { component.type = 'text'; component.isPublicArchive = true; fixture.detectChanges(); + const nameContainer = fixture.debugElement.query( By.css('.inline-value-text') ).nativeElement; nameContainer.dispatchEvent(new Event('mouseenter')); fixture.detectChanges(); + fixture.whenStable().then(() => { expect(nameContainer.classList).toContain('is-name-hovered'); }); diff --git a/src/app/shared/components/inline-value-edit/inline-value-edit.component.ts b/src/app/shared/components/inline-value-edit/inline-value-edit.component.ts index 4ff2e9a7c..f70b138a0 100644 --- a/src/app/shared/components/inline-value-edit/inline-value-edit.component.ts +++ b/src/app/shared/components/inline-value-edit/inline-value-edit.component.ts @@ -282,13 +282,4 @@ export class InlineValueEditComponent implements OnInit, OnChanges { this.save(); } } - - onHoverOverName(): void { - console.log('here') - this.isNameHovered = true; - } - - onMoveCursorOutsideName(): void { - this.isNameHovered = false; - } } From c219a636693982aee574054ede590d77eefdae2a Mon Sep 17 00:00:00 2001 From: crisnicandrei <62384997+crisnicandrei@users.noreply.github.com> Date: Thu, 2 Nov 2023 16:11:38 +0200 Subject: [PATCH 4/5] Prettier --- .../inline-value-edit/inline-value-edit.component.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/shared/components/inline-value-edit/inline-value-edit.component.spec.ts b/src/app/shared/components/inline-value-edit/inline-value-edit.component.spec.ts index c0e8fb10b..88451025e 100644 --- a/src/app/shared/components/inline-value-edit/inline-value-edit.component.spec.ts +++ b/src/app/shared/components/inline-value-edit/inline-value-edit.component.spec.ts @@ -396,7 +396,7 @@ describe('InlineValueEditComponent', () => { ).nativeElement; nameContainer.dispatchEvent(new Event('mouseenter')); fixture.detectChanges(); - + fixture.whenStable().then(() => { expect(nameContainer.classList).toContain('is-name-hovered'); }); From 1bb15ded91b39948e434316bab8238caaa6b149a Mon Sep 17 00:00:00 2001 From: crisnicandrei <62384997+crisnicandrei@users.noreply.github.com> Date: Fri, 10 Nov 2023 10:52:23 +0200 Subject: [PATCH 5/5] rewrote test --- .../inline-value-edit/inline-value-edit.component.spec.ts | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/app/shared/components/inline-value-edit/inline-value-edit.component.spec.ts b/src/app/shared/components/inline-value-edit/inline-value-edit.component.spec.ts index 88451025e..81033a55c 100644 --- a/src/app/shared/components/inline-value-edit/inline-value-edit.component.spec.ts +++ b/src/app/shared/components/inline-value-edit/inline-value-edit.component.spec.ts @@ -386,7 +386,7 @@ describe('InlineValueEditComponent', () => { expect(Number(utcDt.format('h'))).toEqual(3); }); - it('should expand the title when hovering with the mouse over it', () => { + it('should expand the title when hovering with the mouse over it', async () => { component.type = 'text'; component.isPublicArchive = true; fixture.detectChanges(); @@ -397,8 +397,7 @@ describe('InlineValueEditComponent', () => { nameContainer.dispatchEvent(new Event('mouseenter')); fixture.detectChanges(); - fixture.whenStable().then(() => { - expect(nameContainer.classList).toContain('is-name-hovered'); - }); + await fixture.whenStable(); + expect(nameContainer.classList).toContain('is-name-hovered'); }); });