✨ add download files

Author: marcode24

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

@@ -39,4 +39,9 @@ export class FileService {
       return resp.ok;
     }));
   }
+
+  downloadFile(fileID: string): Observable<Blob> {
+    const url = `${base_url}/file/download/${fileID}`;
+    return this.http.get(url, { responseType: 'blob', ...this.headers });
+  }
 }

src/app/features/home/components/file/file.component.html

@@ -4,4 +4,4 @@
   </div>
   <span class="name">{{ file.name }}</span>
 </div>
-<app-dots-dropdown class="actions"></app-dots-dropdown>
+<app-dots-dropdown class="actions" [file]="file"></app-dots-dropdown>

src/app/features/home/home.component.html

@@ -1,10 +1,10 @@
 <div class="fluid-container">
   <app-actions [folder]="root"></app-actions>
-  <div class="not-items" *ngIf="!root.folders?.length && !root.files?.length">
+  <div class="not-items" *ngIf="root.folders.length < 1 && root.files.length < 1">
     <img src="assets/images/no-files.svg" alt="no-files-image">
     <span class="description">Agrega tu primer archivo o carpeta</span>
   </div>
-  <div class="files" *ngIf="root.folders.length && root.folders.length">
+  <div class="files" *ngIf="root.folders.length > 1 || root.files.length > 1">
     <section class="group" *ngIf="root.folders.length > 0">
       <span class="title">Folders</span>
       <div class="items">

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

@@ -10,7 +10,7 @@
     <i class="bx bx-palette"></i>
     <span class="title">Cambiar color</span>
   </li>
-  <li role="menuitem" class='dropdown-item'>
+  <li role="menuitem" class='dropdown-item' (click)="downloadFile()">
     <i class="bx bx-download"></i>
     <span class="title">Descargar</span>
   </li>

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

@@ -1,14 +1,43 @@
-import { Component, ElementRef, ViewChild } from '@angular/core';
+import { Component, ElementRef, Input, ViewChild } from '@angular/core';
+
+import { FileService } from '@services/file.service';
+
+import { File } from '@models/file.model';
+import { Folder } from '@models/folder.model';
 
 @Component({
   selector: 'app-dots-dropdown',
   templateUrl: './dots-dropdown.component.html',
   styleUrls: ['./dots-dropdown.component.scss']
 })
 export class DotsDropdownComponent {
+  @Input() file: File | Folder;
   @ViewChild('dropdown') dropdown: ElementRef;
 
+  constructor(
+    private fileService: FileService,
+  ) { }
+
   changeVisibility() {
     this.dropdown.nativeElement.classList.toggle('show');
   }
+
+  downloadFile(): void {
+    this.fileService.downloadFile(this.file._id as string).subscribe({
+      next: (blob) => {
+        const url = window.URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = this.file.name.slice(0, this.file.name.lastIndexOf('.')) || this.file.name;
+        link.click();
+      },
+      complete: () => {
+        this.hideDropdown();
+      }
+    });
+  }
+
+  hideDropdown(): void {
+    this.dropdown.nativeElement.classList.remove('show');
+  }
 }