From 52e382d2325aca2e7b9a17a42467d86d86749b79 Mon Sep 17 00:00:00 2001 From: crisnicandrei <62384997+crisnicandrei@users.noreply.github.com> Date: Tue, 19 Dec 2023 12:18:57 +0200 Subject: [PATCH 1/6] PER-8562 Display 'Click to add' text for location and tags in the fullscreen viewer when the user can edit them. Additionally, I have added an edit icon. --- .../edit-tags/edit-tags.component.html | 1 + .../file-viewer/file-viewer.component.html | 21 +++++++++++++++--- .../file-viewer/file-viewer.component.spec.ts | 16 ++++++++++++++ .../file-viewer/file-viewer.component.ts | 11 ++++++++++ .../components/tags/tags.component.html | 10 ++++++++- .../components/tags/tags.component.spec.ts | 22 +++++++++++++++++++ .../shared/components/tags/tags.component.ts | 8 ++++++- src/app/shared/shared.module.ts | 4 ++-- 8 files changed, 86 insertions(+), 7 deletions(-) diff --git a/src/app/file-browser/components/edit-tags/edit-tags.component.html b/src/app/file-browser/components/edit-tags/edit-tags.component.html index bd593cea1..f3f687012 100644 --- a/src/app/file-browser/components/edit-tags/edit-tags.component.html +++ b/src/app/file-browser/components/edit-tags/edit-tags.component.html @@ -81,6 +81,7 @@ [canEdit]="true" [animate]="isEditing" [isEditing]="isEditing" + [isDialog]="isDialog" >
Tags - + @@ -143,7 +146,10 @@ Metadata - + @@ -156,7 +162,16 @@ {{ (currentRecord.LocnVO | prLocation)?.full }} - No location + + + Click to add location + No location diff --git a/src/app/file-browser/components/file-viewer/file-viewer.component.spec.ts b/src/app/file-browser/components/file-viewer/file-viewer.component.spec.ts index 95d5411f0..f93f850aa 100644 --- a/src/app/file-browser/components/file-viewer/file-viewer.component.spec.ts +++ b/src/app/file-browser/components/file-viewer/file-viewer.component.spec.ts @@ -102,6 +102,11 @@ describe('FileViewerComponent', () => { navigatedUrl = route; return Promise.resolve(true); }, + routerState: { + snapshot: { + url: 'exampleUrl.com', + }, + }, }) .mock(ActivatedRoute, { snapshot: { @@ -444,5 +449,16 @@ describe('FileViewerComponent', () => { expect(downloaded).toBeTrue(); }); + + it('should display "Click to add location" on fullscreen view', async () => { + const { fixture, instance, find } = await defaultRender(); + instance.canEditFieldsOnFullscreen = true; + await fixture.detectChanges(); + const locationDiv = find('.add-location'); + + expect(locationDiv.nativeElement.textContent.trim()).toBe( + 'Click to add location' + ); + }); }); }); diff --git a/src/app/file-browser/components/file-viewer/file-viewer.component.ts b/src/app/file-browser/components/file-viewer/file-viewer.component.ts index 4fa5e8f32..717b236a9 100644 --- a/src/app/file-browser/components/file-viewer/file-viewer.component.ts +++ b/src/app/file-browser/components/file-viewer/file-viewer.component.ts @@ -49,6 +49,7 @@ export class FileViewerComponent implements OnInit, OnDestroy { public documentUrl = null; public canEdit: boolean; + public canEditFieldsOnFullscreen = false; // Swiping private touchElement: HTMLElement; @@ -121,6 +122,8 @@ export class FileViewerComponent implements OnInit, OnDestroy { AccessRole.Editor ) && !route.snapshot.data?.isPublicArchive; + this.canEditFieldsOnFullscreen = this.canEdit && this.canEditOnFullScreen() + this.tagSubscription = this.tagsService .getItemTags$() ?.subscribe((tags) => { @@ -404,4 +407,12 @@ export class FileViewerComponent implements OnInit, OnDestroy { tag.type.includes('type.tag.metadata') ); } + + private canEditOnFullScreen(): boolean { + return ( + this.router.routerState.snapshot.url.includes('private/record') || + this.router.routerState.snapshot.url.includes('public/record') || + this.router.routerState.snapshot.url.includes('shares/record') + ); + } } diff --git a/src/app/shared/components/tags/tags.component.html b/src/app/shared/components/tags/tags.component.html index 3666b446a..84fba35fa 100644 --- a/src/app/shared/components/tags/tags.component.html +++ b/src/app/shared/components/tags/tags.component.html @@ -4,7 +4,15 @@
- {{ canEdit && !isEditing ? 'Click to add' : 'No tags' }} + + {{ + (canEdit && !isEditing) || isEditableFullscreen + ? 'Click to add' + : 'No tags' + }}
{ expect(addTags).toBeTruthy(); }); + + it('should display the "Click to add" text when in fullscreen view', () => { + const tags = [] + component.tags = tags; + component.isEditableFullscreen = true; + component.ngOnChanges(); + fixture.detectChanges(); + const div = fixture.debugElement.query(By.css('.empty')) + + expect(div.nativeElement.textContent.trim()).toBe('Click to add') + }) + + it('should display the "No tags" text when in fullscreen view, but on the public archive', () => { + const tags = [] + component.tags = tags; + component.isEditableFullscreen = false; + component.ngOnChanges(); + fixture.detectChanges(); + const div = fixture.debugElement.query(By.css('.empty')) + + expect(div.nativeElement.textContent.trim()).toBe('No tags') + }) }); diff --git a/src/app/shared/components/tags/tags.component.ts b/src/app/shared/components/tags/tags.component.ts index 3dff88f90..fe5c27103 100644 --- a/src/app/shared/components/tags/tags.component.ts +++ b/src/app/shared/components/tags/tags.component.ts @@ -1,3 +1,4 @@ +/* @format */ import { Component, OnInit, @@ -21,12 +22,17 @@ export class TagsComponent implements OnInit, OnChanges { @HostBinding('class.can-edit') @Input() canEdit: boolean; @Input() isEditing = false; @Input() animate = false; + @Input() isDialog = false; + @Input() canEditOnFullscreen: boolean = false; orderedTags: TagVOData[] = []; + public isEditableFullscreen: boolean = false; constructor() {} - ngOnInit(): void {} + ngOnInit(): void { + this.isEditableFullscreen = this.canEditOnFullscreen && !this.isDialog; + } ngOnChanges() { if (!this.tags?.length) { diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index 4a2c4541b..626aa70f2 100644 --- a/src/app/shared/shared.module.ts +++ b/src/app/shared/shared.module.ts @@ -22,7 +22,7 @@ import { FontAwesomeModule, FaIconLibrary, } from '@fortawesome/angular-fontawesome'; -import { faFileArchive, fas } from '@fortawesome/free-solid-svg-icons'; +import { faFileArchive, fas, faPenSquare } from '@fortawesome/free-solid-svg-icons'; import { Dialog, DialogChildComponentData } from '../dialog/dialog.service'; import { DialogModule } from '../dialog/dialog.module'; import { ArchivePickerComponent } from './components/archive-picker/archive-picker.component'; @@ -209,7 +209,7 @@ export class SharedModule { private dropdownConfig: NgbDropdownConfig, private library: FaIconLibrary ) { - library.addIcons(faFileArchive); + library.addIcons(faFileArchive, faPenSquare); this.dialog.registerComponents(this.dialogComponents, this.resolver, true); this.datePickerConfig.weekdays = false; From 73c3ba7c4a93e8f6ba929a50f04070615e3a67e9 Mon Sep 17 00:00:00 2001 From: crisnicandrei <62384997+crisnicandrei@users.noreply.github.com> Date: Tue, 19 Dec 2023 12:21:28 +0200 Subject: [PATCH 2/6] Renamed variable from locationDiv to locationSpan, because we used span in the html code --- .../components/file-viewer/file-viewer.component.spec.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/file-browser/components/file-viewer/file-viewer.component.spec.ts b/src/app/file-browser/components/file-viewer/file-viewer.component.spec.ts index f93f850aa..1ab6a42f8 100644 --- a/src/app/file-browser/components/file-viewer/file-viewer.component.spec.ts +++ b/src/app/file-browser/components/file-viewer/file-viewer.component.spec.ts @@ -454,9 +454,9 @@ describe('FileViewerComponent', () => { const { fixture, instance, find } = await defaultRender(); instance.canEditFieldsOnFullscreen = true; await fixture.detectChanges(); - const locationDiv = find('.add-location'); + const locationSpan = find('.add-location'); - expect(locationDiv.nativeElement.textContent.trim()).toBe( + expect(locationSpan.nativeElement.textContent.trim()).toBe( 'Click to add location' ); }); From 4022a9340eb3dba9dae8275ea626b2fbf1b0a3a6 Mon Sep 17 00:00:00 2001 From: crisnicandrei <62384997+crisnicandrei@users.noreply.github.com> Date: Tue, 19 Dec 2023 12:25:53 +0200 Subject: [PATCH 3/6] Prettier --- .../file-viewer/file-viewer.component.html | 5 ++++- .../file-viewer/file-viewer.component.ts | 2 +- .../components/tags/tags.component.spec.ts | 16 ++++++++-------- src/app/shared/shared.module.ts | 6 +++++- 4 files changed, 18 insertions(+), 11 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 2430acdfa..40498b2bc 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 @@ -162,7 +162,10 @@ {{ (currentRecord.LocnVO | prLocation)?.full }} - + { }); it('should display the "Click to add" text when in fullscreen view', () => { - const tags = [] + const tags = []; component.tags = tags; component.isEditableFullscreen = true; component.ngOnChanges(); fixture.detectChanges(); - const div = fixture.debugElement.query(By.css('.empty')) + const div = fixture.debugElement.query(By.css('.empty')); - expect(div.nativeElement.textContent.trim()).toBe('Click to add') - }) + expect(div.nativeElement.textContent.trim()).toBe('Click to add'); + }); it('should display the "No tags" text when in fullscreen view, but on the public archive', () => { - const tags = [] + const tags = []; component.tags = tags; component.isEditableFullscreen = false; component.ngOnChanges(); fixture.detectChanges(); - const div = fixture.debugElement.query(By.css('.empty')) + const div = fixture.debugElement.query(By.css('.empty')); - expect(div.nativeElement.textContent.trim()).toBe('No tags') - }) + expect(div.nativeElement.textContent.trim()).toBe('No tags'); + }); }); diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index 626aa70f2..599242ef4 100644 --- a/src/app/shared/shared.module.ts +++ b/src/app/shared/shared.module.ts @@ -22,7 +22,11 @@ import { FontAwesomeModule, FaIconLibrary, } from '@fortawesome/angular-fontawesome'; -import { faFileArchive, fas, faPenSquare } from '@fortawesome/free-solid-svg-icons'; +import { + faFileArchive, + fas, + faPenSquare, +} from '@fortawesome/free-solid-svg-icons'; import { Dialog, DialogChildComponentData } from '../dialog/dialog.service'; import { DialogModule } from '../dialog/dialog.module'; import { ArchivePickerComponent } from './components/archive-picker/archive-picker.component'; From e18eef9a9367b2885ee4785f7b041da826274c3d Mon Sep 17 00:00:00 2001 From: crisnicandrei <62384997+crisnicandrei@users.noreply.github.com> Date: Wed, 17 Jan 2024 15:52:19 +0200 Subject: [PATCH 4/6] PER-8562 refactored the code, removed a variable that was not needed after all. Now the same behaviour is present in the sidebar too, making the app more consistent. --- .../file-viewer/file-viewer.component.html | 24 ++++--------------- .../file-viewer/file-viewer.component.spec.ts | 2 +- .../file-viewer/file-viewer.component.ts | 11 --------- .../components/sidebar/sidebar.component.html | 16 ++++++++++--- .../components/tags/tags.component.html | 12 +++++----- .../components/tags/tags.component.spec.ts | 4 ++-- .../shared/components/tags/tags.component.ts | 5 +--- 7 files changed, 28 insertions(+), 46 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 40498b2bc..6edf5a33b 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 @@ -134,10 +134,7 @@ Tags - + @@ -146,10 +143,7 @@ Metadata - + @@ -162,19 +156,11 @@ {{ (currentRecord.LocnVO | prLocation)?.full }} - - + + Click to add location - No location + No location diff --git a/src/app/file-browser/components/file-viewer/file-viewer.component.spec.ts b/src/app/file-browser/components/file-viewer/file-viewer.component.spec.ts index 1ab6a42f8..6e1f24d5c 100644 --- a/src/app/file-browser/components/file-viewer/file-viewer.component.spec.ts +++ b/src/app/file-browser/components/file-viewer/file-viewer.component.spec.ts @@ -452,7 +452,7 @@ describe('FileViewerComponent', () => { it('should display "Click to add location" on fullscreen view', async () => { const { fixture, instance, find } = await defaultRender(); - instance.canEditFieldsOnFullscreen = true; + instance.canEdit = true; await fixture.detectChanges(); const locationSpan = find('.add-location'); diff --git a/src/app/file-browser/components/file-viewer/file-viewer.component.ts b/src/app/file-browser/components/file-viewer/file-viewer.component.ts index 5e2d799a2..4fa5e8f32 100644 --- a/src/app/file-browser/components/file-viewer/file-viewer.component.ts +++ b/src/app/file-browser/components/file-viewer/file-viewer.component.ts @@ -49,7 +49,6 @@ export class FileViewerComponent implements OnInit, OnDestroy { public documentUrl = null; public canEdit: boolean; - public canEditFieldsOnFullscreen = false; // Swiping private touchElement: HTMLElement; @@ -122,8 +121,6 @@ export class FileViewerComponent implements OnInit, OnDestroy { AccessRole.Editor ) && !route.snapshot.data?.isPublicArchive; - this.canEditFieldsOnFullscreen = this.canEdit && this.canEditOnFullScreen(); - this.tagSubscription = this.tagsService .getItemTags$() ?.subscribe((tags) => { @@ -407,12 +404,4 @@ export class FileViewerComponent implements OnInit, OnDestroy { tag.type.includes('type.tag.metadata') ); } - - private canEditOnFullScreen(): boolean { - return ( - this.router.routerState.snapshot.url.includes('private/record') || - this.router.routerState.snapshot.url.includes('public/record') || - this.router.routerState.snapshot.url.includes('shares/record') - ); - } } diff --git a/src/app/file-browser/components/sidebar/sidebar.component.html b/src/app/file-browser/components/sidebar/sidebar.component.html index e4f70ea2c..7b36e91a5 100644 --- a/src/app/file-browser/components/sidebar/sidebar.component.html +++ b/src/app/file-browser/components/sidebar/sidebar.component.html @@ -148,9 +148,19 @@ {{ (selectedItem.LocnVO | prLocation)?.full }} - {{ - canEdit ? 'Click to set location' : 'No location' - }} + + No location + + + + Click to set location +
+ Click to add
- {{ - (canEdit && !isEditing) || isEditableFullscreen - ? 'Click to add' - : 'No tags' - }} + {{ canEdit && !isEditing ? 'Click to add' : 'No tags' }}
{ it('should display the "Click to add" text when in fullscreen view', () => { const tags = []; component.tags = tags; - component.isEditableFullscreen = true; + component.canEdit = true; component.ngOnChanges(); fixture.detectChanges(); const div = fixture.debugElement.query(By.css('.empty')); @@ -74,7 +74,7 @@ describe('TagsComponent', () => { it('should display the "No tags" text when in fullscreen view, but on the public archive', () => { const tags = []; component.tags = tags; - component.isEditableFullscreen = false; + component.canEdit = false; component.ngOnChanges(); fixture.detectChanges(); const div = fixture.debugElement.query(By.css('.empty')); diff --git a/src/app/shared/components/tags/tags.component.ts b/src/app/shared/components/tags/tags.component.ts index fe5c27103..7231f3784 100644 --- a/src/app/shared/components/tags/tags.component.ts +++ b/src/app/shared/components/tags/tags.component.ts @@ -19,19 +19,16 @@ import { ngIfScaleAnimationDynamic } from '@shared/animations'; export class TagsComponent implements OnInit, OnChanges { @Input() tags: TagVOData[]; @HostBinding('class.read-only') @Input() readOnly = true; - @HostBinding('class.can-edit') @Input() canEdit: boolean; + @Input() canEdit = false; @Input() isEditing = false; @Input() animate = false; @Input() isDialog = false; - @Input() canEditOnFullscreen: boolean = false; orderedTags: TagVOData[] = []; - public isEditableFullscreen: boolean = false; constructor() {} ngOnInit(): void { - this.isEditableFullscreen = this.canEditOnFullscreen && !this.isDialog; } ngOnChanges() { From 0b48c159e571b6f85a4c47fc2b57b7932ea99625 Mon Sep 17 00:00:00 2001 From: crisnicandrei <62384997+crisnicandrei@users.noreply.github.com> Date: Wed, 17 Jan 2024 16:03:00 +0200 Subject: [PATCH 5/6] prettier --- src/app/shared/components/tags/tags.component.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/app/shared/components/tags/tags.component.ts b/src/app/shared/components/tags/tags.component.ts index 7231f3784..1e3843f83 100644 --- a/src/app/shared/components/tags/tags.component.ts +++ b/src/app/shared/components/tags/tags.component.ts @@ -28,8 +28,7 @@ export class TagsComponent implements OnInit, OnChanges { constructor() {} - ngOnInit(): void { - } + ngOnInit(): void {} ngOnChanges() { if (!this.tags?.length) { From 9703c7d862d473bd223e1c09a9af38626d0f557f Mon Sep 17 00:00:00 2001 From: crisnicandrei <62384997+crisnicandrei@users.noreply.github.com> Date: Wed, 7 Feb 2024 13:41:52 +0200 Subject: [PATCH 6/6] PER-8562 Removed the icons --- .../components/file-viewer/file-viewer.component.html | 1 - .../components/sidebar/sidebar.component.html | 1 - src/app/shared/components/tags/tags.component.html | 8 -------- 3 files changed, 10 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 6edf5a33b..8386d848e 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 @@ -157,7 +157,6 @@ (currentRecord.LocnVO | prLocation)?.full }} - Click to add location No location diff --git a/src/app/file-browser/components/sidebar/sidebar.component.html b/src/app/file-browser/components/sidebar/sidebar.component.html index 7b36e91a5..f7245cafc 100644 --- a/src/app/file-browser/components/sidebar/sidebar.component.html +++ b/src/app/file-browser/components/sidebar/sidebar.component.html @@ -158,7 +158,6 @@ *ngIf="!selectedItem.LocnVO && canEdit" class="sidebar-item-content-empty" > - Click to set location
diff --git a/src/app/shared/components/tags/tags.component.html b/src/app/shared/components/tags/tags.component.html index 799620080..3666b446a 100644 --- a/src/app/shared/components/tags/tags.component.html +++ b/src/app/shared/components/tags/tags.component.html @@ -1,17 +1,9 @@
- Click to add
- {{ canEdit && !isEditing ? 'Click to add' : 'No tags' }}