feat: Move getSchemaUrl to mapper

Add anchorUrl to models

Author: timonback

src/app/channels/channel-main/channel-main.component.html

@@ -29,7 +29,7 @@ <h4>{{ operation.message.description }}</h4>
         <h4>
           {{ schemaName }}
           <span class="payload-name">
-            <a [href]="getSchemaUrl(operation.message.payload.$ref?.split('/')?.pop())" >{{ operation.message.payload.$ref }}</a>
+            <a [href]="operation.message.payload.anchorUrl" >{{ operation.message.payload.name }}</a>
           </span>
         </h4>
         <app-schema *ngIf="schema" [schema]="schema"></app-schema>
@@ -38,7 +38,7 @@ <h4>
         <h4>
           {{ headersSchemaName }}
           <span class="header-name">
-            <a [href]="getSchemaUrl(operation.message.headers.$ref?.split('/')?.pop())">{{ operation.message.headers.$ref }}</a>
+            <a [href]="operation.message.headers.anchorUrl">{{ operation.message.headers.name }}</a>
           </span>
         </h4>
         <app-schema *ngIf="headers" [schema]="headers"></app-schema>

src/app/channels/channel-main/channel-main.component.ts

@@ -39,13 +39,13 @@ export class ChannelMainComponent implements OnInit {
     this.asyncApiService.getAsyncApis().subscribe(
       asyncapi => {
         let schemas: Map<string, Schema> = asyncapi.components.schemas;
-        this.schemaName = this.operation.message.payload.$ref.slice(this.operation.message.payload.$ref.lastIndexOf('/') + 1)
+        this.schemaName = this.operation.message.payload.name.slice(this.operation.message.payload.name.lastIndexOf('/') + 1)
         this.schema = schemas.get(this.schemaName);
 
         this.defaultExample = this.schema.example;
         this.exampleTextAreaLineCount = this.defaultExample?.lineCount || 0;
 
-        this.headersSchemaName = this.operation.message.headers.$ref.slice(this.operation.message.headers.$ref.lastIndexOf('/') + 1)
+        this.headersSchemaName = this.operation.message.headers.name.slice(this.operation.message.headers.name.lastIndexOf('/') + 1)
         this.headers = schemas.get(this.headersSchemaName);
         this.headersExample = this.headers.example;
         this.headersTextAreaLineCount = this.headersExample?.lineCount || 0;
@@ -98,8 +98,4 @@ export class ChannelMainComponent implements OnInit {
     });
   }
 
-  public getSchemaUrl(fragment: string): string {
-    return window.location.pathname + window.location.search + "#" + fragment;
-  }
-
 }

src/app/schemas/schema/schema.component.html

@@ -7,8 +7,8 @@
     </td>
     <td>
       <span class="type" *ngIf="property.value.type">{{ property.value.type }}</span>
-      <span class="type" *ngIf="property.value['$ref']">
-        <a [href]="getSchemaUrl(property.value['$ref']?.split('/')?.pop())">{{ property.value['$ref'] }}</a>
+      <span class="type" *ngIf="property.value.name">
+        <a [href]="property.value.anchorUrl">{{ property.value.name }}</a>
       </span>
       <span class="format" *ngIf="property.value.format">({{ property.value.format }})</span>
       <div class="description">{{ property.value.description }}</div>

src/app/schemas/schema/schema.component.ts

@@ -10,7 +10,4 @@ export class SchemaComponent {
 
   @Input() schema: Schema;
 
-  public getSchemaUrl(fragment: string): string {
-    return window.location.pathname + window.location.search + "#" + fragment;
-  }
 }

src/app/shared/asyncapi-mapper.service.ts

@@ -15,6 +15,7 @@ interface ServerAsyncApiSchema {
     [key: string]: object;
   };
   required?: string[];
