PER-8400-toggle-person-info-public-archive

PER-8400-toggle-person-info-public-archive
Added a chevron that expands the profile information on mobile devices.

src/app/public/components/public-archive/public-archive.component.html

@@ -26,8 +26,24 @@
       }"
     >
       <div>
+<<<<<<< HEAD
         <div class="profile-name">The {{ this.archive.fullName }} Archive</div>
         <div class="profile-description">
+=======
+        <div class="profile-name">
+          The {{ this.archive.fullName }} Archive
+          <fa-icon
+            (click)="toggleProfileInformation()"
+            class="icon-expand"
+            [class.reverse]="showProfileInformation"
+            [icon]="['fas', 'chevron-down']"
+          ></fa-icon>
+        </div>
+        <div
+          [ngClass]="{ 'profile-description-show': showProfileInformation }"
+          class="profile-description"
+        >
+>>>>>>> 86e0bd3d (PER-8400-toggle-person-info-public-archive)
           <span
             *ngIf="
               hasSingleValueFor('birth_info', 'locnId1') ||
@@ -88,11 +104,37 @@
         </div>
         <ng-container *ngIf="isViewingProfile$ | async">
           <div
-            class="profile-blurb"
-            *ngIf="hasSingleValueFor('blurb', 'string1')"
+            class="profile-info"
+            [ngClass]="{ 'profile-info-show': showProfileInformation }"
           >
-            {{ this.profileItems.blurb[0].string1 }}
+            <div
+              class="profile-blurb"
+              *ngIf="hasSingleValueFor('blurb', 'string1')"
+            >
+              {{ this.profileItems.blurb[0].string1 }}
+            </div>
+            <span
+              class="profile-description"
+              *ngIf="
+                hasSingleValueFor('description', 'textData1') && !showShortText
+              "
+              [innerHTML]="this.description"
+            ></span>
+            <span
+              class="profile-description"
+              *ngIf="
+                hasSingleValueFor('description', 'textData1') && showShortText
+              "
+              [innerHTML]="this.shortText + '...'"
+            ></span>
+            <span
+              *ngIf="this.description.length > 100"
+              class="expand-text"
+              (click)="toggleShowFullText()"
+              >{{ showShortText ? ' See More' : ' See Less' }}
+            </span>
           </div>
+<<<<<<< HEAD
           <span
             class="profile-description"
             *ngIf="
@@ -113,6 +155,8 @@
             (click)="toggleShowFullText()"
             >{{ showShortText ? ' See More' : ' See Less' }}
           </span>
+=======
+>>>>>>> 86e0bd3d (PER-8400-toggle-person-info-public-archive)
         </ng-container>
       </div>
       <div class="profile-controls">

src/app/public/components/public-archive/public-archive.component.scss

@@ -93,7 +93,7 @@ $desktop-size: pxToGrid(200px);
   font-family: 'Usual';
 
   @include beforeDesktop {
-    font-size: $font-size-base * 1.5;
+    font-size: $font-size-base;
   }
 }
 
@@ -195,6 +195,16 @@ $desktop-size: pxToGrid(200px);
 
 .profile-description {
   white-space: pre-line;
+
+  @include beforeDesktop {
+    display: none;
+  }
+
+  &-show {
+    @include beforeDesktop {
+      display: block;
+    }
+  }
 }
 
 .search-box-public-archive {
@@ -387,3 +397,29 @@ $desktop-size: pxToGrid(200px);
   cursor: pointer;
   color: gray;
 }
+
+.icon-expand {
+  display: none;
+
+  @include beforeDesktop {
+    display: inline-block;
+    font-size: $mat-icon-sm;
+    transition: transform 250ms $tweaked-ease;
+    cursor: pointer;
+    &.reverse {
+      transform: rotate(180deg);
+    }
+  }
+}
+
+.profile-info {
+  @include beforeDesktop {
+    display: none;
+  }
+
+  &-show {
+    @include beforeDesktop {
+      display: block;
+    }
+  }
+}

src/app/public/components/public-archive/public-archive.component.spec.ts

