✨ add validation for used space when upload new files

Author: marcode24

src/app/shared/modals/upload-files/upload-files.component.html

@@ -8,6 +8,12 @@
     </div>
     <div class="body">
       <form>
+        <div class="messages" *ngIf="!validateUsedSpace()">
+          <span class="message error">
+            No tienes espacio suficiente para subir los archivos seleccionados
+            ({{ totalSpace - usedSpace | fileSize }} disponibles)
+          </span>
+        </div>
         <div class="form-group" *ngIf="!files.length">
           <label for="file">Selecciona los archivos</label>
           <input type="file" id="file" name="file" multiple (change)="onFileChange($event)">
@@ -40,7 +46,7 @@
           <button class="btn btn-primary" *ngIf="files && files.length > 0" type="file" (click)="selectFiles()">
             Subir más archivos
           </button>
-          <button class="btn btn-primary" [disabled]="!validateFiles() || uploading" (click)="uploadFiles()">
+          <button class="btn btn-primary" [disabled]="!validateFiles() || uploading || !validateUsedSpace()" (click)="uploadFiles()">
             {{ uploading ? 'Guardando' : 'Guardar' }}
             <i *ngIf="uploading" class='bx bx-loader-circle bx-spin bx-rotate-90' ></i>
           </button>

src/app/shared/modals/upload-files/upload-files.component.scss

@@ -101,6 +101,11 @@
     @include fs-6;
     @include fw-500;
     color: var(--fc-purple);
+
+    &.error {
+      @include fs-4;
+      color: var(--fc-red);
+    }
   }
 }
 

src/app/shared/modals/upload-files/upload-files.component.ts

@@ -2,6 +2,7 @@ import { Component, ElementRef, HostListener, OnDestroy, OnInit, ViewChild } fro
 
 import { Subscription } from 'rxjs';
 
+import { AuthService } from '@services/auth.service';
 import { FileService } from '@services/file.service';
 import { ModalService } from '@services/modal.service';
 
@@ -25,6 +26,8 @@ export class UploadFilesComponent implements OnInit, OnDestroy {
   private openModalSubscription: Subscription;
   private modalOpened = false;
   private folderId: string;
+  usedSpace: number;
+  totalSpace: number;
 
   uploading = false;
 
@@ -34,6 +37,7 @@ export class UploadFilesComponent implements OnInit, OnDestroy {
   constructor(
     private modalService: ModalService,
     private fileService: FileService,
+    private authService: AuthService
   ) { }
 
   ngOnDestroy(): void {
@@ -44,6 +48,8 @@ export class UploadFilesComponent implements OnInit, OnDestroy {
     this.openModalSubscription = this.modalService.openNewFileModal
       .subscribe(({ folderID }) => {
         this.folderId = folderID;
+        this.usedSpace = this.authService.userActive.usedSpace;
+        this.totalSpace = this.authService.userActive.totalSpace;
         this.openModal();
     });
   }
@@ -71,6 +77,7 @@ export class UploadFilesComponent implements OnInit, OnDestroy {
       return file;
     });
     this.files = [...this.files, ...files];
+    this.validateUsedSpace();
   }
 
   getIcon(file: File): string {
@@ -86,7 +93,19 @@ export class UploadFilesComponent implements OnInit, OnDestroy {
       && ALLOWED_FILE_TYPES.includes(file.type));
   }
 
+  validateUsedSpace(): boolean {
+    const totalSize = this.files.reduce((acc, file) => acc + file.size, 0);
+    return this.usedSpace + totalSize <= this.totalSpace;
+  }
+
+  get getUsedSpace(): number {
+    return this.usedSpace;
+  }
+
   uploadFiles(): void {
+    if (!this.validateUsedSpace()) {
+      return;
+    }
     if (this.validateFiles() && this.folderId) {
       this.uploading = true;
       this.fileService.createFiles(this.files, this.folderId).subscribe({

src/styles.scss

@@ -23,6 +23,7 @@
   --fc-secondary: #{$dark-grey};
   --fc-white: #{$white-grey};
   --fc-purple: #{$purple};
+  --fc-red: #{$red};
   --border-input: #{$purple};
   --input-selection: #{$purple-rgba};
   // --border-input: 1px solid #333639;