add type links

apioo · Nov 3, 2024 · b2ddfc9 · b2ddfc9
1 parent 3451feb
commit b2ddfc9
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 15 deletions.
diff --git a/projects/typeschema-angular-editor/package.json b/projects/typeschema-angular-editor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-typeschema-editor",
-  "version": "3.0.6",
+  "version": "3.0.7",
   "description": "Editor to model and design a TypeAPI/TypeSchema specification",
   "keywords": [
     "TypeAPI",

diff --git a/projects/typeschema-angular-editor/src/lib/editor/editor.component.html b/projects/typeschema-angular-editor/src/lib/editor/editor.component.html
@@ -92,7 +92,7 @@
             <span class="editor-operation-argument-name font-monospace">{{ argument.name }}</span>
           </td>
           <td>
-            <span class="badge text-bg-primary">{{ argument.type }}</span>
+            <span class="badge text-bg-primary"><typeschema-link [type]="argument.type" [linkable]="isLinkableType(argument.type)"></typeschema-link></span>
             <span class="badge text-bg-secondary ms-1">{{ argument.in }}</span>
           </td>
           <td>
@@ -107,10 +107,10 @@
           <td>payload</td>
           <td>
             <span class="badge text-bg-primary">
-              <ng-container *ngIf="operation.payloadShape === 'array'">Array&lt;{{ operation.payload }}&gt;</ng-container>
-              <ng-container *ngIf="operation.payloadShape === 'map'">Map&lt;string, {{ operation.payload }}&gt;</ng-container>
+              <ng-container *ngIf="operation.payloadShape === 'array'">Array&lt;<typeschema-link [type]="operation.payload" [linkable]="isLinkableType(operation.payload)"></typeschema-link>&gt;</ng-container>
+              <ng-container *ngIf="operation.payloadShape === 'map'">Map&lt;string, <typeschema-link [type]="operation.payload" [linkable]="isLinkableType(operation.payload)"></typeschema-link>&gt;</ng-container>
               <ng-container *ngIf="operation.payloadShape === 'mime'">{{ operation.payload }}</ng-container>
-              <ng-container *ngIf="operation.payloadShape !== 'array' && operation.payloadShape !== 'map' && operation.payloadShape !== 'mime'">{{ operation.payload }}</ng-container>
+              <ng-container *ngIf="operation.payloadShape !== 'array' && operation.payloadShape !== 'map' && operation.payloadShape !== 'mime'"><typeschema-link [type]="operation.payload" [linkable]="isLinkableType(operation.payload)"></typeschema-link></ng-container>
             </span>
           </td>
           <td><span class="badge text-bg-secondary">body</span></td>
@@ -141,10 +141,10 @@
           <td><span class="badge text-bg-success">{{ operation.httpCode }}</span></td>
           <td>
             <span class="badge text-bg-primary">
-              <ng-container *ngIf="operation.returnShape === 'array'">Array&lt;{{ operation.return }}&gt;</ng-container>
-              <ng-container *ngIf="operation.returnShape === 'map'">Map&lt;string, {{ operation.return }}&gt;</ng-container>
+              <ng-container *ngIf="operation.returnShape === 'array'">Array&lt;<typeschema-link [type]="operation.return" [linkable]="isLinkableType(operation.return)"></typeschema-link>&gt;</ng-container>
+              <ng-container *ngIf="operation.returnShape === 'map'">Map&lt;string, <typeschema-link [type]="operation.return" [linkable]="isLinkableType(operation.return)"></typeschema-link>&gt;</ng-container>
               <ng-container *ngIf="operation.returnShape === 'mime'">{{ operation.return }}</ng-container>
-              <ng-container *ngIf="operation.returnShape !== 'array' && operation.returnShape !== 'map' && operation.returnShape !== 'mime'">{{ operation.return }}</ng-container>
+              <ng-container *ngIf="operation.returnShape !== 'array' && operation.returnShape !== 'map' && operation.returnShape !== 'mime'"><typeschema-link [type]="operation.return" [linkable]="isLinkableType(operation.return)"></typeschema-link></ng-container>
             </span>
           </td>
           <td></td>
@@ -153,10 +153,10 @@
           <td><span class="badge text-bg-danger">{{ throw_.code }}</span></td>
           <td>
             <span class="badge text-bg-primary">
-              <ng-container *ngIf="throw_.typeShape === 'array'">Array&lt;{{ throw_.type }}&gt;</ng-container>
-              <ng-container *ngIf="throw_.typeShape === 'map'">Map&lt;string, {{ throw_.type }}&gt;</ng-container>
+              <ng-container *ngIf="throw_.typeShape === 'array'">Array&lt;<typeschema-link [type]="throw_.type" [linkable]="isLinkableType(throw_.type)"></typeschema-link>&gt;</ng-container>
+              <ng-container *ngIf="throw_.typeShape === 'map'">Map&lt;string, <typeschema-link [type]="throw_.type" [linkable]="isLinkableType(throw_.type)"></typeschema-link>&gt;</ng-container>
               <ng-container *ngIf="throw_.typeShape === 'mime'">{{ throw_.type }}</ng-container>
-              <ng-container *ngIf="throw_.typeShape !== 'array' && throw_.typeShape !== 'map' && throw_.typeShape !== 'mime'">{{ throw_.type }}</ng-container>
+              <ng-container *ngIf="throw_.typeShape !== 'array' && throw_.typeShape !== 'map' && throw_.typeShape !== 'mime'"><typeschema-link [type]="throw_.type" [linkable]="isLinkableType(throw_.type)"></typeschema-link></ng-container>
             </span>
           </td>
           <td>
@@ -184,7 +184,10 @@
 
 <div *ngFor="let type of specification.types; index as typeIndex" class="card editor-type mb-3" [ngClass]="{'border-primary': specification.root === typeIndex, 'border-black': selectedType === typeIndex}" id="type-{{ type.name }}" (click)="selectType(typeIndex)">
   <div class="card-header">
-    <div class="editor-type-name font-monospace"><span class="badge text-bg-dark"><span class="codicon codicon-symbol-structure"></span></span> {{ type.name }} <span *ngIf="type.parent" class="float-end"><span class="badge text-bg-primary">{{ type.parent }}</span></span></div>
+    <div class="editor-type-name font-monospace"><span class="badge text-bg-dark">
+      <span class="codicon codicon-symbol-structure"></span></span> {{ type.name }}
+      <span *ngIf="type.parent" class="float-end"><span class="badge text-bg-primary"><typeschema-link [type]="type.parent" [linkable]="isLinkableType(type.parent)"></typeschema-link></span></span>
+    </div>
     <div class="text-secondary editor-type-description">{{ type.description }}</div>
   </div>
   <div class="card-body">
@@ -206,7 +209,7 @@
           <tbody>
           <tr>
             <td><div class="editor-type-property-name font-monospace">*</div></td>
-            <td><span class="badge text-bg-primary">{{ type.reference }}</span></td>
+            <td><span class="badge text-bg-primary" *ngIf="type.reference"><typeschema-link [type]="type.reference" [linkable]="isLinkableType(type.reference)"></typeschema-link></span></td>
             <td></td>
           </tr>
           </tbody>
@@ -233,7 +236,9 @@
               <td><code>{{ mapping.value }}</code></td>
               <td>
                 <div class="editor-type-property-name">
-                  <span class="badge text-bg-primary">{{ mapping.key }}</span>
+                  <span class="badge text-bg-primary">
+                    <typeschema-link [type]="mapping.key" [linkable]="isLinkableType(mapping.key)"></typeschema-link>
+                  </span>
                 </div>
               </td>
               <td>
@@ -266,7 +271,9 @@
             </td>
             <td>
               <span class="badge text-bg-primary">{{ property.type }}</span>
-              <span class="badge text-bg-secondary ms-1" *ngIf="property.reference">{{ property.reference }}</span>
+              <span class="badge text-bg-secondary ms-1" *ngIf="property.reference">
+                <typeschema-link [type]="property.reference" [linkable]="isLinkableType(property.reference)"></typeschema-link>
+              </span>
               <span class="badge text-bg-secondary ms-1" *ngIf="property.generic">{{ property.generic }}</span>
               <span class="badge text-bg-secondary ms-1" *ngIf="property.format">{{ property.format }}</span>
             </td>

diff --git a/projects/typeschema-angular-editor/src/lib/editor/editor.component.ts b/projects/typeschema-angular-editor/src/lib/editor/editor.component.ts
@@ -451,6 +451,20 @@ export class EditorComponent implements OnInit {
     return null;
   }
 
+  isLinkableType(typeName: string): boolean {
+    if (typeName === 'string' || typeName === 'number' || typeName === 'integer' || typeName === 'boolean' || typeName === 'generic' || typeName === 'any') {
+      return false;
+    }
+
+    for (let i = 0; i < this.specification.types.length; i++) {
+      if (this.specification.types[i].name === typeName) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+
   findTypeByName(typeName: string): Type|null {
     for (let i = 0; i < this.specification.types.length; i++) {
       if (this.specification.types[i].name === typeName) {

diff --git a/projects/typeschema-angular-editor/src/lib/editor/link/link.component.css b/projects/typeschema-angular-editor/src/lib/editor/link/link.component.css
diff --git a/projects/typeschema-angular-editor/src/lib/editor/link/link.component.html b/projects/typeschema-angular-editor/src/lib/editor/link/link.component.html
@@ -0,0 +1,7 @@
+
+<ng-container *ngIf="linkable">
+  <a href="#type-{{ type }}" class="text-white text-decoration-none">{{ type }}</a>
+</ng-container>
+<ng-container *ngIf="!linkable">
+  {{ type }}
+</ng-container>
diff --git a/projects/typeschema-angular-editor/src/lib/editor/link/link.component.ts b/projects/typeschema-angular-editor/src/lib/editor/link/link.component.ts
@@ -0,0 +1,18 @@
+import {Component, Input, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'typeschema-link',
+  templateUrl: './link.component.html',
+  styleUrls: ['./link.component.css']
+})
+export class LinkComponent implements OnInit {
+
+  @Input() type!: string;
+  @Input() linkable!: boolean;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/projects/typeschema-angular-editor/src/lib/typeschema-editor.module.ts b/projects/typeschema-angular-editor/src/lib/typeschema-editor.module.ts
@@ -4,6 +4,7 @@ import {NgbModule} from "@ng-bootstrap/ng-bootstrap";
 import {CommonModule} from "@angular/common";
 import {FormsModule} from "@angular/forms";
 import {ArgumentComponent} from "./editor/argument/argument.component";
+import {LinkComponent} from "./editor/link/link.component";
 import {TagsComponent} from "./editor/tags/tags.component";
 import {CsvPipe} from "./editor/tags/csv.pipe";
 import {ThrowComponent} from "./editor/throw/throw.component";
@@ -12,6 +13,7 @@ import {ThrowComponent} from "./editor/throw/throw.component";
   declarations: [
     ArgumentComponent,
     CsvPipe,
+    LinkComponent,
     TagsComponent,
     ThrowComponent,
     EditorComponent