✨ add reload data when click a folder

Author: marcode24

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

@@ -1,5 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { DropdownsModule } from '@shared/dropdowns/dropdowns.module';
 
 import { PipesModule } from '@pipes/pipes.module';
 
@@ -11,7 +14,9 @@ import { TableFilesComponent } from './table-files/table-files.component';
   ],
   imports: [
     CommonModule,
-    PipesModule
+    PipesModule,
+    RouterModule,
+    DropdownsModule
   ],
   exports: [
     TableFilesComponent,

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

@@ -1,19 +1,21 @@
 <div class="items">
-  <div class="item">
-    <div class="icon">
-      <i class="bx" [ngClass]="getIcon"></i>
+  <div class="item" >
+    <div class="data" (click)="goToFolder()">
+      <div class="icon">
+        <i class="bx" [ngClass]="getIcon" [ngStyle]="{'color': (file.color) ? file.color : ''}"></i>
+      </div>
+      <div class="name">
+        <span>{{ file.name }}</span>
+      </div>
+      <div class="type">
+        <span>{{ getExtension() }}</span>
+      </div>
+      <div class="size">
+        <span>{{ file.size | fileSize }}</span>
+      </div>
     </div>
-    <div class="name">
-      <span>{{ file.name }}</span>
-    </div>
-    <div class="type">
-      <span>{{ getExtension() }}</span>
-    </div>
-    <div class="size">
-      <span>{{ file.size | fileSize }}</span>
-    </div>
-    <div class="actions">
-      ...
+    <div class="dots">
+      <app-dots-dropdown class="actions" [file]="file"></app-dots-dropdown>
     </div>
   </div>
 </div>

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

@@ -5,48 +5,68 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  height: 3.2rem;
-  padding: 0 0.5rem;
+  justify-content: space-between;
+  padding: 0.6rem 0.5rem;
   gap: 1rem;
   border-radius: 1rem;
   transition: 0.3s ease;
   cursor: pointer;
 
   &:hover {
-    background: var(--bg-hover-2);
+    background: var(--bg-hover-3);
   }
 
-  & .icon {
-    @include fs-2;
-    width: 2.5rem;
-    height: 2.5rem;
-    border-radius: 50%;
+  & .data {
     display: flex;
+    flex-direction: row;
     align-items: center;
-    justify-content: center;
-  }
+    gap: 1rem;
+    max-width: 80%;
+    flex: 1;
 
-  & .name, & .type, & .size {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
+    & .icon {
+      @include fs-2;
+      width: 2.5rem;
+      height: 2.5rem;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
 
-  & .name {
-    @include fs-5;
-    @include fw-400;
-    flex: 2;
-    color: var(--fc-primary);
-  }
+    & .name, & .type, & .size {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
 
-  & .type, & .size {
-    @include fs-6;
-    flex: 1;
-    color: var(--fc-secondary);
+    & .name {
+      @include fs-5;
+      @include fw-400;
+      flex: 2;
+      color: var(--fc-primary);
+    }
+
+    & .type, & .size {
+      @include fs-6;
+      flex: 1;
+      color: var(--fc-secondary);
+    }
   }
 
-  & .actions {
-    flex: 1;
-    text-align: center;
+
+  & .dots {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+
+    & .actions {
+      margin-right: 1rem;
+
+      .dropdown-list {
+        top: 40px;
+      }
+    }
   }
 }

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

@@ -1,4 +1,5 @@
 import { Component, Input } from '@angular/core';
+import { Router } from '@angular/router';
 
 import { File } from '@models/file.model';
 import { Folder } from '@models/folder.model';
@@ -13,6 +14,10 @@ import { ICONS } from '@constants/file.constant';
 export class TableFilesComponent {
   @Input() file: File | Folder;
 
+  constructor(
+    private router: Router
+  ) {}
+
   get getIcon(): string {
     if (this.file.type === 'folder') return 'bxs-folder';
     const extension = this.file.name.split('.').pop();
@@ -23,4 +28,10 @@ export class TableFilesComponent {
     if (this.file.type === 'folder') return 'folder';
     return this.file.name.split('.').pop() as string;
   }
+
+  goToFolder(): void {
+    if (this.file.type === 'folder') {
+      this.router.navigate(['/folder', this.file._id]);
+    }
+  }
 }

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

@@ -18,3 +18,5 @@
 
 <app-new-folder></app-new-folder>
 <app-upload-files></app-upload-files>
+<app-update-name></app-update-name>
+<app-colors></app-colors>

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

@@ -1,4 +1,5 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
 
 import { Subscription } from 'rxjs';
 
@@ -14,20 +15,23 @@ import { Folder } from '@models/folder.model';
   styleUrls: ['./folder.component.scss']
 })
 export class FolderComponent implements OnInit, OnDestroy {
+  private folderCreatedSubscripion: Subscription;
+  private filesUploadedSubscription: Subscription;
+  private routerSubscription: Subscription;
   folder: Folder;
-  folderCreatedSubscripion: Subscription;
-  filesUploadedSubscription: Subscription;
   loading = false;
   allFiles: (Folder | File)[];
 
   constructor(
     private folderService: FolderService,
     private fileService: FileService,
+    private activadedRoute: ActivatedRoute,
   ) { }
 
   ngOnDestroy(): void {
     this.folderCreatedSubscripion.unsubscribe();
     this.filesUploadedSubscription.unsubscribe();
+    this.routerSubscription.unsubscribe();
   }
 
   ngOnInit(): void {
@@ -42,7 +46,7 @@ export class FolderComponent implements OnInit, OnDestroy {
       this.folder.files.push(...files);
       this.mixFilesAndFolders();
     });
-    this.getFolder();
+    this.routerSubscription = this.activadedRoute.params.subscribe(() => this.getFolder());
   }
 
   getFolder(): void {

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

@@ -85,7 +85,6 @@ ul {
       text-overflow: ellipsis;
       overflow: hidden;
       white-space: nowrap;
-      flex: 1;
     }
 
     & i {