diff --git a/src/app/main/content/pages/knowledge-base/dialogs/article/article.component.html b/src/app/main/content/pages/knowledge-base/dialogs/article/article.component.html
new file mode 100644
index 00000000..e276fbd2
--- /dev/null
+++ b/src/app/main/content/pages/knowledge-base/dialogs/article/article.component.html
@@ -0,0 +1,20 @@
+
+
+
+ {{data.article.title}}
+
+
+
+
+
+
+
+
+
diff --git a/src/app/main/content/pages/knowledge-base/dialogs/article/article.component.scss b/src/app/main/content/pages/knowledge-base/dialogs/article/article.component.scss
new file mode 100644
index 00000000..dad7b077
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/src/app/main/content/pages/knowledge-base/dialogs/article/article.component.ts b/src/app/main/content/pages/knowledge-base/dialogs/article/article.component.ts
new file mode 100644
index 00000000..0808a977
--- /dev/null
+++ b/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,
+ @Inject(MAT_DIALOG_DATA) public data: any
+ )
+ {
+ }
+}
diff --git a/src/app/main/content/pages/knowledge-base/knowledge-base.component.html b/src/app/main/content/pages/knowledge-base/knowledge-base.component.html
new file mode 100644
index 00000000..ade919a6
--- /dev/null
+++ b/src/app/main/content/pages/knowledge-base/knowledge-base.component.html
@@ -0,0 +1,40 @@
+
diff --git a/src/app/main/content/pages/knowledge-base/knowledge-base.component.scss b/src/app/main/content/pages/knowledge-base/knowledge-base.component.scss
new file mode 100644
index 00000000..6c087583
--- /dev/null
+++ b/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;
+ }
+ }
+ }
+}
diff --git a/src/app/main/content/pages/knowledge-base/knowledge-base.component.ts b/src/app/main/content/pages/knowledge-base/knowledge-base.component.ts
new file mode 100644
index 00000000..62c9b822
--- /dev/null
+++ b/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}
+ });
+ }
+}
diff --git a/src/app/main/content/pages/knowledge-base/knowledge-base.module.ts b/src/app/main/content/pages/knowledge-base/knowledge-base.module.ts
new file mode 100644
index 00000000..a891cb47
--- /dev/null
+++ b/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
+{
+}
diff --git a/src/app/main/content/pages/knowledge-base/knowledge-base.service.ts b/src/app/main/content/pages/knowledge-base/knowledge-base.service.ts
new file mode 100644
index 00000000..845356a6
--- /dev/null
+++ b/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
+{
+ knowledgeBase: any;
+ onKnowledgeBaseChanged: BehaviorSubject = new BehaviorSubject({});
+
+ constructor(private http: HttpClient)
+ {
+ }
+
+ /**
+ * Resolve
+ * @param {ActivatedRouteSnapshot} route
+ * @param {RouterStateSnapshot} state
+ * @returns {Observable | Promise | any}
+ */
+ resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable | Promise | any
+ {
+ return new Promise((resolve, reject) => {
+ Promise.all([
+ this.getKnowledgeBase()
+ ]).then(
+ () => {
+ resolve();
+ },
+ reject
+ );
+ });
+ }
+
+ /**
+ * Get knowledge base
+ */
+ getKnowledgeBase(): Promise
+ {
+ 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);
+ });
+ }
+}
diff --git a/src/app/main/content/pages/pages.module.ts b/src/app/main/content/pages/pages.module.ts
index f22a58e9..17d17e1b 100644
--- a/src/app/main/content/pages/pages.module.ts
+++ b/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
diff --git a/src/app/navigation.model.ts b/src/app/navigation.model.ts
index 727d44e2..ca4fca3c 100644
--- a/src/app/navigation.model.ts
+++ b/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'
}
]
},