Commit 5df91352 authored by Alexander Philipp Nowosad's avatar Alexander Philipp Nowosad
Browse files

Add process pattern selection form

parent 01d8aa6e
Pipeline #133875 failed with stages
in 8 seconds
<ng-template #addProcessPatternModal let-d="dismiss">
<ng-template #addProcessPatternModal let-d="dismiss" let-c="close">
<div class="modal-header">
<h4 class="modal-title">Add Method Pattern</h4>
<button type="button" class="close" aria-label="Close" (click)="d()">
......@@ -6,14 +6,13 @@
</button>
</div>
<div class="modal-body">
<div class="text-muted pt-3">
<app-select-process-pattern-form [processPatterns]="modalProcessPatterns"
(submitProcessPatternForm)="addProcessPattern($event)"></app-select-process-pattern-form>
</div>
<app-process-patterns-selection-form [processPatterns]="modalProcessPatterns"
[contextSituationalFactors]="bmProcess.situationalFactors"
(selectProcessPattern)="addProcessPattern($event); c()"></app-process-patterns-selection-form>
</div>
</ng-template>
<ng-template #selectProcessPatternModal let-d="dismiss">
<ng-template #selectProcessPatternModal let-d="dismiss" let-c="close">
<div class="modal-header">
<h4 class="modal-title">Select Method Pattern</h4>
<button type="button" class="close" aria-label="Close" (click)="d()">
......@@ -21,10 +20,9 @@
</button>
</div>
<div class="modal-body">
<div class="text-muted pt-3">
<app-select-process-pattern-form [processPatterns]="modalProcessPatterns"
(submitProcessPatternForm)="selectProcessPattern(modalElement, $event); d()"></app-select-process-pattern-form>
</div>
<app-process-patterns-selection-form [processPatterns]="modalProcessPatterns"
[contextSituationalFactors]="bmProcess.situationalFactors"
(selectProcessPattern)="selectProcessPattern(modalElement, $event); c()"></app-process-patterns-selection-form>
</div>
</ng-template>
......
import { BmProcessDiagramComponent } from './bm-process-diagram.component';
import { createComponentFactory, Spectator } from '@ngneat/spectator';
import { MockComponent } from 'ng-mocks';
import { SelectProcessPatternFormComponent } from '../select-process-pattern-form/select-process-pattern-form.component';
import { ReactiveFormsModule } from '@angular/forms';
import { DevelopmentMethodService } from '../../development-process-registry/development-method.service';
import { ProcessPatternService } from '../shared/process-pattern.service';
......@@ -10,9 +8,7 @@ describe('BmProcessDiagramComponent', () => {
let spectator: Spectator<BmProcessDiagramComponent>;
const createComponent = createComponentFactory({
component: BmProcessDiagramComponent,
declarations: [
MockComponent(SelectProcessPatternFormComponent),
],
declarations: [],
imports: [ReactiveFormsModule],
mocks: [DevelopmentMethodService, ProcessPatternService],
});
......
......@@ -15,7 +15,6 @@ 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 } 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';
......@@ -62,7 +61,6 @@ export class BmProcessDiagramComponent implements DiagramComponentInterface, OnI
constructor(
private bpmnService: BpmnService,
private developmentMethodService: DevelopmentMethodService,
private fb: FormBuilder,
private modalService: NgbModal,
private processPatternService: ProcessPatternService,
) {
......@@ -114,21 +112,21 @@ export class BmProcessDiagramComponent implements DiagramComponentInterface, OnI
}
openAddProcessPatternModal(startingElement) {
this.modalProcessPatterns = null;
this.modalElement = startingElement;
this.processPatternService.getValidProcessPatterns(
[{list: 'initialisation', element: null}], [],
).then(list => {
this.modalProcessPatterns = list.docs;
this.modalElement = startingElement;
this.modalReference = this.modalService.open(this.addProcessPatternModal, {size: 'lg'});
}).catch(
error => console.log('OpenAddProcessPatternModal: ' + error)
);
this.modalReference = this.modalService.open(this.addProcessPatternModal, {size: 'lg'});
}
addProcessPattern(addPatternForm: FormGroup) {
this.modalReference.close();
this.processPatternService.getProcessPattern(addPatternForm.value.processPatternId).then((processPattern) => {
this.bpmnService.appendBpmn(this.modeler, processPattern, this.modalElement).then(() => {
addProcessPattern(processPattern: ProcessPattern) {
this.processPatternService.getProcessPattern(processPattern._id).then((pattern) => {
this.bpmnService.appendBpmn(this.modeler, pattern, this.modalElement).then(() => {
this.modeler.get('selection').deselect(this.modalElement);
this.saveDiagram();
}).catch(
......@@ -208,22 +206,22 @@ export class BmProcessDiagramComponent implements DiagramComponentInterface, OnI
}
openSelectProcessPatternModal(callActivityElement) {
this.modalProcessPatterns = null;
this.modalElement = callActivityElement;
const types = this.bpmnService.getTypesOfActivity(this.modeler, callActivityElement.id);
this.processPatternService.getValidProcessPatterns(
[...types.neededType, {list: 'generic', element: null}], types.forbiddenType,
).then(list => {
this.modalProcessPatterns = list.docs;
this.modalElement = callActivityElement;
this.modalReference = this.modalService.open(this.selectProcessPatternModal, {size: 'lg'});
}).catch(
error => console.log('OpenSelectProcessPatternModal: ' + error)
);
this.modalReference = this.modalService.open(this.selectProcessPatternModal, {size: 'lg'});
}
selectProcessPattern(callActivityElement, selectProcessPatternForm: FormGroup) {
this.modalReference.close();
this.processPatternService.getProcessPattern(selectProcessPatternForm.value.processPatternId).then((processPattern) => {
this.bpmnService.insertProcessPatternIntoCallActivity(this.modeler, callActivityElement, processPattern).then(() => {
selectProcessPattern(callActivityElement, processPattern: ProcessPattern) {
this.processPatternService.getProcessPattern(processPattern._id).then((pattern) => {
this.bpmnService.insertProcessPatternIntoCallActivity(this.modeler, callActivityElement, pattern).then(() => {
if (callActivityElement.businessObject.method) {
this.bmProcess.removeDecision(callActivityElement.id);
this.saveDiagram(this.bmProcess.decisions);
......
......@@ -10,7 +10,6 @@ import { ProcessPatternComponent } from './process-pattern/process-pattern.compo
import { ProcessPatternDiagramComponent } from './process-pattern-diagram/process-pattern-diagram.component';
import { ProcessPatternTypesFormComponent } from './process-pattern-types-form/process-pattern-types-form.component';
import { ProcessPatternsComponent } from './process-patterns/process-patterns.component';
import { SelectProcessPatternFormComponent } from './select-process-pattern-form/select-process-pattern-form.component';
import { ConfirmLeaveModalComponent } from './confirm-leave-modal/confirm-leave-modal.component';
import { SituationalFactorsComponent } from './situational-factors/situational-factors.component';
import { SituationalFactorComponent } from './situational-factor/situational-factor.component';
......@@ -47,6 +46,8 @@ import { DevelopmentMethodSelectionFormComponent } from './development-method-se
import {
DevelopmentMethodsSelectionFormComponent
} from './development-methods-selection-form/development-methods-selection-form.component';
import { ProcessPatternSelectionFormComponent } from './process-pattern-selection-form/process-pattern-selection-form.component';
import { ProcessPatternsSelectionFormComponent } from './process-patterns-selection-form/process-patterns-selection-form.component';
@NgModule({
......@@ -60,7 +61,6 @@ import {
ProcessPatternDiagramComponent,
ProcessPatternTypesFormComponent,
ProcessPatternsComponent,
SelectProcessPatternFormComponent,
ConfirmLeaveModalComponent,
SituationalFactorsComponent,
SituationalFactorComponent,
......@@ -93,6 +93,8 @@ import {
PatternInfoComponent,
DevelopmentMethodSelectionFormComponent,
DevelopmentMethodsSelectionFormComponent,
ProcessPatternSelectionFormComponent,
ProcessPatternsSelectionFormComponent,
],
entryComponents: [ConfirmLeaveModalComponent],
imports: [
......
<div class="d-flex align-items-baseline">
<h5>{{processPattern.name}}</h5>
<button (click)="selectProcessPattern.emit(processPattern)" type="button"
class="btn btn-primary ml-auto btn-xs">
Select
</button>
</div>
<p>{{processPattern.description}}</p>
<app-situational-factors-overview [provided]="provided" [needed]="needed"></app-situational-factors-overview>
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ProcessPatternSelectionFormComponent } from './process-pattern-selection-form.component';
describe('ProcessPatternSelectionFormComponent', () => {
let component: ProcessPatternSelectionFormComponent;
let fixture: ComponentFixture<ProcessPatternSelectionFormComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ProcessPatternSelectionFormComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ProcessPatternSelectionFormComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
import { ProcessPattern } from '../shared/process-pattern';
import { SituationalFactor } from '../../development-process-registry/situational-factor';
@Component({
selector: 'app-process-pattern-selection-form',
templateUrl: './process-pattern-selection-form.component.html',
styleUrls: ['./process-pattern-selection-form.component.css']
})
export class ProcessPatternSelectionFormComponent implements OnChanges {
@Input() processPattern: ProcessPattern;
@Input() contextSituationalFactors: { list: string, element: SituationalFactor }[] = [];
@Output() selectProcessPattern = new EventEmitter<ProcessPattern>();
needed: SituationalFactor[] = [];
provided: SituationalFactor[] = [];
ngOnChanges(changes: SimpleChanges) {
if (changes.contextSituationalFactors) {
this.needed = changes.contextSituationalFactors.currentValue.map((factor) => factor.element);
}
if (changes.processPattern) {
this.provided = changes.processPattern.currentValue.situationalFactors.map((factor) => factor.element);
}
}
}
<form [formGroup]="searchForm" class="form-inline">
<label class="sr-only" for="search">Search</label>
<input formControlName="search" type="text" class="form-control mb-2 mr-sm-2" id="search" placeholder="Search">
</form>
<h5>Method Patterns</h5>
<div *ngIf="!processPatterns" class="alert alert-info">
Loading...
</div>
<div *ngIf="processPatterns && processPatterns.length === 0" class="alert alert-info">
No fitting Method Pattern
</div>
<div
*ngIf="processPatterns && processPatterns.length > 0 && filteredProcessPatterns && filteredProcessPatterns.length === 0">
No fitting Method Pattern for search {{searchForm.value.search}}.
</div>
<ul *ngIf="filteredProcessPatterns && filteredProcessPatterns.length > 0" class="list-group shadow-sm">
<li *ngFor="let processPattern of filteredProcessPatterns" class="list-group-item">
<app-process-pattern-selection-form
[contextSituationalFactors]="contextSituationalFactors"
[processPattern]="processPattern"
(selectProcessPattern)="selectProcessPattern.emit($event)"></app-process-pattern-selection-form>
</li>
</ul>
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ProcessPatternsSelectionFormComponent } from './process-patterns-selection-form.component';
describe('ProcessPatternsSelectionFormComponent', () => {
let component: ProcessPatternsSelectionFormComponent;
let fixture: ComponentFixture<ProcessPatternsSelectionFormComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ProcessPatternsSelectionFormComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ProcessPatternsSelectionFormComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges } from '@angular/core';
import { SituationalFactor } from '../../development-process-registry/situational-factor';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Subscription } from 'rxjs';
import { ProcessPattern } from '../shared/process-pattern';
@Component({
selector: 'app-process-patterns-selection-form',
templateUrl: './process-patterns-selection-form.component.html',
styleUrls: ['./process-patterns-selection-form.component.css']
})
export class ProcessPatternsSelectionFormComponent implements OnInit, OnChanges, OnDestroy {
@Input() processPatterns: ProcessPattern[];
@Input() contextSituationalFactors: { list: string, element: SituationalFactor }[] = [];
@Output() selectProcessPattern = new EventEmitter<ProcessPattern>();
searchForm: FormGroup = this.fb.group({
search: [''],
});
filteredProcessPatterns: ProcessPattern[];
private searchSubscription: Subscription;
constructor(
private fb: FormBuilder,
) {
}
ngOnInit() {
this.searchSubscription = this.searchForm.get('search').valueChanges.subscribe((value) => {
if (value) {
value = value.toLowerCase();
this.filteredProcessPatterns = this.processPatterns.filter((pattern) => pattern.name.toLowerCase().includes(value));
} else {
this.filteredProcessPatterns = this.processPatterns;
}
});
}
ngOnChanges(changes: SimpleChanges) {
if (changes.processPatterns) {
this.searchForm.reset();
}
}
ngOnDestroy() {
if (this.searchSubscription) {
this.searchSubscription.unsubscribe();
}
}
}
<form [formGroup]="addProcessPatternForm" (ngSubmit)="submitForm()">
<div class="form-group row">
<label for="processPatternSelector" class="col-sm-4 col-form-label">Method Pattern</label>
<div class="col-sm-8">
<select id="processPatternSelector" formControlName="processPatternId" class="form-control">
<option *ngFor="let processPattern of processPatterns"
[value]="processPattern._id">{{ processPattern.name }}</option>
<option *ngIf="processPatterns.length === 0">No fitting Method Pattern was found</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]="!addProcessPatternForm.valid">
Add Method Pattern
</button>
</div>
</div>
</form>
import { SelectProcessPatternFormComponent } from './select-process-pattern-form.component';
import { createComponentFactory, Spectator } from '@ngneat/spectator';
import { ReactiveFormsModule } from '@angular/forms';
describe('SelectProcessPatternFormComponent', () => {
let spectator: Spectator<SelectProcessPatternFormComponent>;
const createComponent = createComponentFactory({
component: SelectProcessPatternFormComponent,
declarations: [],
imports: [ReactiveFormsModule],
});
beforeEach(() => spectator = createComponent({
props: {
processPatterns: [],
}
}));
it('should create', () => {
expect(spectator.component).toBeTruthy();
});
});
import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ProcessPattern } from '../shared/process-pattern';
@Component({
selector: 'app-select-process-pattern-form',
templateUrl: './select-process-pattern-form.component.html',
styleUrls: ['./select-process-pattern-form.component.css']
})
export class SelectProcessPatternFormComponent implements OnChanges {
@Input() processPatterns: ProcessPattern[];
@Output() submitProcessPatternForm = new EventEmitter<FormGroup>();
addProcessPatternForm: FormGroup = this.fb.group({
processPatternId: [null, Validators.required],
});
constructor(
private fb: FormBuilder,
) {
}
ngOnChanges(changes: SimpleChanges) {
if (changes.processPatterns) {
const processPatterns = changes.processPatterns.currentValue;
if (processPatterns && processPatterns.length > 0) {
this.addProcessPatternForm.get('processPatternId').enable();
} else {
this.addProcessPatternForm.get('processPatternId').disable();
}
}
}
submitForm() {
this.submitProcessPatternForm.emit(this.addProcessPatternForm);
}
}
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