From fa3cdf731bd3643e3b1ebef168401c9ba0d9f9a6 Mon Sep 17 00:00:00 2001
From: Gabriel <dizco@users.noreply.github.com>
Date: Mon, 7 May 2018 05:07:14 -0400
Subject: [PATCH] feat(notfound): add NotFound page (#1672)

---
 .../miscellaneous-routing.module.ts           | 25 +++++++++++++++++++
 .../miscellaneous/miscellaneous.component.ts  | 10 ++++++++
 .../miscellaneous/miscellaneous.module.ts     | 14 +++++++++++
 .../not-found/not-found.component.html        | 15 +++++++++++
 .../not-found/not-found.component.scss        | 20 +++++++++++++++
 .../not-found/not-found.component.ts          | 17 +++++++++++++
 src/app/pages/pages-menu.ts                   | 10 ++++++++
 src/app/pages/pages-routing.module.ts         |  7 ++++++
 src/app/pages/pages.module.ts                 |  2 ++
 9 files changed, 120 insertions(+)
 create mode 100644 src/app/pages/miscellaneous/miscellaneous-routing.module.ts
 create mode 100644 src/app/pages/miscellaneous/miscellaneous.component.ts
 create mode 100644 src/app/pages/miscellaneous/miscellaneous.module.ts
 create mode 100644 src/app/pages/miscellaneous/not-found/not-found.component.html
 create mode 100644 src/app/pages/miscellaneous/not-found/not-found.component.scss
 create mode 100644 src/app/pages/miscellaneous/not-found/not-found.component.ts

diff --git a/src/app/pages/miscellaneous/miscellaneous-routing.module.ts b/src/app/pages/miscellaneous/miscellaneous-routing.module.ts
new file mode 100644
index 0000000000..f435c192b4
--- /dev/null
+++ b/src/app/pages/miscellaneous/miscellaneous-routing.module.ts
@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { MiscellaneousComponent } from './miscellaneous.component';
+import { NotFoundComponent } from './not-found/not-found.component';
+
+const routes: Routes = [{
+  path: '',
+  component: MiscellaneousComponent,
+  children: [{
+    path: '404',
+    component: NotFoundComponent,
+  }],
+}];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class MiscellaneousRoutingModule { }
+
+export const routedComponents = [
+  MiscellaneousComponent,
+  NotFoundComponent,
+];
diff --git a/src/app/pages/miscellaneous/miscellaneous.component.ts b/src/app/pages/miscellaneous/miscellaneous.component.ts
new file mode 100644
index 0000000000..d802435467
--- /dev/null
+++ b/src/app/pages/miscellaneous/miscellaneous.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-miscellaneous',
+  template: `
+    <router-outlet></router-outlet>
+  `,
+})
+export class MiscellaneousComponent {
+}
diff --git a/src/app/pages/miscellaneous/miscellaneous.module.ts b/src/app/pages/miscellaneous/miscellaneous.module.ts
new file mode 100644
index 0000000000..f9f18c4a0d
--- /dev/null
+++ b/src/app/pages/miscellaneous/miscellaneous.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { ThemeModule } from '../../@theme/theme.module';
+import { MiscellaneousRoutingModule, routedComponents } from './miscellaneous-routing.module';
+
+@NgModule({
+  imports: [
+    ThemeModule,
+    MiscellaneousRoutingModule,
+  ],
+  declarations: [
+    ...routedComponents,
+  ],
+})
+export class MiscellaneousModule { }
diff --git a/src/app/pages/miscellaneous/not-found/not-found.component.html b/src/app/pages/miscellaneous/not-found/not-found.component.html
new file mode 100644
index 0000000000..a5fc67a7fa
--- /dev/null
+++ b/src/app/pages/miscellaneous/not-found/not-found.component.html
@@ -0,0 +1,15 @@
+<div class="row">
+  <div class="col-md-12">
+    <nb-card>
+      <nb-card-body>
+        <div class="flex-centered col-xl-4 col-lg-6 col-md-8 col-sm-12">
+          <h2 class="title">404 Page Not Found</h2>
+          <small class="sub-title">The page you were looking for doesn't exist</small>
+          <button (click)="goToHome()" type="button" class="btn btn-block btn-hero-primary">
+            Take me home
+          </button>
+        </div>
+      </nb-card-body>
+    </nb-card>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/app/pages/miscellaneous/not-found/not-found.component.scss b/src/app/pages/miscellaneous/not-found/not-found.component.scss
new file mode 100644
index 0000000000..63ddef40ce
--- /dev/null
+++ b/src/app/pages/miscellaneous/not-found/not-found.component.scss
@@ -0,0 +1,20 @@
+.flex-centered {
+  margin: auto;
+}
+nb-card-body {
+  display: flex;
+}
+
+.title {
+  text-align: center;
+}
+
+.sub-title {
+  text-align: center;
+  display: block;
+  margin-bottom: 3rem;
+}
+
+.btn {
+  margin-bottom: 2rem;
+}
diff --git a/src/app/pages/miscellaneous/not-found/not-found.component.ts b/src/app/pages/miscellaneous/not-found/not-found.component.ts
new file mode 100644
index 0000000000..cdd0ceda28
--- /dev/null
+++ b/src/app/pages/miscellaneous/not-found/not-found.component.ts
@@ -0,0 +1,17 @@
+import { NbMenuService } from '@nebular/theme';
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-not-found',
+  styleUrls: ['./not-found.component.scss'],
+  templateUrl: './not-found.component.html',
+})
+export class NotFoundComponent {
+
+  constructor(private menuService: NbMenuService) {
+  }
+
+  goToHome() {
+    this.menuService.navigateHome();
+  }
+}
diff --git a/src/app/pages/pages-menu.ts b/src/app/pages/pages-menu.ts
index 044c6ea618..34bd495f27 100644
--- a/src/app/pages/pages-menu.ts
+++ b/src/app/pages/pages-menu.ts
@@ -141,6 +141,16 @@ export const MENU_ITEMS: NbMenuItem[] = [
       },
     ],
   },
