wf ui

dnet-app/frontends/is/src/app/app-routing.module.ts

@@ -9,7 +9,7 @@ import { ContextViewerComponent, ContextsComponent } from './contexts/contexts.c
 import { DsmSearchComponent, DsmResultsComponent, DsmApiComponent } from './dsm/dsm.component';
 import { MdstoreInspectorComponent, MdstoresComponent } from './mdstores/mdstores.component';
 import { CleanerTesterComponent } from './cleaner-tester/cleaner-tester.component';
-import { WfConfsComponent } from './wf-confs/wf-confs.component';
+import { WfConfsComponent, WfSingleConfComponent } from './wf-confs/wf-confs.component';
 import { IndexComponent } from './index/index.component';
 import { OaiComponent } from './oai/oai.component';
 import { SwaggerUiComponent } from './swagger/swagger-ui.component';
@@ -25,7 +25,7 @@ const routes: Routes = [
 	{ path: "vocabularies", component: VocabulariesComponent },
 	{ path: "protocols", component: ProtocolsComponent },
 	{ path: "wfs/:section", component: WfConfsComponent },
-	{ path: "wfs/conf/:conf", component: WfConfsComponent },
+	{ path: "wfs/conf/:conf", component: WfSingleConfComponent },
 	{ path: "wf_history", component: WfHistoryComponent },
 	{ path: "ctx_viewer", component: ContextViewerComponent },
 	{ path: "voc_editor", component: VocabularyEditorComponent },

dnet-app/frontends/is/src/app/app.module.ts

@@ -38,7 +38,7 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { SpinnerHttpInterceptor } from './common/spinner.service';
 import { MdstoresComponent, MdstoreInspectorComponent, MDStoreVersionsDialog, AddMDStoreDialog } from './mdstores/mdstores.component';
 import { CleanerTesterComponent } from './cleaner-tester/cleaner-tester.component';
-import { WfConfsComponent, WfConfSingle } from './wf-confs/wf-confs.component';
+import { WfConfsComponent, WfSingleConfComponent } from './wf-confs/wf-confs.component';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatStepperModule } from '@angular/material/stepper';
@@ -86,7 +86,7 @@ import { XsltTesterComponent } from './xslt-tester/xslt-tester.component';
 		XsltTesterComponent,
 		WfConfsComponent,
 		WfConfDialog,
-		WfConfSingle,
+		WfSingleConfComponent,
 		WfHistoryComponent,
 		WfHistoryDialog,
 		WfHistoryDetailsDialog,

dnet-app/frontends/is/src/app/wf-confs/wf-conf-single.html

@@ -20,7 +20,7 @@
 		</button>
 		<button mat-stroked-button color="primary" (click)="refresh()">
 			<mat-icon fontIcon="refresh"></mat-icon>
-			Refresh
+			refresh
 		</button>
 
 		<mat-divider style="margin-top: 1em; margin-bottom: 1em;"></mat-divider>

dnet-app/frontends/is/src/app/wf-confs/wf-confs.component.html

@@ -5,11 +5,24 @@
 	configure a new workflow
 </button>
 
-<nav mat-tab-nav-bar *ngIf="confs.length > 0" style="margin-top: 1em;">
-	<a mat-tab-link *ngFor="let c of confs" [routerLink]="['/wfs/conf', c.k]" routerLinkActive #rla="routerLinkActive"
-		[active]="rla.isActive">
-		{{c.v}}
-	</a>
-</nav>
 
-<wf-conf-single [conf]="conf"></wf-conf-single>
+<table mat-table [dataSource]="wfsDatasource" matSort class="mat-elevation-z8">
+
+	<ng-container matColumnDef="k">
+		<th mat-header-cell *matHeaderCellDef style="width: 20%;" mat-sort-header sortActionDescription="Sort by ID"> Id
+		</th>
+		<td mat-cell *matCellDef="let element">
+			<a [routerLink]="['/wfs/conf', element.k]">{{element.k}}</a>
+		</td>
+	</ng-container>
+
+	<ng-container matColumnDef="v">
+		<th mat-header-cell *matHeaderCellDef style="width: 20%;" mat-sort-header sortActionDescription="Sort by Name"> Name
+		</th>
+		<td mat-cell *matCellDef="let element"> {{element.v}} </td>
+	</ng-container>
+
+	<tr mat-header-row *matHeaderRowDef="colums"></tr>
+	<tr mat-row *matRowDef="let row; columns: colums;"></tr>
+
+</table>

dnet-app/frontends/is/src/app/wf-confs/wf-confs.component.ts