+  $ref?: string;
 }
 
 interface ServerAsyncApiMessage {
@@ -31,6 +32,7 @@ interface ServerAsyncApiInfo {
   description?: string;
 }
 
+export type ServerAsyncApiChannelMessage = ServerAsyncApiMessage | { oneOf: ServerAsyncApiMessage[] };
 export interface ServerAsyncApi {
     asyncapi: string;
     info: ServerAsyncApiInfo;
@@ -44,11 +46,11 @@ export interface ServerAsyncApi {
         [key: string]: {
             description?: string;
             subscribe?: {
-                message: ServerAsyncApiMessage | { oneOf: ServerAsyncApiMessage[] };
+                message: ServerAsyncApiChannelMessage;
                 bindings?: any;
             };
             publish?: {
-                message: ServerAsyncApiMessage | { oneOf: ServerAsyncApiMessage[] };
+                message: ServerAsyncApiChannelMessage;
                 bindings?: any;
             };
         };
@@ -60,6 +62,7 @@ export interface ServerAsyncApi {
 
 @Injectable()
 export class AsyncApiMapperService {
+    static BASE_URL = window.location.pathname + window.location.search + "#";
 
     constructor() {
     }
@@ -106,7 +109,7 @@ export class AsyncApiMapperService {
         operationType: OperationType): Channel[]
     {
         if(serverOperation !== undefined) {
-            let messages: Message[] = 'oneOf' in serverOperation.message ? serverOperation.message.oneOf : [serverOperation.message];
+            let messages: Message[] = this.mapMessages(serverOperation.message)
 
             return messages.map(message => {
                 const operation = this.mapOperation(operationType, message, serverOperation.bindings)
@@ -121,6 +124,31 @@ export class AsyncApiMapperService {
         return [];
     }
 
+    private mapMessages(message: ServerAsyncApiChannelMessage): Message[] {
+      if('oneOf' in message) {
+        return this.mapServerAsyncApiMessage(message.oneOf)
+      }
+      return this.mapServerAsyncApiMessage([message]);
+    }
+
+    private mapServerAsyncApiMessage(messages: ServerAsyncApiMessage[]): Message[] {
+      return messages.map((v) => {
+        return {
+          name: v.name,
+          title: v.title,
+          description: v.description,
+          payload: {
+            name: v.payload.$ref,
+            anchorUrl: AsyncApiMapperService.BASE_URL  +v.payload.$ref?.split('/')?.pop()
+          },
+          headers: {
+            name: v.headers.$ref,
+            anchorUrl: AsyncApiMapperService.BASE_URL + v.headers.$ref?.split('/')?.pop()
+          }
+        }
+      })
+    }
+
     private mapOperation(operationType: OperationType, message: Message, bindings?: any): Operation {
         return {
             protocol: this.getProtocol(bindings),
@@ -144,8 +172,10 @@ export class AsyncApiMapperService {
       const properties = schema.properties !== undefined ? this.mapSchemas(schema.properties) : undefined
       const example = schema.example !== undefined ? new Example(schema.example) : undefined
       return {
+        name: schema.$ref,
         description: schema.description,
         anchorIdentifier: '#' + schemaName,
+        anchorUrl: AsyncApiMapperService.BASE_URL + schema.$ref?.split('/')?.pop(),
         type: schema.type,
         format: schema.format,
         enum: schema.enum,

src/app/shared/models/channel.model.ts

@@ -18,6 +18,12 @@ export interface Message {
     name: string;
     title: string;
     description?: string;
-    payload: { $ref: string };
-    headers: { $ref: string };
+    payload: {
+      name: string;
+      anchorUrl: string;
+    };
+    headers: {
+      name: string
+      anchorUrl: string;
+    };
 }

src/app/shared/models/schema.model.ts

@@ -1,9 +1,11 @@
 import { Example } from './example.model';
 
 export interface Schema {
+    name?: string;
     description?: string;
-    anchorIdentifier: string;
-    type: string;
+    anchorIdentifier?: string;
+    anchorUrl?: string;
+    type?: string;
     format?: string;
     enum?: string[];
     properties?: Map<string, Schema>;