search
This commit is contained in:
parent
ca2a763636
commit
1f7ee78d6a
@ -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({
|
||||
|
15
src/app/search/search-routing.module.ts
Normal file
15
src/app/search/search-routing.module.ts
Normal file
@ -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 {
|
||||
}
|
6
src/app/search/search.component.html
Normal file
6
src/app/search/search.component.html
Normal file
@ -0,0 +1,6 @@
|
||||
<app-top-menu (side)="sideMenu.nav?.toggle()"></app-top-menu>
|
||||
<app-side-menu #sideMenu>
|
||||
<div id="main">
|
||||
<app-large-user *ngFor="let user of users" [user]="user"></app-large-user>
|
||||
</div>
|
||||
</app-side-menu>
|
0
src/app/search/search.component.scss
Normal file
0
src/app/search/search.component.scss
Normal file
23
src/app/search/search.component.spec.ts
Normal file
23
src/app/search/search.component.spec.ts
Normal file
@ -0,0 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { SearchComponent } from './search.component';
|
||||
|
||||
describe('SearchComponent', () => {
|
||||
let component: SearchComponent;
|
||||
let fixture: ComponentFixture<SearchComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [SearchComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(SearchComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
27
src/app/search/search.component.ts
Normal file
27
src/app/search/search.component.ts
Normal file
@ -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<User> | 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')})
|
||||
}
|
||||
}
|
25
src/app/search/search.module.ts
Normal file
25
src/app/search/search.module.ts
Normal file
@ -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 { }
|
@ -26,9 +26,9 @@ export class UserService {
|
||||
}
|
||||
|
||||
getCurrentUser(): Promise<User> {
|
||||
return new Promise<User>((resolve,reject)=>{
|
||||
return new Promise<User>((resolve, reject) => {
|
||||
this.auth.getUser().subscribe(user => {
|
||||
this.afs.collection<User>('user', ref => ref.where('id', '==', user?.uid)).valueChanges().subscribe(users=>{
|
||||
this.afs.collection<User>('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<Array<User>> {
|
||||
return new Promise<Array<User>>((resolve, reject) => {
|
||||
this.afs.collection<User>('user').valueChanges().subscribe(users => {
|
||||
resolve(users.filter(user => user.username.includes(query as string)));
|
||||
})
|
||||
});
|
||||
}
|
||||
}
|
||||
|
@ -5,11 +5,16 @@
|
||||
|
||||
Quack
|
||||
|
||||
<span>
|
||||
<mat-form-field>
|
||||
<mat-label>Search</mat-label>
|
||||
<input matInput type="text" #search>
|
||||
<button matSuffix mat-icon-button (click)="search.value = ''">
|
||||
<mat-icon *ngIf="search.value != ''">close</mat-icon>
|
||||
<button *ngIf="search.value != ''" matSuffix mat-icon-button (click)="search.value = ''">
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
</mat-form-field>
|
||||
<button mat-icon-button [routerLink]="'/search/'+search.value">
|
||||
<mat-icon>search</mat-icon>
|
||||
</button>
|
||||
</span>
|
||||
</mat-toolbar>
|
@ -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);
|
||||
}
|
@ -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'
|
||||
})
|
||||
|
Loading…
Reference in New Issue
Block a user