Merge pull request #336 from PermanentOrg/PER-8919-public-archives-la…

…nding-page

PER-8919: Public Archives Landing Page

src/app/gallery/components/gallery/gallery.component.html

@@ -12,7 +12,7 @@ <h1>Welcome to the Permanent Public Gallery</h1>
       </div>
       <ng-container *ngTemplateOutlet="searchBox"></ng-container>
     </div>
-    <div class="actions">
+    <div *ngIf="!isLoggedIn" class="actions">
       <ng-container *ngTemplateOutlet="archivesImg"></ng-container>
       <div class="button-container">
         <a
@@ -23,6 +23,7 @@ <h1>Welcome to the Permanent Public Gallery</h1>
         >
       </div>
     </div>
+    <pr-public-archives-list *ngIf="isLoggedIn"></pr-public-archives-list>
   </div>
   <div class="featured-archives">
     <h2>Featured Archives</h2>

src/app/gallery/components/gallery/gallery.component.ts

@@ -1,3 +1,4 @@
+import { AccountService } from '@shared/services/account/account.service';
 import { Component, OnInit } from '@angular/core';
 import { environment } from '@root/environments/environment';
 import { SecretsService } from '@shared/services/secrets/secrets.service';
@@ -12,7 +13,10 @@ import { featuredArchives } from '../../data/featured';
 export class GalleryComponent implements OnInit {
   public environment: string = '';
   public archives: FeaturedArchive[] = this.getFeaturedArchives();
-  constructor() {}
+  public isLoggedIn: boolean;
+  constructor(private accountService:AccountService) {
+    this.isLoggedIn = this.accountService.isLoggedIn();
+  }
 
   ngOnInit(): void {}
 

src/app/gallery/components/public-archives-list/public-archives-list.component.html

@@ -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>

src/app/gallery/components/public-archives-list/public-archives-list.component.scss

@@ -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;
+  }
+}

src/app/gallery/components/public-archives-list/public-archives-list.component.spec.ts

@@ -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'
+    );
+  });
+});

src/app/gallery/components/public-archives-list/public-archives-list.component.ts

@@ -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;
+  }
+}

src/app/gallery/gallery.module.ts

@@ -14,12 +14,14 @@ import { GalleryHeaderComponent } from './components/gallery-header/gallery-head
 import { GalleryComponent } from './components/gallery/gallery.component';
 import { GalleryRoutingModule } from './gallery-routing.module';
 import { FeaturedArchiveComponent } from './components/featured-archive/featured-archive.component';
+import { PublicArchivesListComponent } from './components/public-archives-list/public-archives-list.component';
 
 @NgModule({
   declarations: [
     GalleryComponent,
     GalleryHeaderComponent,
     FeaturedArchiveComponent,
+    PublicArchivesListComponent,
   ],
   imports: [
     CommonModule,

src/app/models/archive-vo.ts

@@ -5,9 +5,13 @@ import { DataStatus } from '@models/data-status.enum';
 import { AccessRoleType } from './access-role';
 import { ItemVO } from '.';
 
-export type ArchiveType = 'type.archive.person' | 'type.archive.family' | 'type.archive.organization' | 'type.archive.nonprofit';
+export type ArchiveType =
+  | 'type.archive.person'
+  | 'type.archive.family'
+  | 'type.archive.organization'
+  | 'type.archive.nonprofit';
 
-export class ArchiveVO extends BaseVO implements DynamicListChild  {
+export class ArchiveVO extends BaseVO implements DynamicListChild {
   public archiveId;
   public archiveNbr;
   public ChildFolderVOs;
@@ -37,20 +41,22 @@ export class ArchiveVO extends BaseVO implements DynamicListChild  {
   public isNewlyCreated: boolean;
   public allowPublicDownload: boolean;
   public payerAccountId: string;
+  public public: number;
 
   constructor(voData: any) {
     super(voData);
 
     if (this.ItemVOs && this.ItemVOs.length) {
       // remove null items
-      this.ItemVOs = this.ItemVOs.filter((item) => item.type !== null)
-        .map((item) => {
-        if (item.type.includes('folder')) {
-          return new FolderVO(item, false, DataStatus.Lean);
-        } else {
-          return new RecordVO(item, false, DataStatus.Lean);
+      this.ItemVOs = this.ItemVOs.filter((item) => item.type !== null).map(
+        (item) => {
+          if (item.type.includes('folder')) {
+            return new FolderVO(item, false, DataStatus.Lean);
+          } else {
+            return new RecordVO(item, false, DataStatus.Lean);
+          }
         }
-      });
+      );
     }
   }