✨ add get specific folder

Author: marcode24

src/app/core/constants/file.constant.ts

@@ -12,6 +12,7 @@ export const ICONS = {
   jpg: 'bxs-file-jpg',
   jpeg: 'bxs-file-image',
   pdf: 'bxs-file-pdf',
+  docx: 'bxs-file',
 } as const;
 
 export const ALLOWED_FILE_EXTENSIONS = [

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

@@ -12,5 +12,6 @@ export class File {
   createdAt: Date;
   updatedAt: Date;
   folder: Folder;
+  type: string;
   _id?: string;
 }

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

@@ -11,6 +11,7 @@ export class Folder {
   createdAt: Date;
   updatedAt: Date;
   parent: Folder;
+  type: string;
   folders: Folder[];
   files: File[];
   color: string;

src/app/features/folder/components/components.module.ts

@@ -1,14 +1,17 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
+import { PipesModule } from '@pipes/pipes.module';
+
 import { TableFilesComponent } from './table-files/table-files.component';
 
 @NgModule({
   declarations: [
     TableFilesComponent
   ],
   imports: [
-    CommonModule
+    CommonModule,
+    PipesModule
   ],
   exports: [
     TableFilesComponent,

src/app/features/folder/components/table-files/table-files.component.html

@@ -1,16 +1,16 @@
 <div class="items">
   <div class="item">
     <div class="icon">
-      <i class="bx bx-file"></i>
+      <i class="bx" [ngClass]="getIcon"></i>
     </div>
     <div class="name">
-      <span>Ejemplo de dock</span>
+      <span>{{ file.name }}</span>
     </div>
     <div class="type">
-      <span>mp4</span>
+      <span>{{ getExtension() }}</span>
     </div>
     <div class="size">
-      <span>7 mb</span>
+      <span>{{ file.size | fileSize }}</span>
     </div>
     <div class="actions">
       ...

src/app/features/folder/components/table-files/table-files.component.scss

@@ -1,59 +1,52 @@
 @import 'settings/_colors.scss';
 @import 'settings/_typography.scss';
 
-.items {
+.item {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  align-items: center;
+  height: 3.2rem;
+  padding: 0 0.5rem;
+  gap: 1rem;
+  border-radius: 1rem;
+  transition: 0.3s ease;
+  cursor: pointer;
+
+  &:hover {
+    background: var(--bg-hover-2);
+  }
 
-  & .item {
+  & .icon {
+    @include fs-2;
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
     display: flex;
-    flex-direction: row;
     align-items: center;
-    height: 3.2rem;
-    padding: 0 0.5rem;
-    gap: 1rem;
-    border-radius: 1rem;
-    transition: 0.3s ease;
-    cursor: pointer;
-
-    &:hover {
-      background: var(--bg-hover-2);
-    }
-
-    & .icon {
-      @include fs-3;
-      width: 2.5rem;
-      height: 2.5rem;
-      border-radius: 50%;
-      background: var(--bg-2);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
+    justify-content: center;
+  }
 
-    & .name, & .type, & .size {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
+  & .name, & .type, & .size {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 
-    & .name {
-      @include fs-5;
-      @include fw-400;
-      flex: 2;
-      color: var(--fc-primary);
-    }
+  & .name {
+    @include fs-5;
+    @include fw-400;
+    flex: 2;
+    color: var(--fc-primary);
+  }
 
-    & .type, & .size {
-      @include fs-6;
-      flex: 1;
-      color: var(--fc-secondary);
-      text-align: center;
-    }
+  & .type, & .size {
+    @include fs-6;
+    flex: 1;
+    color: var(--fc-secondary);
+  }
 
-    & .actions {
-      flex: 1;
-      text-align: center;
-    }
+  & .actions {
+    flex: 1;
+    text-align: center;
   }
 }

src/app/features/folder/components/table-files/table-files.component.ts

@@ -1,8 +1,26 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
+
+import { File } from '@models/file.model';
+import { Folder } from '@models/folder.model';
+
+import { ICONS } from '@constants/file.constant';
 
 @Component({
   selector: 'app-table-files',
   templateUrl: './table-files.component.html',
   styleUrls: ['./table-files.component.scss']
 })
-export class TableFilesComponent {}
+export class TableFilesComponent {
+  @Input() file: File | Folder;
+
+  get getIcon(): string {
+    if (this.file.type === 'folder') return 'bxs-folder';
+    const extension = this.file.name.split('.').pop();
+    return ICONS[extension as keyof typeof ICONS] || 'bx-file';
+  }
+
+  getExtension(): string {
+    if (this.file.type === 'folder') return 'folder';
+    return this.file.name.split('.').pop() as string;
+  }
+}

src/app/features/folder/folder.component.html

@@ -1,11 +1,20 @@
-<div class="fluid-container">
+<div class="fluid-container" *ngIf="!loading">
   <app-actions [folder]="folder"></app-actions>
-  <div class="files">
+  <div class="not-items" *ngIf="!allFiles.length && !allFiles.length">
+    <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="allFiles.length && allFiles.length">
     <section class="group">
       <span class="title">Files</span>
-      <app-table-files></app-table-files>
+      <div class="items">
+        <app-table-files *ngFor="let file of allFiles"
+          [file]="file"
+        ></app-table-files>
+      </div>
     </section>
   </div>
 </div>
 
 <app-new-folder></app-new-folder>
+<app-upload-files></app-upload-files>

src/app/features/folder/folder.component.scss

@@ -0,0 +1,5 @@
+
+.items {
+  display: flex;
+  flex-direction: column;
+}

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

@@ -1,10 +1,12 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 
 import { Subscription } from 'rxjs';
 
+import { FileService } from '@services/file.service';
 import { FolderService } from '@services/folder.service';
 
+import { File } from '@models/file.model';
 import { Folder } from '@models/folder.model';
 
 import { isMongoId } from '@utils/mongo.util';
@@ -13,19 +15,34 @@ import { isMongoId } from '@utils/mongo.util';
   templateUrl: './folder.component.html',
   styleUrls: ['./folder.component.scss']
 })
-export class FolderComponent implements OnInit {
+export class FolderComponent implements OnInit, OnDestroy {
   folder: Folder;
   folderCreatedSubscripion: Subscription;
+  filesUploadedSubscription: Subscription;
+  loading = false;
+  allFiles: (Folder | File)[];
+
   constructor(
     private activatedRoute: ActivatedRoute,
     private router: Router,
-    private folderService: FolderService
+    private folderService: FolderService,
+    private fileService: FileService,
   ) { }
 
+  ngOnDestroy(): void {
+    this.folderCreatedSubscripion.unsubscribe();
+    this.filesUploadedSubscription.unsubscribe();
+  }
+
   ngOnInit(): void {
     this.folderCreatedSubscripion = this.folderService.folderCreated.subscribe((folder) => {
       this.folder.folders.push(folder);
       this.orderFolders();
+      this.mixFilesAndFolders();
+    });
+    this.filesUploadedSubscription = this.fileService.filesCreated.subscribe((files: File[]) => {
+      this.folder.files.push(...files);
+      this.mixFilesAndFolders();
     });
     this.activatedRoute.params.subscribe(({folderId}) => {
       if(!isMongoId(folderId)) return this.router.navigate(['/']);
@@ -34,15 +51,23 @@ export class FolderComponent implements OnInit {
   }
 
   getFolder(id: string): void {
+    this.loading = true;
     this.folderService.getFolder(id).subscribe({
       next: (folder) => {
         this.folder = folder;
-      }
+        this.mixFilesAndFolders();
+      },
+      complete: () => this.loading = false
     });
   }
 
   private orderFolders(): void {
     this.folder.folders.sort((a, b) => a.name > b.name ? 1 : -1);
   }
 
+  mixFilesAndFolders(): void {
+    const { folders, files } = this.folder;
+    this.allFiles = [...folders, ...files];
+  }
+
 }