@valtimo/migration 4.15.3-next-main.16 → 4.17.0

package/fesm2015/valtimo-migration.js

@@ -6,360 +6,360 @@ import { AlertService, WidgetModule } from '@valtimo/components';
 import { RouterModule } from '@angular/router';
 import { CommonModule } from '@angular/common';
 import { AuthGuardService } from '@valtimo/security';
-import { ROLE_ADMIN } from '@valtimo/contract';
+import { ROLE_ADMIN } from '@valtimo/config';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { TranslateModule } from '@ngx-translate/core';
 
-/*
- * Copyright 2015-2020 Ritense BV, the Netherlands.
- *
- * Licensed under EUPL, Version 1.2 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" basis,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-class MigrationService {
-    constructor() { }
-}
-MigrationService.ɵprov = ɵɵdefineInjectable({ factory: function MigrationService_Factory() { return new MigrationService(); }, token: MigrationService, providedIn: "root" });
-MigrationService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root',
-            },] }
-];
+/*
+ * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class MigrationService {
+    constructor() { }
+}
+MigrationService.ɵprov = ɵɵdefineInjectable({ factory: function MigrationService_Factory() { return new MigrationService(); }, token: MigrationService, providedIn: "root" });
+MigrationService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root',
+            },] }
+];
 MigrationService.ctorParameters = () => [];
 
-/*
- * Copyright 2015-2020 Ritense BV, the Netherlands.
- *
- * Licensed under EUPL, Version 1.2 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" basis,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-class MigrationProcessDiagramComponent {
-    constructor(logger) {
-        this.logger = logger;
-        this.flowNodeMap = null;
-        this.loaded = new EventEmitter();
-    }
-    ngOnInit() {
-        this.bpmnJS = new BpmnJS();
-        this.bpmnJS.on('import.done', ({ error }) => {
-            if (!error) {
-                const canvas = this.bpmnJS.get('canvas');
-                canvas.zoom('fit-viewport', 'auto');
-            }
-        });
-    }
-    ngOnDestroy() {
-        if (this.bpmnJS) {
-            this.bpmnJS.destroy();
-        }
-    }
-    clear() {
-        this.bpmnJS.clear();
-    }
-    loadXml(xml) {
-        this.bpmnJS.attachTo(this.el.nativeElement);
-        this.bpmnJS.importXML(xml, err => {
-            this.logger.debug(err);
-            const processElements = this.bpmnJS.getDefinitions().rootElements.filter(function (element) {
-                return element.isExecutable;
-            });
-            this.flowNodeMap = processElements[0].flowElements.filter(function (element) {
-                if (element.name === null || element.name === '') {
-                    element.name = element.id;
-                }
-                return element.$type !== 'bpmn:SequenceFlow';
-            });
-            this.loaded.emit(this.name);
-        });
-    }
-}
-MigrationProcessDiagramComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'valtimo-migration-process-diagram',
-                template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div #ref class=\"diagram-container\"></div>\n",
-                styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.diagram-container-switch-holder{width:100%;z-index:1000}.diagram-container{height:48vh}"]
-            },] }
-];
-MigrationProcessDiagramComponent.ctorParameters = () => [
-    { type: NGXLogger }
-];
-MigrationProcessDiagramComponent.propDecorators = {
-    el: [{ type: ViewChild, args: ['ref',] }],
-    name: [{ type: Input }],
-    loaded: [{ type: Output }]
+/*
+ * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class MigrationProcessDiagramComponent {
+    constructor(logger) {
+        this.logger = logger;
+        this.flowNodeMap = null;
+        this.loaded = new EventEmitter();
+    }
+    ngOnInit() {
+        this.bpmnJS = new BpmnJS();
+        this.bpmnJS.on('import.done', ({ error }) => {
+            if (!error) {
+                const canvas = this.bpmnJS.get('canvas');
+                canvas.zoom('fit-viewport', 'auto');
+            }
+        });
+    }
+    ngOnDestroy() {
+        if (this.bpmnJS) {
+            this.bpmnJS.destroy();
+        }
+    }
+    clear() {
+        this.bpmnJS.clear();
+    }
+    loadXml(xml) {
+        this.bpmnJS.attachTo(this.el.nativeElement);
+        this.bpmnJS.importXML(xml, err => {
+            this.logger.debug(err);
+            const processElements = this.bpmnJS.getDefinitions().rootElements.filter(function (element) {
+                return element.isExecutable;
+            });
+            this.flowNodeMap = processElements[0].flowElements.filter(function (element) {
+                if (element.name === null || element.name === '') {
+                    element.name = element.id;
+                }
+                return element.$type !== 'bpmn:SequenceFlow';
+            });
+            this.loaded.emit(this.name);
+        });
+    }
+}
+MigrationProcessDiagramComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'valtimo-migration-process-diagram',
+                template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div #ref class=\"diagram-container\"></div>\n",
+                styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.diagram-container-switch-holder{width:100%;z-index:1000}.diagram-container{height:48vh}"]
+            },] }
+];
+MigrationProcessDiagramComponent.ctorParameters = () => [
+    { type: NGXLogger }
+];
+MigrationProcessDiagramComponent.propDecorators = {
+    el: [{ type: ViewChild, args: ['ref',] }],
+    name: [{ type: Input }],
+    loaded: [{ type: Output }]
 };
 
-/*
- * Copyright 2015-2020 Ritense BV, the Netherlands.
- *
- * Licensed under EUPL, Version 1.2 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" basis,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-class MigrationComponent {
-    constructor(processService, logger, alertService) {
-        this.processService = processService;
-        this.logger = logger;
-        this.alertService = alertService;
-        this.processDefinitions = [];
-        this.selectedVersions = {
-            source: [],
-            target: [],
-        };
-        this.selectedId = {
-            source: null,
-            target: null,
-        };
-        this.loaded = {
-            source: false,
-            target: false,
-        };
-        this.fields = {
-            source: {
-                definition: null,
-                version: null,
-            },
-            target: {
-                definition: null,
-                version: null,
-            },
-        };
-        this.processCount = null;
-        this.uniqueFlowNodeMap = [];
-        this.taskMapping = {};
-        this.diagram = null;
-    }
-    ngOnInit() {
-        this.loadProcessDefinitions();
-    }
-    ngAfterViewInit() {
-        this.diagram = {
-            source: this.sourceDiagram,
-            target: this.targetDiagram,
-        };
-    }
-    get taskMappingLength() {
-        return Object.keys(this.taskMapping).length;
-    }
-    loadProcessDefinitions() {
-        this.processService
-            .getProcessDefinitions()
-            .subscribe((processDefinitions) => {
-            this.processDefinitions = processDefinitions;
-        });
-    }
-    loadProcessDefinitionVersions(key, type) {
-        this.fields[type].definition = key;
-        this.selectedVersions[type] = [];
-        this.clearProcess(type);
-        if (key) {
-            this.processService
-                .getProcessDefinitionVersions(key)
-                .subscribe((processDefinitionVersions) => {
-                this.selectedVersions[type] = processDefinitionVersions;
-            });
-        }
-    }
-    loadProcess(id, type) {
-        this.fields[type].version = id;
-        this.clearProcess(type);
-        if (id) {
-            this.loadProcessDefinitionXML(id, type);
-            if (type === 'source') {
-                this.loadProcessCount(id);
-            }
-        }
-    }
-    clearProcess(type) {
-        this.loaded[type] = false;
-        this.selectedId[type] = null;
-        this.diagram[type].clear();
-        if (type === 'source') {
-            this.processCount = null;
-        }
-    }
-    loadProcessDefinitionXML(id, type) {
-        this.processService.getProcessDefinitionXml(id).subscribe(xml => {
-            this.diagram[type].loadXml(xml['bpmn20Xml']);
-            this.selectedId[type] = id;
-        });
-    }
-    loadProcessCount(id) {
-        this.processService.getProcessCount(id).subscribe(response => {
-            this.processCount = response.count;
-        });
-    }
-    setUniqueFlowNodeMap() {
-        this.uniqueFlowNodeMap = [];
-        const sourceFlowNodeMap = this.sourceDiagram.flowNodeMap;
-        const targetFlowNodeMap = this.targetDiagram.flowNodeMap;
-        if (sourceFlowNodeMap != null && targetFlowNodeMap != null) {
-            this.uniqueFlowNodeMap = sourceFlowNodeMap.filter(sourceFlowNode => !targetFlowNodeMap.some(targetFlowNode => sourceFlowNode.id === targetFlowNode.id &&
-                sourceFlowNode.$type === targetFlowNode.$type));
-        }
-    }
-    getFilteredTargetFlowNodeMap(flowNodeType) {
-        const targetFlowNodeMap = this.targetDiagram.flowNodeMap;
-        return targetFlowNodeMap.filter(function (flowNode) {
-            return flowNode.$type === flowNodeType;
-        });
-    }
-    diagramLoaded(diagramName) {
-        this.loaded[diagramName] = true;
-        if (this.loaded.source && this.loaded.target) {
-            this.taskMapping = {};
-            this.setUniqueFlowNodeMap();
-        }
-    }
-    migrateProcess() {
-        this.processService
-            .migrateProcess(this.selectedId.source, this.selectedId.target, this.taskMapping)
-            .subscribe(res => {
-            this.alertService.success('Process successfully migrated!');
-            this.clearProcess('source');
-            this.clearProcess('target');
-            this.fields = {
-                source: {
-                    definition: null,
-                    version: null,
-                },
-                target: {
-                    definition: null,
-                    version: null,
-                },
-            };
-        }, err => {
-            this.alertService.error('Process migration failed!');
-            this.logger.debug(err);
-        });
-    }
-}
-MigrationComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'valtimo-migration',
-                template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"main-content\">\n  <div class=\"container-fluid\">\n    <div class=\"row mb-5\">\n      <div class=\"col-12\">\n        <div class=\"alert alert-warning pl-2 plr-2\" role=\"alert\">\n          <div class=\"icon\"><span class=\"mdi mdi-alert-triangle\"></span></div>\n          <div class=\"message\" [innerHTML]=\"'Process migration warning' | translate\"></div>\n        </div>\n      </div>\n    </div>\n    <div class=\"row mb-5\">\n      <div class=\"col-4\">\n        <label for=\"sourceDef\">Source Definition</label>\n        <select\n          class=\"form-control\"\n          id=\"sourceDef\"\n          [ngModel]=\"fields.source.definition\"\n          (ngModelChange)=\"loadProcessDefinitionVersions($event, 'source')\"\n        >\n          <option [ngValue]=\"null\" selected>- Source Definition -</option>\n          <option *ngFor=\"let processDef of processDefinitions\" [ngValue]=\"processDef.key\">\n            {{ processDef.name }}\n          </option>\n        </select>\n      </div>\n      <div class=\"col-2\">\n        <label for=\"sourceVer\">Source Version</label>\n        <select\n          class=\"form-control\"\n          id=\"sourceVer\"\n          [ngModel]=\"fields.source.version\"\n          (ngModelChange)=\"loadProcess($event, 'source')\"\n        >\n          <option [ngValue]=\"null\" selected>- Source Version -</option>\n          <option *ngFor=\"let processVer of selectedVersions.source\" [ngValue]=\"processVer.id\">\n            {{ processVer.version }}\n          </option>\n        </select>\n      </div>\n      <div class=\"col-4\">\n        <label for=\"targetDef\">Target Definition</label>\n        <select\n          class=\"form-control\"\n          id=\"targetDef\"\n          [ngModel]=\"fields.target.definition\"\n          (ngModelChange)=\"loadProcessDefinitionVersions($event, 'target')\"\n        >\n          <option [ngValue]=\"null\" selected>- Target Definition -</option>\n          <option *ngFor=\"let processDef of processDefinitions\" [ngValue]=\"processDef.key\">\n            {{ processDef.name }}\n          </option>\n        </select>\n      </div>\n      <div class=\"col-2\">\n        <label for=\"targetVer\">Target Version</label>\n        <select\n          class=\"form-control\"\n          id=\"targetVer\"\n          [ngModel]=\"fields.target.version\"\n          (ngModelChange)=\"loadProcess($event, 'target')\"\n        >\n          <option [ngValue]=\"null\" selected>- Target Version -</option>\n          <option *ngFor=\"let processVer of selectedVersions.target\" [ngValue]=\"processVer.id\">\n            {{ processVer.version }}\n          </option>\n        </select>\n      </div>\n    </div>\n\n    <div class=\"row mb-5\">\n      <div class=\"col-6\">\n        <valtimo-migration-process-diagram\n          name=\"source\"\n          (loaded)=\"diagramLoaded($event)\"\n          #sourceDiagram\n        ></valtimo-migration-process-diagram>\n      </div>\n      <div class=\"col-6\">\n        <valtimo-migration-process-diagram\n          name=\"target\"\n          (loaded)=\"diagramLoaded($event)\"\n          #targetDiagram\n        ></valtimo-migration-process-diagram>\n      </div>\n    </div>\n    <table class=\"table table-striped mb-5\" *ngIf=\"selectedId.source && selectedId.target\">\n      <tr *ngFor=\"let node of uniqueFlowNodeMap\">\n        <td>{{ node.name ? node.name : node.id }}</td>\n        <td>\n          <select class=\"form-control\" (change)=\"taskMapping[node.id] = $event.target.value\">\n            <option [value]=\"null\" disabled selected>- Choose Target -</option>\n            <option\n              *ngFor=\"let targetFlowNode of getFilteredTargetFlowNodeMap(node.$type)\"\n              [value]=\"targetFlowNode.id\"\n            >\n              {{ targetFlowNode.name ? targetFlowNode.name : targetFlowNode.id }}\n            </option>\n          </select>\n        </td>\n      </tr>\n    </table>\n    <hr />\n    <div class=\"btn-group mb-5\">\n      <button\n        [disabled]=\"\n          (uniqueFlowNodeMap.length !== taskMappingLength && uniqueFlowNodeMap.length > 0) ||\n          !loaded.source ||\n          !loaded.target\n        \"\n        (click)=\"migrateProcess()\"\n        class=\"btn btn-primary\"\n      >\n        Migrate\n        <span *ngIf=\"processCount !== null\" class=\"badge badge-pill badge-secondary\">{{\n          processCount\n        }}</span>\n      </button>\n    </div>\n  </div>\n</div>\n",
-                styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */"]
-            },] }
-];
-MigrationComponent.ctorParameters = () => [
-    { type: ProcessService },
-    { type: NGXLogger },
-    { type: AlertService }
-];
-MigrationComponent.propDecorators = {
-    sourceDiagram: [{ type: ViewChild, args: ['sourceDiagram',] }],
-    targetDiagram: [{ type: ViewChild, args: ['targetDiagram',] }]
+/*
+ * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class MigrationComponent {
+    constructor(processService, logger, alertService) {
+        this.processService = processService;
+        this.logger = logger;
+        this.alertService = alertService;
+        this.processDefinitions = [];
+        this.selectedVersions = {
+            source: [],
+            target: [],
+        };
+        this.selectedId = {
+            source: null,
+            target: null,
+        };
+        this.loaded = {
+            source: false,
+            target: false,
+        };
+        this.fields = {
+            source: {
+                definition: null,
+                version: null,
+            },
+            target: {
+                definition: null,
+                version: null,
+            },
+        };
+        this.processCount = null;
+        this.uniqueFlowNodeMap = [];
+        this.taskMapping = {};
+        this.diagram = null;
+    }
+    ngOnInit() {
+        this.loadProcessDefinitions();
+    }
+    ngAfterViewInit() {
+        this.diagram = {
+            source: this.sourceDiagram,
+            target: this.targetDiagram,
+        };
+    }
+    get taskMappingLength() {
+        return Object.keys(this.taskMapping).length;
+    }
+    loadProcessDefinitions() {
+        this.processService
+            .getProcessDefinitions()
+            .subscribe((processDefinitions) => {
+            this.processDefinitions = processDefinitions;
+        });
+    }
+    loadProcessDefinitionVersions(key, type) {
+        this.fields[type].definition = key;
+        this.selectedVersions[type] = [];
+        this.clearProcess(type);
+        if (key) {
+            this.processService
+                .getProcessDefinitionVersions(key)
+                .subscribe((processDefinitionVersions) => {
+                this.selectedVersions[type] = processDefinitionVersions;
+            });
+        }
+    }
+    loadProcess(id, type) {
+        this.fields[type].version = id;
+        this.clearProcess(type);
+        if (id) {
+            this.loadProcessDefinitionXML(id, type);
+            if (type === 'source') {
+                this.loadProcessCount(id);
+            }
+        }
+    }
+    clearProcess(type) {
+        this.loaded[type] = false;
+        this.selectedId[type] = null;
+        this.diagram[type].clear();
+        if (type === 'source') {
+            this.processCount = null;
+        }
+    }
+    loadProcessDefinitionXML(id, type) {
+        this.processService.getProcessDefinitionXml(id).subscribe(xml => {
+            this.diagram[type].loadXml(xml['bpmn20Xml']);
+            this.selectedId[type] = id;
+        });
+    }
+    loadProcessCount(id) {
+        this.processService.getProcessCount(id).subscribe(response => {
+            this.processCount = response.count;
+        });
+    }
+    setUniqueFlowNodeMap() {
+        this.uniqueFlowNodeMap = [];
+        const sourceFlowNodeMap = this.sourceDiagram.flowNodeMap;
+        const targetFlowNodeMap = this.targetDiagram.flowNodeMap;
+        if (sourceFlowNodeMap != null && targetFlowNodeMap != null) {
+            this.uniqueFlowNodeMap = sourceFlowNodeMap.filter(sourceFlowNode => !targetFlowNodeMap.some(targetFlowNode => sourceFlowNode.id === targetFlowNode.id &&
+                sourceFlowNode.$type === targetFlowNode.$type));
+        }
+    }
+    getFilteredTargetFlowNodeMap(flowNodeType) {
+        const targetFlowNodeMap = this.targetDiagram.flowNodeMap;
+        return targetFlowNodeMap.filter(function (flowNode) {
+            return flowNode.$type === flowNodeType;
+        });
+    }
+    diagramLoaded(diagramName) {
+        this.loaded[diagramName] = true;
+        if (this.loaded.source && this.loaded.target) {
+            this.taskMapping = {};
+            this.setUniqueFlowNodeMap();
+        }
+    }
+    migrateProcess() {
+        this.processService
+            .migrateProcess(this.selectedId.source, this.selectedId.target, this.taskMapping)
+            .subscribe(res => {
+            this.alertService.success('Process successfully migrated!');
+            this.clearProcess('source');
+            this.clearProcess('target');
+            this.fields = {
+                source: {
+                    definition: null,
+                    version: null,
+                },
+                target: {
+                    definition: null,
+                    version: null,
+                },
+            };
+        }, err => {
+            this.alertService.error('Process migration failed!');
+            this.logger.debug(err);
+        });
+    }
+}
+MigrationComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'valtimo-migration',
+                template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"main-content\">\n  <div class=\"container-fluid\">\n    <div class=\"row mb-5\">\n      <div class=\"col-12\">\n        <div class=\"alert alert-warning pl-2 plr-2\" role=\"alert\">\n          <div class=\"icon\"><span class=\"mdi mdi-alert-triangle\"></span></div>\n          <div class=\"message\" [innerHTML]=\"'Process migration warning' | translate\"></div>\n        </div>\n      </div>\n    </div>\n    <div class=\"row mb-5\">\n      <div class=\"col-4\">\n        <label for=\"sourceDef\">Source Definition</label>\n        <select\n          class=\"form-control\"\n          id=\"sourceDef\"\n          [ngModel]=\"fields.source.definition\"\n          (ngModelChange)=\"loadProcessDefinitionVersions($event, 'source')\"\n        >\n          <option [ngValue]=\"null\" selected>- Source Definition -</option>\n          <option *ngFor=\"let processDef of processDefinitions\" [ngValue]=\"processDef.key\">\n            {{ processDef.name }}\n          </option>\n        </select>\n      </div>\n      <div class=\"col-2\">\n        <label for=\"sourceVer\">Source Version</label>\n        <select\n          class=\"form-control\"\n          id=\"sourceVer\"\n          [ngModel]=\"fields.source.version\"\n          (ngModelChange)=\"loadProcess($event, 'source')\"\n        >\n          <option [ngValue]=\"null\" selected>- Source Version -</option>\n          <option *ngFor=\"let processVer of selectedVersions.source\" [ngValue]=\"processVer.id\">\n            {{ processVer.version }}\n          </option>\n        </select>\n      </div>\n      <div class=\"col-4\">\n        <label for=\"targetDef\">Target Definition</label>\n        <select\n          class=\"form-control\"\n          id=\"targetDef\"\n          [ngModel]=\"fields.target.definition\"\n          (ngModelChange)=\"loadProcessDefinitionVersions($event, 'target')\"\n        >\n          <option [ngValue]=\"null\" selected>- Target Definition -</option>\n          <option *ngFor=\"let processDef of processDefinitions\" [ngValue]=\"processDef.key\">\n            {{ processDef.name }}\n          </option>\n        </select>\n      </div>\n      <div class=\"col-2\">\n        <label for=\"targetVer\">Target Version</label>\n        <select\n          class=\"form-control\"\n          id=\"targetVer\"\n          [ngModel]=\"fields.target.version\"\n          (ngModelChange)=\"loadProcess($event, 'target')\"\n        >\n          <option [ngValue]=\"null\" selected>- Target Version -</option>\n          <option *ngFor=\"let processVer of selectedVersions.target\" [ngValue]=\"processVer.id\">\n            {{ processVer.version }}\n          </option>\n        </select>\n      </div>\n    </div>\n\n    <div class=\"row mb-5\">\n      <div class=\"col-6\">\n        <valtimo-migration-process-diagram\n          name=\"source\"\n          (loaded)=\"diagramLoaded($event)\"\n          #sourceDiagram\n        ></valtimo-migration-process-diagram>\n      </div>\n      <div class=\"col-6\">\n        <valtimo-migration-process-diagram\n          name=\"target\"\n          (loaded)=\"diagramLoaded($event)\"\n          #targetDiagram\n        ></valtimo-migration-process-diagram>\n      </div>\n    </div>\n    <table class=\"table table-striped mb-5\" *ngIf=\"selectedId.source && selectedId.target\">\n      <tr *ngFor=\"let node of uniqueFlowNodeMap\">\n        <td>{{ node.name ? node.name : node.id }}</td>\n        <td>\n          <select class=\"form-control\" (change)=\"taskMapping[node.id] = $event.target.value\">\n            <option [value]=\"null\" disabled selected>- Choose Target -</option>\n            <option\n              *ngFor=\"let targetFlowNode of getFilteredTargetFlowNodeMap(node.$type)\"\n              [value]=\"targetFlowNode.id\"\n            >\n              {{ targetFlowNode.name ? targetFlowNode.name : targetFlowNode.id }}\n            </option>\n          </select>\n        </td>\n      </tr>\n    </table>\n    <hr />\n    <div class=\"btn-group mb-5\">\n      <button\n        [disabled]=\"\n          (uniqueFlowNodeMap.length !== taskMappingLength && uniqueFlowNodeMap.length > 0) ||\n          !loaded.source ||\n          !loaded.target\n        \"\n        (click)=\"migrateProcess()\"\n        class=\"btn btn-primary\"\n      >\n        Migrate\n        <span *ngIf=\"processCount !== null\" class=\"badge badge-pill badge-secondary\">{{\n          processCount\n        }}</span>\n      </button>\n    </div>\n  </div>\n</div>\n",
+                styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */"]
+            },] }
+];
+MigrationComponent.ctorParameters = () => [
+    { type: ProcessService },
+    { type: NGXLogger },
+    { type: AlertService }
+];
+MigrationComponent.propDecorators = {
+    sourceDiagram: [{ type: ViewChild, args: ['sourceDiagram',] }],
+    targetDiagram: [{ type: ViewChild, args: ['targetDiagram',] }]
 };
 
