Skip to content

Commit

Permalink
Merge pull request #331 from PermanentOrg/PER-8400-toggle-person-info…
Browse files Browse the repository at this point in the history
…-public-archive

PER-8400-toggle-person-info-public-archive
  • Loading branch information
crisnicandrei authored Jan 25, 2024
2 parents c17a396 + d61a531 commit 8d15256
Show file tree
Hide file tree
Showing 5 changed files with 142 additions and 55 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,20 @@
}"
>
<div>
<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']"
*ngIf="!(isViewingProfile$ | async)"
></fa-icon>
</div>
<div
[ngClass]="{ 'archive-description-show': showProfileInformation }"
class="archive-description"
>
<span
*ngIf="
hasSingleValueFor('birth_info', 'locnId1') ||
Expand Down Expand Up @@ -87,32 +99,34 @@
</ng-container>
</div>
<ng-container *ngIf="isViewingProfile$ | async">
<div
class="profile-blurb"
*ngIf="hasSingleValueFor('blurb', 'string1')"
>
{{ this.profileItems.blurb[0].string1 }}
<div class="profile-info">
<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>
<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>
</ng-container>
</div>
<div class="profile-controls">
Expand All @@ -122,6 +136,7 @@
class="btn btn-link"
[routerLink]="['/p', 'archive', archive.archiveNbr]"
[hidden]="!(isViewingProfile$ | async)"
(click)="showProfileInformation = false"
>
View Public Archive
<svg
Expand Down Expand Up @@ -157,6 +172,7 @@
class="btn btn-link"
[routerLink]="['/p', 'archive', archive.archiveNbr, 'profile']"
[hidden]="isViewingProfile$ | async"
(click)="showProfileInformation = true"
>
View Public Profile
<svg
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}

Expand Down Expand Up @@ -193,6 +193,20 @@ $desktop-size: pxToGrid(200px);
}
}

.archive-description {
white-space: pre-line;

@include beforeDesktop {
display: none;
}

&-show {
@include beforeDesktop {
display: block;
}
}
}

.profile-description {
white-space: pre-line;
}
Expand Down Expand Up @@ -387,3 +401,17 @@ $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);
}
}
}
Original file line number Diff line number Diff line change
@@ -1,25 +1,57 @@
// 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('.archive-description').classes).toEqual({
'archive-description': true,
'archive-description-show': true,
});
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ export class PublicArchiveComponent implements OnInit, OnDestroy {
shortText = '';
emails: string[] = [];
websites: string[] = [];
showProfileInformation: boolean = false;

waiting = true;

Expand Down Expand Up @@ -125,4 +126,8 @@ export class PublicArchiveComponent implements OnInit, OnDestroy {
toggleShowFullText(): void {
this.showShortText = !this.showShortText;
}

toggleProfileInformation(): void {
this.showProfileInformation = !this.showProfileInformation;
}
}
10 changes: 8 additions & 2 deletions src/app/public/public.module.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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);
}
}

0 comments on commit 8d15256

Please sign in to comment.