Don't use meshStack yet?
-
Check out and how it can help your platform team
-
+ Check it out and how it can help your platform team
+
Discover meshStack
diff --git a/website/src/app/features/template-details/import-dialog/import-dialog.component.ts b/website/src/app/features/template-details/import-dialog/import-dialog.component.ts
index 8266440..09e4cc6 100644
--- a/website/src/app/features/template-details/import-dialog/import-dialog.component.ts
+++ b/website/src/app/features/template-details/import-dialog/import-dialog.component.ts
@@ -1,34 +1,61 @@
-import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
+import { Component, Inject, Input, OnInit, PLATFORM_ID } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+interface ImportDialogForm {
+ meshStackUrl: FormControl
;
+}
+
@Component({
selector: 'mst-import-dialog',
- imports: [ReactiveFormsModule],
+ imports: [CommonModule, ReactiveFormsModule],
templateUrl: './import-dialog.component.html',
- styleUrl: './import-dialog.component.scss'
+ styleUrl: './import-dialog.component.scss',
+ standalone: true
})
export class ImportDialogComponent implements OnInit {
- public form!: FormGroup;
+ @Input()
+ public name!: string;
- public get meshStackUrl() {
- return this.form.get('meshStackUrl')?.value;
- }
+ @Input()
+ public modulePath!: string;
+
+ public form!: FormGroup;
constructor(
+ @Inject(PLATFORM_ID) private platformId: object,
public activeModal: NgbActiveModal,
private fb: FormBuilder
) { }
- ngOnInit(): void {
+ public ngOnInit(): void {
this.form = this.fb.group({
- meshStackUrl: ['']
+ meshStackUrl: this.fb.nonNullable.control('', [Validators.required, Validators.pattern(/^(https?:\/\/).*/)]),
});
}
- public open() {
-
+ public openMeshStackUrl() {
+ // Only runs in browser, not during SSR
+ if (isPlatformBrowser(this.platformId)) {
+ const url = this.getSanitizedMeshStackUrl() + '/#/building-block-definition-import?name=' + this.name + '&module-path=' + this.modulePath;
+ window.open(url.toString(), '_blank', 'noopener,noreferrer');
+ }
}
+ private getSanitizedMeshStackUrl(): string {
+ let meshStackUrl = this.form.controls.meshStackUrl.value;
+ const hashIndex = meshStackUrl.indexOf('#');
+
+ if (hashIndex !== -1) {
+ meshStackUrl = meshStackUrl.substring(0, hashIndex);
+ }
+
+ if (meshStackUrl.endsWith('/')) {
+ meshStackUrl = meshStackUrl.slice(0, -1);
+ }
+
+ return meshStackUrl;
+ }
}
diff --git a/website/src/app/features/template-details/template-details.component.html b/website/src/app/features/template-details/template-details.component.html
index 16b9a65..630d113 100644
--- a/website/src/app/features/template-details/template-details.component.html
+++ b/website/src/app/features/template-details/template-details.component.html
@@ -3,7 +3,7 @@
@@ -39,7 +39,7 @@
{{ template.source }}
-
diff --git a/website/src/app/features/template-details/template-details.component.scss b/website/src/app/features/template-details/template-details.component.scss
index 71168dd..e9c6da1 100644
--- a/website/src/app/features/template-details/template-details.component.scss
+++ b/website/src/app/features/template-details/template-details.component.scss
@@ -27,9 +27,9 @@
line-height: 2rem;
}
-.breadcrumb-item+.breadcrumb-item::before {
- content: "\f054";
- font-family: "Font Awesome 6 Free";
+.breadcrumb-item + .breadcrumb-item::before {
+ content: '\f054';
+ font-family: 'Font Awesome 6 Free';
font-weight: 900;
- color: gray
-}
\ No newline at end of file
+ color: gray;
+}
diff --git a/website/src/app/features/template-details/template-details.component.ts b/website/src/app/features/template-details/template-details.component.ts
index 9465569..e04f504 100644
--- a/website/src/app/features/template-details/template-details.component.ts
+++ b/website/src/app/features/template-details/template-details.component.ts
@@ -71,11 +71,25 @@ export class TemplateDetailsComponent implements OnInit, OnDestroy {
this.copyLabel = 'Copy';
}, 1000);
})
- .catch(e => console.log(e));
+ .catch(e =>
+ /* eslint-disable-next-line */
+ console.log(e)
+ );
}
- public open() {
- this.modalService.open(ImportDialogComponent, { size: 'lg', centered: true });
+ public open(template: TemplateDetailsVm) {
+ const regex = /modules\/[^/]+\/[^/]+/;
+ const match = template.source.match(regex);
+ const modulePath = match ? match[0] : '';
+
+ if (!modulePath) {
+ /* eslint-disable-next-line */
+ console.error('Module path not found in source URL');
+ } else {
+ const component = this.modalService.open(ImportDialogComponent, { size: 'lg', centered: true }).componentInstance;
+ component.name = template.name;
+ component.modulePath = modulePath;
+ }
}
}
diff --git a/website/src/app/features/template-gallery/template-gallery.component.ts b/website/src/app/features/template-gallery/template-gallery.component.ts
index 3017742..d734ff6 100644
--- a/website/src/app/features/template-gallery/template-gallery.component.ts
+++ b/website/src/app/features/template-gallery/template-gallery.component.ts
@@ -19,7 +19,6 @@ import { TemplateService } from 'app/shared/template';
standalone: true
})
export class TemplateGalleryComponent implements OnInit, OnDestroy {
-
public templates$!: Observable