@@ -1,16 +1,12 @@
-import { JsonPipe } from '@angular/common';
+import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
-import { Component, Inject, Input, OnChanges, OnInit, SecurityContext, SimpleChanges } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
-import { FormControl, FormGroup, ValidatorFn, Validators } from '@angular/forms';
-import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { MatSelectChange } from '@angular/material/select';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRoute, Router } from '@angular/router';
-import { KeyValue, SimpleResource, WfConf, WfHistoryEntry, WfParam, WfSection } from '../common/is.model';
+import { KeyValue, WfConf, WfHistoryEntry, WfParam, WfSection } from '../common/is.model';
-import { ResMetadataDialog } from '../resources/resources.component';
-import { MatTableDataSource } from '@angular/material/table';
 import { WfHistoryDialog } from '../wf-history/wf-history.component';
 import { WfConfsClient } from './wf-confs.client';
 import { WfConfDialog, WfConfLauncherDialog } from './wf-common.component';
+import { MatTableDataSource } from '@angular/material/table';
 
 @Component({
 	selector: 'app-wf-confs',
@@ -20,7 +16,9 @@ import { WfConfDialog, WfConfLauncherDialog } from './wf-common.component';
 export class WfConfsComponent implements OnInit {
 	section?: WfSection;
 	confs: KeyValue[] = [];
-	conf?: WfConf;
+	wfsDatasource: MatTableDataSource<KeyValue> = new MatTableDataSource<KeyValue>([]);
+
+	colums: string[] = ['k', 'v'];
 
 	constructor(public client: WfConfsClient, public route: ActivatedRoute, public router: Router, public dialog: MatDialog, public snackBar: MatSnackBar) {
 	}
@@ -28,27 +26,11 @@ export class WfConfsComponent implements OnInit {
 	ngOnInit() {
 		this.route.params.subscribe(params => {
 			let sectionId = params['section'];
-			let confId = params['conf'];
 
-			if (confId) {
+			this.client.loadWfSections((data: WfSection[]) => this.section = data.find(s => s.id == sectionId));
-				this.client.loadWfConfiguration(confId, (conf: WfConf) => {
+			this.client.loadWfConfigurations(sectionId, (data: KeyValue[]) => {
-					this.conf = conf;
+				this.wfsDatasource.data = data;
-					if (conf.section) {
+			});
-						this.client.loadWfSections((data: WfSection[]) => this.section = data.find(s => s.id == conf?.section));
-						this.client.loadWfConfigurations(conf.section, (data: KeyValue[]) => this.confs = data);
-					}
-				});
-			} else if (sectionId) {
-				this.client.loadWfSections((data: WfSection[]) => this.section = data.find(s => s.id == sectionId));
-				this.client.loadWfConfigurations(sectionId, (data: KeyValue[]) => {
-					this.confs = data;
-					if (data.length > 0) {
-						this.router.navigate(['/wfs/conf', data[0].k]);
-					}
-				});
-			} else {
-				console.log("One of the following parameters is missing: sectionId or confId");
-			}
 		});
 	}
 
@@ -73,7 +55,11 @@ export class WfConfsComponent implements OnInit {
 		});
 
 		dialogRef.afterClosed().subscribe(result => {
-			if (result) this.router.navigate(['/wfs/conf', result.id]);;
+			if (result && this.section?.id) {
+				this.client.loadWfConfigurations(this.section?.id, (data: KeyValue[]) => {
+					this.wfsDatasource.data = data;
+				});
+			}
 		});
 	}
 }
@@ -83,17 +69,24 @@ export class WfConfsComponent implements OnInit {
 	templateUrl: 'wf-conf-single.html',
 	styleUrls: []
 })
-export class WfConfSingle implements OnInit, OnChanges {
+export class WfSingleConfComponent implements OnInit, OnChanges {
 
 	@Input() conf?: WfConf;
 	prevConfId = '';
 
 	historyEntries: WfHistoryEntry[] = [];
 
-	constructor(public client: WfConfsClient, public dialog: MatDialog, public snackBar: MatSnackBar) { }
+	constructor(public client: WfConfsClient, public route: ActivatedRoute, public router: Router, public dialog: MatDialog, public snackBar: MatSnackBar) {
+	}
 
 	ngOnInit(): void {
-		this.refresh();
+		this.route.params.subscribe(params => {
+			let confId = params['conf'];
+			this.client.loadWfConfiguration(confId, (conf: WfConf) => {
+				this.conf = conf;
+			});
+			this.refresh();
+		});
 	}
 
 	ngOnChanges(changes: SimpleChanges): void {