show selected template in choose template dialog

UST-QuAntiL · Aug 1, 2023 · c04e857 · c04e857
1 parent 8349b5f
commit c04e857
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 12 deletions.
diff --git a/src/app/components/experiment/experiment.component.html b/src/app/components/experiment/experiment.component.html
@@ -39,13 +39,10 @@ <h1 class="t-page-headline">Experiment</h1>
                 <a [routerLink]="['/experiments', experimentId, 'workspace']" [queryParams]="{ template: uiTemplate?.self?.resourceKey?.uiTemplateId ?? 'all-plugins' }">
                     {{uiTemplate?.name ?? 'All Plugins'}}
                 </a>
-                <!-- <mat-form-field>
-                    <mat-label>Default Template</mat-label>
-                </mat-form-field> -->
                 <button mat-icon-button (click)="showSelectDefaultTemplateDialog()">
                     <mat-icon>edit</mat-icon>
                 </button>
-                <button mat-icon-button (click)="updateExperimentDefaultTemplate(null)">
+                <button mat-icon-button *ngIf="uiTemplate != null" (click)="updateExperimentDefaultTemplate(null)">
                     <mat-icon>cancel</mat-icon>
                 </button>
             </div>

diff --git a/src/app/components/experiment/experiment.component.ts b/src/app/components/experiment/experiment.component.ts
@@ -172,11 +172,13 @@ export class ExperimentComponent implements OnInit, OnDestroy {
 
     showSelectDefaultTemplateDialog() {
         const dialogRef = this.dialog.open(ChooseTemplateComponent, {
-            minWidth: "20rem", maxWidth: "40rem", width: "60%",
+            minWidth: "20rem", maxWidth: "40rem", width: "60%", maxHeight: "95%",
+            data: this.uiTemplate
         });
         dialogRef.afterClosed().subscribe(templateId => {
             if (templateId != null) {
-                this.updateExperimentDefaultTemplate(templateId);
+                const id = templateId === 'all-plugins' ? null : templateId;
+                this.updateExperimentDefaultTemplate(id);
             }
         });
     }

diff --git a/src/app/dialogs/choose-template/choose-template.component.html b/src/app/dialogs/choose-template/choose-template.component.html
@@ -1,12 +1,15 @@
-<h1 mat-dialog-title>Choose Template</h1>
+<h1 mat-dialog-title>Select a default template:</h1>
 <div mat-dialog-content>
-    <div>
+    <div class="template-list">
         <qhana-growing-list [rels]="['ui-template', 'collection']" [newItemRels]="['ui-template']" 
             [highlighted]="highlightedTemplateSet" [highlightByKey]="'uiTemplateId'" (clickItem)="selectTemplate($event)">
         </qhana-growing-list>
     </div>
+    <span class="t-title">Selected Template: {{template?.name ?? 'All Plugins'}}</span><br>
+    <span><i>{{template?.description ?? 'This template contains all plugins that are available in Qhana.'}}</i></span>
 </div>
 <div class="dialog-actions" mat-dialog-actions>
+    <button mat-button [mat-dialog-close]="'all-plugins'">Unset</button>
     <button mat-button (click)="onCancel()">Cancel</button>
     <button mat-button [mat-dialog-close]="templateId"
         [disabled]="templateId == null">

diff --git a/src/app/dialogs/choose-template/choose-template.component.sass b/src/app/dialogs/choose-template/choose-template.component.sass
@@ -0,0 +1,3 @@
+.template-list
+    max-height: 33rem
+    overflow-y: auto
diff --git a/src/app/dialogs/choose-template/choose-template.component.ts b/src/app/dialogs/choose-template/choose-template.component.ts
@@ -1,8 +1,8 @@
-import { Component, OnInit } from '@angular/core';
-import { TemplateApiObject } from 'src/app/services/qhana-backend.service';
-import { MatDialogRef } from '@angular/material/dialog';
+import { Component, Inject, OnInit } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { ApiLink } from 'src/app/services/api-data-types';
 import { PluginRegistryBaseService } from 'src/app/services/registry.service';
+import { TemplateApiObject } from 'src/app/services/templates.service';
 
 @Component({
     selector: 'qhana-choose-template',
@@ -12,8 +12,16 @@ import { PluginRegistryBaseService } from 'src/app/services/registry.service';
 export class ChooseTemplateComponent implements OnInit {
     highlightedTemplateSet: Set<string> = new Set();
     templateId: string | null = null;
+    template: TemplateApiObject | null = null;
 
-    constructor(public dialogRef: MatDialogRef<ChooseTemplateComponent>) { }
+    constructor(public dialogRef: MatDialogRef<ChooseTemplateComponent>, @Inject(MAT_DIALOG_DATA) public data: TemplateApiObject, private registry: PluginRegistryBaseService) {
+        if (data != null && data.self.resourceKey?.uiTemplateId != null) {
+            const templateId = data.self.resourceKey?.uiTemplateId;
+            this.templateId = templateId;
+            this.highlightedTemplateSet = new Set([templateId]);
+            this.template = data;
+        }
+    }
 
     ngOnInit(): void {
     }
@@ -27,10 +35,13 @@ export class ChooseTemplateComponent implements OnInit {
             // double click deselects template
             this.highlightedTemplateSet.clear();
             this.templateId = null;
+            this.template = null;
             return;
         }
         this.highlightedTemplateSet.clear();
         this.highlightedTemplateSet = new Set([templateId]);
+        const template = await this.registry.getByApiLink<TemplateApiObject>(templateLink, null, false);
+        this.template = template?.data ?? null;
         this.templateId = templateId;
     }