Merge pull request #343 from PermanentOrg/PER-8562-indicate-fields-th…

…at-are-editable

Per 8562 indicate fields that are editable

src/app/file-browser/components/edit-tags/edit-tags.component.html

@@ -81,6 +81,7 @@
           [canEdit]="true"
           [animate]="isEditing"
           [isEditing]="isEditing"
+          [isDialog]="isDialog"
         ></pr-tags>
         <div class="input-group">
           <input

src/app/file-browser/components/file-viewer/file-viewer.component.html

@@ -134,7 +134,7 @@
         <tr>
           <td class="title">Tags</td>
           <td (click)="onTagsClick('keyword')">
-            <pr-tags [tags]="keywords"></pr-tags>
+            <pr-tags [tags]="keywords" [canEdit]="canEdit"></pr-tags>
           </td>
         </tr>
         <tr>
@@ -143,7 +143,7 @@
             Metadata
           </td>
           <td (click)="onTagsClick('custom')">
-            <pr-tags [tags]="customMetadata"></pr-tags>
+            <pr-tags [tags]="customMetadata" [canEdit]="canEdit"></pr-tags>
           </td>
         </tr>
         <tr>
@@ -156,7 +156,10 @@
             <span *ngIf="currentRecord.LocnVO">{{
               (currentRecord.LocnVO | prLocation)?.full
             }}</span>
-            <span *ngIf="!currentRecord.LocnVO">No location</span>
+            <span class="add-location" *ngIf="!currentRecord.LocnVO && canEdit">
+              Click to add location</span
+            >
+            <span *ngIf="!currentRecord.LocnVO && !canEdit">No location</span>
           </td>
         </tr>
         <tr></tr>

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.canEdit = true;
+      await fixture.detectChanges();
+      const locationSpan = find('.add-location');
+
+      expect(locationSpan.nativeElement.textContent.trim()).toBe(
+        'Click to add location'
+      );
+    });
   });
 });

src/app/file-browser/components/sidebar/sidebar.component.html

@@ -148,9 +148,18 @@
         <span *ngIf="selectedItem.LocnVO">{{
           (selectedItem.LocnVO | prLocation)?.full
         }}</span>
-        <span *ngIf="!selectedItem.LocnVO" class="sidebar-item-content-empty">{{
-          canEdit ? 'Click to set location' : 'No location'
-        }}</span>
+        <span
+          *ngIf="!selectedItem.LocnVO && !canEdit"
+          class="sidebar-item-content-empty"
+        >
+          No location
+        </span>
+        <span
+          *ngIf="!selectedItem.LocnVO && canEdit"
+          class="sidebar-item-content-empty"
+        >
+          Click to set location
+        </span>
       </div>
       <div
         class="sidebar-item-content"

src/app/shared/components/tags/tags.component.spec.ts

@@ -59,4 +59,26 @@ describe('TagsComponent', () => {
 
     expect(addTags).toBeTruthy();
   });
+
+  it('should display the "Click to add" text when in fullscreen view', () => {
+    const tags = [];
+    component.tags = tags;
+    component.canEdit = 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.canEdit = false;
+    component.ngOnChanges();
+    fixture.detectChanges();
+    const div = fixture.debugElement.query(By.css('.empty'));
+
+    expect(div.nativeElement.textContent.trim()).toBe('No tags');
+  });
 });

src/app/shared/components/tags/tags.component.ts

@@ -1,3 +1,4 @@
+/* @format */
 import {
   Component,
   OnInit,
@@ -18,9 +19,10 @@ 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;
 
   orderedTags: TagVOData[] = [];
 

src/app/shared/shared.module.ts

@@ -22,7 +22,11 @@ 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 +213,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;