Add dialog to select plugin name/id in plugin filter editor

UST-QuAntiL · Aug 2, 2024 · 4ddd13f · 4ddd13f
1 parent 4936878
commit 4ddd13f
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 5 deletions.
diff --git a/src/app/components-small/plugin-filter-node/plugin-filter-node.component.html b/src/app/components-small/plugin-filter-node/plugin-filter-node.component.html
@@ -80,6 +80,9 @@
                         Examples: "processing", "conversion", "dataloader", "visualization", "interaction"
                     </mat-hint>
                 </mat-form-field>
+                <button mat-raised-button class="config-filter-button" (click)="openPluginChooser()" *ngIf="type === 'name' || type === 'id'">
+                    choose
+                </button>
                 <button mat-raised-button class="config-filter-button" (click)="delete.emit()">
                     <mat-icon>delete</mat-icon>
                 </button>

diff --git a/src/app/components-small/plugin-filter-node/plugin-filter-node.component.ts b/src/app/components-small/plugin-filter-node/plugin-filter-node.component.ts
@@ -1,4 +1,7 @@
 import { Component, EventEmitter, Input, OnInit, Output, SimpleChanges } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { ChoosePluginDialog } from 'src/app/dialogs/choose-plugin/choose-plugin.dialog';
+import { PluginApiObject } from 'src/app/services/qhana-api-data-types';
 
 // Define filter types ('not' excluded)
 // The PluginFilterNodeComponent component is designed to encapsulate a filter object and the information wether the filter is inverted ('not').
@@ -25,7 +28,7 @@ export class PluginFilterNodeComponent implements OnInit {
     inverted: boolean = false;
     isEmpty: boolean = true;
 
-    constructor() { }
+    constructor(private dialog: MatDialog) { }
 
     ngOnInit(): void {
         this.setupFilter();
@@ -156,4 +159,22 @@ export class PluginFilterNodeComponent implements OnInit {
         }
         this.filterOut.emit(JSON.parse(JSON.stringify(this.filterObject)));
     }
+
+    openPluginChooser() {
+        const dialogRef = this.dialog.open(ChoosePluginDialog, {});
+        dialogRef.afterClosed().subscribe((result: PluginApiObject | null) => {
+            if (result == null) {
+                return; // nothing was selected
+            }
+            if (this.type === "id") {
+                this.value = result.identifier;
+                this.updateFilterObject();
+            }
+            if (this.type === "name") {
+                this.value = result.title;
+                this.updateFilterObject();
+            }
+        });
+
+    }
 }
diff --git a/src/app/dialogs/choose-plugin/choose-plugin.dialog.ts b/src/app/dialogs/choose-plugin/choose-plugin.dialog.ts
@@ -22,17 +22,17 @@ export class ChoosePluginDialog {
 
     queryParams: URLSearchParams | null = null;
 
-    constructor(public dialogRef: MatDialogRef<ChoosePluginDialog>, @Inject(MAT_DIALOG_DATA) public data: PluginRestrictions, private registry: PluginRegistryBaseService) {
+    constructor(public dialogRef: MatDialogRef<ChoosePluginDialog>, @Inject(MAT_DIALOG_DATA) public data: PluginRestrictions | null, private registry: PluginRegistryBaseService) {
         const query = new URLSearchParams();
-        if (data.pluginTags) {
+        if (data?.pluginTags) {
             const tag_list = data.pluginTags.join(",");
             console.log(tag_list, data.pluginTags)
             query.set("tags", tag_list);
         }
-        if (data.pluginName) {
+        if (data?.pluginName) {
             query.set("name", data.pluginName);
         }
-        if (data.pluginVersion) {
+        if (data?.pluginVersion) {
             query.set("version", data.pluginVersion)
         }
         this.queryParams = query;