add specification

Author: chriskapp

projects/fusio-sdk/src/lib/component/specification/specification.component.css

@@ -0,0 +1,6 @@
+
+<div class="row">
+  <div class="col-md-12">
+    <div id="redoc"></div>
+  </div>
+</div>

projects/fusio-sdk/src/lib/component/specification/specification.component.html

@@ -0,0 +1,62 @@
+import {Component, OnInit} from '@angular/core';
+import {FusioService} from "../../service/fusio.service";
+
+@Component({
+  selector: 'fusio-specification',
+  templateUrl: './specification.component.html',
+  styleUrls: ['./specification.component.css']
+})
+export class SpecificationComponent implements OnInit {
+
+  constructor(private fusio: FusioService) { }
+
+  async ngOnInit(): Promise<void> {
+    this.loadRedoc(await this.getOpenAPILink());
+  }
+
+  private async getOpenAPILink(): Promise<string|undefined> {
+    const about = await this.fusio.getClientAnonymous().system().meta().getAbout();
+
+    let result = undefined;
+    about.links?.forEach((link) => {
+      if (link.rel === 'openapi') {
+        result = link.href;
+      }
+    });
+
+    return result;
+  }
+
+  private loadRedoc(url: string|undefined): void {
+    if (!url) {
+      throw new Error('Found no open api url');
+    }
+
+    const el = document.getElementById('redoc-script');
+    if (el === null) {
+      let node = document.createElement('script');
+      node.src = 'https://cdn.jsdelivr.net/npm/redoc@next/bundles/redoc.standalone.js';
+      node.type = 'text/javascript';
+      node.async = true;
+      node.id = 'redoc-script';
+      node.onload = function() {
+        SpecificationComponent.initRedoc(url);
+      };
+      document.getElementsByTagName('head')[0].appendChild(node);
+    } else {
+      SpecificationComponent.initRedoc(url);
+    }
+  }
+
+  public static initRedoc(url: string) {
+    const options = {
+      scrollYOffset: 60,
+      hideDownloadButton: true
+    };
+
+    Redoc.init(url, options, document.getElementById('redoc'))
+  }
+
+}
+
+declare var Redoc: any;

projects/fusio-sdk/src/lib/component/specification/specification.component.ts

@@ -25,6 +25,7 @@ import {ActivateComponent} from "./component/register/activate/activate.componen
 import {AboutComponent} from "./component/about/about.component";
 import {AccountComponent} from './component/account/account.component';
 import {SecurityComponent} from './component/security/security.component';
+import {SpecificationComponent} from "./component/specification/specification.component";
 import {AppDetailComponent} from './component/app/detail/app-detail.component';
 import {AppListComponent} from './component/app/list/app-list.component';
 import {AppModalComponent} from './component/app/modal/app-modal.component';
@@ -44,6 +45,7 @@ import {WebhookModalComponent} from "./component/webhook/modal/webhook-modal.com
 @NgModule({
   declarations: [
     AboutComponent,
+    SpecificationComponent,
     AccountComponent,
     AccountContainerComponent,
     BootstrapComponent,

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

@@ -6,6 +6,7 @@ import {SubscriptionComponent} from "../component/subscription/subscription.comp
 import {CallbackComponent} from "../component/subscription/callback/callback.component";
 import {WebhookListComponent} from "../component/webhook/list/webhook-list.component";
 import {TokenListComponent} from "../component/token/list/token-list.component";
+import {SpecificationComponent} from "../component/specification/specification.component";
 import {AboutComponent} from "../component/about/about.component";
 import {isAuthenticated} from "../guard/authentication.guard";
 
@@ -23,6 +24,7 @@ export class AccountRoute {
       {path: 'webhook/:id', component: WebhookListComponent, canActivate: [isAuthenticated] },
       {path: 'token', component: TokenListComponent, canActivate: [isAuthenticated] },
       {path: 'token/:id', component: TokenListComponent, canActivate: [isAuthenticated] },
+      {path: 'specification', component: SpecificationComponent, canActivate: [isAuthenticated] },
       {path: 'about', component: AboutComponent, canActivate: [isAuthenticated] },
     ];
   }

projects/fusio-sdk/src/lib/route/account-route.ts

@@ -98,6 +98,9 @@ export class ConfigService {
       title: 'Token',
       path: '/account/token',
       scope: 'consumer.token',
+    }, {
+      title: 'Specification',
+      path: '/account/specification',
     }, {
       title: 'About',
       path: '/account/about',