-/*
- * Copyright 2015-2020 Ritense BV, the Netherlands.
- *
- * Licensed under EUPL, Version 1.2 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" basis,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-const ɵ0 = { title: 'Process migration', roles: [ROLE_ADMIN] };
-const routes = [
-    {
-        path: 'process-migration',
-        component: MigrationComponent,
-        canActivate: [AuthGuardService],
-        data: ɵ0,
-    },
-];
-class MigrationRoutingModule {
-}
-MigrationRoutingModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [CommonModule, RouterModule.forChild(routes)],
-                exports: [RouterModule],
-            },] }
+/*
+ * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const ɵ0 = { title: 'Process migration', roles: [ROLE_ADMIN] };
+const routes = [
+    {
+        path: 'process-migration',
+        component: MigrationComponent,
+        canActivate: [AuthGuardService],
+        data: ɵ0,
+    },
+];
+class MigrationRoutingModule {
+}
+MigrationRoutingModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [CommonModule, RouterModule.forChild(routes)],
+                exports: [RouterModule],
+            },] }
 ];
 
-/*
- * Copyright 2015-2020 Ritense BV, the Netherlands.
- *
- * Licensed under EUPL, Version 1.2 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" basis,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-class MigrationModule {
-}
-MigrationModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [MigrationComponent, MigrationProcessDiagramComponent],
-                imports: [
-                    CommonModule,
-                    MigrationRoutingModule,
-                    ReactiveFormsModule,
-                    WidgetModule,
-                    FormsModule,
-                    TranslateModule,
-                ],
-                exports: [MigrationComponent],
-            },] }
+/*
+ * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class MigrationModule {
+}
+MigrationModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [MigrationComponent, MigrationProcessDiagramComponent],
+                imports: [
+                    CommonModule,
+                    MigrationRoutingModule,
+                    ReactiveFormsModule,
+                    WidgetModule,
+                    FormsModule,
+                    TranslateModule,
+                ],
+                exports: [MigrationComponent],
+            },] }
 ];
 
-/*
- * Copyright 2015-2020 Ritense BV, the Netherlands.
- *
- * Licensed under EUPL, Version 1.2 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" basis,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
+/*
+ * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
  */
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { MigrationComponent, MigrationModule, MigrationService, MigrationProcessDiagramComponent as ɵa, MigrationRoutingModule as ɵb };