✨ show used space

Author: marcode24

src/app/core/components/components.module.ts

@@ -2,6 +2,8 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
+import { PipesModule } from '@pipes/pipes.module';
+
 import { HeaderComponent } from './header/header.component';
 import { SidebarComponent } from './sidebar/sidebar.component';
 
@@ -12,7 +14,8 @@ import { SidebarComponent } from './sidebar/sidebar.component';
   ],
   imports: [
     CommonModule,
-    RouterModule
+    RouterModule,
+    PipesModule
   ],
   exports: [
     SidebarComponent,

src/app/core/components/sidebar/sidebar.component.html

@@ -23,5 +23,21 @@
         <span class="name">Deleted</span>
       </a>
     </li>
+    <li class="item space">
+      <div class="used-space">
+        <span class="name">Espacio utilizado</span>
+        <div class="progress-bar">
+          <div class="progress"
+            #progress
+            [ngStyle]="{'width': getProgress() }">
+          </div>
+        </div>
+        <div class="percentage">
+          <span class="used">{{ userActive.usedSpace | fileSize }}</span>
+          <span class="slash">/</span>
+          <span class="remaining">{{ userActive.totalSpace | fileSize }}</span>
+        </div>
+      </div>
+    </li>
   </ul>
 </nav>

src/app/core/components/sidebar/sidebar.component.scss

@@ -65,3 +65,48 @@ nav {
     }
   }
 }
+
+.space {
+  margin-top: 1.5rem;
+
+  & .used-space {
+    padding: 0 0.5rem;
+    display: flex;
+    flex-direction: column;
+
+    & .name {
+      @include fs-5;
+      @include fw-500;
+      color: var(--fc-primary);
+      text-align: center;
+      margin-bottom: 0.8rem;
+    }
+
+    & .progress-bar {
+      width: 100%;
+      height: 10px;
+      border-radius: 1rem;
+      background: var(--bg-hover-2);
+      overflow: hidden;
+
+      & .progress {
+        height: 100%;
+        background: var(--fc-purple);
+        width: 0%;
+        border-radius: 1rem;
+      }
+    }
+
+    & .percentage {
+      @include fs-6;
+      @include fw-500;
+      color: var(--fc-primary);
+      margin-top: 0.5rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.2rem;
+    }
+  }
+}
+

src/app/core/components/sidebar/sidebar.component.ts

@@ -1,8 +1,35 @@
-import { Component } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+
+import { Subscription } from 'rxjs';
+
+import { AuthService } from '@services/auth.service';
+import { FileService } from '@services/file.service';
 
 @Component({
   selector: 'app-sidebar',
   templateUrl: './sidebar.component.html',
   styleUrls: ['./sidebar.component.scss']
 })
-export class SidebarComponent {}
+export class SidebarComponent implements OnDestroy, OnInit {
+  userActive = this.authService.userActive;
+  private totalSizeSubscription: Subscription;
+  constructor(
+    private authService: AuthService,
+    private fileService: FileService
+  ) { }
+  ngOnInit(): void {
+    this.totalSizeSubscription = this.fileService.updateTotalSize
+      .subscribe((totalSize) => {
+        this.userActive.usedSpace += totalSize;
+      });
+  }
+
+  ngOnDestroy(): void {
+    this.totalSizeSubscription.unsubscribe();
+  }
+
+  getProgress(): string {
+    const percentage = this.userActive.usedSpace / this.userActive.totalSpace * 100;
+    return `${percentage}%`;
+  }
+}

src/app/core/models/user.model.ts

@@ -11,5 +11,7 @@ export class User {
   createdAt: Date;
   updatedAt: Date;
   rootFolder: Folder;
+  totalSpace: number;
+  usedSpace: number;
   _id?: string;
 }

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();
+  updateTotalSize: EventEmitter<number> = new EventEmitter();
 
   get headers() {
     return {
@@ -36,6 +37,8 @@ export class FileService {
     files.forEach((file) => formData.append('file', file));
     return this.http.post<IFileResponse>(url, formData, this.headers).pipe(map(resp => {
       this.filesCreated.emit(resp.files);
+      const total = resp.files.reduce((acc, file) => acc + file.size, 0);
+      this.updateTotalSize.emit(total);
       return resp.ok;
     }));
   }