Feat/550 file widget

src/app/features/files/components/move-file-dialog/move-file-dialog.component.html

@@ -5,12 +5,11 @@
 } @else {
   <div class="flex flex-column gap-2">
     <div class="flex gap-2">
-      <img [ngSrc]="'assets/icons/colored/cos-shield.svg'" width="24" height="24" alt="cost-shield" />
-      <h2 class="font-normal">{{ 'files.dialogs.moveFile.storage' | translate }}</h2>
+      <h2 class="font-normal">{{ storageName }}</h2>
     </div>
 
     <div class="files-table flex flex-column">
-      @if (currentFolder()?.relationships?.parentFolderLink) {
+      @if (previousFolder) {
         <div class="files-table-row py-2 px-3">
           <div
             tabindex="0"
@@ -26,10 +25,7 @@ <h2 class="font-normal">{{ 'files.dialogs.moveFile.storage' | translate }}</h2>
       }
 
       @for (file of files(); track $index) {
-        <div
-          class="files-table-row flex align-items-center py-2"
-          [class]="currentFolder()?.relationships?.parentFolderLink ? 'pl-6' : 'px-3'"
-        >
+        <div class="files-table-row flex align-items-center py-2" [class]="foldersStack.length ? 'pl-6' : 'px-3'">
           <div class="flex align-items-center gap-2">
             @if (file.kind !== 'folder') {
               <osf-icon class="disabled-icon" iconClass="fas fa-file disabled-icon"></osf-icon>
@@ -55,6 +51,14 @@ <h2 class="font-normal">{{ 'files.dialogs.moveFile.storage' | translate }}</h2>
           </div>
         </div>
       }
+      @if (filesTotalCount() > itemsPerPage) {
+        <osf-custom-paginator
+          class="mt-1 border-top-1 border-200"
+          [first]="first"
+          [totalCount]="filesTotalCount()"
+          (pageChanged)="onFilesPageChange($event)"
+        />
+      }
       @if (!files().length) {
         <div class="flex justify-content-center p-4">
           <h3 class="font-normal text-no-transform">{{ 'files.emptyState' | translate }}</h3>

src/app/features/files/components/move-file-dialog/move-file-dialog.component.ts

@@ -4,13 +4,13 @@ import { TranslatePipe, TranslateService } from '@ngx-translate/core';
 
 import { Button } from 'primeng/button';
 import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
+import { PaginatorState } from 'primeng/paginator';
 import { Tooltip } from 'primeng/tooltip';
 
-import { finalize, take, throwError } from 'rxjs';
+import { finalize, throwError } from 'rxjs';
 import { catchError } from 'rxjs/operators';
 
-import { NgOptimizedImage } from '@angular/common';
-import { ChangeDetectionStrategy, Component, computed, DestroyRef, inject, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, DestroyRef, effect, inject, signal } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 import {
@@ -21,13 +21,13 @@ import {
   SetCurrentFolder,
   SetMoveFileCurrentFolder,
 } from '@osf/features/files/store';
-import { IconComponent, LoadingSpinnerComponent } from '@shared/components';
+import { CustomPaginatorComponent, IconComponent, LoadingSpinnerComponent } from '@shared/components';
 import { OsfFile } from '@shared/models';
 import { FilesService, ToastService } from '@shared/services';
 
 @Component({
   selector: 'osf-move-file-dialog',
-  imports: [Button, LoadingSpinnerComponent, NgOptimizedImage, Tooltip, TranslatePipe, IconComponent],
+  imports: [Button, LoadingSpinnerComponent, Tooltip, TranslatePipe, IconComponent, CustomPaginatorComponent],
   templateUrl: './move-file-dialog.component.html',
   styleUrl: './move-file-dialog.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -41,64 +41,83 @@ export class MoveFileDialogComponent {
   private readonly translateService = inject(TranslateService);
   private readonly toastService = inject(ToastService);
 
-  protected readonly files = select(FilesSelectors.getMoveFileFiles);
-  protected readonly isLoading = select(FilesSelectors.isMoveFileFilesLoading);
-  protected readonly currentFolder = select(FilesSelectors.getMoveFileCurrentFolder);
-  private readonly rootFolders = select(FilesSelectors.getRootFolders);
-  protected readonly isFilesUpdating = signal(false);
-  protected readonly isFolderSame = computed(() => {
+  readonly files = select(FilesSelectors.getMoveFileFiles);
+  readonly filesTotalCount = select(FilesSelectors.getMoveFileFilesTotalCount);
+  readonly isLoading = select(FilesSelectors.isMoveFileFilesLoading);
+  readonly currentFolder = select(FilesSelectors.getMoveFileCurrentFolder);
+  readonly isFilesUpdating = signal(false);
+  readonly rootFolders = select(FilesSelectors.getRootFolders);
+
+  readonly isFolderSame = computed(() => {
     return this.currentFolder()?.id === this.config.data.file.relationships.parentFolderId;
   });
-  protected readonly provider = select(FilesSelectors.getProvider);
 
-  protected readonly dispatch = createDispatchMap({
+  readonly storageName =
+    this.config.data.storageName || this.translateService.instant('files.dialogs.moveFile.osfStorage');
+
+  readonly provider = select(FilesSelectors.getProvider);
+
+  readonly dispatch = createDispatchMap({
     getMoveFileFiles: GetMoveFileFiles,
     setMoveFileCurrentFolder: SetMoveFileCurrentFolder,
     setCurrentFolder: SetCurrentFolder,
     getFiles: GetFiles,
     getRootFolderFiles: GetRootFolderFiles,
   });
 
+  foldersStack: OsfFile[] = this.config.data.foldersStack ?? [];
+  previousFolder: OsfFile | null = null;
+
+  pageNumber = signal(1);
+
+  itemsPerPage = 10;
+  first = 0;
+  filesLink = '';
+
   constructor() {
-    const filesLink = this.currentFolder()?.relationships.filesLink;
+    this.initPreviousFolder();
+    const filesLink = this.currentFolder()?.relationships?.filesLink;
     const rootFolders = this.rootFolders();
-    if (filesLink) {
-      this.dispatch.getMoveFileFiles(filesLink);
-    } else if (rootFolders) {
-      this.dispatch.getMoveFileFiles(rootFolders[0].relationships.filesLink);
+    this.filesLink = filesLink ?? rootFolders?.[0].relationships?.filesLink ?? '';
+    if (this.filesLink) {
+      this.dispatch.getMoveFileFiles(this.filesLink, this.pageNumber());
+    }
+
+    effect(() => {
+      const page = this.pageNumber();
+      if (this.filesLink) {
+        this.dispatch.getMoveFileFiles(this.filesLink, page);
+      }
+    });
+  }
+
+  initPreviousFolder() {
+    const foldersStack = this.foldersStack;
+    if (foldersStack.length === 0) {
+      this.previousFolder = null;
+    } else {
+      this.previousFolder = foldersStack[foldersStack.length - 1];
     }
   }
 
   openFolder(file: OsfFile) {
     if (file.kind !== 'folder') return;
-
+    const current = this.currentFolder();
+    if (current) {
+      this.previousFolder = current;
+      this.foldersStack.push(current);
+    }
     this.dispatch.getMoveFileFiles(file.relationships.filesLink);
     this.dispatch.setMoveFileCurrentFolder(file);
   }
 
   openParentFolder() {
-    const currentFolder = this.currentFolder();
-
-    if (!currentFolder) return;
-
-    this.isFilesUpdating.set(true);
-    this.filesService
-      .getFolder(currentFolder.relationships.parentFolderLink)
-      .pipe(
-        take(1),
-        takeUntilDestroyed(this.destroyRef),
-        finalize(() => {
-          this.isFilesUpdating.set(false);
-        }),
-        catchError((error) => {
-          this.toastService.showError(error.error.message);
-          return throwError(() => error);
-        })
-      )
-      .subscribe((folder) => {
-        this.dispatch.setMoveFileCurrentFolder(folder);
-        this.dispatch.getMoveFileFiles(folder.relationships.filesLink);
-      });
+    const previous = this.foldersStack.pop() ?? null;
+    this.previousFolder = this.foldersStack.length > 0 ? this.foldersStack[this.foldersStack.length - 1] : null;
+    if (previous) {
+      this.dispatch.setMoveFileCurrentFolder(previous);
+      this.dispatch.getMoveFileFiles(previous.relationships.filesLink);
+    }
   }
 
   moveFile(): void {
@@ -148,4 +167,9 @@ export class MoveFileDialogComponent {
         }
       });
   }
+
+  onFilesPageChange(event: PaginatorState): void {
+    this.pageNumber.set(event.page! + 1);
+    this.first = event.first!;
+  }
 }

src/app/features/files/constants/file-provider.constants.ts

@@ -1,6 +1,6 @@
 export const FileProvider = {
   OsfStorage: 'osfstorage',
-  GoogleDrive: 'google-drive',
+  GoogleDrive: 'googledrive',
   Box: 'box',
   DropBox: 'dropbox',
   OneDrive: 'onedrive',

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

@@ -1,4 +1,4 @@
-<osf-sub-header [title]="'files.title' | translate"></osf-sub-header>
+<osf-sub-header [title]="'navigation.files' | translate"></osf-sub-header>
 
 @if (!dataLoaded()) {
   <osf-loading-spinner></osf-loading-spinner>
@@ -24,7 +24,7 @@
             <p class="provider-name">{{ option.label }}</p>
           </ng-template>
         </p-select>
-        <label for="in_label">{{ 'files.storageLocation' | translate }}</label>
+        <label for="in_label">{{ currentRootFolder()?.label }}</label>
       </p-floatlabel>
     </div>
 
@@ -124,7 +124,9 @@
 
     <osf-files-tree
       [files]="files()"
+      [totalCount]="filesTotalCount()"
       [currentFolder]="currentFolder()"
+      [storage]="currentRootFolder()"
       [isLoading]="isFilesLoading()"
       [actions]="filesTreeActions"
       [viewOnly]="isViewOnly()"
@@ -134,6 +136,7 @@
       (folderIsOpening)="folderIsOpening($event)"
       (entryFileClicked)="navigateToFile($event)"
       (uploadFileConfirmed)="uploadFile($event)"
+      (filesPageChange)="onFilesPageChange($event)"
     >
     </osf-files-tree>
   </div>