Create file viewer v2

src/app/core/resolves/record-resolve-v2.service.ts

@@ -0,0 +1,72 @@
+import { Injectable } from '@angular/core';
+import {
+  ActivatedRoute,
+  ActivatedRouteSnapshot,
+  RouterStateSnapshot,
+} from '@angular/router';
+import * as _ from 'lodash';
+
+import { ApiService } from '@shared/services/api/api.service';
+import { DataService } from '@shared/services/data/data.service';
+import { MessageService } from '@shared/services/message/message.service';
+
+import { RecordResponse } from '@shared/services/api/index.repo';
+import { RecordVO } from '@root/app/models';
+import { DataStatus } from '@models/data-status.enum';
+
+@Injectable()
+export class RecordResolveV2Service {
+  constructor(
+    private api: ApiService,
+    private dataService: DataService,
+    private message: MessageService,
+    private route: ActivatedRoute,
+  ) {}
+
+  async resolve(
+    route: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot,
+  ): Promise<RecordVO> {
+    const localItem = this.dataService.getItemByArchiveNbr(
+      route.params.recArchiveNbr,
+    );
+
+    const itemId = route.params.recordId;
+
+    const token = route.params.token;
+
+    const headers = {
+      'X-Permanent-Share-Token': token,
+    };
+
+    try {
+      if (localItem && localItem.dataStatus === DataStatus.Full) {
+        return Promise.resolve(localItem as RecordVO);
+      } else if (localItem) {
+        await this.dataService.fetchFullItems([localItem]);
+        return localItem as RecordVO;
+      } else {
+        const response = await this.api.record.get(
+          [
+            new RecordVO({
+              recordId: itemId,
+            }),
+          ],
+          true,
+          headers,
+        );
+
+        const record: any = response[0];
+        if (record) {
+          record.dataStatus = DataStatus.Full;
+        }
+        return record;
+      }
+    } catch (err) {
+      if (err instanceof RecordResponse) {
+        this.message.showError({ message: err.getMessage(), translate: true });
+      }
+      throw err;
+    }
+  }
+}

src/app/file-browser/components/file-list-controls/file-list-controls.component.ts

