delete files from draft registrations

Author: mkovalua

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

@@ -619,8 +619,8 @@ export class FilesComponent {
     this.actions.setMoveDialogCurrentFolder(folder);
   }
 
-  deleteEntry(link: string) {
-    this.actions.deleteEntry(link).subscribe(() => {
+  deleteEntry(file: FileModel): void {
+    this.actions.deleteEntry(file?.links.delete).subscribe(() => {
       this.toastService.showSuccess('files.dialogs.deleteFile.success');
       this.updateFilesList();
     });

src/app/features/registries/components/custom-step/custom-step.component.html

@@ -181,6 +181,8 @@ <h3 class="mb-2">{{ 'files.actions.uploadFile' | translate }}</h3>
                   (attachFile)="onAttachFile($event, q.responseKey!)"
                   (openFile)="onOpenFile($event)"
                   [filesViewOnly]="filesViewOnly()"
+                  [isDraftResource]="true"
+                  (removeFromAttachedFiles)="removeFromAttachedFiles($event, 'uploader')"
                 ></osf-files-control>
               </div>
             }

src/app/features/registries/components/files-control/files-control.component.html

@@ -51,6 +51,9 @@
       [resourceId]="projectId()"
       [provider]="provider()"
       [selectedFiles]="filesSelection"
+      [isDraftResource]="isDraftResource()"
+      (deleteEntryAction)="deleteEntry($event)"
+      (removeFromAttachedFiles)="onRemoveFromAttachedFiles($event)"
       (selectFile)="onFileTreeSelected($event)"
       (entryFileClicked)="onEntryFileClicked($event)"
       (uploadFilesConfirmed)="uploadFiles($event)"

src/app/features/registries/components/files-control/files-control.component.ts

@@ -8,10 +8,11 @@ import { Button } from 'primeng/button';
 import { filter, finalize, switchMap, take } from 'rxjs';
 
 import { HttpEventType } from '@angular/common/http';
-import { ChangeDetectionStrategy, Component, DestroyRef, inject, input, output, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, DestroyRef, effect, inject, input, output, signal } from '@angular/core';
 import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 
 import { CreateFolderDialogComponent } from '@osf/features/files/components';
+import { DeleteEntry } from '@osf/features/files/store';
 import { FileUploadDialogComponent } from '@osf/shared/components/file-upload-dialog/file-upload-dialog.component';
 import { FilesTreeComponent } from '@osf/shared/components/files-tree/files-tree.component';
 import { LoadingSpinnerComponent } from '@osf/shared/components/loading-spinner/loading-spinner.component';
@@ -53,7 +54,9 @@ export class FilesControlComponent {
   projectId = input.required<string>();
   provider = input.required<string>();
   filesViewOnly = input<boolean>(false);
+  isDraftResource = input<boolean>(false);
   attachFile = output<FileModel>();
+  removeFromAttachedFiles = output<FileModel>();
   openFile = output<FileModel>();
 
   private readonly filesService = inject(FilesService);
@@ -69,6 +72,7 @@ export class FilesControlComponent {
   readonly progress = signal(0);
   readonly fileName = signal('');
   readonly dataLoaded = signal(false);
+  pageNumber = signal(1);
 
   fileIsUploading = signal(false);
   filesSelection: FileModel[] = [];
@@ -79,11 +83,38 @@ export class FilesControlComponent {
     setFilesIsLoading: SetFilesIsLoading,
     setCurrentFolder: SetRegistriesCurrentFolder,
     getRootFolders: GetRootFolders,
+    deleteEntry: DeleteEntry,
   });
 
   constructor() {
     this.setupRootFoldersLoader();
     this.setupCurrentFolderWatcher();
+
+    effect(() => {
+      const currentFolder = this.currentFolder();
+      if (currentFolder) {
+        this.pageNumber.set(1);
+        this.updateFilesList();
+      }
+    });
+  }
+
+  updateFilesList = (): void => {
+    const currentFolder = this.currentFolder();
+    const filesLink = currentFolder?.links.filesLink;
+    if (filesLink) {
+      this.actions.getFiles(filesLink, this.pageNumber());
+    }
+  };
+
+  deleteEntry(file: FileModel): void {
+    this.actions.deleteEntry(file?.links.delete).subscribe(() => {
+      this.toastService.showSuccess('files.dialogs.deleteFile.success');
+      this.updateFilesList();
+      if (this.isDraftResource()) {
+        this.removeFromAttachedFiles.emit(file);
+      }
+    });
   }
 
   onFileSelected(event: Event): void {
@@ -169,6 +200,10 @@ export class FilesControlComponent {
     this.filesSelection = [...new Set(this.filesSelection)];
   }
 
+  onRemoveFromAttachedFiles(file: FileModel) {
+    this.removeFromAttachedFiles.emit(file);
+  }
+
   onLoadFiles(event: { link: string; page: number }) {
     this.actions.getFiles(event.link, event.page);
   }

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

@@ -95,6 +95,18 @@
                     </osf-file-menu>
                   </div>
                 }
+                @if (isDraftResource()) {
+                  <p-button
+                    icon="fas fa-trash"
+                    severity="danger"
+                    text
+                    rounded
+                    [pTooltip]="'Delete'"
+                    tooltipPosition="top"
+                    (onClick)="deleteFile(file)"
+                    osfStopPropagation
+                  />
+                }
               </div>
             }
           </ng-template>

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

@@ -3,6 +3,8 @@ import { select } from '@ngxs/store';
 import { TranslatePipe } from '@ngx-translate/core';
 
 import { PrimeTemplate, TreeNode } from 'primeng/api';
+import { Button } from 'primeng/button';
+import { TooltipModule } from 'primeng/tooltip';
 import { Tree, TreeLazyLoadEvent, TreeNodeDropEvent, TreeNodeSelectEvent } from 'primeng/tree';
 
 import { Clipboard } from '@angular/cdk/clipboard';
@@ -66,6 +68,8 @@ type FileTreeNode = FileModel & TreeNode;
     LoadingSpinnerComponent,
     FileMenuComponent,
     StopPropagationDirective,
+    Button,
+    TooltipModule,
   ],
   templateUrl: './files-tree.component.html',
   styleUrl: './files-tree.component.scss',
@@ -101,12 +105,14 @@ export class FilesTreeComponent implements OnDestroy, AfterViewInit {
   selectedFiles = input<FileModel[]>([]);
   scrollHeight = input<string>('300px');
   selectionMode = input<'multiple' | null>('multiple');
+  isDraftResource = input<boolean>(false);
 
   entryFileClicked = output<FileModel>();
   uploadFilesConfirmed = output<File[] | File>();
   setCurrentFolder = output<FileFolderModel>();
   setMoveDialogCurrentFolder = output<FileFolderModel>();
-  deleteEntryAction = output<string>();
+  deleteEntryAction = output<FileModel>();
+  removeFromAttachedFiles = output<FileModel>();
   renameEntryAction = output<{ newName: string; link: string }>();
   loadFiles = output<{ link: string; page: number }>();
   selectFile = output<FileModel>();
@@ -264,6 +270,10 @@ export class FilesTreeComponent implements OnDestroy, AfterViewInit {
     this.clearSelection.emit();
   }
 
+  deleteFile(file: FileModel) {
+    this.deleteEntry(file);
+  }
+
   onFileMenuAction(action: FileMenuAction, file: FileModel): void {
     const { value, data } = action;
 
@@ -344,12 +354,12 @@ export class FilesTreeComponent implements OnDestroy, AfterViewInit {
       messageKey:
         file.kind === FileKind.Folder ? 'files.dialogs.deleteFolder.message' : 'files.dialogs.deleteFile.message',
       acceptLabelKey: 'common.buttons.remove',
-      onConfirm: () => this.confirmDeleteEntry(file.links.delete),
+      onConfirm: () => this.confirmDeleteEntry(file),
     });
   }
 
-  confirmDeleteEntry(link: string): void {
-    this.deleteEntryAction.emit(link);
+  confirmDeleteEntry(file: FileModel): void {
+    this.deleteEntryAction.emit(file);
   }
 
   confirmRename(file: FileModel): void {