New: Knowledge base page design

src/app/main/content/pages/knowledge-base/dialogs/article/article.component.html

@@ -0,0 +1,20 @@
+<div class="dialog-content-wrapper">
+
+    <mat-toolbar matDialogTitle class="mat-accent m-0">
+        <span class="title dialog-title">{{data.article.title}}</span>
+    </mat-toolbar>
+
+    <div mat-dialog-content class="p-24 m-0" fusePerfectScrollbar>
+        <div [innerHTML]="data.article.content"></div>
+    </div>
+
+    <div mat-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="end center">
+        <button mat-button
+                (click)="dialogRef.close()"
+                class="mat-accent"
+                aria-label="Close">
+            CLOSE
+        </button>
+    </div>
+
+</div>

src/app/main/content/pages/knowledge-base/dialogs/article/article.component.scss

@@ -0,0 +1,13 @@
+.knowledgebase-article-dialog {
+
+    .mat-dialog-container {
+        padding: 0;
+        width: 720px;
+    }
+
+    .dialog-content-wrapper {
+        max-height: 85vh;
+        display: flex;
+        flex-direction: column;
+    }
+}

src/app/main/content/pages/knowledge-base/dialogs/article/article.component.ts

@@ -0,0 +1,20 @@
+import { Component, ViewEncapsulation, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+
+@Component({
+    selector     : 'fuse-knowledge-base-article',
+    templateUrl  : './article.component.html',
+    styleUrls    : ['./article.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class FuseKnowledgeBaseArticleComponent
+{
+    article: any;
+
+    constructor(
+        public dialogRef: MatDialogRef<FuseKnowledgeBaseArticleComponent>,
+        @Inject(MAT_DIALOG_DATA) public data: any
+    )
+    {
+    }
+}

src/app/main/content/pages/knowledge-base/knowledge-base.component.html

@@ -0,0 +1,40 @@
+<div id="knowledgebase" class="page-layout simple" fusePerfectScrollbar>
+
+    <!-- HEADER -->
+    <div class="header mat-accent-bg p-16 p-sm-24" fxLayout="column" fxLayoutAlign="center center">
+
+        <div class="hero-text mb-32">
+            <h1>How can we help?</h1>
+            <h3>Welcome to our knowledge base</h3>
+        </div>
+
+    </div>
+    <!-- / HEADER -->
+
+    <!-- CONTENT -->
+    <div class="content p-24">
+
+        <div fxLayout="row" fxLayoutAlign="center" fxLayoutWrap>
+
+            <mat-nav-list class="articles-list mat-white-bg mat-elevation-z4" *ngFor="let category of knowledgeBase">
+
+                <h3 mat-subheader>{{category.title}}</h3>
+
+                <a mat-list-item *ngFor="let article of category.featuredArticles"
+                   (click)="readArticle(article)">
+                    <mat-icon class="mr-8">note</mat-icon>
+                    {{ article.title }}
+                </a>
+
+                <a mat-list-item class="see-all-link accent-fg" [routerLink]="category.path">
+                    See all articles ({{category.articlesCount}})
+                </a>
+
+            </mat-nav-list>
+
+        </div>
+
+    </div>
+    <!-- / CONTENT -->
+
+</div>

src/app/main/content/pages/knowledge-base/knowledge-base.component.scss

@@ -0,0 +1,77 @@
+@import "../../../../core/scss/fuse";
+
+#knowledgebase {
+
+    .header {
+        flex: 1 0 auto;
+        height: 280px;
+        max-height: 280px;
+        background: #1A237E;
+        background: linear-gradient(to right, #0E2A3B 0%, #34306B 100%);
+
+        @include media-breakpoint('xs') {
+            height: 240px;
+            padding: 16px;
+        }
+
+        .hero-text {
+
+            h1 {
+                color: white;
+                font-size: 48px;
+                font-weight: 300;
+                letter-spacing: 0.01em;
+                text-align: center;
+                margin-top: 0;
+                margin-bottom: 16px;
+
+                @include media-breakpoint-down('xs') {
+                    font-size: 24px;
+                }
+            }
+
+            h3 {
+                color: rgba(255, 255, 255, 0.75);
+                max-width: 480px;
+                text-align: center;
+                font-weight: 300;
+                letter-spacing: 0.03em;
+                margin: 0;
+
+                @include media-breakpoint-down('xs') {
+                    font-size: 14px;
+                }
+            }
+        }
+    }
+
+    .content {
+        max-width: 960px;
+        width: 100%;
+        margin: 0 auto;
+
+        .articles-list {
+            width: 400px;
+            min-width: 400px;
+            margin: 16px;
+            padding: 16px;
+
+            @include media-breakpoint-down('xs') {
+                min-width: 300px;
+                margin: 16px 0;
+            }
+
+            .mat-list-item {
+                text-decoration: none !important;
+
+                .mat-list-item-content {
+
+                }
+            }
+
+            .see-all-link {
+                font-size: 14px;
+            }
+        }
+    }
+}

src/app/main/content/pages/knowledge-base/knowledge-base.component.ts

@@ -0,0 +1,47 @@
+import { Component, OnInit, OnDestroy, ViewEncapsulation} from '@angular/core';
+import { Subscription } from 'rxjs/Subscription';
+import { KnowledgeBaseService } from './knowledge-base.service';
+import { MatDialog } from '@angular/material';
+import { FuseKnowledgeBaseArticleComponent } from './dialogs/article/article.component';
+
+@Component({
+    selector     : 'fuse-knowledge-base',
+    templateUrl  : './knowledge-base.component.html',
+    styleUrls    : ['./knowledge-base.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class FuseKnowledgeBaseComponent implements OnInit, OnDestroy
+{
+    knowledgeBase: any;
+    onKnowledgeBaseChanged: Subscription;
+
+    constructor(
+        private knowledgeBaseService: KnowledgeBaseService,
+        private matDialog: MatDialog
+    )
+    {
+
+    }
+
+    ngOnInit()
+    {
+        this.onKnowledgeBaseChanged =
+            this.knowledgeBaseService.onKnowledgeBaseChanged
+                .subscribe(response => {
+                    this.knowledgeBase = response;
+                });
+    }
+
+    ngOnDestroy()
+    {
+        this.onKnowledgeBaseChanged.unsubscribe();
+    }
+
+    readArticle(article)
+    {
+        this.matDialog.open(FuseKnowledgeBaseArticleComponent, {
+            panelClass: 'knowledgebase-article-dialog',
+            data : {article: article}
+        });
+    }
+}

src/app/main/content/pages/knowledge-base/knowledge-base.module.ts

@@ -0,0 +1,36 @@
+import { NgModule } from '@angular/core';
+import { SharedModule } from '../../../../core/modules/shared.module';
+import { RouterModule } from '@angular/router';
+import { KnowledgeBaseService } from './knowledge-base.service';
+import { FuseKnowledgeBaseComponent } from './knowledge-base.component';
+import { FuseKnowledgeBaseArticleComponent } from './dialogs/article/article.component';
+
+const routes = [
+    {
+        path     : 'pages/knowledge-base',
+        component: FuseKnowledgeBaseComponent,
+        resolve  : {
+            knowledgeBase: KnowledgeBaseService
+        }
+    }
+];
+
+@NgModule({
+    declarations   : [
+        FuseKnowledgeBaseComponent,
+        FuseKnowledgeBaseArticleComponent
+    ],
+    imports        : [
+        SharedModule,
+        RouterModule.forChild(routes)
+    ],
+    providers      : [
+        KnowledgeBaseService
+    ],
+    entryComponents: [
+        FuseKnowledgeBaseArticleComponent
+    ]
+})
+export class FuseKnowledgeBaseModule
+{
+}

src/app/main/content/pages/knowledge-base/knowledge-base.service.ts

@@ -0,0 +1,52 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
+import { Observable } from 'rxjs/Observable';
+import { HttpClient } from '@angular/common/http';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+
+@Injectable()
+export class KnowledgeBaseService implements Resolve<any>
+{
+    knowledgeBase: any;
+    onKnowledgeBaseChanged: BehaviorSubject<any> = new BehaviorSubject({});
+
+    constructor(private http: HttpClient)
+    {
+    }
+
+    /**
+     * Resolve
+     * @param {ActivatedRouteSnapshot} route
+     * @param {RouterStateSnapshot} state
+     * @returns {Observable<any> | Promise<any> | any}
+     */
+    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> | Promise<any> | any
+    {
+        return new Promise((resolve, reject) => {
+            Promise.all([
+                this.getKnowledgeBase()
+            ]).then(
+                () => {
+                    resolve();
+                },
+                reject
+            );
+        });
+    }
+
+    /**
+     * Get knowledge base
+     */
+    getKnowledgeBase(): Promise<any[]>
+    {
+        return new Promise((resolve, reject) => {
+
+            this.http.get('api/knowledge-base')
+                .subscribe((response: any) => {
+                    this.knowledgeBase = response;
+                    this.onKnowledgeBaseChanged.next(this.knowledgeBase);
+                    resolve(this.knowledgeBase);
+                }, reject);
+        });
+    }
+}

src/app/main/content/pages/pages.module.ts

@@ -20,6 +20,7 @@ import { PricingModule } from './pricing/pricing.module';
 import { ProfileModule } from './profile/profile.module';
 import { SearchModule } from './search/search.module';
 import { FaqModule } from './faq/faq.module';
+import { FuseKnowledgeBaseModule } from './knowledge-base/knowledge-base.module';
 
 @NgModule({
     imports: [
@@ -59,7 +60,10 @@ import { FaqModule } from './faq/faq.module';
         SearchModule,
 
         // Faq
-        FaqModule
+        FaqModule,
+
+        // Knowledge base
+        FuseKnowledgeBaseModule
     ]
 })
 export class PagesModule

src/app/navigation.model.ts

@@ -264,6 +264,12 @@ export class NavigationModel
                         'type' : 'item',
                         'icon' : 'help',
                         'url'  : '/pages/faq'
+                    },
+                    {
+                        'title': 'Knowledge Base',
+                        'type' : 'item',
+                        'icon' : 'import_contacts',
+                        'url'  : '/pages/knowledge-base'
                     }
                 ]
             },