This commit is contained in:
Benedek László 2024-05-09 23:30:31 +02:00
parent ca2a763636
commit 1f7ee78d6a
11 changed files with 128 additions and 11 deletions

View File

@ -7,7 +7,9 @@ export const routes: Routes = [
{ path: 'feed', loadChildren: () => import('./feed/feed.module').then(m => m.FeedModule), canActivate: [CheckTokenCanActivate] }, { 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: '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: '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({ @NgModule({

View 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 {
}

View 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>

View File

View 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();
});
});

View 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')})
}
}

View 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 { }

View File

@ -49,4 +49,12 @@ export class UserService {
resolve(); 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)));
})
});
}
} }

View File

@ -5,11 +5,16 @@
Quack Quack
<span>
<mat-form-field> <mat-form-field>
<mat-label>Search</mat-label> <mat-label>Search</mat-label>
<input matInput type="text" #search> <input matInput type="text" #search>
<button matSuffix mat-icon-button (click)="search.value = ''"> <button *ngIf="search.value != ''" matSuffix mat-icon-button (click)="search.value = ''">
<mat-icon *ngIf="search.value != ''">close</mat-icon> <mat-icon>close</mat-icon>
</button> </button>
</mat-form-field> </mat-form-field>
<button mat-icon-button [routerLink]="'/search/'+search.value">
<mat-icon>search</mat-icon>
</button>
</span>
</mat-toolbar> </mat-toolbar>

View File

@ -3,6 +3,7 @@ mat-toolbar {
position: fixed; position: fixed;
z-index: 100; z-index: 100;
height: var(--top-menu-height); height: var(--top-menu-height);
padding-top: 10px;
overflow: hidden; overflow: hidden;
@ -10,9 +11,13 @@ mat-toolbar {
height: 100%; height: 100%;
} }
mat-form-field { span {
float: right; float: right;
} }
button {
aspect-ratio: 1;
}
box-shadow: 0px 3px 15px 0px rgba(0,0,0,0.4); box-shadow: 0px 3px 15px 0px rgba(0,0,0,0.4);
} }

View File

@ -4,11 +4,12 @@ import { MatInputModule } from '@angular/material/input';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
import { NgIf } from '@angular/common'; import { NgIf } from '@angular/common';
import { RouterModule } from '@angular/router';
@Component({ @Component({
selector: 'app-top-menu', selector: 'app-top-menu',
standalone: true, standalone: true,
imports: [MatToolbarModule, MatInputModule, MatIconModule, MatButtonModule, NgIf], imports: [MatToolbarModule, MatInputModule, MatIconModule, MatButtonModule, NgIf, RouterModule],
templateUrl: './top-menu.component.html', templateUrl: './top-menu.component.html',
styleUrl: './top-menu.component.scss' styleUrl: './top-menu.component.scss'
}) })