[ENG-9780] Expand File Picker for File Widget on Projects #821

- Ticket: [ENG-9780]
- Feature flag: n/a

## Summary of Changes
1. Fixed file widget for loading more than 10 items.

Author: nsemets

src/app/features/project/overview/components/files-widget/files-widget.component.html

@@ -43,6 +43,7 @@ <h2>{{ 'project.overview.files.filesPreview' | translate }}</h2>
     [resourceId]="selectedRoot!"
     [provider]="provider()"
     [selectionMode]="null"
+    [scrollHeight]="'300px'"
     (entryFileClicked)="navigateToFile($event)"
     (loadFiles)="onLoadFiles($event)"
     (setCurrentFolder)="setCurrentFolder($event)"

src/app/features/project/overview/store/project-overview.state.ts

@@ -42,6 +42,11 @@ export class ProjectOverviewState {
   @Action(GetProjectById)
   getProjectById(ctx: StateContext<ProjectOverviewStateModel>, action: GetProjectById) {
     const state = ctx.getState();
+
+    if (state.project.isLoading) {
+      return;
+    }
+
     ctx.patchState({
       project: {
         ...state.project,
@@ -67,6 +72,11 @@ export class ProjectOverviewState {
   @Action(GetProjectInstitutions)
   getProjectInstitutions(ctx: StateContext<ProjectOverviewStateModel>, action: GetProjectInstitutions) {
     const state = ctx.getState();
+
+    if (state.institutions.isLoading) {
+      return;
+    }
+
     ctx.patchState({
       institutions: {
         ...state.institutions,
@@ -91,6 +101,11 @@ export class ProjectOverviewState {
   @Action(GetProjectIdentifiers)
   getProjectIdentifiers(ctx: StateContext<ProjectOverviewStateModel>, action: GetProjectIdentifiers) {
     const state = ctx.getState();
+
+    if (state.identifiers.isLoading) {
+      return;
+    }
+
     ctx.patchState({
       identifiers: {
         ...state.identifiers,
@@ -120,6 +135,10 @@ export class ProjectOverviewState {
 
     const state = ctx.getState();
 
+    if (state.license.isLoading) {
+      return;
+    }
+
     ctx.patchState({
       license: {
         ...state.license,

src/app/shared/components/files-tree/files-tree.component.html

@@ -24,18 +24,19 @@
     <div class="flex-1">
       <div class="files-table flex">
         <p-tree
-          [value]="nodes()"
+          class="tree-table"
+          styleClass="w-full md:w-[30rem]"
           [draggableNodes]="!hasViewOnly() && supportUpload()"
           [droppableNodes]="!hasViewOnly() && supportUpload()"
-          (onScrollIndexChange)="onScrollIndexChange($event)"
-          [scrollHeight]="scrollHeight()"
-          [virtualScroll]="true"
-          [virtualScrollItemSize]="virtualScrollItemSize"
-          styleClass="w-full md:w-[30rem]"
-          class="tree-table"
+          [lazy]="true"
           [loading]="isLoadingMore()"
           [selectionMode]="selectionMode()"
           [selection]="selectedFiles()"
+          [scrollHeight]="scrollHeight()"
+          [value]="nodes()"
+          [virtualScroll]="true"
+          [virtualScrollItemSize]="virtualScrollItemSize"
+          (onLazyLoad)="onLazyLoad($event)"
           (onNodeSelect)="onNodeSelect($event)"
           (onNodeUnselect)="onNodeUnselect($event)"
           (onNodeDrop)="onNodeDrop($event)"

src/app/shared/components/files-tree/files-tree.component.ts

@@ -3,7 +3,7 @@ import { select } from '@ngxs/store';
 import { TranslatePipe } from '@ngx-translate/core';
 
 import { PrimeTemplate } from 'primeng/api';
-import { Tree, TreeNodeDropEvent, TreeNodeSelectEvent, TreeScrollIndexChangeEvent } from 'primeng/tree';
+import { Tree, TreeLazyLoadEvent, TreeNodeDropEvent, TreeNodeSelectEvent } from 'primeng/tree';
 
 import { Clipboard } from '@angular/cdk/clipboard';
 import { DatePipe, isPlatformBrowser } from '@angular/common';
@@ -163,13 +163,6 @@ export class FilesTreeComponent implements OnDestroy, AfterViewInit {
         this.isLoadingMore.set(false);
       }
     });
-
-    effect(() => {
-      const loaded = this.files().length;
-      if (loaded < this.visibleFilesCount()) {
-        this.loadNextPage();
-      }
-    });
   }
 
   ngAfterViewInit(): void {
@@ -440,7 +433,7 @@ export class FilesTreeComponent implements OnDestroy, AfterViewInit {
     }
   }
 
-  onScrollIndexChange(event: TreeScrollIndexChangeEvent) {
+  onLazyLoad(event: TreeLazyLoadEvent) {
     const loaded = this.files().length;
     if (event.last >= loaded - 1) {
       this.loadNextPage();

src/app/shared/stores/contributors/contributors.state.ts

@@ -302,7 +302,7 @@ export class ContributorsState {
   getBibliographicContributors(ctx: StateContext<ContributorsStateModel>, action: GetBibliographicContributors) {
     const state = ctx.getState();
 
-    if (!action.resourceId || !action.resourceType) {
+    if (!action.resourceId || !action.resourceType || state.bibliographicContributorsList.isLoading) {
       return;
     }