Search and view user profile

src/_services/users.ts

@@ -43,4 +43,11 @@ export class UsersService {
             })
     }
 
+    getAll() : Observable<User[]> {
+        return this.http.get<User[]>(this.url, this.httpOptions)
+            .map(users => {
+                return users;
+            });
+    }
+
 }

src/app/app.module.ts

@@ -26,6 +26,7 @@ import { AuthService } from '../_services/auth';
 import { MatchesService } from '../_services/matches';
 import { EventsService } from '../_services/events';
 import { UsersService } from '../_services/users';
+import { SearchedProfilePage } from '../pages/searched-profile/searched-profile';
 
 @NgModule({
   declarations: [
@@ -38,6 +39,7 @@ import { UsersService } from '../_services/users';
     AllEventsTab,
     MyEventsTab,
     SearchPage,
+    SearchedProfilePage,
     SignInPage,
     SignUpPage,
     HomePage
@@ -59,6 +61,7 @@ import { UsersService } from '../_services/users';
     AllEventsTab,
     MyEventsTab,
     SearchPage,
+    SearchedProfilePage,
     SignInPage,
     SignUpPage,
     HomePage

src/components/profile-pic-generator/profile-pic-generator.html

@@ -1,3 +1,3 @@
 <div class="placeholder" [style.background]="color">
-  <span class="placeholder-text">{{word.charAt(0)}}</span>
+  <span class="placeholder-text">{{word.charAt(0).toUpperCase()}}</span>
 </div>

src/pages/search/search.html

@@ -7,5 +7,21 @@
   </ion-navbar>
 </ion-header>
 
-<ion-content padding>
+<ion-content padding padding id="SEARCH_PAGE">
+  <ion-searchbar placeholder="Digite o username" [(ngModel)]="usernameSearch" [showCancelButton]="shouldShowCancel" (keyup)="searchUser(usernameSearch)">
+  </ion-searchbar>
+
+  <ion-list no-lines>
+    <div *ngIf="usernameSearch !== '' ">
+      <button ion-item detail-none *ngFor="let user of filteredUsers" (click)="showPageUser(user._id)">
+        <ion-avatar item-start>
+          <profile-pic-generator word="{{user.username}}" color="#4A90E2"></profile-pic-generator>
+        </ion-avatar>
+        @{{user.username}}
+      </button>
+    </div>
+    <ion-item no-lines *ngIf="usernameSearch !== '' && usernameSearch !== undefined && anyResult === false ">
+      Usuário não encontrado
+    </ion-item>
+  </ion-list>
 </ion-content>

src/pages/search/search.scss

@@ -1 +1,10 @@
-
+#SEARCH_PAGE{
+    .placeholder {
+        height: 33px;
+        width: 33px;
+    }
+
+    .placeholder-text {
+        font-size: 15px;  
+    }
+}

src/pages/search/search.ts

@@ -1,14 +1,66 @@
-import { Component } from '@angular/core';
-import { NavController } from 'ionic-angular';
+import { Component, OnInit } from '@angular/core';
+import { NavController, LoadingController } from 'ionic-angular';
+import { User } from '../../_models/user';
+import { UsersService } from '../../_services/users';
+import { EventsService } from '../../_services/events';
+import { ProfilePage } from '../profile/profile';
+import { SearchedProfilePage } from '../searched-profile/searched-profile';
 
 @Component({
   selector: 'page-search',
   templateUrl: 'search.html'
 })
-export class SearchPage {
+export class SearchPage implements OnInit{
 
-  constructor(public navCtrl: NavController) {
+  async ngOnInit() {
+    await this.fetchUsers();
+  }
+  constructor(public navCtrl: NavController, private userService: UsersService, private loadingController: LoadingController) {
+  }
+
+  private users:User[] = [];
+  public filteredUsers:User[] = [];
+  public anyResult:boolean;
+
+  loading = this.loadingController.create({
+    content: 'Buscando usuário...',
+    spinner: 'bubbles'
+  });
+
+  showPageUser(id: string) {
+    localStorage.setItem('searchedUser', JSON.stringify(id));
+    this.navCtrl.push(SearchedProfilePage);
+  }
 
+  searchUser(input:string){
+    this.filteredUsers = [];
+    this.anyResult = false;
+
+    this.users.forEach(user => {
+      if(user.username.toLowerCase().includes(input.toLowerCase())) {
+        this.filteredUsers.push(user);
+        this.anyResult = true;
+      }
+    });
   }
 
+  fetchUsers() {
+    this.loading.present();
+
+    this.userService.getAll().subscribe(
+      users => {
+        this.resetFields();
+        this.users = users;
+        this.loading.dismiss();
+      },
+      error => {
+        this.loading.dismiss();
+        console.log(error)
+      }
+    );
+  }
+
+  private resetFields(){
+    this.users = [];
+  }
 }

src/pages/searched-profile/searched-profile.html

@@ -0,0 +1,67 @@
+<!--
+  Generated template for the SearchedProfilePage page.
+
+  See http://ionicframework.com/docs/components/#navigation for more info on
+  Ionic pages and navigation.
+-->
+<ion-header>
+
+  <ion-navbar>
+    <ion-title>Buscar</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
+
+<ion-content padding class="pg-profile">
+    <!-- img -->
+    <section text-center>
+      <profile-pic-generator word="Castor" color="#4A90E2"></profile-pic-generator>
+    </section>
+
+    <!-- name / username -->
+    <p class="text-xxlarge-normal" text-center>
+      @{{userSearch.username}}
+      <br>
+      <span class="text-default-light" text-center>{{userSearch.email}}</span>
+    </p>
+
+    <!-- follow grid -->
+    <ion-grid>
+      <ion-row>
+        <ion-col class="text-default-light" text-center>
+          <span class="text-default-medium">{{userSearch.following.length}}</span>
+          <br> Seguindo
+        </ion-col>
+
+        <ion-col class="text-default-light" text-center>
+          <span class="text-default-medium">{{userSearch.followers.length}}</span>
+          <br> Seguidores
+        </ion-col>
+
+        <ion-col class="text-default-light" text-center>
+          <span class="text-default-medium">{{5}}</span>
+          <br> Reputação
+        </ion-col>
+      </ion-row>
+    </ion-grid>
+
+    <!-- teams row -->
+    <section class="favorite-teams">
+      <p class="text-default-light">Times Favoritos</p>
+      <div>
+        <img width="40" height="40" src="https://ssl.gstatic.com/onebox/media/sports/logos/-_cmntP5q_pHL7g5LfkRiw_96x96.png">
+        <img width="40" height="40" src="https://ssl.gstatic.com/onebox/media/sports/logos/Th4fAVAZeCJWRcKoLW7koA_96x96.png">
+        <img width="40" height="40" src="https://ssl.gstatic.com/onebox/media/sports/logos/7spurne-xDt2p6C0imYYNA_96x96.png">
+      </div>
+    </section>
+
+    <section class="last-match">
+
+      <span class="text-default-light">Ultima partida</span>
+      <span class="text-secondary" float-right> Ver todas </span>
+
+      <googol-card [event]="eventos[0]" action="NONE"></googol-card>
+    </section>
+
+  </ion-content>

src/pages/searched-profile/searched-profile.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from 'ionic-angular';
+import { SearchedProfilePage } from './searched-profile';
+
+@NgModule({
+  declarations: [
+    SearchedProfilePage,
+  ],
+  imports: [
+    IonicPageModule.forChild(SearchedProfilePage),
+  ],
+})
+export class SearchedProfilePageModule {}

src/pages/searched-profile/searched-profile.scss

@@ -0,0 +1,9 @@
+page-searched-profile {
+    .pg-profile{
+        .last-match{
+            padding-top: 5%;
+            padding-bottom: 5%;  
+        }
+    }
+
+}

src/pages/searched-profile/searched-profile.ts

@@ -0,0 +1,45 @@
+import { Component } from '@angular/core';
+import { IonicPage, NavController, NavParams } from 'ionic-angular';
+import { User } from '../../_models/user';
+import { UsersService } from '../../_services/users';
+import { EventsService } from '../../_services/events';
+
+/**
+ * Generated class for the SearchedProfilePage page.
+ *
+ * See https://ionicframework.com/docs/components/#navigation for more info on
+ * Ionic pages and navigation.
+ */
+
+@IonicPage()
+@Component({
+  selector: 'page-searched-profile',
+  templateUrl: 'searched-profile.html',
+})
+export class SearchedProfilePage {
+  userSearch = new User();
+  eventos = {};
+
+  constructor(public navCtrl: NavController, private userService : UsersService, private eventsService : EventsService) {
+    let id = JSON.parse(localStorage.getItem('searchedUser'));
+    this.fetchUser(id);
+    this.fetchEvents();
+  }
+
+  fetchEvents(){
+    this.eventos = this.eventsService.getAll();
+  }
+
+  fetchUser(id : string){
+    this.userService.getOne(id).subscribe(
+      data=> {
+        console.log(data)
+        this.userSearch = data;
+      },
+      err =>{
+        console.log(err);
+      }
+    ) 
+  }
+
+}