contexts
This commit is contained in:
parent
1cb603a83c
commit
f47cd2a8e7
|
@ -5,7 +5,7 @@ import { ProtocolsComponent } from './protocols/protocols.component';
|
||||||
import { WfHistoryComponent } from './wf-history/wf-history.component';
|
import { WfHistoryComponent } from './wf-history/wf-history.component';
|
||||||
import { ResourcesComponent } from './resources/resources.component';
|
import { ResourcesComponent } from './resources/resources.component';
|
||||||
import { VocabulariesComponent, VocabularyEditorComponent } from './vocabularies/vocabularies.component';
|
import { VocabulariesComponent, VocabularyEditorComponent } from './vocabularies/vocabularies.component';
|
||||||
import { ContextEditorComponent, ContextsComponent } from './contexts/contexts.component';
|
import { ContextViewerComponent, ContextsComponent } from './contexts/contexts.component';
|
||||||
|
|
||||||
const routes: Routes = [
|
const routes: Routes = [
|
||||||
{ path:"info" , component:InfoComponent },
|
{ path:"info" , component:InfoComponent },
|
||||||
|
@ -14,7 +14,7 @@ const routes: Routes = [
|
||||||
{ path:"adv_resources/vocabulary", component:VocabulariesComponent },
|
{ path:"adv_resources/vocabulary", component:VocabulariesComponent },
|
||||||
{ path:"adv_resources/protocol" , component:ProtocolsComponent },
|
{ path:"adv_resources/protocol" , component:ProtocolsComponent },
|
||||||
{ path:"wf_history" , component:WfHistoryComponent },
|
{ path:"wf_history" , component:WfHistoryComponent },
|
||||||
{ path:"ctx_editor" , component:ContextEditorComponent },
|
{ path:"ctx_viewer" , component:ContextViewerComponent },
|
||||||
{ path:"voc_editor" , component:VocabularyEditorComponent },
|
{ path:"voc_editor" , component:VocabularyEditorComponent },
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
|
@ -28,7 +28,7 @@ import { MatDialogModule } from '@angular/material/dialog';
|
||||||
import { MatSortModule } from '@angular/material/sort';
|
import { MatSortModule } from '@angular/material/sort';
|
||||||
import { ResourcesComponent, ResContentDialog, ResCreateNewDialog, ResMetadataDialog } from './resources/resources.component'
|
import { ResourcesComponent, ResContentDialog, ResCreateNewDialog, ResMetadataDialog } from './resources/resources.component'
|
||||||
import { MatSnackBarModule } from '@angular/material/snack-bar';
|
import { MatSnackBarModule } from '@angular/material/snack-bar';
|
||||||
import { ContextsComponent, ContextEditorComponent, ContextDialog } from './contexts/contexts.component';
|
import { ContextsComponent, ContextViewerComponent, ContextParamsDialog } from './contexts/contexts.component';
|
||||||
import { VocabulariesComponent, VocabularyEditorComponent } from './vocabularies/vocabularies.component';
|
import { VocabulariesComponent, VocabularyEditorComponent } from './vocabularies/vocabularies.component';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
|
@ -46,8 +46,8 @@ import { VocabulariesComponent, VocabularyEditorComponent } from './vocabularies
|
||||||
ResCreateNewDialog,
|
ResCreateNewDialog,
|
||||||
ResMetadataDialog,
|
ResMetadataDialog,
|
||||||
ContextsComponent,
|
ContextsComponent,
|
||||||
ContextEditorComponent,
|
ContextViewerComponent,
|
||||||
ContextDialog,
|
ContextParamsDialog,
|
||||||
VocabulariesComponent,
|
VocabulariesComponent,
|
||||||
VocabulariesComponent
|
VocabulariesComponent
|
||||||
],
|
],
|
||||||
|
|
|
@ -1,35 +0,0 @@
|
||||||
<form [formGroup]="contextForm" (ngSubmit)="onSubmit()">
|
|
||||||
|
|
||||||
<h1 mat-dialog-title *ngIf="mode == 'new'">New context</h1>
|
|
||||||
<h1 mat-dialog-title *ngIf="mode != 'new'">Edit context</h1>
|
|
||||||
|
|
||||||
<div mat-dialog-content>
|
|
||||||
|
|
||||||
<mat-form-field appearance="fill" style="width: 100%;">
|
|
||||||
<mat-label>ID</mat-label>
|
|
||||||
<input matInput formControlName="id" required [readonly]="mode != 'new'" />
|
|
||||||
<mat-error *ngIf="contextForm.get('id')?.invalid">This field is <strong>required</strong></mat-error>
|
|
||||||
</mat-form-field>
|
|
||||||
|
|
||||||
<mat-form-field appearance="fill" style="width: 100%;">
|
|
||||||
<mat-label>Label</mat-label>
|
|
||||||
<input matInput formControlName="label" required />
|
|
||||||
<mat-error *ngIf="contextForm.get('label')?.invalid">This field is <strong>required</strong></mat-error>
|
|
||||||
</mat-form-field>
|
|
||||||
|
|
||||||
<mat-form-field appearance="fill" style="width: 100%;">
|
|
||||||
<mat-label>Type</mat-label>
|
|
||||||
<input matInput formControlName="type" required />
|
|
||||||
<mat-error *ngIf="contextForm.get('type')?.invalid">This field is <strong>required</strong></mat-error>
|
|
||||||
</mat-form-field>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div mat-dialog-actions>
|
|
||||||
<button mat-stroked-button color="primary" type="submit" [disabled]="!contextForm.valid">Submit</button>
|
|
||||||
<button mat-stroked-button color="primary" mat-dialog-close>Close</button>
|
|
||||||
<mat-error *ngIf="contextForm.errors?.['serverError']">
|
|
||||||
{{ contextForm.errors?.['serverError'] }}
|
|
||||||
</mat-error>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</form>
|
|
|
@ -0,0 +1,16 @@
|
||||||
|
<h1 mat-dialog-title>Parameters</h1>
|
||||||
|
|
||||||
|
<div mat-dialog-content>
|
||||||
|
<p *ngIf="!data || data.length == 0">No parameters</p>
|
||||||
|
|
||||||
|
<div *ngFor="let p of data">
|
||||||
|
<mat-form-field appearance="fill" style="width: 100%; font-size: 0.8em;">
|
||||||
|
<mat-label>{{p.name}}</mat-label>
|
||||||
|
<input matInput required readonly value="{{p.value}}" />
|
||||||
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div mat-dialog-actions>
|
||||||
|
<button mat-stroked-button color="primary" mat-dialog-close>Close</button>
|
||||||
|
</div>
|
|
@ -1,19 +1,16 @@
|
||||||
<h2>Contexts</h2>
|
<h2>Contexts</h2>
|
||||||
|
|
||||||
<button mat-stroked-button color="primary" (click)="openNewDialog()">create a new context</button>
|
|
||||||
|
|
||||||
<mat-form-field style="width: 100%; margin-top: 10px;">
|
<mat-form-field style="width: 100%; margin-top: 10px;">
|
||||||
<mat-label>Filter</mat-label>
|
<mat-label>Filter</mat-label>
|
||||||
<input matInput (keyup)="applyFilter($event)" placeholder="Filter..." #input />
|
<input matInput (keyup)="applyFilter($event)" placeholder="Filter..." #input />
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
|
|
||||||
|
|
||||||
<table mat-table [dataSource]="contextsDatasource" matSort class="mat-elevation-z8">
|
<table mat-table [dataSource]="contextsDatasource" matSort class="mat-elevation-z8">
|
||||||
|
|
||||||
<ng-container matColumnDef="id">
|
<ng-container matColumnDef="id">
|
||||||
<th mat-header-cell *matHeaderCellDef style="width: 20%;" mat-sort-header sortActionDescription="Sort by Context ID"> Id </th>
|
<th mat-header-cell *matHeaderCellDef style="width: 20%;" mat-sort-header sortActionDescription="Sort by Context ID"> Id </th>
|
||||||
<td mat-cell *matCellDef="let element">
|
<td mat-cell *matCellDef="let element">
|
||||||
<a [routerLink]="['/ctx_editor']" [queryParams]="{id: element.id}">{{element.id}}</a>
|
<a [routerLink]="['/ctx_viewer']" [queryParams]="{id: element.id}">{{element.id}}</a>
|
||||||
</td>
|
</td>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
|
|
||||||
|
@ -28,10 +25,9 @@
|
||||||
</ng-container>
|
</ng-container>
|
||||||
|
|
||||||
<ng-container matColumnDef="buttons">
|
<ng-container matColumnDef="buttons">
|
||||||
<th mat-header-cell *matHeaderCellDef style="width: 30%;"></th>
|
<th mat-header-cell *matHeaderCellDef style="text-align: right;">Parameters</th>
|
||||||
<td mat-cell *matCellDef="let element" class="table-buttons">
|
<td mat-cell *matCellDef="let element" class="table-buttons">
|
||||||
<button mat-stroked-button color="primary" (click)="openEditDialog(element)">edit</button>
|
<button mat-stroked-button color="primary" (click)="openEditDialog(element)">show</button>
|
||||||
<button mat-stroked-button color="warn" (click)="deleteContext(element)">delete</button>
|
|
||||||
</td>
|
</td>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
|
|
||||||
|
|
|
@ -41,27 +41,13 @@ export class ContextsComponent implements AfterViewInit ,OnInit {
|
||||||
const filterValue = (event.target as HTMLInputElement).value.trim().toLowerCase();
|
const filterValue = (event.target as HTMLInputElement).value.trim().toLowerCase();
|
||||||
this.contextsDatasource.filter = filterValue;
|
this.contextsDatasource.filter = filterValue;
|
||||||
}
|
}
|
||||||
|
|
||||||
openNewDialog(): void {
|
|
||||||
const dialogRef = this.contextDialog.open(ContextDialog, {
|
|
||||||
data: {},
|
|
||||||
width: '80%'
|
|
||||||
});
|
|
||||||
|
|
||||||
dialogRef.afterClosed().subscribe(result => {
|
|
||||||
if (result) this.reload();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
openEditDialog(context: Context): void {
|
openEditDialog(context: Context): void {
|
||||||
const dialogRef = this.contextDialog.open(ContextDialog, {
|
const dialogRef = this.contextDialog.open(ContextParamsDialog, {
|
||||||
data: context,
|
data: context.parameters,
|
||||||
width: '80%'
|
width: '80%'
|
||||||
});
|
});
|
||||||
|
|
||||||
dialogRef.afterClosed().subscribe(result => {
|
|
||||||
if (result) this.reload();
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
deleteContext(ctx:Context) {
|
deleteContext(ctx:Context) {
|
||||||
|
@ -74,31 +60,12 @@ export class ContextsComponent implements AfterViewInit ,OnInit {
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'context-dialog',
|
selector: 'context-dialog',
|
||||||
templateUrl: 'context-dialog.html',
|
templateUrl: 'context-params.html',
|
||||||
styleUrls: ['./contexts.component.css']
|
styleUrls: ['./contexts.component.css']
|
||||||
})
|
})
|
||||||
export class ContextDialog {
|
export class ContextParamsDialog {
|
||||||
|
|
||||||
mode:string = 'new';
|
constructor(public dialogRef: MatDialogRef<ContextParamsDialog>, @Inject(MAT_DIALOG_DATA) public data: any, public service: ISService) {
|
||||||
|
|
||||||
contextForm = new FormGroup({
|
|
||||||
id: new FormControl(''),
|
|
||||||
label: new FormControl(''),
|
|
||||||
type: new FormControl(''),
|
|
||||||
});
|
|
||||||
|
|
||||||
constructor(public dialogRef: MatDialogRef<ContextDialog>, @Inject(MAT_DIALOG_DATA) public data: any, public service: ISService) {
|
|
||||||
if (data && data.id) {
|
|
||||||
this.mode = 'update';
|
|
||||||
this.contextForm.get('id')?.setValue(data.id);
|
|
||||||
this.contextForm.get('label')?.setValue(data.label);
|
|
||||||
this.contextForm.get('type')?.setValue(data.type);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onSubmit():void {
|
|
||||||
const res = Object.assign({}, this.data, this.contextForm.value);
|
|
||||||
this.service.addContext(res, (data: void) => this.dialogRef.close(1), this.contextForm);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onNoClick(): void {
|
onNoClick(): void {
|
||||||
|
@ -108,9 +75,9 @@ export class ContextDialog {
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-context-editor',
|
selector: 'app-context-editor',
|
||||||
templateUrl: './context-editor.component.html',
|
templateUrl: './context-viewer.component.html',
|
||||||
styleUrls: ['./contexts.component.css']
|
styleUrls: ['./contexts.component.css']
|
||||||
})
|
})
|
||||||
export class ContextEditorComponent {
|
export class ContextViewerComponent {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -7,7 +7,6 @@
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background-color:cornflowerblue;
|
background-color:cornflowerblue;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.collapse-buttons { text-align: right; }
|
.collapse-buttons { text-align: right; }
|
||||||
|
|
Loading…
Reference in New Issue