Commit aee4a6dc authored by Alexander Philipp Nowosad's avatar Alexander Philipp Nowosad
Browse files

Add development method selection form

parent d7276d9a
......@@ -92,30 +92,9 @@
</button>
</div>
<div class="modal-body">
<div class="text-muted pt-3">
<form [formGroup]="selectDevelopmentMethodForm"
(ngSubmit)="selectDevelopmentMethod(modalElement, selectDevelopmentMethodForm); resetSelectDevelopmentMethodModal()">
<div class="form-group row">
<label for="developmentMethodSelector" class="col-sm-4 col-form-label">Method Building Block</label>
<div class="col-sm-8">
<select id="developmentMethodSelector" formControlName="developmentMethodId" class="form-control">
<option *ngIf="!validDevelopmentMethods">Loading...</option>
<option *ngIf="validDevelopmentMethods && validDevelopmentMethods.length === 0">
No fitting Method Building Blocks
</option>
<option *ngFor="let dm of validDevelopmentMethods" [value]="dm._id">{{ dm.name }}</option>
</select>
</div>
</div>
<div class="form-group row">
<div class="col-sm-12">
<button type="submit" class="btn btn-sm btn-dark btn-block" [disabled]="!selectDevelopmentMethodForm.valid">
Select Method Building Block
</button>
</div>
</div>
</form>
</div>
<app-development-methods-selection-form [contextSituationalFactors]="bmProcess.situationalFactors"
[developmentMethods]="validDevelopmentMethods"
(selectDevelopmentMethod)="selectDevelopmentMethod(modalElement, $event); resetSelectDevelopmentMethodModal()"></app-development-methods-selection-form>
</div>
</ng-template>
......
......@@ -15,7 +15,7 @@ import { BmProcess } from '../../development-process-registry/bm-process';
import BpmnModeler from 'bpmn-js/lib/Modeler';
import { BpmnService } from '../shared/bpmn.service';
import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { FormBuilder, FormGroup } from '@angular/forms';
import { ProcessPatternService } from '../shared/process-pattern.service';
import { DevelopmentMethod } from '../../development-process-registry/development-method';
import { DevelopmentMethodService } from '../../development-process-registry/development-method.service';
......@@ -37,9 +37,6 @@ export class BmProcessDiagramComponent implements DiagramComponentInterface, OnI
private modeler: BpmnModeler;
validDevelopmentMethods: DevelopmentMethod[] = null;
selectDevelopmentMethodForm: FormGroup = this.fb.group({
developmentMethodId: [null, Validators.required],
});
missingWarnings: string[] = [];
lowWarnings: string[] = [];
......@@ -166,30 +163,30 @@ export class BmProcessDiagramComponent implements DiagramComponentInterface, OnI
}
openSelectDevelopmentMethodModal(taskElement) {
this.selectDevelopmentMethodForm.get('developmentMethodId').disable();
this.modalElement = taskElement;
const types = this.bpmnService.getTypesOfActivity(this.modeler, taskElement.id);
this.developmentMethodService.getValidDevelopmentMethods(
types.neededType, types.forbiddenType,
).then((developmentMethods) => {
this.validDevelopmentMethods = developmentMethods.docs;
if (developmentMethods.docs.length > 0) {
this.selectDevelopmentMethodForm.get('developmentMethodId').enable();
});
this.modalReference = this.modalService.open(this.selectDevelopmentMethodModal, {
size: 'lg', beforeDismiss: () => {
this.validDevelopmentMethods = null;
return true;
}
});
this.modalReference = this.modalService.open(this.selectDevelopmentMethodModal, {size: 'lg'});
}
resetSelectDevelopmentMethodModal() {
this.selectDevelopmentMethodForm.reset();
this.validDevelopmentMethods = null;
this.modalReference.close();
}
selectDevelopmentMethod(taskElement, selectDevelopmentMethodForm: FormGroup) {
this.developmentMethodService.getDevelopmentMethod(selectDevelopmentMethodForm.value.developmentMethodId).then((developmentMethod) => {
this.bpmnService.selectDevelopmentMethodForProcessTask(this.modeler, taskElement, developmentMethod);
this.bmProcess.addDecision(taskElement.id, developmentMethod);
selectDevelopmentMethod(taskElement, developmentMethod: DevelopmentMethod) {
this.developmentMethodService.getDevelopmentMethod(developmentMethod._id).then((method) => {
this.bpmnService.selectDevelopmentMethodForProcessTask(this.modeler, taskElement, method);
this.bmProcess.addDecision(taskElement.id, method);
this.saveDiagram(this.bmProcess.decisions);
});
}
......
<div class="d-flex align-items-baseline">
<h5>{{developmentMethod.name}}</h5>
<button (click)="selectDevelopmentMethod.emit(developmentMethod)" type="button"
class="btn btn-primary ml-auto btn-xs">
Select
</button>
</div>
<p>{{developmentMethod.description}}</p>
<app-situational-factors-overview [provided]="provided" [needed]="needed"></app-situational-factors-overview>
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { DevelopmentMethodSelectionFormComponent } from './development-method-selection-form.component';
describe('DevelopmentMethodSelectionFormComponent', () => {
let component: DevelopmentMethodSelectionFormComponent;
let fixture: ComponentFixture<DevelopmentMethodSelectionFormComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ DevelopmentMethodSelectionFormComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(DevelopmentMethodSelectionFormComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
import { DevelopmentMethod } from '../../development-process-registry/development-method';
import { SituationalFactor } from '../../development-process-registry/situational-factor';
@Component({
selector: 'app-development-method-selection-form',
templateUrl: './development-method-selection-form.component.html',
styleUrls: ['./development-method-selection-form.component.css']
})
export class DevelopmentMethodSelectionFormComponent implements OnChanges {
@Input() developmentMethod: DevelopmentMethod;
@Input() contextSituationalFactors: { list: string, element: SituationalFactor }[] = [];
@Output() selectDevelopmentMethod = new EventEmitter<DevelopmentMethod>();
needed: SituationalFactor[] = [];
provided: SituationalFactor[] = [];
ngOnChanges(changes: SimpleChanges) {
if (changes.contextSituationalFactors) {
this.needed = changes.contextSituationalFactors.currentValue.map((factor) => factor.element);
}
if (changes.developmentMethod) {
this.provided = changes.developmentMethod.currentValue.situationalFactors.map((factor) => factor.element);
}
}
}
<h5>Building Blocks</h5>
<div *ngIf="!developmentMethods" class="alert alert-info">
Loading...
</div>
<div *ngIf="developmentMethods && developmentMethods.length === 0" class="alert alert-info">
No fitting Method Building Blocks
</div>
<ul *ngIf="developmentMethods && developmentMethods.length > 0" class="list-group shadow-sm">
<li *ngFor="let developmentMethod of developmentMethods" class="list-group-item">
<app-development-method-selection-form
[contextSituationalFactors]="contextSituationalFactors"
[developmentMethod]="developmentMethod"
(selectDevelopmentMethod)="selectDevelopmentMethod.emit($event)"></app-development-method-selection-form>
</li>
</ul>
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { DevelopmentMethodsSelectionFormComponent } from './development-methods-selection-form.component';
describe('DevelopmentMethodsSelectionFormComponent', () => {
let component: DevelopmentMethodsSelectionFormComponent;
let fixture: ComponentFixture<DevelopmentMethodsSelectionFormComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ DevelopmentMethodsSelectionFormComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(DevelopmentMethodsSelectionFormComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { DevelopmentMethod } from '../../development-process-registry/development-method';
import { SituationalFactor } from '../../development-process-registry/situational-factor';
@Component({
selector: 'app-development-methods-selection-form',
templateUrl: './development-methods-selection-form.component.html',
styleUrls: ['./development-methods-selection-form.component.css']
})
export class DevelopmentMethodsSelectionFormComponent {
@Input() developmentMethods: DevelopmentMethod[];
@Input() contextSituationalFactors: { list: string, element: SituationalFactor }[] = [];
@Output() selectDevelopmentMethod = new EventEmitter<DevelopmentMethod>();
}
......@@ -43,6 +43,10 @@ import { StakeholdersGroupInfoComponent } from './stakeholders-group-info/stakeh
import { ToolsInfoComponent } from './tools-info/tools-info.component';
import { SituationalFactorsOverviewComponent } from './situational-factors-overview/situational-factors-overview.component';
import { PatternInfoComponent } from './pattern-info/pattern-info.component';
import { DevelopmentMethodSelectionFormComponent } from './development-method-selection-form/development-method-selection-form.component';
import {
DevelopmentMethodsSelectionFormComponent
} from './development-methods-selection-form/development-methods-selection-form.component';
@NgModule({
......@@ -87,6 +91,8 @@ import { PatternInfoComponent } from './pattern-info/pattern-info.component';
ToolsInfoComponent,
SituationalFactorsOverviewComponent,
PatternInfoComponent,
DevelopmentMethodSelectionFormComponent,
DevelopmentMethodsSelectionFormComponent,
],
entryComponents: [ConfirmLeaveModalComponent],
imports: [
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment