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 index 386b4ee..8300e76 100644 --- 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" + 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 index cf76b56..cff023d 100644 --- 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 index 69d1249..cc2fbc9 100644 --- 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, @Inject(MAT_DIALOG_DATA) public data: PluginRestrictions, private registry: PluginRegistryBaseService) { + constructor(public dialogRef: MatDialogRef, @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;