feat: Move anchorLink to channel model

Author: timonback

src/app/channels/channels.component.html

@@ -1,6 +1,6 @@
 <h1>Channels</h1>
 <mat-accordion>
-    <mat-expansion-panel *ngFor="let channel of channels" [id]="this.getChannelIdentifier(channel)" [expanded]="selectedChannel == this.getChannelIdentifier(channel)" (opened)="this.setChannelSelection(channel)">
+    <mat-expansion-panel *ngFor="let channel of channels" [id]="channel.anchorIdentifier" [expanded]="selectedChannel == channel.anchorIdentifier" (opened)="this.setChannelSelection(channel)">
         <mat-expansion-panel-header>
             <mat-panel-title fxLayout fxLayoutAlign="flex-start center" fxLayoutGap="16px">
                 <div class="badge protocol-badge" >

src/app/channels/channels.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { AsyncApiService } from '../shared/asyncapi.service';
-import { Channel } from '../shared/models/channel.model';
+import {Channel, CHANNEL_ANCHOR_PREFIX} from '../shared/models/channel.model';
 import { Location } from "@angular/common";
 
 @Component({
@@ -9,7 +9,6 @@ import { Location } from "@angular/common";
   styleUrls: ['./channels.component.css']
 })
 export class ChannelsComponent implements OnInit {
-  static CHANNEL_ANCHOR_PREFIX = "channel-"
 
   channels: Channel[];
   selectedChannel: string;
@@ -42,16 +41,12 @@ export class ChannelsComponent implements OnInit {
   }
 
   setChannelSelection(channel: Channel): void {
-    window.location.hash = '#' + this.getChannelIdentifier(channel)
+    window.location.hash = '#' + channel.anchorIdentifier
   }
   setChannelSelectionFromLocation(): void {
     const anchor = window.location.hash.substr(1);
-    if (anchor.startsWith(ChannelsComponent.CHANNEL_ANCHOR_PREFIX)) {
+    if (anchor.startsWith(CHANNEL_ANCHOR_PREFIX)) {
       this.selectedChannel = anchor;
     }
   }
-
-  getChannelIdentifier(channel: Channel) {
-    return ChannelsComponent.CHANNEL_ANCHOR_PREFIX + channel.name + "-" + channel.operation.protocol + "-" + channel.operation.operation;
-  }
 }

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

@@ -1,6 +1,6 @@
 import { AsyncApi } from './models/asyncapi.model';
 import { Server } from './models/server.model';
-import {Channel, Message, Operation, OperationType} from './models/channel.model';
+import {Channel, CHANNEL_ANCHOR_PREFIX, Message, Operation, OperationType} from './models/channel.model';
 import { Schema } from './models/schema.model';
 import { Injectable } from '@angular/core';
 import {Example} from "./models/example.model";
@@ -102,17 +102,19 @@ export class AsyncApiMapperService {
     private mapChannel(
         topicName: string,
         description: ServerAsyncApi["channels"][""]["description"],
-        operation: ServerAsyncApi["channels"][""]["subscribe"] | ServerAsyncApi["channels"][""]["publish"],
+        serverOperation: ServerAsyncApi["channels"][""]["subscribe"] | ServerAsyncApi["channels"][""]["publish"],
         operationType: OperationType): Channel[]
     {
-        if(operation !== undefined) {
-            let messages: Message[] = 'oneOf' in operation.message ? operation.message.oneOf : [operation.message];
+        if(serverOperation !== undefined) {
+            let messages: Message[] = 'oneOf' in serverOperation.message ? serverOperation.message.oneOf : [serverOperation.message];
 
             return messages.map(message => {
+                const operation = this.mapOperation(operationType, message, serverOperation.bindings)
                 return {
                     name: topicName,
+                    anchorIdentifier: CHANNEL_ANCHOR_PREFIX + topicName + "-" + operation.protocol + "-" + operationType,
                     description: description,
-                    operation: this.mapOperation(operationType, message, operation.bindings)
+                    operation: operation,
                 }
             })
         }

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

@@ -1,5 +1,7 @@
+export const CHANNEL_ANCHOR_PREFIX = "channel-"
 export interface Channel {
     name: string;
+    anchorIdentifier: string;
     description?: string;
     operation: Operation;
 }