feat(faq): add faq view

Add faq view together with all dependencies, including SCSS styles for
the view and the service for API connection.

---

 scss/include/modules/_faq.scss     | 13 ++++++++++++
 scss/style.scss                    |  1 +
 src/configuration/router-config.js |  3 ++-
 src/services/faqs/faq-service.js   | 14 +++++++++++++
 src/view-models/faqs/index.js      | 20 +++++++++++++++++++
 src/views/faqs/index.html          | 33 +++++++++++++++++++++++++++++++
 6 files changed, 83 insertions(+), 1 deletion(-)

Author: MarcScheib

scss/include/modules/_faq.scss

@@ -0,0 +1,13 @@
+.faq-question {
+  font-size: 18px;
+  font-weight: 600;
+  display: block;
+}
+
+.faq-answer {
+  background: #f3f3f4;
+  border: 1px solid #e7eaec;
+  border-radius: 3px;
+  margin-top: 10px;
+  padding: 15px;
+}

scss/style.scss

@@ -14,5 +14,6 @@
 @import "include/_animation";
 
 /** modules **/
+@import "include/modules/_faq";
 @import "include/modules/_news";
 @import "include/modules/_profile";

src/configuration/router-config.js

@@ -25,7 +25,8 @@ export default class {
         {route: ['auth/signin'], moduleId: 'view-models/auth/sign-in', title: 'Sign In'},
         {route: ['auth/signout'], moduleId: 'view-models/auth/sign-out', title: 'Sign Out'},
         {route: ['profiles/view/:id'], moduleId: 'view-models/profiles/view', title: 'Profile', auth: true},
-        {route: ['profiles/edit'], moduleId: 'view-models/profiles/edit', title: 'Edit Profile', auth: true}
+        {route: ['profiles/edit'], moduleId: 'view-models/profiles/edit', title: 'Edit Profile', auth: true},
+        {route: ['faq', 'faq/index'], moduleId: 'view-models/faqs/index', title: 'FAQ'}
       ]);
       config.mapUnknownRoutes('view-models/errors/error404');
     };

src/services/faqs/faq-service.js

@@ -0,0 +1,14 @@
+import {inject} from 'aurelia-framework';
+import {Endpoint} from 'aurelia-api';
+
+@inject(Endpoint.of())
+export class FaqService {
+  constructor(apiClient) {
+    this.apiClient = apiClient;
+  }
+
+  get() {
+    return this.apiClient.find('faq')
+      .catch(error => Promise.reject(error));
+  }
+}

src/view-models/faqs/index.js

@@ -0,0 +1,20 @@
+import {inject} from 'aurelia-framework';
+import {FaqService} from '../../services/faqs/faq-service';
+
+@inject(FaqService)
+export class Index {
+  constructor(faqService) {
+    this.faqService = faqService;
+    this.faqs = [];
+  }
+
+  activate() {
+    return this.faqService.get()
+      .then(faqs => {
+        this.faqs = faqs;
+      })
+      .catch(() => {
+        this.faqs = [];
+      });
+  }
+}

src/views/faqs/index.html

@@ -0,0 +1,33 @@
+<template>
+  <section class="au-animate">
+    <div class="row">
+      <div class="col-lg-12">
+        <div class="card card-default card-block" if.bind="!faqs">
+          <p class="card-text">
+            At the moment, no FAQs are available.
+          </p>
+        </div>
+
+        <div id="accordion" role="tablist" aria-multiselectable="true">
+          <div class="card card-default card-block" repeat.for="item of faqs">
+            <div class="row">
+              <div class="col-md-7">
+                <a class="faq-question" data-toggle="collapse" data-parent="#accordion" href="#faq-${item.id}"
+                   aria-expanded="false" aria-controls="faq-${item.id}">${item.question}</a>
+                <small>Added <i class="fa fa-clock-o"></i> ${item.created_at}</small>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-lg-12">
+                <div id="faq-${item.id}" class="panel-collapse collapse" role="tabpanel"
+                     aria-labelledby="faq-${item.id}">
+                  <div class="faq-answer" innerhtml="${item.answer}"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>