-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #336 from PermanentOrg/PER-8919-public-archives-la…
…nding-page PER-8919: Public Archives Landing Page
- Loading branch information
Showing
12 changed files
with
408 additions
and
11 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
40 changes: 40 additions & 0 deletions
40
src/app/gallery/components/public-archives-list/public-archives-list.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
<!-- @format --> | ||
<div *ngIf="waiting" class="import-spinner"> | ||
<div class="lds-dual-ring"></div> | ||
</div> | ||
<div *ngIf="!waiting" class="public-archives"> | ||
<h3>My Public Archives</h3> | ||
<div | ||
*ngIf="publicArchives.length" | ||
class="public-archives-list" | ||
[ngClass]="{ 'public-archives-list-expanded': expanded }" | ||
> | ||
<div | ||
(click)="goToArchive(archive)" | ||
*ngFor="let archive of publicArchives" | ||
class="public-archive" | ||
> | ||
<img [src]="archive.thumbURL200" /> | ||
<div class="public-archive-info"> | ||
<span>The {{ archive.fullName }} Archive</span> | ||
<span>Access: {{ archive.accessRole | accessRole }}</span> | ||
</div> | ||
</div> | ||
</div> | ||
<span | ||
(click)="toggleArchives()" | ||
class="see-more" | ||
*ngIf="publicArchives.length" | ||
>{{ !expanded ? 'See more' : 'See less' }}</span | ||
> | ||
<div class="no-archives" *ngIf="!publicArchives.length"> | ||
<p class="no-archives-text">None of your archives are public.</p> | ||
<a | ||
class="learn-more" | ||
href="https://permanent.zohodesk.com/portal/en/kb/articles/how-to-publish" | ||
> | ||
Learn how to publish an archive. | ||
<fa-icon [icon]="['fas', 'arrow-right']"></fa-icon> | ||
</a> | ||
</div> | ||
</div> |
123 changes: 123 additions & 0 deletions
123
src/app/gallery/components/public-archives-list/public-archives-list.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,123 @@ | ||
@import 'variables'; | ||
|
||
.public-archive { | ||
display: flex; | ||
font-family: Arial, sans-serif; | ||
background: #fff; | ||
padding: 20px; | ||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | ||
&-info { | ||
display: flex; | ||
flex-direction: column; | ||
} | ||
} | ||
|
||
.public-archives-list { | ||
display: flex; | ||
flex-direction: column; | ||
gap: 10px; | ||
max-height: 320px; | ||
overflow-x: auto; | ||
|
||
@include beforeDesktop { | ||
overflow: hidden; | ||
|
||
&-expanded { | ||
max-height: fit-content; | ||
} | ||
} | ||
} | ||
|
||
.public-archive { | ||
display: flex; | ||
align-items: center; | ||
padding: 0px 10px 0px 0px; | ||
border: 1px solid #eaeaea; | ||
width: 90%; | ||
cursor: pointer; | ||
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), | ||
0px 2px 4px -1px rgba(0, 0, 0, 0.06); | ||
} | ||
|
||
.public-archive img { | ||
width: 95px; | ||
height: 95px; | ||
margin-right: 10px; | ||
object-fit: cover; | ||
} | ||
|
||
.public-archive-info { | ||
flex-grow: 1; | ||
} | ||
|
||
.public-archive-info span { | ||
display: block; | ||
color: #333; | ||
} | ||
|
||
.public-archive-info span:first-child { | ||
font-weight: bold; | ||
margin-bottom: 5px; | ||
} | ||
|
||
.public-archives { | ||
width: 450px; | ||
margin-left: 50px; | ||
|
||
h3 { | ||
margin-bottom: 40px; | ||
} | ||
@include beforeDesktop { | ||
margin-left: 0; | ||
|
||
h3 { | ||
margin-bottom: 20px; | ||
margin-top: 40px; | ||
} | ||
} | ||
} | ||
|
||
.no-archives { | ||
background-color: $gray-200; | ||
height: 315px; | ||
border-radius: 8px; | ||
display: flex; | ||
justify-content: space-between; | ||
flex-direction: column; | ||
width: 430px; | ||
padding: 20px; | ||
|
||
& > p, | ||
& > a { | ||
font-size: 22px; | ||
} | ||
@include beforeDesktop { | ||
width: 390px; | ||
height: 250px; | ||
padding-left: 30px; | ||
margin-bottom: 40px; | ||
|
||
& > p, | ||
& > a { | ||
font-size: 22px; | ||
} | ||
} | ||
} | ||
|
||
.no-archives-text { | ||
color: $gray-800; | ||
} | ||
|
||
.learn-more { | ||
color: $PR-blue; | ||
font-weight: bold; | ||
cursor: pointer; | ||
text-decoration: none; | ||
} | ||
|
||
.see-more { | ||
display: none; | ||
@include beforeDesktop { | ||
display: inline; | ||
} | ||
} |
93 changes: 93 additions & 0 deletions
93
src/app/gallery/components/public-archives-list/public-archives-list.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,93 @@ | ||
/* @format */ | ||
import { Shallow } from 'shallow-render'; | ||
import { AccountService } from '@shared/services/account/account.service'; | ||
import { MessageService } from '@shared/services/message/message.service'; | ||
import { Router } from '@angular/router'; | ||
import { ArchiveVO } from '../../../models/archive-vo'; | ||
import { GalleryModule } from '../../gallery.module'; | ||
import { PublicArchivesListComponent } from './public-archives-list.component'; | ||
|
||
const mockAccountService = { | ||
getAllPublicArchives: () => Promise.resolve([]), | ||
}; | ||
|
||
describe('PublicArchivesComponent', () => { | ||
let shallow: Shallow<PublicArchivesListComponent>; | ||
let messageShown = false; | ||
|
||
beforeEach(async () => { | ||
shallow = new Shallow(PublicArchivesListComponent, GalleryModule) | ||
.mock(AccountService, mockAccountService) | ||
.mock(MessageService, { | ||
showError: () => { | ||
messageShown = true; | ||
}, | ||
}) | ||
.mock(Router, { | ||
navigate: () => { | ||
return Promise.resolve(true); | ||
}, | ||
}); | ||
}); | ||
|
||
it('should create', async () => { | ||
const { instance } = await shallow.render(); | ||
|
||
expect(instance).toBeTruthy(); | ||
}); | ||
|
||
it('should show all the public archives of the user', async () => { | ||
const { instance, fixture, find } = await shallow.render(); | ||
instance.publicArchives = [ | ||
new ArchiveVO({ archiveNbr: 1, name: 'test', public: 1 }), | ||
new ArchiveVO({ archiveNbr: 2, name: 'test2', public: 1 }), | ||
]; | ||
fixture.detectChanges(); | ||
|
||
const archives = find('.public-archive'); | ||
|
||
expect(archives.length).toEqual(2); | ||
}); | ||
|
||
it('should display the "no archives" element', async () => { | ||
const { instance, fixture, find } = await shallow.render(); | ||
instance.publicArchives = []; | ||
fixture.detectChanges(); | ||
|
||
const element = find('.no-archives'); | ||
|
||
expect(element.nativeElement).toBeTruthy(); | ||
}); | ||
|
||
it('should redirect the user to the archive when clicking on it', async () => { | ||
const { instance, fixture, inject } = await shallow.render(); | ||
|
||
const router = inject(Router); | ||
const archive = new ArchiveVO({ archiveNbr: 1, name: 'test', public: 1 }); | ||
instance.goToArchive(archive); | ||
fixture.detectChanges(); | ||
|
||
expect(router.navigate).toHaveBeenCalledWith([ | ||
'/p/archive', | ||
archive.archiveNbr, | ||
]); | ||
}); | ||
|
||
it('should expand the archives list when clicking "See more" on mobile', async () => { | ||
const { instance, fixture, find } = await shallow.render(); | ||
instance.publicArchives = [ | ||
new ArchiveVO({ archiveNbr: 1, name: 'test', public: 1 }), | ||
new ArchiveVO({ archiveNbr: 2, name: 'test2', public: 1 }), | ||
]; | ||
instance.toggleArchives(); | ||
fixture.detectChanges(); | ||
|
||
expect(instance.expanded).toBeTrue(); | ||
|
||
const archiveList = find('.public-archives-list'); | ||
|
||
expect(archiveList.nativeElement).toHaveClass( | ||
'public-archives-list-expanded' | ||
); | ||
}); | ||
}); |
41 changes: 41 additions & 0 deletions
41
src/app/gallery/components/public-archives-list/public-archives-list.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,41 @@ | ||
/* @format */ | ||
import { Component, OnInit } from '@angular/core'; | ||
import { ArchiveVO } from '@models/index'; | ||
import { AccountService } from '@shared/services/account/account.service'; | ||
import { Router } from '@angular/router'; | ||
import { MessageService } from '../../../shared/services/message/message.service'; | ||
|
||
@Component({ | ||
selector: 'pr-public-archives-list', | ||
templateUrl: './public-archives-list.component.html', | ||
styleUrls: ['./public-archives-list.component.scss'], | ||
}) | ||
export class PublicArchivesListComponent implements OnInit { | ||
public publicArchives: ArchiveVO[] = []; | ||
public waiting: boolean = true; | ||
public expanded: boolean = false; | ||
|
||
constructor( | ||
private accountService: AccountService, | ||
private messageService: MessageService, | ||
private router: Router | ||
) {} | ||
|
||
async ngOnInit(): Promise<void> { | ||
try { | ||
this.publicArchives = await this.accountService.getAllPublicArchives(); | ||
this.waiting = false; | ||
} catch (error) { | ||
this.waiting = false; | ||
this.messageService.showError('There was an error loading the archives'); | ||
} | ||
} | ||
|
||
public goToArchive(archive: ArchiveVO): void { | ||
this.router.navigate(['/p/archive', archive.archiveNbr]); | ||
} | ||
|
||
public toggleArchives(): void { | ||
this.expanded = !this.expanded; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.