Feat/244 registry files

src/app/features/preprints/components/stepper/file-step/file-step.component.html

@@ -87,6 +87,9 @@ <h2>{{ 'preprints.preprintStepper.file.title' | translate }}</h2>
   <section class="m-t-24">
     @if (selectedProjectId()) {
       <osf-files-tree
+        [currentFolder]="currentFolder()"
+        [files]="projectFiles()"
+        [isLoading]="areProjectFilesLoading()"
         [resourceId]="selectedProjectId()!"
         [actions]="filesTreeActions"
         (entryFileClicked)="selectProjectFile($event)"

src/app/features/preprints/components/stepper/file-step/file-step.component.ts

@@ -93,6 +93,9 @@ export class FileStepComponent implements OnInit {
   arePreprintFilesLoading = select(PreprintStepperSelectors.arePreprintFilesLoading);
   availableProjects = select(PreprintStepperSelectors.getAvailableProjects);
   areAvailableProjectsLoading = select(PreprintStepperSelectors.areAvailableProjectsLoading);
+  projectFiles = select(PreprintStepperSelectors.getProjectFiles);
+  areProjectFilesLoading = select(PreprintStepperSelectors.areProjectFilesLoading);
+  currentFolder = select(PreprintStepperSelectors.getCurrentFolder);
   selectedProjectId = signal<StringOrNull>(null);
 
   versionFileMode = signal<boolean>(false);

src/app/features/preprints/preprints.routes.ts

@@ -8,8 +8,8 @@ import { PreprintStepperState } from '@osf/features/preprints/store/preprint-ste
 import { PreprintsDiscoverState } from '@osf/features/preprints/store/preprints-discover';
 import { PreprintsResourcesFiltersState } from '@osf/features/preprints/store/preprints-resources-filters';
 import { PreprintsResourcesFiltersOptionsState } from '@osf/features/preprints/store/preprints-resources-filters-options';
-import { ConfirmLeavingGuard } from '@shared/guards';
 import { ResourceType } from '@shared/enums';
+import { ConfirmLeavingGuard } from '@shared/guards';
 import { ContributorsState, SubjectsState } from '@shared/stores';
 
 import { ModeratorsState } from '../moderation/store/moderation';

src/app/features/project/files/pages/project-files/project-files.component.html

@@ -8,7 +8,7 @@
       <p-floatlabel class="w-full md:w-56" variant="in">
         <p-select
           inputId="in_label"
-          [options]="rootFoldersOptions() ?? []"
+          [options]="rootFoldersOptions()"
           [(ngModel)]="currentRootFolder"
           styleClass="w-full"
           variant="filled"
@@ -97,6 +97,9 @@
     </div>
 
     <osf-files-tree
+      [files]="files()"
+      [currentFolder]="currentFolder()"
+      [isLoading]="isFilesLoading()"
       [actions]="filesTreeActions"
       [viewOnly]="false"
       [viewOnlyDownloadable]="false"

src/app/features/project/files/pages/project-files/project-files.component.ts

@@ -191,15 +191,7 @@ export class ProjectFilesComponent {
     });
 
     effect(() => {
-      const currentFolder = this.currentFolder();
-
-      if (currentFolder) {
-        this.actions.getFiles(currentFolder.relationships.filesLink);
-      }
-    });
-
-    effect(() => {
-      if (!this.isFilesLoading() && !this.isConfiguredStorageAddonsLoading() && !this.isRootFoldersLoading()) {
+      if (!this.isConfiguredStorageAddonsLoading() && !this.isRootFoldersLoading()) {
         this.dataLoaded.set(true);
       }
     });

src/app/features/project/files/store/project-files.actions.ts

@@ -37,12 +37,6 @@ export class GetFileProjectMetadata {
   constructor(public projectId: string) {}
 }
 
-export class GetMoveFileRootFiles {
-  static readonly type = '[Project Files] Get Move File Root Files';
-
-  constructor(public projectId: string) {}
-}
-
 export class GetMoveFileFiles {
   static readonly type = '[Project Files] Get Move File Files';
 

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

@@ -80,6 +80,7 @@ export class ProjectFilesState {
               error: null,
             },
           });
+          console.log('files is patched');
         },
       }),
       catchError((error) => this.handleError(ctx, 'files', error))
@@ -95,6 +96,7 @@ export class ProjectFilesState {
   @Action(SetCurrentFolder)
   setSelectedFolder(ctx: StateContext<ProjectFilesStateModel>, action: SetCurrentFolder) {
     ctx.patchState({ currentFolder: action.folder });
+    console.log('set currennt folder');
   }
 
   @Action(SetMoveFileCurrentFolder)

src/app/features/registry/pages/registry-files/registry-files.component.html

@@ -34,6 +34,9 @@
     </div>
 
     <osf-files-tree
+      [files]="files()"
+      [isLoading]="isFilesLoading()"
+      [currentFolder]="currentFolder()"
       [actions]="filesTreeActions"
       [viewOnly]="true"
       [viewOnlyDownloadable]="true"

src/app/features/registry/pages/registry-files/registry-files.component.ts

@@ -105,6 +105,14 @@ export class RegistryFilesComponent {
       }
     });
 
