hazza/yel-dspace-angular
1
0
Fork 0
forked from hazza/dspace-angular
Code Pull Requests Activity

added script parameters & route updates

Browse Source
This commit is contained in:
lotte
2020-03-20 15:56:35 +01:00
committed by Art Lowel
parent 1cb39cef41
commit 7c9c45b7cb
18 changed files with 277 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/process-page/new/new-process.component.html
View File

@@ -1,10 +1,14 @@
<div class="container">
<div class="row">
<div class="col-12 col-md-6">
<ds-scripts-select (select)="selectScript($event)"></ds-scripts-select>
<form>
<ds-scripts-select (select)="selectScript($event)"></ds-scripts-select>
<ds-process-parameters [script]="selectedScript"></ds-process-parameters>
</form>
</div>
<div class="col-12 col-md-6">
<ds-script-help [script]="selectedScript"></ds-script-help>
</div>
</div>
</div>

10
src/app/process-page/new/new-process.component.ts
View File

@@ -1,13 +1,19 @@
import { Component } from '@angular/core';
import { Component, OnInit } from '@angular/core';
import { Script } from '../scripts/script.model';
import { Process } from '../processes/process.model';
@Component({
selector: 'ds-new-process',
templateUrl: './new-process.component.html',
styleUrls: ['./new-process.component.scss'],
})
export class NewProcessComponent {
export class NewProcessComponent implements OnInit {
public selectedScript: Script;
public process: Process;
ngOnInit(): void {
this.process = new Process();
}
selectScript(script: Script) {
this.selectedScript = script;

14
src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.html Normal file
View File

@@ -0,0 +1,14 @@
<div class="form-group">
<select required id="process-parameters"
class="form-control"
name="script"
[(ngModel)]="selectedParameter"
#param="ngModel">
<option [ngValue]="undefined">Add a parameter...</option>
<option *ngFor="let param of parameters">
{{param.nameLong || param.name}}
</option>
</select>
<ds-string-input></ds-string-input>
<button><span class="fas fa-trash"></span></button>
</div>

0
src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.scss Normal file
View File

25
src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.spec.ts Normal file
View File

@@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ParameterSelectComponent } from './parameter-select.component';
describe('ParameterSelectComponent', () => {
let component: ParameterSelectComponent;
let fixture: ComponentFixture<ParameterSelectComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ParameterSelectComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ParameterSelectComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

39
src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.ts Normal file
View File

@@ -0,0 +1,39 @@
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { ProcessParameter } from '../../../processes/process-parameter.model';
import { ScriptParameter } from '../../../scripts/script-parameter.model';
import { hasNoValue } from '../../../../shared/empty.util';
@Component({
selector: 'ds-parameter-select',
templateUrl: './parameter-select.component.html',
styleUrls: ['./parameter-select.component.scss']
})
export class ParameterSelectComponent implements OnInit {
@Input() parameterValue: ProcessParameter;
@Input() parameters: ScriptParameter[];
@Output() changeParameter: EventEmitter<ProcessParameter> = new EventEmitter<ProcessParameter>();
ngOnInit(): void {
if (hasNoValue(this.parameterValue)) {
this.parameterValue = new ProcessParameter();
}
}
get selectedParameter(): string {
return this.parameterValue ? this.parameterValue.name : undefined;
}
set selectedParameter(value: string) {
this.parameterValue.name = value;
this.changeParameter.emit(this.parameterValue);
}
get selectedParameterValue(): any {
return this.parameterValue ? this.parameterValue.value : undefined;
}
set selectedParameterValue(value: any) {
this.parameterValue.value = value;
this.changeParameter.emit(this.parameterValue);
}
}

1
src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.html Normal file
View File

@@ -0,0 +1 @@
<input type="input" class="form-control" id="string-value-input">

0
src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.scss Normal file
View File

25
src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.spec.ts Normal file
View File

@@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { StringValueInputComponent } from './string-value-input.component';
describe('StringValueInputComponent', () => {
let component: StringValueInputComponent;
let fixture: ComponentFixture<StringValueInputComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ StringValueInputComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(StringValueInputComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

15
src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.ts Normal file
View File

@@ -0,0 +1,15 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'ds-string-value-input',
templateUrl: './string-value-input.component.html',
styleUrls: ['./string-value-input.component.scss']
})
export class StringValueInputComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}

8
src/app/process-page/new/process-parameters/process-parameters.component.html Normal file
View File

@@ -0,0 +1,8 @@
<div class="form-group" *ngIf="script">
<label>Parameters</label>
<ds-parameter-select
*ngFor="let value of parameterValues; let i = index;"
[parameters]="script.parameters"
[parameterValue]="value"
(changeParameter)="updateParameter($event, i)"></ds-parameter-select>
</div>

0
src/app/process-page/new/process-parameters/process-parameters.component.scss Normal file
View File

25
src/app/process-page/new/process-parameters/process-parameters.component.spec.ts Normal file
View File

@@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ProcessParametersComponent } from './process-parameters.component';
describe('ProcessParametersComponent', () => {
let component: ProcessParametersComponent;
let fixture: ComponentFixture<ProcessParametersComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ProcessParametersComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ProcessParametersComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

35
src/app/process-page/new/process-parameters/process-parameters.component.ts Normal file
View File

@@ -0,0 +1,35 @@
import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
import { Script } from '../../scripts/script.model';
import { ProcessParameter } from '../../processes/process-parameter.model';
@Component({
selector: 'ds-process-parameters',
templateUrl: './process-parameters.component.html',
styleUrls: ['./process-parameters.component.scss']
})
export class ProcessParametersComponent implements OnChanges {
@Input() script: Script;
parameterValues: ProcessParameter[];
ngOnChanges(changes: SimpleChanges): void {
if (changes.script) {
this.initParameters()
}
}
initParameters() {
this.parameterValues = [];
this.addParameter();
}
updateParameter(processParameter: ProcessParameter, index: number) {
this.parameterValues[index] = processParameter;
if (index === this.parameterValues.length - 1) {
this.addParameter();
}
}
addParameter() {
this.parameterValues = [...this.parameterValues, new ProcessParameter()];
}
}

2
src/app/process-page/new/script-help/script-help.component.html
View File

@@ -3,7 +3,7 @@
<table class="table-border less mt-3">
<tr *ngFor="let param of script?.parameters">
<td>{{param.name}} {{param.nameLong}}{{param.type !== 'boolean' ? '<<' + param.type + '>>' : ''}}</td>
<td>{{param.name}} {{param.nameLong}} {{param.type !== 'boolean' ? '<' + param.type + '>' : ''}}</td>
<td>{{param.description}}</td>
</tr>
</table>

26
src/app/process-page/new/scripts-select/scripts-select.component.html
View File

@@ -1,6 +1,20 @@
<select [(ngModel)]="selectedScript">
<option selected>Choose a script...</option>
<option *ngFor="let script of scripts | async" [ngValue]="script">
{{script.name}}
</option>
</select>
<div class="form-group" *ngIf="scripts$ | async">
<label for="process-script">Script</label>
<select required id="process-script"
class="form-control"
name="script"
[(ngModel)]="selectedScript"
#script="ngModel">
<option [ngValue]="undefined">Choose a script...</option>
<option *ngFor="let script of scripts$ | async" [ngValue]="script.id">
{{script.name}}
</option>
</select>
<div *ngIf="script.invalid && (script.dirty || script.touched)"
class="alert alert-danger">
<div *ngIf="script.errors.required">
Script is required.
</div>
</div>
</div>

63
src/app/process-page/new/scripts-select/scripts-select.component.ts
View File

@@ -1,41 +1,76 @@
import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import { Component, EventEmitter, OnDestroy, OnInit, Output } from '@angular/core';
import { ScriptDataService } from '../../scripts/script-data.service';
import { Script } from '../../scripts/script.model';
import { Observable } from 'rxjs';
import { Observable, Subscription } from 'rxjs';
import { getRemoteDataPayload, getSucceededRemoteData } from '../../../core/shared/operators';
import { PaginatedList } from '../../../core/data/paginated-list';
import { map } from 'rxjs/operators';
import { distinctUntilChanged, map, switchMap, take } from 'rxjs/operators';
import { ActivatedRoute, Params, Router } from '@angular/router';
import { hasValue, hasValueOperator } from '../../../shared/empty.util';
const SCRIPT_QUERY_PARAMETER = 'script';
@Component({
selector: 'ds-scripts-select',
templateUrl: './scripts-select.component.html',
styleUrls: ['./scripts-select.component.scss']
})
export class ScriptsSelectComponent implements OnInit {
export class ScriptsSelectComponent implements OnInit, OnDestroy {
@Output() select: EventEmitter<Script> = new EventEmitter<Script>();
scripts: Observable<Script[]>;
private _selectedScript;
scripts$: Observable<Script[]>;
private _selectedScript: Script;
private routeSub: Subscription;
constructor(
private scriptService: ScriptDataService
private scriptService: ScriptDataService,
private router: Router,
private route: ActivatedRoute,
) {
}
ngOnInit() {
this.scripts = this.scriptService.findAll({ elementsPerPage: Number.MAX_SAFE_INTEGER })
this.scripts$ = this.scriptService.findAll({ elementsPerPage: Number.MAX_SAFE_INTEGER })
.pipe(
getSucceededRemoteData(),
getRemoteDataPayload(),
map((paginatedList: PaginatedList<Script>) => paginatedList.page)
)
);
this.routeSub = this.route.queryParams
.pipe(
map((params: Params) => params[SCRIPT_QUERY_PARAMETER]),
distinctUntilChanged(),
switchMap((id: string) =>
this.scripts$
.pipe(
take(1),
map((scripts) =>
scripts.find((script) => script.id === id)
)
)
)
).subscribe((script: Script) => {
this._selectedScript = script;
this.select.emit(script);
});
}
get selectedScript() {
return this._selectedScript;
get selectedScript(): string {
return this._selectedScript ? this._selectedScript.id : undefined;
}
set selectedScript(value) {
this._selectedScript = value;
this.select.emit(value);
set selectedScript(value: string) {
this.router.navigate([],
{
queryParams: { [SCRIPT_QUERY_PARAMETER]: value },
queryParamsHandling: 'merge'
}
);
}
ngOnDestroy(): void {
if (hasValue(this.routeSub)) {
this.routeSub.unsubscribe();
}
}
}

8
src/app/process-page/process-page.module.ts
View File

@@ -6,6 +6,9 @@ import { ScriptDataService } from './scripts/script-data.service';
import { NewProcessComponent } from './new/new-process.component';
import { ScriptsSelectComponent } from './new/scripts-select/scripts-select.component';
import { ScriptHelpComponent } from './new/script-help/script-help.component';
import { ParameterSelectComponent } from './new/process-parameters/parameter-select/parameter-select.component';
import { ProcessParametersComponent } from './new/process-parameters/process-parameters.component';
import { StringValueInputComponent } from './new/process-parameters/parameter-value-input/string-value-input/string-value-input.component';
@NgModule({
imports: [
@@ -15,7 +18,10 @@ import { ScriptHelpComponent } from './new/script-help/script-help.component';
declarations: [
NewProcessComponent,
ScriptsSelectComponent,
ScriptHelpComponent
ScriptHelpComponent,
ParameterSelectComponent,
ProcessParametersComponent,
StringValueInputComponent,
],
entryComponents: [
],