✨ add search files

Author: marcode24

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

@@ -5,8 +5,15 @@
     </div>
     <div class="search" #inputSearch>
       <div class="input-group">
-        <input type="text" class="icon" #txtSearch
-          placeholder="Search..." (focus)="focusInputSearch()" (blur)="focusInputSearch()">
+        <input
+          type="text"
+          class="icon"
+          placeholder="Search..."
+          #txtSearch
+          (focus)="focusInputSearch()"
+          (blur)="focusInputSearch()"
+          (keyup.enter)="goToSearch(txtSearch.value)"
+          [value]="currentValueSearch">
         <i class="bx bx-search"></i>
       </div>
     </div>

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

@@ -1,4 +1,5 @@
-import { Component, ElementRef, ViewChild } from '@angular/core';
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
 
 import { AuthService } from '@services/auth.service';
 
@@ -7,15 +8,22 @@ import { AuthService } from '@services/auth.service';
   templateUrl: './header.component.html',
   styleUrls: ['./header.component.scss']
 })
-export class HeaderComponent {
+export class HeaderComponent implements OnInit {
   @ViewChild('dropdownUser') dropdownUser: ElementRef;
   @ViewChild('inputSearch') inputSearch: ElementRef;
   userActive = this.authService.userActive;
+  currentValueSearch = '';
 
   constructor(
-    private authService: AuthService
+    private authService: AuthService,
+    private router: Router,
+    private activatedRoute: ActivatedRoute,
   ) { }
 
+  ngOnInit(): void {
+    this.activatedRoute.queryParams.subscribe(({ q }) => this.currentValueSearch = q || '');
+  }
+
   changeVisibilitySidebar(): void {
     const sidebarElement = document.querySelector('.sidebar') as HTMLElement;
     sidebarElement.classList.toggle('closed');
@@ -34,4 +42,9 @@ export class HeaderComponent {
   focusInputSearch(): void {
     this.inputSearch.nativeElement.classList.toggle('focus');
   }
+
+  goToSearch(query: string): void {
+    if (query) this.router.navigate(['/search'], { queryParams: { q: query } });
+  }
+
 }

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

@@ -15,4 +15,5 @@ export class File {
   type: string;
   _id?: string;
   color?: string;
+  path?: Folder[];
 }

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

@@ -17,4 +17,5 @@ export class Folder {
   color: string;
   _id?: string;
   __v?: number;
+  path?: Folder[];
 }

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

@@ -58,4 +58,9 @@ export class FileService {
     }));
   }
 
+  searchFiles(query: string): Observable<IFileResponse> {
+    const url = `${base_url}/file/search?q=${query}`;
+    return this.http.get<IFileResponse>(url, this.headers);
+  }
+
 }

src/app/features/features.module.ts

@@ -7,6 +7,7 @@ import { ComponentsModule } from '@components/components.module';
 import { FeaturesComponent } from './features.component';
 import { FolderModule } from './folder/folder.module';
 import { HomeModule } from './home/home.module';
+import { SearchModule } from './search/search.module';
 
 @NgModule({
   declarations: [
@@ -17,7 +18,8 @@ import { HomeModule } from './home/home.module';
     RouterModule,
     ComponentsModule,
     HomeModule,
-    FolderModule
+    FolderModule,
+    SearchModule
   ]
 })
 export class FeaturesModule { }

src/app/features/features.routing.ts

@@ -19,6 +19,13 @@ const routes: Routes = [
     canActivate: [AuthGuard],
     loadChildren: () => import('./folder/folder.routing')
       .then(m => m.FolderRoutingModule)
+  },
+  {
+    path: 'search',
+    component: FeaturesComponent,
+    canActivate: [AuthGuard],
+    loadChildren: () => import('./search/search.routing')
+      .then(m => m.SearchRoutingModule)
   }
 ];
 

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

@@ -7,7 +7,7 @@
   </div>
   <div class="files" *ngIf="allFiles.length && !isLoading">
     <section class="group">
-      <span class="title">Files</span>
+      <span class="title">Archivos</span>
       <div class="items">
         <app-table-files *ngFor="let file of allFiles"
           [file]="file"

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

@@ -4,8 +4,8 @@ import { NgModule } from "@angular/core";
 import { HeadersModule } from "@shared/headers/headers.module";
 import { LoadersModule } from "@shared/loaders/loaders.module";
 import { ModalsModule } from "@shared/modals/modals.module";
+import { TablesModule } from "@shared/tables/tables.module";
 
-import { ComponentsModule } from "./components/components.module";
 import { FolderComponent } from "./folder.component";
 
 @NgModule({
@@ -16,8 +16,8 @@ import { FolderComponent } from "./folder.component";
     CommonModule,
     HeadersModule,
     ModalsModule,
-    ComponentsModule,
     LoadersModule,
+    TablesModule,
   ]
 })
 export class FolderModule {}

src/app/features/home/home.component.scss

@@ -31,7 +31,3 @@
     }
   }
 }
-
-.loader {
-  align-self: center;
-}