+  {
+    title: 'Miscellaneous',
+    icon: 'nb-shuffle',
+    children: [
+      {
+        title: '404',
+        link: '/pages/miscellaneous/404',
+      },
+    ],
+  },
   {
     title: 'Auth',
     icon: 'nb-locked',
diff --git a/src/app/pages/pages-routing.module.ts b/src/app/pages/pages-routing.module.ts
index ff4a76a3d5..d714ecaf15 100644
--- a/src/app/pages/pages-routing.module.ts
+++ b/src/app/pages/pages-routing.module.ts
@@ -3,6 +3,7 @@ import { NgModule } from '@angular/core';
 
 import { PagesComponent } from './pages.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
+import { NotFoundComponent } from './miscellaneous/not-found/not-found.component';
 
 const routes: Routes = [{
   path: '',
@@ -31,10 +32,16 @@ const routes: Routes = [{
   }, {
     path: 'tables',
     loadChildren: './tables/tables.module#TablesModule',
+  }, {
+    path: 'miscellaneous',
+    loadChildren: './miscellaneous/miscellaneous.module#MiscellaneousModule',
   }, {
     path: '',
     redirectTo: 'dashboard',
     pathMatch: 'full',
+  }, {
+    path: '**',
+    component: NotFoundComponent,
   }],
 }];
 
diff --git a/src/app/pages/pages.module.ts b/src/app/pages/pages.module.ts
index 3492c5d247..adcae4ab5f 100644
--- a/src/app/pages/pages.module.ts
+++ b/src/app/pages/pages.module.ts
@@ -4,6 +4,7 @@ import { PagesComponent } from './pages.component';
 import { DashboardModule } from './dashboard/dashboard.module';
 import { PagesRoutingModule } from './pages-routing.module';
 import { ThemeModule } from '../@theme/theme.module';
+import { MiscellaneousModule } from './miscellaneous/miscellaneous.module';
 
 const PAGES_COMPONENTS = [
   PagesComponent,
@@ -14,6 +15,7 @@ const PAGES_COMPONENTS = [
     PagesRoutingModule,
     ThemeModule,
     DashboardModule,
+    MiscellaneousModule,
   ],
   declarations: [
     ...PAGES_COMPONENTS,