From 1f7ee78d6abf2c5179b6fbf057f46efcf997f24c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Benedek=20L=C3=A1szl=C3=B3?= Date: Thu, 9 May 2024 23:30:31 +0200 Subject: [PATCH] search --- src/app/app-routing.module.ts | 4 ++- src/app/search/search-routing.module.ts | 15 +++++++++++ src/app/search/search.component.html | 6 +++++ src/app/search/search.component.scss | 0 src/app/search/search.component.spec.ts | 23 ++++++++++++++++ src/app/search/search.component.ts | 27 +++++++++++++++++++ src/app/search/search.module.ts | 25 +++++++++++++++++ src/app/services/data/user.service.ts | 12 +++++++-- .../shared/top-menu/top-menu.component.html | 17 +++++++----- .../shared/top-menu/top-menu.component.scss | 7 ++++- src/app/shared/top-menu/top-menu.component.ts | 3 ++- 11 files changed, 128 insertions(+), 11 deletions(-) create mode 100644 src/app/search/search-routing.module.ts create mode 100644 src/app/search/search.component.html create mode 100644 src/app/search/search.component.scss create mode 100644 src/app/search/search.component.spec.ts create mode 100644 src/app/search/search.component.ts create mode 100644 src/app/search/search.module.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 1f70859..6372caf 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -7,7 +7,9 @@ export const routes: Routes = [ { path: 'feed', loadChildren: () => import('./feed/feed.module').then(m => m.FeedModule), canActivate: [CheckTokenCanActivate] }, { path: 'user', loadChildren: () => import('./user/user.module').then(m => m.UserModule), canActivate: [CheckTokenCanActivate] }, { path: 'new-post', loadChildren: () => import('./new-post/new-post.module').then(m => m.NewPostModule), canActivate: [CheckTokenCanActivate] }, - { path: '', redirectTo: 'feed', pathMatch: 'full' }, + { path: 'search', loadChildren: () => import('./search/search.module').then(m => m.SearchModule), canActivate: [CheckTokenCanActivate] }, + { path: '', redirectTo: 'auth/login', pathMatch: 'full' }, + { path: '**', redirectTo: 'feed', pathMatch: 'full' }, ]; @NgModule({ diff --git a/src/app/search/search-routing.module.ts b/src/app/search/search-routing.module.ts new file mode 100644 index 0000000..d7b9b51 --- /dev/null +++ b/src/app/search/search-routing.module.ts @@ -0,0 +1,15 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; +import { SearchComponent } from './search.component'; + + +const routes: Routes = [ + { path: ':query', component: SearchComponent } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class SearchRoutingModule { +} diff --git a/src/app/search/search.component.html b/src/app/search/search.component.html new file mode 100644 index 0000000..f684bd8 --- /dev/null +++ b/src/app/search/search.component.html @@ -0,0 +1,6 @@ + + +
+ +
+ \ No newline at end of file diff --git a/src/app/search/search.component.scss b/src/app/search/search.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/search/search.component.spec.ts b/src/app/search/search.component.spec.ts new file mode 100644 index 0000000..9bd92e4 --- /dev/null +++ b/src/app/search/search.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SearchComponent } from './search.component'; + +describe('SearchComponent', () => { + let component: SearchComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [SearchComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(SearchComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/search/search.component.ts b/src/app/search/search.component.ts new file mode 100644 index 0000000..c6d46da --- /dev/null +++ b/src/app/search/search.component.ts @@ -0,0 +1,27 @@ +import { Component } from '@angular/core'; +import { User } from '../../model/User'; +import { ActivatedRoute } from '@angular/router'; +import { UserService } from '../services/data/user.service'; +import { SmallUserComponent } from '../shared/views/small-user/small-user.component'; + +@Component({ + selector: 'app-search', + templateUrl: './search.component.html', + styleUrl: './search.component.scss', +}) +export class SearchComponent { + query: String | undefined; + users: Array | undefined; + + constructor(private route: ActivatedRoute, private userSvc: UserService) { + this.route.params.subscribe(params => { this.query = params['query'] }); + } + + ngOnInit(): void { + this.userSvc.searchByUsername(this.query as String) + .then(users => { + this.users = users; + }) + .catch(()=>{alert('failed to retrieve users')}) + } +} diff --git a/src/app/search/search.module.ts b/src/app/search/search.module.ts new file mode 100644 index 0000000..1230755 --- /dev/null +++ b/src/app/search/search.module.ts @@ -0,0 +1,25 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { SearchRoutingModule } from './search-routing.module'; +import { SearchComponent } from './search.component'; +import { SmallUserComponent } from '../shared/views/small-user/small-user.component'; +import { TopMenuComponent } from '../shared/top-menu/top-menu.component'; +import { SideMenuComponent } from '../shared/side-menu/side-menu.component'; +import { LargeUserComponent } from '../shared/views/large-user/large-user.component'; + + +@NgModule({ + declarations: [ + SearchComponent + ], + imports: [ + CommonModule, + SearchRoutingModule, + SmallUserComponent, + LargeUserComponent, + TopMenuComponent, + SideMenuComponent + ] +}) +export class SearchModule { } diff --git a/src/app/services/data/user.service.ts b/src/app/services/data/user.service.ts index 46e54c4..0237745 100644 --- a/src/app/services/data/user.service.ts +++ b/src/app/services/data/user.service.ts @@ -26,9 +26,9 @@ export class UserService { } getCurrentUser(): Promise { - return new Promise((resolve,reject)=>{ + return new Promise((resolve, reject) => { this.auth.getUser().subscribe(user => { - this.afs.collection('user', ref => ref.where('id', '==', user?.uid)).valueChanges().subscribe(users=>{ + this.afs.collection('user', ref => ref.where('id', '==', user?.uid)).valueChanges().subscribe(users => { if (users.length != 0) resolve(users[0]); else @@ -49,4 +49,12 @@ export class UserService { resolve(); }); } + + searchByUsername(query: String): Promise> { + return new Promise>((resolve, reject) => { + this.afs.collection('user').valueChanges().subscribe(users => { + resolve(users.filter(user => user.username.includes(query as string))); + }) + }); + } } diff --git a/src/app/shared/top-menu/top-menu.component.html b/src/app/shared/top-menu/top-menu.component.html index 6011de5..ca21118 100644 --- a/src/app/shared/top-menu/top-menu.component.html +++ b/src/app/shared/top-menu/top-menu.component.html @@ -5,11 +5,16 @@ Quack - - Search - - + + - + \ No newline at end of file diff --git a/src/app/shared/top-menu/top-menu.component.scss b/src/app/shared/top-menu/top-menu.component.scss index 8dbd025..899fa6b 100644 --- a/src/app/shared/top-menu/top-menu.component.scss +++ b/src/app/shared/top-menu/top-menu.component.scss @@ -3,6 +3,7 @@ mat-toolbar { position: fixed; z-index: 100; height: var(--top-menu-height); + padding-top: 10px; overflow: hidden; @@ -10,9 +11,13 @@ mat-toolbar { height: 100%; } - mat-form-field { + span { float: right; } + button { + aspect-ratio: 1; + } + box-shadow: 0px 3px 15px 0px rgba(0,0,0,0.4); } \ No newline at end of file diff --git a/src/app/shared/top-menu/top-menu.component.ts b/src/app/shared/top-menu/top-menu.component.ts index 62bfe75..73da7da 100644 --- a/src/app/shared/top-menu/top-menu.component.ts +++ b/src/app/shared/top-menu/top-menu.component.ts @@ -4,11 +4,12 @@ import { MatInputModule } from '@angular/material/input'; import { MatIconModule } from '@angular/material/icon'; import { MatButtonModule } from '@angular/material/button'; import { NgIf } from '@angular/common'; +import { RouterModule } from '@angular/router'; @Component({ selector: 'app-top-menu', standalone: true, - imports: [MatToolbarModule, MatInputModule, MatIconModule, MatButtonModule, NgIf], + imports: [MatToolbarModule, MatInputModule, MatIconModule, MatButtonModule, NgIf, RouterModule], templateUrl: './top-menu.component.html', styleUrl: './top-menu.component.scss' })