✨ add delete files

Author: marcode24

src/app/core/interfaces/response.interface.ts

@@ -28,5 +28,6 @@ export interface IFolderResponse {
 export interface IFileResponse {
   ok: boolean,
   msg: string,
-  files: File[]
+  files: File[],
+  file: File,
 }

src/app/core/services/file.service.ts

@@ -17,6 +17,7 @@ const base_url = environment.base_url;
 })
 export class FileService {
   filesCreated: EventEmitter<FileModel[]> = new EventEmitter();
+  fileDeleted: EventEmitter<FileModel> = new EventEmitter();
   updateTotalSize: EventEmitter<number> = new EventEmitter();
 
   get headers() {
@@ -47,4 +48,14 @@ export class FileService {
     const url = `${base_url}/file/download/${fileID}`;
     return this.http.get(url, { responseType: 'blob', ...this.headers });
   }
+
+  deleteFile(fileID: string): Observable<boolean> {
+    const url = `${base_url}/file/${fileID}`;
+    return this.http.delete<IFileResponse>(url, this.headers).pipe(map(resp => {
+      this.fileDeleted.emit(resp.file);
+      this.updateTotalSize.emit(-resp.file.size);
+      return resp.ok;
+    }));
+  }
+
 }

src/app/features/folder/folder.component.ts

@@ -18,6 +18,8 @@ export class FolderComponent implements OnInit, OnDestroy {
   private folderCreatedSubscripion: Subscription;
   private filesUploadedSubscription: Subscription;
   private routerSubscription: Subscription;
+  private fileDeletedSubscription: Subscription;
+
   folder: Folder;
   loading = false;
   allFiles: (Folder | File)[];
@@ -32,6 +34,7 @@ export class FolderComponent implements OnInit, OnDestroy {
     this.folderCreatedSubscripion.unsubscribe();
     this.filesUploadedSubscription.unsubscribe();
     this.routerSubscription.unsubscribe();
+    this.fileDeletedSubscription.unsubscribe();
   }
 
   ngOnInit(): void {
@@ -47,6 +50,10 @@ export class FolderComponent implements OnInit, OnDestroy {
       this.mixFilesAndFolders();
     });
     this.routerSubscription = this.activadedRoute.params.subscribe(() => this.getFolder());
+    this.fileDeletedSubscription = this.fileService.fileDeleted.subscribe((file) => {
+      this.folder.files = this.folder.files.filter((f) => f._id !== file._id);
+      this.mixFilesAndFolders();
+    });
   }
 
   getFolder(): void {

src/app/features/home/home.component.ts

@@ -15,8 +15,10 @@ import { Folder } from '@models/folder.model';
 })
 export class HomeComponent implements OnInit, OnDestroy {
   root: Folder;
-  folderCreatedSubscription: Subscription;
-  filesCreatedSubscription: Subscription;
+  private folderCreatedSubscription: Subscription;
+  private filesCreatedSubscription: Subscription;
+  private fileDeletedSubscription: Subscription;
+
   constructor(
     private authService: AuthService,
     private folderService: FolderService,
@@ -26,6 +28,7 @@ export class HomeComponent implements OnInit, OnDestroy {
   ngOnDestroy(): void {
     this.folderCreatedSubscription.unsubscribe();
     this.filesCreatedSubscription.unsubscribe();
+    this.fileDeletedSubscription.unsubscribe();
   }
 
   ngOnInit(): void {
@@ -46,6 +49,9 @@ export class HomeComponent implements OnInit, OnDestroy {
       this.root.files.push(...files);
       this.orderFiles();
     });
+    this.fileDeletedSubscription = this.fileService.fileDeleted.subscribe((file) => {
+      this.root.files = this.root.files.filter((f) => f._id !== file._id);
+    });
   }
 
   private orderFolders(): void {

src/app/shared/dropdowns/dots-dropdown/dots-dropdown.component.html

@@ -14,7 +14,7 @@
     <i class="bx bx-download"></i>
     <span class="title">Descargar</span>
   </li>
-  <li role="menuitem" class='dropdown-item'>
+  <li role="menuitem" class='dropdown-item danger' (click)="deleteFile()" *ngIf="isFile()">
     <i class="bx bx-trash"></i>
     <span class="title">Eliminar</span>
   </li>

src/app/shared/dropdowns/dots-dropdown/dots-dropdown.component.scss

@@ -72,7 +72,9 @@ ul {
 
     &:last-child {
       border-radius: 0 0 10px 10px;
+    }
 
+    &.danger {
       &:hover {
         background-color: #ff72568c;
       }

src/app/shared/dropdowns/dots-dropdown/dots-dropdown.component.ts

@@ -71,4 +71,14 @@ export class DotsDropdownComponent {
       this.modalService.openUpdateColor(this.file._id as string, this.file.color as string);
     }
   }
+
+  deleteFile(): void {
+    if (this.isFile()) {
+      this.fileService.deleteFile(this.file._id as string).subscribe({
+        complete: () => {
+          this.hideDropdown();
+        }
+      });
+    }
+  }
 }

src/app/shared/modals/colors/colors.component.scss

@@ -24,3 +24,7 @@
     }
   }
 }
+
+.modal-content {
+  max-width: 27rem;
+}