add account container

Author: chriskapp

projects/fusio-sdk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-fusio-sdk",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "SDK to integrate Fusio into an Angular app",
   "keywords": [
     "Fusio",

projects/fusio-sdk/src/lib/component/account-container/account-container.component.css

@@ -0,0 +1,11 @@
+
+<div class="fusio-page">
+  <nav class="fusio-tabs">
+    <ul ngbNav [(activeId)]="active" class="nav-tabs">
+      <li [ngbNavItem]="item.id" *ngFor="let item of items">
+        <a ngbNavLink [routerLink]="item.link" class="nav-link">{{item.name}}</a>
+      </li>
+    </ul>
+  </nav>
+  <router-outlet></router-outlet>
+</div>

projects/fusio-sdk/src/lib/component/account-container/account-container.component.html

@@ -0,0 +1,67 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {ActivatedRoute, Router} from "@angular/router";
+
+@Component({
+  selector: 'fusio-account-container',
+  templateUrl: './account-container.component.html',
+  styleUrls: ['./account-container.component.css']
+})
+export class AccountContainerComponent implements OnInit {
+
+  @Input()
+  options: Array<string> = ['account', 'security', 'app', 'event', 'subscription'];
+
+  @Input()
+  active: string = 'account';
+
+  items: Array<Item> = this.getItems();
+
+  constructor(private router: Router, private route: ActivatedRoute) { }
+
+  ngOnInit(): void {
+    this.route.url.subscribe(() => {
+      this.items.forEach((item) => {
+        if (this.router.url.startsWith(item.link)) {
+          this.active = item.id;
+        }
+      });
+    })
+
+    this.items = this.getItems();
+  }
+
+  protected getItems(): Array<Item> {
+    const items = [{
+      id: 'account',
+      link: '/account',
+      name: 'Account',
+    }, {
+      id: 'security',
+      link: '/account/security',
+      name: 'Security',
+    }, {
+      id: 'app',
+      link: '/account/app',
+      name: 'Apps',
+    }, {
+      id: 'event',
+      link: '/account/event',
+      name: 'Events',
+    }, {
+      id: 'subscription',
+      link: '/account/subscription',
+      name: 'Subscriptions',
+    }];
+
+    return items.filter((item) => {
+      return this.options.includes(item.id);
+    });
+  }
+
+}
+
+export interface Item {
+  id: string
+  link: string
+  name: string
+}

projects/fusio-sdk/src/lib/component/account-container/account-container.component.ts

@@ -29,10 +29,12 @@ import {ModalComponent as AppModal} from './component/app/modal/modal.component'
 import {DetailComponent as EventDetail} from './component/event/detail/detail.component';
 import {ListComponent as EventList} from './component/event/list/list.component';
 import {ModalComponent as EventModal} from './component/event/modal/modal.component';
+import {AccountContainerComponent} from "./component/account-container/account-container.component";
 
 @NgModule({
   declarations: [
     AccountComponent,
+    AccountContainerComponent,
     EmptyComponent,
     HelpComponent,
     LoginComponent,
@@ -66,6 +68,7 @@ import {ModalComponent as EventModal} from './component/event/modal/modal.compon
   ],
   exports: [
     AccountComponent,
+    AccountContainerComponent,
     EmptyComponent,
     HelpComponent,
     LoginComponent,

projects/fusio-sdk/src/lib/fusio-sdk.module.ts

@@ -7,6 +7,7 @@ export * from './lib/abstract/list';
 export * from './lib/abstract/modal';
 
 export * from './lib/component/account/account.component';
+export * from './lib/component/account-container/account-container.component';
 export * from './lib/component/empty/empty.component';
 export * from './lib/component/help/help.component';
 export * from './lib/component/login/login.component';