implemented search function

master
Max 5 years ago
parent 555722b66e
commit 93b99003a0

@ -52,6 +52,7 @@ import { LayoutModule } from '@angular/cdk/layout';
import { MatButtonModule } from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
import { MatListModule } from '@angular/material/list'; import { MatListModule } from '@angular/material/list';
import {MatSortModule} from '@angular/material/sort'; import {MatSortModule} from '@angular/material/sort';
import { SearchComponent } from './components/search/search.component';
const config: SocketIoConfig = { url: 'http://localhost:4444', options: {} }; const config: SocketIoConfig = { url: 'http://localhost:4444', options: {} };
@ -86,7 +87,8 @@ const appRoutes: Routes = [
ImprintComponent, ImprintComponent,
AboutComponent, AboutComponent,
ProfileComponent, ProfileComponent,
MainNavigationComponent MainNavigationComponent,
SearchComponent
], ],
imports: [ imports: [
BrowserModule, BrowserModule,

@ -30,6 +30,12 @@
</ng-template> </ng-template>
<home-social class="tab-content"></home-social> <home-social class="tab-content"></home-social>
</mat-tab> </mat-tab>
<mat-tab >
<ng-template mat-tab-label>
<mat-icon>search</mat-icon>
</ng-template>
<home-search class="tab-content"></home-search>
</mat-tab>
</mat-tab-group> </mat-tab-group>
</div> </div>

@ -0,0 +1,41 @@
<div id="search">
<!--<mat-toolbar><span>Search</span></mat-toolbar>-->
<mat-card >
<mat-card-content>
<mat-form-field id="input">
<textarea matInput #searchWord type="search" mat-autosize="false" matAutosizeMaxRows="1" placeholder="search something"
[ngModel]="searchWord"
(ngModelChange)="search(searchWord.value)"></textarea>
<button mat-button matSuffix mat-icon-button>
<mat-icon>search </mat-icon>
</button>
</mat-form-field>
<mat-form-field id="category-chooser">
<mat-label>category</mat-label>
<mat-select value="username" #field (selectionChange)="changeCategory($event.value)">
<mat-option value="username">username</mat-option>
<mat-option value="handle">handle</mat-option>
<mat-option value="groupname" disabled>groupname</mat-option>
<mat-option value="grouphandle" disabled>grouphandle</mat-option>
</mat-select>
</mat-form-field>
</mat-card-content>
</mat-card>
<div id="friendlist">
<!--<div class="frienditem" *ngFor="let friend of friends"
[class.selected]="friend === selectedFriend" (click)="showFriendProfile(friend)">
<div class="picture">Pic</div>
<div class="name"><span>{{friend.name}}</span></div>
</div>-->
<mat-card class="friend-card" *ngFor="let user of foundUsers"
[class.selected]="user === selectedUser" (click)="showUserProfile(user)"
tabindex="0"
matRipple>
<mat-card-header>
<div mat-card-avatar class="profile-picture"></div>
<mat-card-title>{{user.username}}</mat-card-title>
<mat-card-subtitle>{{user.handle}}</mat-card-subtitle>
</mat-card-header>
</mat-card>
</div>
</div>

@ -0,0 +1,29 @@
#search
width: 100%
height: 100%
#input
min-width: 60%
padding-left: 0.5em
padding-right: 0.5em
#category-chooser
padding-left: 0.5em
padding-right: 0.5em
#friendlist
padding: 0.5em
.friend-card
box-sizing: border-box
width: 100%
margin-top: 0.5em
cursor: pointer
.mat-card-subtitle
margin: 0
.profile-picture
background-image: url(https://material.angular.io/assets/img/examples/shiba1.jpg)
background-size: cover

@ -0,0 +1,24 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { SearchComponent } from './search.component';
describe('ChatComponent', () => {
let component: SearchComponent;
let fixture: ComponentFixture<SearchComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ SearchComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(SearchComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

@ -0,0 +1,62 @@
import { Component, OnInit} from '@angular/core';
import { SearchService } from 'src/app/services/search/search.service';
import {Headers, Http} from '@angular/http';
import { User } from 'src/app/models/user';
import {environment} from 'src/environments/environment';
import { Router } from '@angular/router';
@Component({
selector: 'home-search',
templateUrl: './search.component.html',
styleUrls: ['./search.component.sass']
})
export class SearchComponent implements OnInit {
searchValue: string;
category = 'username';
foundUsers: Array<User>;
constructor(private searchService: SearchService, private http: Http, private router: Router) { }
ngOnInit() {
}
changeCategory(value: string) {
this.category = value;
this.search(this.searchValue);
}
search(searchWord: string) {
this.foundUsers = Array<User>();
this.searchValue = searchWord;
if (searchWord) {
if (this.category === 'username') {
this.findUserByName(searchWord);
} else if (this.category === 'handle') {
this.findUserByHandle(searchWord);
}
}
}
findUserByName(name: String) {
const headers = new Headers();
headers.set('Content-Type', 'application/json');
this.http.post(environment.graphQLUrl, this.searchService.buildJsonName(name))
.subscribe(response => {
this.foundUsers = this.searchService.renderUsers(response.json());
});
}
findUserByHandle(name: String) {
const headers = new Headers();
headers.set('Content-Type', 'application/json');
this.http.post(environment.graphQLUrl, this.searchService.buildJsonHandle(name))
.subscribe(response => {
this.foundUsers = this.searchService.renderUsers(response.json());
});
}
public showUserProfile(user: User) {
console.log(user);
this.router.navigate(['profile/' + user.userID]);
}
}

@ -1,2 +1,17 @@
<social-friends id="friendscontainer"></social-friends> <mat-tab-group id="tab-group" selectedIndex="0" mat-stretch-tabs>
<social-groups id="groupscontainer"></social-groups> <mat-tab>
<ng-template mat-tab-label>
<mat-icon>people</mat-icon>
</ng-template>
<social-friends id="friendscontainer"></social-friends>
<social-groups id="groupscontainer"></social-groups>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon>search</mat-icon>
</ng-template>
<home-search class="tab-content"></home-search>
</mat-tab>
</mat-tab-group>

@ -6,6 +6,7 @@ export class User {
email: string; email: string;
points: number; points: number;
level: number; level: number;
profilePicture: string;
friendIDs: number[]; friendIDs: number[];
groupIDs: number[]; groupIDs: number[];

@ -0,0 +1,12 @@
import { TestBed } from '@angular/core/testing';
import { SearchService } from './search.service';
describe('SearchService', () => {
beforeEach(() => TestBed.configureTestingModule({}));
it('should be created', () => {
const service: SearchService = TestBed.get(SearchService);
expect(service).toBeTruthy();
});
});

@ -0,0 +1,101 @@
import {Injectable} from '@angular/core';
import {Headers, Http} from '@angular/http';
import {DatasharingService} from '../datasharing.service';
import {Router} from '@angular/router';
import {environment} from 'src/environments/environment';
import { User } from 'src/app/models/user';
@Injectable({
providedIn: 'root'
})
export class SearchService {
users: Array<User>;
constructor(private http: Http, private data: DatasharingService, private router: Router) {
}
public findUserByName(name: String): Array<User> {
const headers = new Headers();
headers.set('Content-Type', 'application/json');
this.http.post(environment.graphQLUrl, this.buildJsonName(name))
.subscribe(response => {
this.users = this.renderUsers(response.json());
});
return this.users;
}
public findUserByHandle(handle: string) {
const headers = new Headers();
headers.set('Content-Type', 'application/json');
return this.http.post(environment.graphQLUrl, this.buildJsonHandle(handle))
.subscribe(response => {
console.log(response.text());
}
);
}
public renderUsers(pResponse: any): Array<User> {
const users = new Array<User>();
if (pResponse.data.findUser === 'null') {
console.log('no user found');
return null;
} else {
for (const user of pResponse.data.findUser) {
const pUser = new User();
pUser.profilePicture = user.profilePicture;
pUser.username = user.name;
pUser.userID = user.id;
pUser.handle = user.handle;
pUser.points = user.points;
pUser.level = user.level;
pUser.friendIDs = user.friends;
users.push(pUser);
}
return users;
}
}
public buildJsonName(name_: String): any {
const body = {
query: `query($name: String) {
findUser(name: $name, first: 100, offset: 0) {
profilePicture,
name,
id,
handle,
points,
level,
friends {
id
}
}
}`
, variables: {
name: name_
}
};
return body;
}
public buildJsonHandle(handle_: String): any {
const body = {
query: `query($handle: String) {
findUser(handle: $handle, first: 100, offset: 0) {
profilePicture,
name,
id,
handle,
points,
level,
friends {
id
}
}
}`
, variables: {
handle: handle_
}
};
return body;
}
}
Loading…
Cancel
Save