@@ -158,8 +158,8 @@ export class FileListControlsComponent implements OnDestroy, HasSubscriptions {
 
   setAvailableActions() {
     this.isShareRoot =
-      this.data.currentFolder.type === 'type.folder.root.share';
-    this.isPublic = this.data.currentFolder.type.includes('public');
+      this.data.currentFolder?.type === 'type.folder.root.share';
+    this.isPublic = this.data.currentFolder?.type?.includes('public');
     this.setAllActions(false);
 
     const isSingleItem = this.selectedItems.length === 1;

src/app/file-browser/components/file-list-item/file-list-item.component.ts

@@ -548,7 +548,7 @@
       rootUrl = '/private';
     }
 
-    if (this.item.isFolder) {
+    if (this.item.isFolder || (this.item as FolderVO).folderId) {
       if (this.checkFolderView && this.isFolderViewSet()) {
         this.router.navigate([
           rootUrl,
@@ -563,9 +563,24 @@
         });
       }
       if (this.isInSharePreview || this.isInPublicArchive) {
-        this.router.navigate([this.item.archiveNbr, this.item.folder_linkId], {
-          relativeTo: this.route.parent,
-        });
+        const params = this.route.snapshot.params;
+        const token = params.token;
+        const itemId = (this.item as FolderVO).folderId;
+        if (token && itemId) {
+          this.router.navigate([
+            '/share/view/v2-file-list',
+            'folder',
+            token,
+            itemId,
+          ]);
+        } else {
+          this.router.navigate(
+            [this.item.archiveNbr, this.item.folder_linkId],
+            {
+              relativeTo: this.route.parent,
+            },
+          );
+        }
       } else {
         this.router.navigate([
           rootUrl,
@@ -580,9 +595,18 @@
     ) {
       this.router.navigate(['/shares/record', this.item.archiveNbr]);
     } else {
-      this.router.navigate(['record', this.item.archiveNbr], {
-        relativeTo: this.route,
-      });
+      if (this.item.archiveNumber) {
+        this.router.navigate(
+          ['record', 'v2', (this.item as RecordVO).recordId],
+          {
+            relativeTo: this.route,
+          },
+        );
+      } else if (this.item.archiveNbr) {
+        this.router.navigate(['record', this.item.archiveNbr], {
+          relativeTo: this.route,
+        });
+      }
     }
   }
 
@@ -1120,7 +1144,7 @@
 
   private showFolderIcon(): boolean {
     return (
-      this.item.isFolder &&
+      (this.item.isFolder || this.item.folderId) &&
       this.folderContentsType !== FolderContentsType.NORMAL
     );
   }

src/app/file-browser/components/file-list-v2/file-list-v2.component.html

@@ -0,0 +1,41 @@
+<pr-file-list-controls
+  [hidden]="!showSidebar"
+  (refreshView)="refreshView()"
+  #controls
+></pr-file-list-controls>
+<pr-folder-description
+  [folder]="currentFolder"
+  *ngIf="showFolderDescription && !isRootFolder"
+></pr-folder-description>
+<div
+  class="file-list-scroll"
+  [class.is-sorting]="controls?.isSorting$ | async"
+  #scroll
+>
+  <div
+    class="empty-message"
+    *ngIf="!currentFolder?.ChildItemVOs || !currentFolder?.ChildItemVOs.length"
+  >
+    This folder is empty
+  </div>
+  <pr-file-list-item
+    *ngFor="let item of currentFolder?.ChildItemVOs"
+    [@ngIfScaleAnimationDynamic]="
+      item?.isPendingAction || item?.isNewlyCreated ? 'animate' : 'static'
+    "
+    [item]="item"
+    [folderView]="folderView"
+    [multiSelect]="isMultiSelectEnabled"
+    [allowNavigation]="allowNavigation"
+    [isSelected]="showSidebar ? selectedItems.has(item) : false"
+    [canSelect]="showSidebar"
+    [showFolderThumbnails]="showFolderThumbnails"
+    (itemClicked)="onItemClick($event)"
+    (itemVisible)="onItemVisible($event)"
+    (refreshView)="refreshView()"
+  ></pr-file-list-item>
+</div>
+<pr-sidebar class="adjust-for-announcement" *ngIf="showSidebar"></pr-sidebar>
+<div [@slideUpAnimation]="o.isActivated ? o.activatedRoute : ''">
+  <router-outlet #o="outlet"></router-outlet>
+</div>

src/app/file-browser/components/file-list-v2/file-list-v2.component.scss

@@ -0,0 +1,55 @@
+@import 'variables';
+
+:host {
+  width: 100%;
+  @include has-breadcrumbs;
+
+  &.no-padding {
+    padding-top: 0px;
+  }
+
+  &.file-list-centered {
+    @include public-centered;
+  }
+
+  .file-list-scroll {
+    opacity: 1;
+
+    &.is-sorting {
+      opacity: 0.5;
+      cursor: wait;
+      * {
+        pointer-events: none;
+      }
+    }
+  }
+}
+
+.empty-message {
+  padding: 20px 10px;
+  text-align: center;
+}
+
+.file-list-drag-target {
+  width: calc(100% - #{$sidebar-width});
+  border: 5px solid $PR-orange;
+  position: fixed;
+  top: $file-list-controls-height;
+  left: 0;
+  right: $sidebar-width;
+  bottom: 0;
+  z-index: -1;
+  opacity: 0;
+
+  font-weight: 700;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &.active {
+    z-index: 10;
+    opacity: 1;
+    transition: opacity 0.25s $tweaked-ease;
+    background: rgba(white, 0.7);
+  }
+}

src/app/file-browser/components/file-list-v2/file-list-v2.component.spec.ts

@@ -0,0 +1,106 @@
+/* @format */
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DataService } from '@shared/services/data/data.service';
+import { AccountService } from '@shared/services/account/account.service';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Location } from '@angular/common';
+import { DragService } from '@shared/services/drag/drag.service';
+import { FolderViewService } from '@shared/services/folder-view/folder-view.service';
+import { DeviceService } from '@shared/services/device/device.service';
+import { EventService } from '@shared/services/event/event.service';
+import { of, Subject } from 'rxjs';
+import { FolderVO } from '@models/folder-vo';
+import { RouterTestingModule } from '@angular/router/testing';
+import { CdkPortal } from '@angular/cdk/portal';
+import { FileListItemComponent } from '@fileBrowser/components/file-list-item/file-list-item.component';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { FileListV2Component } from './file-list-v2.component';
+
+describe('FileListV2Component', () => {
+  let component: FileListV2Component;
+  let fixture: ComponentFixture<FileListV2Component>;
+
+  const folderViewServiceMock = {
+    folderView: 'List',
+    viewChange: new Subject(),
+  };
+
+  const dragServiceMock = {
+    events: jasmine.createSpy('events').and.returnValue(of({ type: 'start' })),
+  };
+
+  const deviceServiceMock = {
+    isMobileWidth: jasmine.createSpy('isMobileWidth').and.returnValue(false),
+  };
+
+  const accountServiceMock = {
+    archiveChange: new Subject(),
+  };
+
+  const eventServiceMock = {
+    dispatch: jasmine.createSpy('dispatch'),
+  };
+
+  const dataServiceMock = {
+    setCurrentFolder: jasmine.createSpy('setCurrentFolder'),
+    folderUpdate: of(new FolderVO({})),
+    selectedItems$: jasmine
+      .createSpy('selectedItems$')
+      .and.returnValue(of(new Set())),
+    multiSelectChange: of(true),
+    itemToShow$: jasmine.createSpy('itemToShow$').and.returnValue(of(null)),
+    fetchLeanItems: jasmine.createSpy('fetchLeanItems'),
+    onSelectEvent: jasmine.createSpy('onSelectEvent'),
+  };
+
+  const routerMock = {
+    navigate: jasmine.createSpy('navigate'),
+    events: new Subject(),
+    url: '/folder',
+  };
+
+  const routeMock = {
+    snapshot: {
+      data: {
+        currentFolder: new FolderVO({
+          type: 'type.folder.root',
+        }),
+        showSidebar: true,
+        fileListCentered: false,
+        isPublicArchive: false,
+      },
+      queryParamMap: {
+        has: jasmine.createSpy('has').and.returnValue(false),
+        get: jasmine.createSpy('get').and.returnValue(null),
+      },
+    },
+  };
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [RouterTestingModule, NoopAnimationsModule],
+      declarations: [FileListV2Component, FileListItemComponent, CdkPortal],
+      providers: [
+        { provide: DataService, useValue: dataServiceMock },
+        { provide: AccountService, useValue: accountServiceMock },
+        { provide: ActivatedRoute, useValue: routeMock },
+        { provide: Router, useValue: routerMock },
+        { provide: Location, useValue: {} }, // Use empty mock for Location
+        { provide: FolderViewService, useValue: folderViewServiceMock },
+        { provide: DragService, useValue: dragServiceMock },
+        { provide: DeviceService, useValue: deviceServiceMock },
+        { provide: EventService, useValue: eventServiceMock },
+      ],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FileListV2Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create the component', () => {
+    expect(component).toBeTruthy();
+  });
+});