✨ add update folder name

Author: marcode24

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

@@ -16,7 +16,7 @@ const base_url = environment.base_url;
   providedIn: 'root'
 })
 export class FolderService {
-  folderCreated: EventEmitter<Folder> = new EventEmitter();
+  folderCreated: EventEmitter<{folder: Folder, isNew: boolean}> = new EventEmitter();
   folderTemp: Folder;
 
   get headers() {
@@ -35,7 +35,7 @@ export class FolderService {
     const url = `${base_url}/folder/${folderID}`;
     this.http.post<IFolderCreated>(url, { name: folderName }, this.headers).subscribe({
       next: ({ folder }) => {
-        this.folderCreated.emit(folder);
+        this.folderCreated.emit({ folder, isNew: true });
       }
     });
   }
@@ -50,4 +50,11 @@ export class FolderService {
         return true;
     }), catchError(() => of(false)));
   }
+
+  updateFolder(
+    { folderID, name, color }
+    : { folderID: string, name?: string, color?: string }): Observable<IFolderCreated> {
+    const url = `${base_url}/folder/update/${folderID}`;
+    return this.http.patch<IFolderCreated>(url, { name, color }, this.headers);
+  }
 }

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

@@ -6,6 +6,7 @@ import { EventEmitter, Injectable } from '@angular/core';
 export class ModalService {
   openNewFolderModal: EventEmitter<{ open: boolean, folderID: string }> = new EventEmitter();
   openNewFileModal: EventEmitter<{ open: boolean, folderID: string }> = new EventEmitter();
+  openUpdateNameModal: EventEmitter<{ folderID: string, name: string }> = new EventEmitter();
 
   openNewFolder(folderID: string): void {
     this.openNewFolderModal.emit({ open: true, folderID });
@@ -14,4 +15,8 @@ export class ModalService {
   openNewFile(folderID: string): void {
     this.openNewFileModal.emit({ open: true, folderID });
   }
+
+  openUpdateName(folderID: string, name: string): void {
+    this.openUpdateNameModal.emit({ folderID, name });
+  }
 }

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

@@ -31,8 +31,10 @@ export class FolderComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit(): void {
-    this.folderCreatedSubscripion = this.folderService.folderCreated.subscribe((folder) => {
-      this.folder.folders.push(folder);
+    this.folderCreatedSubscripion = this.folderService
+      .folderCreated.subscribe(({ folder, isNew }) => {
+      if (isNew) this.folder.folders.push(folder);
+      else this.folder.folders = this.folder.folders.map((f) => f._id === folder._id ? folder : f);
       this.orderFolders();
       this.mixFilesAndFolders();
     });

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

@@ -1,7 +1,7 @@
 <div class="folder" [routerLink]="['/folder', folder._id]">
-  <div class="icon" [ngStyle]="{'color': (folder.color) ? folder.color : 'var(--fc-secondary)'}">
-    <i class="bx bxs-folder"></i>
+  <div class="icon" >
+    <i class="bx bxs-folder"  [ngStyle]="{'color': (folder.color) ? folder.color : '#ff8550'}"></i>
   </div>
   <span class="name">{{ folder.name }}</span>
 </div>
-<app-dots-dropdown class="actions"></app-dots-dropdown>
+<app-dots-dropdown class="actions" [file]="folder"></app-dots-dropdown>

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

@@ -4,17 +4,17 @@
     <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 > 1 || root.files.length > 1">
+  <div class="files" *ngIf="root.folders.length > 0 || root.files.length > 0">
     <section class="group" *ngIf="root.folders.length > 0">
-      <span class="title">Folders</span>
+      <span class="title">Carpetas</span>
       <div class="items">
         <app-folder *ngFor="let folder of root.folders" class="item"
           [folder]="folder"
         ></app-folder>
       </div>
     </section>
     <section class="group" *ngIf="root.files.length > 0">
-      <span class="title">Files</span>
+      <span class="title">Archivos</span>
       <div class="items">
         <app-file *ngFor="let file of root.files" class="item"
           [file]="file"
@@ -26,3 +26,4 @@
 
 <app-new-folder></app-new-folder>
 <app-upload-files></app-upload-files>
+<app-update-name></app-update-name>

src/app/features/home/home.component.ts

@@ -30,9 +30,11 @@ export class HomeComponent implements OnInit, OnDestroy {
 
   ngOnInit(): void {
     this.root = this.authService.userActive.rootFolder;
-    this.folderCreatedSubscription = this.folderService.folderCreated.subscribe((folder) => {
-      this.root.folders.push(folder);
-      this.orderFolders();
+    this.folderCreatedSubscription = this.folderService
+      .folderCreated.subscribe(({folder, isNew}) => {
+        if (isNew) this.root.folders.push(folder);
+        else this.root.folders = this.root.folders.map((f) => f._id === folder._id ? folder : f);
+        this.orderFolders();
     });
     this.filesCreatedSubscription = this.fileService.filesCreated.subscribe((files) => {
       this.root.files.push(...files);

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

@@ -1,12 +1,12 @@
 <button class="options" (click)="changeVisibility()">
   <i class="bx bx-dots-vertical-rounded"></i>
 </button>
-<ul class='dropdown-list' role="menu" #dropdown>
-  <li role="menuitem" class='dropdown-item'>
+<ul class='dropdown-list' role="menu" #dropdown [id]="buildId()" *ngIf="file">
+  <li role="menuitem" class='dropdown-item' (click)="openRenameModal()">
     <i class="bx bx-edit-alt"></i>
     <span class="title">Cambiar nombre</span>
   </li>
-  <li role="menuitem" class='dropdown-item'>
+  <li role="menuitem" class='dropdown-item' *ngIf="!isFile()">
     <i class="bx bx-palette"></i>
     <span class="title">Cambiar color</span>
   </li>

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

@@ -1,6 +1,7 @@
 import { Component, ElementRef, Input, ViewChild } from '@angular/core';
 
 import { FileService } from '@services/file.service';
+import { ModalService } from '@services/modal.service';
 
 import { File } from '@models/file.model';
 import { Folder } from '@models/folder.model';
@@ -13,13 +14,21 @@ import { Folder } from '@models/folder.model';
 export class DotsDropdownComponent {
   @Input() file: File | Folder;
   @ViewChild('dropdown') dropdown: ElementRef;
-
+  @Input() id: string;
+  dropdowns: HTMLUListElement[] = [];
   constructor(
     private fileService: FileService,
+    private modalService: ModalService,
   ) { }
 
   changeVisibility() {
     this.dropdown.nativeElement.classList.toggle('show');
+    this.dropdowns = Array.from(document.querySelectorAll('.dropdown-list'));
+    this.dropdowns.forEach((dropdown) => {
+      if(dropdown.id !== this.buildId()) {
+        dropdown.classList.remove('show');
+      }
+    });
   }
 
   downloadFile(): void {
@@ -37,7 +46,22 @@ export class DotsDropdownComponent {
     });
   }
 
+  buildId(): string {
+    const length = this.file._id?.length as number;
+    const id = this.file._id?.substring(length - 10);
+    return id as string;
+  }
+
   hideDropdown(): void {
     this.dropdown.nativeElement.classList.remove('show');
   }
+
+  isFile(): boolean {
+    return this.file.type === 'file';
+  }
+
+  openRenameModal(): void {
+    this.hideDropdown();
+    this.modalService.openUpdateName(this.file._id as string, this.file.name);
+  }
 }

src/app/shared/headers/actions/actions.component.scss

@@ -5,6 +5,13 @@
   display: block;
 }
 
+.actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 1rem;
+}
+
 .list-items {
   position: absolute;
   margin-top: 5px;
@@ -14,6 +21,7 @@
   box-shadow: 0 3px 10px rgb(0 0 0 / 20%);
   z-index: 10;
   transition: 0.3s ease;
+  right: 1rem;
   display: none;
 
   .item {

src/app/shared/modals/modals.module.ts

@@ -5,12 +5,14 @@ import { FormsModule } from '@angular/forms';
 import { PipesModule } from '@pipes/pipes.module';
 
 import { NewFolderComponent } from './new-folder/new-folder.component';
+import { UpdateNameComponent } from './update-name/update-name.component';
 import { UploadFilesComponent } from './upload-files/upload-files.component';
 
 @NgModule({
   declarations: [
     NewFolderComponent,
-    UploadFilesComponent
+    UploadFilesComponent,
+    UpdateNameComponent
   ],
   imports: [
     CommonModule,
@@ -19,7 +21,8 @@ import { UploadFilesComponent } from './upload-files/upload-files.component';
   ],
   exports: [
     NewFolderComponent,
-    UploadFilesComponent
+    UploadFilesComponent,
+    UpdateNameComponent
   ]
 })
 export class ModalsModule { }