@@ -1,25 +1,63 @@
-// import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-// import { PublicArchiveComponent } from './public-archive.component';
-
-// describe('PublicArchiveComponent', () => {
-//   let component: PublicArchiveComponent;
-//   let fixture: ComponentFixture<PublicArchiveComponent>;
-
-//   beforeEach(async(() => {
-//     TestBed.configureTestingModule({
-//       declarations: [ PublicArchiveComponent ]
-//     })
-//     .compileComponents();
-//   }));
-
-//   beforeEach(() => {
-//     fixture = TestBed.createComponent(PublicArchiveComponent);
-//     component = fixture.componentInstance;
-//     fixture.detectChanges();
-//   });
-
-//   it('should create', () => {
-//     expect(component).toBeTruthy();
-//   });
-// });
+/* @format */
+import { waitForAsync } from '@angular/core/testing';
+import { PublicModule } from '@public/public.module';
+import { Shallow } from 'shallow-render';
+import { of } from 'rxjs';
+import { PublicProfileService } from '@public/services/public-profile/public-profile.service';
+import { PublicArchiveComponent } from './public-archive.component';
+
+const publicProfileServiceMock = {
+  publicRoot$: () => of({}),
+  archive$: () => of({}),
+  profileItemsDictionary$: () => of({}),
+};
+
+describe('PublicArchiveComponent', () => {
+  let shallow: Shallow<PublicArchiveComponent>;
+
+  beforeEach(waitForAsync(() => {
+    shallow = new Shallow(PublicArchiveComponent, PublicModule).provideMock({
+      provide: PublicProfileService,
+      useValue: publicProfileServiceMock,
+    });
+  }));
+
+  it('should create', async () => {
+    const { instance } = await shallow.render();
+    expect(instance).toBeTruthy();
+  });
+
+  it('should have the information hidden as default', async () => {
+    const { instance } = await shallow.render();
+    expect(instance.showProfileInformation).toBe(false);
+  });
+
+  it('should have the information shown when the button is clicked', async () => {
+    const { instance, find } = await shallow.render();
+    const icon = find('.icon-expand');
+    icon.nativeElement.click();
+    expect(instance.showProfileInformation).toBe(true);
+  });
+
+  it('should give the correct classes when expanding the information', async () => {
+    const { find, fixture, instance } = await shallow.render();
+    const icon = find('.icon-expand');
+    icon.nativeElement.click();
+
+    fixture.detectChanges();
+
+    expect(find('.profile-description').classes).toEqual({
+      'profile-description': true,
+      'profile-description-show': true,
+    });
+
+    instance.isViewingProfile$ = of(true);
+
+    fixture.detectChanges();
+
+    expect(find('.profile-info').classes).toEqual({
+      'profile-info': true,
+      'profile-info-show': true,
+    });
+  });
+});

src/app/public/components/public-archive/public-archive.component.ts

@@ -31,6 +31,7 @@ export class PublicArchiveComponent implements OnInit, OnDestroy {
   shortText = '';
   emails: string[] = [];
   websites: string[] = [];
+  showProfileInformation: boolean = false;
 
   waiting = true;
 
@@ -125,4 +126,8 @@ export class PublicArchiveComponent implements OnInit, OnDestroy {
   toggleShowFullText(): void {
     this.showShortText = !this.showShortText;
   }
+
+  toggleProfileInformation(): void {
+    this.showProfileInformation = !this.showProfileInformation;
+  }
 }

src/app/public/public.module.ts

@@ -1,11 +1,17 @@
+/* @format */
 import { NgModule, Optional, ComponentFactoryResolver } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 import {
   FaIconLibrary,
   FontAwesomeModule,
 } from '@fortawesome/angular-fontawesome';
-import { faSearch, faTimesCircle } from '@fortawesome/free-solid-svg-icons';
+import {
+  faSearch,
+  faTimesCircle,
+  faChevronDown,
+  faChevronUp,
+} from '@fortawesome/free-solid-svg-icons';
 import { DataService } from '@shared/services/data/data.service';
 import { FolderViewService } from '@shared/services/folder-view/folder-view.service';
 import { FileBrowserModule } from '@fileBrowser/file-browser.module';
@@ -53,7 +59,7 @@ import { PublicSearchResultsComponent } from './components/public-search-results
 })
 export class PublicModule {
   constructor(folderView: FolderViewService, private library: FaIconLibrary) {
-    this.library.addIcons(faSearch, faTimesCircle);
+    this.library.addIcons(faSearch, faTimesCircle, faChevronDown, faChevronUp);
     folderView.setFolderView(FolderView.Grid, true);
   }
 }