Search Ready, Add Guard(Ex), PageNoFound OK(code css)

src/app/pages/no-page-found/no-page-found.component.html

@@ -1,3 +1,10 @@
-<p>
-  no-page-found works!
-</p>
+<section id="wrapper" class="error-page">
+  <div class="error-box">
+      <div class="error-body text-center">
+          <h1>404</h1>
+          <h3 class="text-uppercase">Page Not Found !</h3>
+          <p class="text-muted m-t-30 m-b-30">YOU SEEM TO BE TRYING TO FIND HIS WAY HOME</p>
+          <a [routerLink]="['/login']" routerLinkActive="router-link-active"  class="btn btn-info btn-rounded waves-effect waves-light m-b-40">Back to Login</a> </div>
+      <footer class="footer text-center">© {{year}} Admin Pro.</footer>
+  </div>
+</section>

src/app/pages/no-page-found/no-page-found.component.ts

@@ -9,7 +9,10 @@ declare function init_plugins();
 })
 export class NoPageFoundComponent implements OnInit {
 
-  constructor() { }
+year: number = new Date().getFullYear();
+
+  constructor() {
+  }
 
   ngOnInit() {
     init_plugins();

src/app/pages/pages.module.ts

@@ -19,6 +19,7 @@ import { Graficas1Component } from './graficas1/graficas1.component';
 import { ProgressComponent } from './progress/progress.component';
 import { TableComponent } from './table/table.component';
 import { AccountSettingsComponent } from './account-settings/account-settings.component';
+import { SearchComponent } from './search/search.component';
 
 // Pipes
 import { PipesModule } from '../pipes/pipes.module';
@@ -49,7 +50,8 @@ import { UsersComponent } from './users/users.component';
         PromisesComponent,
         RxjsComponent,
         ProfileComponent,
-        UsersComponent
+        UsersComponent,
+        SearchComponent
     ],
     imports: [
         SharedModule,

src/app/pages/pages.router.ts

@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core/src/metadata/ng_module';
 import { RouterModule, Routes } from '@angular/router';
 
+// Pages
 import { PagesComponent } from './pages.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { ProgressComponent } from './progress/progress.component';
@@ -11,22 +12,32 @@ import { PromisesComponent } from './promises/promises.component';
 import { RxjsComponent } from './rxjs/rxjs.component';
 import { ProfileComponent } from './profile/profile.component';
 import { UsersComponent } from './users/users.component';
+import { SearchComponent } from './search/search.component';
+
+// Guards
+// import { AdminGuard } from '../services/service.index';
 
 const routes: Routes = [
     {
         path: '',
         component: PagesComponent,
         children: [
-            { path: 'dashboard', component: DashboardComponent, data: {title: 'Dashboard'} },
-            { path: 'progress', component: ProgressComponent, data: {title: 'Progress'} },
-            { path: 'graficas1', component: Graficas1Component, data: {title: 'Grafics'} },
-            { path: 'table', component: TableComponent, data: {title: 'Tables'} },
-            { path: 'account', component: AccountSettingsComponent, data: {title: 'Account Settings'} },
-            { path: 'promises', component: PromisesComponent, data: {title: 'Promises'} },
-            { path: 'rxjs', component: RxjsComponent, data: {title: 'RxJs'} },
-            { path: 'profile', component: ProfileComponent, data: {title: 'Profile'} },
+            { path: 'dashboard', component: DashboardComponent, data: { title: 'Dashboard' } },
+            { path: 'progress', component: ProgressComponent, data: { title: 'Progress' } },
+            { path: 'graficas1', component: Graficas1Component, data: { title: 'Grafics' } },
+            { path: 'table', component: TableComponent, data: { title: 'Tables' } },
+            {
+                path: 'account',
+                component: AccountSettingsComponent,
+                // canActivate: [AdminGuard],
+                data: { title: 'Account Settings' }
+            },
+            { path: 'promises', component: PromisesComponent, data: { title: 'Promises' } },
+            { path: 'rxjs', component: RxjsComponent, data: { title: 'RxJs' } },
+            { path: 'profile', component: ProfileComponent, data: { title: 'Profile' } },
+            { path: 'search/:term', component: SearchComponent, data: { title: 'Search' } },
             // Maintenance
-            { path: 'users', component: UsersComponent, data: {title: 'User Maintenance'} },
+            { path: 'users', component: UsersComponent, data: { title: 'User Maintenance' } },
             { path: '', pathMatch: 'full', redirectTo: 'dashboard' },
         ]
     }
@@ -38,4 +49,4 @@ const routes: Routes = [
 // })
 // export class PagesRoutingModule { }
 
- export const PagesRoutingModule = RouterModule.forChild(routes);
+export const PagesRoutingModule = RouterModule.forChild(routes);

src/app/pages/search/search.component.html

@@ -0,0 +1,3 @@
+<p>
+  search works!
+</p>

src/app/pages/search/search.component.ts

@@ -0,0 +1,37 @@
+import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { Http } from '@angular/http';
+
+@Component({
+  selector: 'app-search',
+  templateUrl: './search.component.html',
+  styles: []
+})
+export class SearchComponent implements OnInit {
+
+  http: Http;
+  term: string;
+
+  data: any;
+
+  constructor(private activatedRoute: ActivatedRoute) { }
+
+  ngOnInit() {
+    this.activatedRoute.params.subscribe((param) => {
+      this.term = param['term'];
+      console.log(this.term);
+    });
+  }
+
+  find(term: string) {
+
+    let url = `http://someAddress.com/elements`; // Example
+
+   return this.http.get(url)
+      .map((res) => {
+
+        this.data = res.json();
+    });
+  }
+
+}

src/app/pages/users/users.component.ts

@@ -173,7 +173,7 @@ export class UsersComponent implements OnInit {
           text: `Yes`,
           value: `delete`,
         }
-        cancel: `No`,
+        cancel: `No`
       },
     })
       .then((value) => {

src/app/services/guards/admin.guard.ts

@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { Observable } from 'rxjs/Observable';
+
+@Injectable()
+export class AdminGuard implements CanActivate {
+
+  // constructor(private _servicesUser: any) { }   // Ejemplo de un servicio de Usuario
+
+  canActivate() {
+
+    // if (this._servicesUser.user.role === 'ADMIN') {
+    if (true) {
+      return true;
+    }
+    else {
+      console.log('Bloqueado por el Guard');
+      // this._servicesUser.logout();
+      return false;
+    }
+  }
+}
+}

src/app/services/service.index.ts

@@ -1,3 +1,7 @@
+// Gaurds
+export { AdminGuard } from './guards/admin.guard';
+
+// Services
 export { UpLoadFileService } from './up-load-file/up-load-file.service';
 export { SettingsService } from './settings/settings.service';
 export { SharedService } from './shared/shared.service';

src/app/services/service.module.ts

@@ -1,7 +1,9 @@
 import { NgModule } from '@angular/core';
 
-// Services
-import { SettingsService, SharedService, SidebarService, UpLoadFileService } from './service.index';
+
+
+// Guards and Services
+import { SettingsService, SharedService, SidebarService, UpLoadFileService, AdminGuard } from './service.index';
 
 
 @NgModule({
@@ -12,7 +14,8 @@ import { SettingsService, SharedService, SidebarService, UpLoadFileService } fro
     SettingsService,
     SharedService,
     SidebarService,
-    UpLoadFileService
+    UpLoadFileService,
+    AdminGuard
   ]
 })
 export class ServiceModule { }

src/app/shared/header/header.component.html

@@ -58,12 +58,12 @@
           <a class="nav-link hidden-sm-down waves-effect waves-dark" href="javascript:void(0)">
             <i class="ti-search"></i>
           </a>
-          <form class="app-search">
-            <input type="text" class="form-control" placeholder="Search & enter">
+          <div class="app-search">
+            <input #inputSearch (keyup.enter)="search(inputSearch.value)" type="text" class="form-control" placeholder="Search & enter">
             <a class="srh-btn">
               <i class="ti-close"></i>
             </a>
-          </form>
+          </div>
         </li>
         <!-- ============================================================== -->
         <!-- Messages -->

src/app/shared/header/header.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { Router, rou } from '@angular/router';
 
 @Component({
   selector: 'app-header',
@@ -7,9 +8,13 @@ import { Component, OnInit } from '@angular/core';
 })
 export class HeaderComponent implements OnInit {
 
-  constructor() { }
+  constructor(private router: Router) { }
 
   ngOnInit() {
   }
 
+  search(term) {
+    this.router.navigate(['search/', term]);
+  }
+
 }

src/styles.css

@@ -12,9 +12,37 @@
 .backgroundBlack {
   background-color: rgba(0, 0, 0, 0.4);
   position: fixed;
-  top:0;
+  top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 9999;
 }
+
+/*******************
+Error Page
+******************/
+
+.error-box {
+  height: 100%;
+  position: fixed;
+  background: url(/assets/images/background/error-bg.jpg) no-repeat center center #fff;
+  width: 100%;
+}
+
+.error-box .footer {
+  width: 100%;
+  left: 0px;
+  right: 0px;
+}
+
+.error-body {
+  padding-top: 5%;
+}
+
+.error-body h1 {
+  font-size: 210px;
+  font-weight: 900;
+  text-shadow: 4px 4px 0 #ffffff, 6px 6px 0 #263238;
+  line-height: 210px;
+}