+    // effect(() => {
+    //   const currentFolder = this.currentFolder();
+    //
+    //   if (currentFolder) {
+    //     this.actions.getFiles(currentFolder.relationships.filesLink);
+    //   }
+    // });
+
     this.searchControl.valueChanges
       .pipe(skip(1), takeUntilDestroyed(this.destroyRef), debounceTime(500))
       .subscribe((searchText) => {

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

@@ -1,11 +1,13 @@
-<div class="drop-zone" [class.active]="isDragOver()" (dragover)="onDragOver($event)" (drop)="onDrop($event)">
-  @if (isDragOver()) {
-    <div class="flex flex-column gap-2 align-items-center">
-      <i class="fa-solid fa-cloud-arrow-up text-5xl"></i>
-      <p class="drop-text text-2xl">{{ 'project.files.dropText' | translate }}</p>
-    </div>
-  }
-</div>
+@if (!viewOnly()) {
+  <div class="drop-zone" [class.active]="isDragOver()" (dragover)="onDragOver($event)" (drop)="onDrop($event)">
+    @if (isDragOver()) {
+      <div class="flex flex-column gap-2 align-items-center">
+        <i class="fa-solid fa-cloud-arrow-up text-5xl"></i>
+        <p class="drop-text text-2xl">{{ 'project.files.dropText' | translate }}</p>
+      </div>
+    }
+  </div>
+}
 
 @if (isLoading()) {
   <div class="w-8rem ml-auto mr-auto">

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

@@ -27,25 +27,16 @@ import { MoveFileDialogComponent, RenameFileDialogComponent } from '@osf/feature
 import { embedDynamicJs, embedStaticHtml, FilesTreeActions } from '@osf/features/project/files/models';
 import { FileMenuType } from '@osf/shared/enums';
 import { FileMenuComponent, LoadingSpinnerComponent } from '@shared/components';
-import { filesTreeSelectorsFactory } from '@shared/factories';
 import { FileMenuAction, OsfFile } from '@shared/models';
 import { FileSizePipe } from '@shared/pipes';
 import { CustomConfirmationService, FilesService, ToastService } from '@shared/services';
-import { FILES_TREE_SELECTORS } from '@shared/tokens';
 
 @Component({
   selector: 'osf-files-tree',
   imports: [DatePipe, FileSizePipe, PrimeTemplate, TranslatePipe, Tree, LoadingSpinnerComponent, FileMenuComponent],
   templateUrl: './files-tree.component.html',
   styleUrl: './files-tree.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [
-    {
-      provide: FILES_TREE_SELECTORS,
-      useFactory: filesTreeSelectorsFactory,
-      deps: [ActivatedRoute],
-    },
-  ],
 })
 export class FilesTreeComponent implements OnInit, OnDestroy {
   @HostBinding('class') classes = 'relative';
@@ -57,11 +48,9 @@ export class FilesTreeComponent implements OnInit, OnDestroy {
   readonly dialogService = inject(DialogService);
   readonly translateService = inject(TranslateService);
 
-  private readonly selectors = inject(FILES_TREE_SELECTORS);
-  protected readonly files = this.selectors.getFiles();
-  protected readonly isLoading = this.selectors.isFilesLoading();
-  protected readonly currentFolder = this.selectors.getCurrentFolder();
-
+  files = input.required<OsfFile[]>();
+  isLoading = input<boolean>();
+  currentFolder = input.required<OsfFile | null>();
   resourceId = input.required<string>();
   actions = input.required<FilesTreeActions>();
   viewOnly = input<boolean>(true);
@@ -133,6 +122,12 @@ export class FilesTreeComponent implements OnInit, OnDestroy {
         this.updateFilesList().subscribe(() => this.folderIsOpening.emit(false));
       }
     });
+
+    effect(() => {
+      const isLoading = this.isLoading();
+
+      console.log(isLoading);
+    });
   }
 
   openEntry(file: OsfFile) {

src/app/shared/components/registration-card/registration-card.component.ts

@@ -2,7 +2,6 @@ import { TranslatePipe } from '@ngx-translate/core';
 
 import { Button } from 'primeng/button';
 import { Card } from 'primeng/card';
-import { Tag } from 'primeng/tag';
 
 import { DatePipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
@@ -13,7 +12,7 @@ import { RegistrationCard } from '@osf/shared/models';
 
 @Component({
   selector: 'osf-registration-card',
-  imports: [Card, Button, Tag, TranslatePipe, DatePipe, RouterLink],
+  imports: [Card, Button, TranslatePipe, DatePipe, RouterLink],
   templateUrl: './registration-card.component.html',
   styleUrl: './registration-card.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,