improve render import link

apioo · Nov 16, 2024 · 8370743 · 8370743
1 parent 2b7c23f
commit 8370743
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 3 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.1.1",
+  "version": "3.1.2",
   "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
@@ -29,7 +29,11 @@
 </div>
 
 <div class="card editor-import mb-3" *ngIf="specification.imports.length > 0">
-  <div class="card-header">Import</div>
+  <div class="card-header">
+    <div class="editor-type-name font-monospace">
+      <span class="badge text-bg-dark"><span class="codicon codicon-cloud-download"></span></span> Import
+    </div>
+  </div>
   <div class="card-body">
     <table class="table table table-striped">
       <colgroup>
@@ -47,7 +51,7 @@
       <tbody>
       <tr *ngFor="let include of specification.imports; index as includeIndex">
         <td><span class="editor-import-alias">{{ include.alias }}</span></td>
-        <td><span class="editor-import-url">{{ include.url }}</span></td>
+        <td><span class="editor-import-url"><typeschema-import [url]="include.url"></typeschema-import></span></td>
         <td>
           <div class="btn-group float-end" role="group" *ngIf="!readonly">
             <a class="btn btn-danger" (click)="deleteInclude(includeIndex)"><span class="codicon codicon-close"></span></a>

diff --git a/projects/typeschema-angular-editor/src/lib/editor/import/import.component.css b/projects/typeschema-angular-editor/src/lib/editor/import/import.component.css
diff --git a/projects/typeschema-angular-editor/src/lib/editor/import/import.component.html b/projects/typeschema-angular-editor/src/lib/editor/import/import.component.html
@@ -0,0 +1,2 @@
+
+<a [href]="href">{{ url }}</a>
diff --git a/projects/typeschema-angular-editor/src/lib/editor/import/import.component.ts b/projects/typeschema-angular-editor/src/lib/editor/import/import.component.ts
@@ -0,0 +1,25 @@
+import {Component, Input, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'typeschema-import',
+  templateUrl: './import.component.html',
+  styleUrls: ['./import.component.css']
+})
+export class ImportComponent implements OnInit {
+
+  @Input() url!: string;
+
+  href: string = '';
+
+  constructor() { }
+
+  ngOnInit(): void {
+    const url = new URL(this.url);
+    if (url.protocol === 'typehub:') {
+      this.href = 'https://app.typehub.cloud/d/' + url.username + '/' + url.password + '?version=' + url.hostname;
+    } else {
+      this.href = url.href;
+    }
+  }
+
+}
diff --git a/projects/typeschema-angular-editor/src/lib/typeschema-editor.module.ts b/projects/typeschema-angular-editor/src/lib/typeschema-editor.module.ts
@@ -6,11 +6,13 @@ import {FormsModule} from "@angular/forms";
 import {ArgumentComponent} from "./editor/argument/argument.component";
 import {LinkComponent} from "./editor/link/link.component";
 import {ThrowComponent} from "./editor/throw/throw.component";
+import {ImportComponent} from "./editor/import/import.component";
 
 @NgModule({
   declarations: [
     ArgumentComponent,
     LinkComponent,
+    ImportComponent,
     ThrowComponent,
     EditorComponent
   ],