From 5d1f3ee451f5a9f0f16bd292c7c16ae159407436 Mon Sep 17 00:00:00 2001
From: tb149289 <tb149289@fh-muenster.de>
Date: Tue, 14 Dec 2021 22:37:10 +0100
Subject: [PATCH] added accordions for flow matching
---
.../rest/service/change/ChangeController.java | 8 --
.../testgenerator-web/angular.json | 2 +
.../testgenerator-web/package-lock.json | 5 ++
.../testgenerator-web/package.json | 1 +
.../testgenerator-web/src/app/app.module.ts | 8 +-
.../matching-flows.component.css | 36 +++++++-
.../matching-flows.component.html | 90 ++++++++++++++-----
.../matching-flows.component.ts | 5 --
.../testgenerator-web/src/index.html | 2 +
.../testgenerator-web/src/styles.css | 4 +-
10 files changed, 123 insertions(+), 38 deletions(-)
diff --git a/Testgenerator/src/main/java/de/fhmuenster/masterthesis/Testgenerator/rest/service/change/ChangeController.java b/Testgenerator/src/main/java/de/fhmuenster/masterthesis/Testgenerator/rest/service/change/ChangeController.java
index aa64b46..3aad7bd 100644
--- a/Testgenerator/src/main/java/de/fhmuenster/masterthesis/Testgenerator/rest/service/change/ChangeController.java
+++ b/Testgenerator/src/main/java/de/fhmuenster/masterthesis/Testgenerator/rest/service/change/ChangeController.java
@@ -244,14 +244,6 @@ public class ChangeController {
//
// }
//
-
-
- /*
- * Till Ende: Ab hier einmal durchgehen, Flo. Auch bei detectChanges, addActivity, delete usw.
- * in migrationService gucken. Habe noch nicht den Array matchingFlows als Ãœbergabeparameter an deine
- * Methoden weitergegeben. Also matchingFlows[x][0] sind Flow neu, und matchingFlows[x][1] der
- * dazugehörige Flow alt
- */
//Alte DSL kopieren und neu generieren
diff --git a/testgenerator-web/testgenerator-web/angular.json b/testgenerator-web/testgenerator-web/angular.json
index 3162a3d..e0bd96f 100644
--- a/testgenerator-web/testgenerator-web/angular.json
+++ b/testgenerator-web/testgenerator-web/angular.json
@@ -36,6 +36,7 @@
"src/assets"
],
"styles": [
+ "./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css",
"node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
"node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
"node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
@@ -116,6 +117,7 @@
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
+ "./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css",
"src/styles.css"
],
"scripts": [],
diff --git a/testgenerator-web/testgenerator-web/package-lock.json b/testgenerator-web/testgenerator-web/package-lock.json
index 2d7bdb5..6b5d406 100644
--- a/testgenerator-web/testgenerator-web/package-lock.json
+++ b/testgenerator-web/testgenerator-web/package-lock.json
@@ -780,6 +780,11 @@
}
}
},
+ "@angular/material": {
+ "version": "9.2.4",
+ "resolved": "https://registry.npmjs.org/@angular/material/-/material-9.2.4.tgz",
+ "integrity": "sha512-LkoTXE6B0slvMhvfZDdPWaz4yaYLkaAp5VSPunI9pxGsPxzqEV9e210wC1/sjG/76Nk8Ep7/2z9XKac8Q9bMwA=="
+ },
"@angular/platform-browser": {
"version": "9.1.12",
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-9.1.12.tgz",
diff --git a/testgenerator-web/testgenerator-web/package.json b/testgenerator-web/testgenerator-web/package.json
index 28ab8e9..b92f20a 100644
--- a/testgenerator-web/testgenerator-web/package.json
+++ b/testgenerator-web/testgenerator-web/package.json
@@ -20,6 +20,7 @@
"@angular/core": "^9.1.12",
"@angular/forms": "^9.1.12",
"@angular/localize": "^9.1.12",
+ "@angular/material": "^9.2.4",
"@angular/platform-browser": "^9.1.12",
"@angular/platform-browser-dynamic": "^9.1.12",
"@angular/router": "^9.1.12",
diff --git a/testgenerator-web/testgenerator-web/src/app/app.module.ts b/testgenerator-web/testgenerator-web/src/app/app.module.ts
index 7f4dd82..ff4f280 100644
--- a/testgenerator-web/testgenerator-web/src/app/app.module.ts
+++ b/testgenerator-web/testgenerator-web/src/app/app.module.ts
@@ -36,6 +36,9 @@ import { MatchingFlowsComponent } from './components/matching-flows/matching-flo
import { DragDropModule } from '@angular/cdk/drag-drop';
import { FlagComponent } from './components/flag/flag.component';
import { VariableConstraintsPipe } from './pipes/variable-constraints.pipe';
+import {CdkAccordionModule} from '@angular/cdk/accordion';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import {MatExpansionModule} from '@angular/material/expansion';
@NgModule({
declarations: [
@@ -66,7 +69,6 @@ import { VariableConstraintsPipe } from './pipes/variable-constraints.pipe';
MigrationOverviewComponent,
PrioritizationOverviewComponent,
MatchingFlowsComponent,
-
FlagComponent,
VariableConstraintsPipe
@@ -75,7 +77,9 @@ import { VariableConstraintsPipe } from './pipes/variable-constraints.pipe';
BrowserModule,
AppRoutingModule,
HttpClientModule,
-
+ CdkAccordionModule,
+ MatExpansionModule,
+ BrowserAnimationsModule,
FormsModule,
ReactiveFormsModule,
DragDropModule,
diff --git a/testgenerator-web/testgenerator-web/src/app/components/matching-flows/matching-flows.component.css b/testgenerator-web/testgenerator-web/src/app/components/matching-flows/matching-flows.component.css
index dc74bc2..0199c02 100644
--- a/testgenerator-web/testgenerator-web/src/app/components/matching-flows/matching-flows.component.css
+++ b/testgenerator-web/testgenerator-web/src/app/components/matching-flows/matching-flows.component.css
@@ -60,4 +60,38 @@
border: dotted 3px rgb(230, 230, 230);
min-height: 60px;
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
- }
\ No newline at end of file
+ }
+
+
+
+ .example-accordion-item-header {
+ display: flex;
+ align-content: center;
+ justify-content: space-between;
+ }
+
+ .example-accordion-item-description {
+ font-size: 0.85em;
+ color: #999;
+ }
+
+ .example-accordion-item-header,
+ .example-accordion-item-body {
+ padding: 16px;
+ }
+
+ .example-accordion-item-header:hover {
+ cursor: pointer;
+ background-color: #eee;
+ }
+
+ .example-accordion-item:first-child {
+ border-top-left-radius: 4px;
+ border-top-right-radius: 4px;
+ }
+
+ .example-accordion-item:last-child {
+ border-bottom-left-radius: 4px;
+ border-bottom-right-radius: 4px;
+ }
+
\ No newline at end of file
diff --git a/testgenerator-web/testgenerator-web/src/app/components/matching-flows/matching-flows.component.html b/testgenerator-web/testgenerator-web/src/app/components/matching-flows/matching-flows.component.html
index 0f279ea..b9c2491 100644
--- a/testgenerator-web/testgenerator-web/src/app/components/matching-flows/matching-flows.component.html
+++ b/testgenerator-web/testgenerator-web/src/app/components/matching-flows/matching-flows.component.html
@@ -7,38 +7,86 @@
<div class="col">
<p class="title" *ngIf="!isProjectLoading && actualProjectConfig" i18n="project header">Project "{{actualProjectConfig.projectName}}"</p>
</div>
- <div class="col">
- <div class="row ms-auto float-end">
- <div class="custom-control custom-switch">
- <input checked type="checkbox" class="custom-control-input" id="customSwitches" (change)="onFlowVisibility()">
- <label class="custom-control-label" for="customSwitches" i18n="hide flows">Hide flows</label>
- </div>
- </div>
- </div>
+
</div>
<div class="btn-group w-100">
<button class="btn btn-primary" type="button" (click)="startMigration()" i18n="migrate bpmn" >Start migration of matching flows</button>
<button class="btn btn-secondary" type="button" (click)="revertMatchingFlows()" i18n="revert matching flows">revert selected matching flows</button>
</div>
-
- <div class="row">
+
+ <!-- Accordions -->
+ <div class="row">
+ <div class="col">
+ <span class="badge bg-success diagramTitle">New BPMN Flows</span>
+
+ <mat-accordion multi>
+ <mat-expansion-panel *ngFor="let flow of flowSetNew.flows" >
+ <mat-expansion-panel-header>
+ <mat-panel-titel>
+
+ </mat-panel-titel>
+ <mat-panel-description>
+ {{flow.name}}
+ </mat-panel-description>
+ </mat-expansion-panel-header>
+ <app-bpmn-diagram *ngIf="diagramsLoaded" [diagram]="diagram" [flow]="flow"></app-bpmn-diagram>
+ </mat-expansion-panel>
+
+ </mat-accordion>
+ </div>
+
+ <div class="col">
+ <span class="badge bg-warning diagramTitle">Old BPMN Flows</span>
+
+<mat-accordion multi cdkDropList [cdkDropListData]="flowSetOld" *ngIf="flowSetOld" (cdkDropListDropped)="drop($event)">
+<mat-expansion-panel cdkDrag *ngFor="let flow of flowSetOld" class="drag-box">
+<mat-expansion-panel-header>
+ <mat-panel-titel>
+
+ </mat-panel-titel>
+ <mat-panel-description *ngIf="flow?.name; else flowEmptyTitel">
+ {{flow.name}}
+ </mat-panel-description>
+ <ng-template #flowEmptyTitel>
+ no matching flow old
+ </ng-template>
+
+</mat-expansion-panel-header>
+
+<div *ngIf="flow?.name; else flowEmptyBody">
+ <div class="example-custom-placeholder" *cdkDragPlaceholder></div>
+ <app-bpmn-diagram *ngIf="diagramsLoaded" [diagram]="diagramOld" [flow]="flow"></app-bpmn-diagram>
+</div>
+<ng-template #flowEmptyBody>
+ <div>
+ <div class="example-custom-placeholder" *cdkDragPlaceholder></div>
+ </div>
+</ng-template>
+</mat-expansion-panel>
+
+</mat-accordion>
+ </div>
+ </div>
+
+
+ <!--<div class="row">
<div class="col">
<span class="badge bg-success diagramTitle">New BPMN Flows</span>
<div *ngIf="flowSetNew.flows">
<div *ngFor="let flow of flowSetNew.flows; let i=index">
<div class="testgen-flow">
- <h4 class="testgen-flow-name" i18n="flow name">{{flow.name}}</h4>
+ <h4 class="testgen-flow-name" i18n="flow name">{{flow.name}}</h4> -->
<!-- <p *ngIf="detailFlowVisible" class="testgen-flow-flowlist">{{flow | flow}}</p> -->
- <app-bpmn-diagram *ngIf="detailFlowVisible && diagramsLoaded" [diagram]="diagram" [flow]="flow"></app-bpmn-diagram>
+ <!-- <app-bpmn-diagram *ngIf="detailFlowVisible && diagramsLoaded" [diagram]="diagram" [flow]="flow"></app-bpmn-diagram>
</div>
</div>
</div>
-</div>
+</div> -->
-<div class="col">
+<!-- <div class="col">
<span class="badge bg-warning diagramTitle">Old BPMN Flows</span>
<div cdkDropList [cdkDropListData]="flowSetOld" *ngIf="flowSetOld" (cdkDropListDropped)="drop($event)">
@@ -47,25 +95,25 @@
<div class="testgen-flow" *ngIf="flow?.name; else flowEmpty">
<div class="example-custom-placeholder" *cdkDragPlaceholder></div>
- <h4 class="testgen-flow-name" i18n="flow name">{{flow.name}}</h4>
+ <h4 class="testgen-flow-name" i18n="flow name">{{flow.name}}</h4> -->
<!-- <p *ngIf="detailFlowVisible" class="testgen-flow-flowlist">{{flow | flow}}</p> -->
- <app-bpmn-diagram *ngIf="detailFlowVisible && diagramsLoaded" [diagram]="diagramOld" [flow]="flow"></app-bpmn-diagram>
+ <!-- <app-bpmn-diagram *ngIf="detailFlowVisible && diagramsLoaded" [diagram]="diagramOld" [flow]="flow"></app-bpmn-diagram>
</div>
<ng-template #flowEmpty>
<div class="testgen-flow">
<div class="example-custom-placeholder" *cdkDragPlaceholder></div>
- <h4 class="testgen-flow-name" i18n="flow name">no matching flow old</h4>
+ <h4 class="testgen-flow-name" i18n="flow name">no matching flow old</h4> -->
<!-- <p *ngIf="detailFlowVisible" class="testgen-flow-flowlist">{{flow | flow}}</p> -->
- <app-bpmn-diagram *ngIf="detailFlowVisible && diagramsLoaded" [diagram]="diagram"></app-bpmn-diagram>
+ <!-- <app-bpmn-diagram *ngIf="detailFlowVisible && diagramsLoaded" [diagram]="diagram"></app-bpmn-diagram>
</div>
</ng-template>
</div>
</div>
-</div>
+</div> -->
-
-</div>
+ <!-- </div> -->
</div>
+<!-- </div> -->
<app-loading *ngIf="isProjectLoading || isMatchingLoading || !actualProjectConfig || !flowSetNew || !flowSetOld"></app-loading>
\ No newline at end of file
diff --git a/testgenerator-web/testgenerator-web/src/app/components/matching-flows/matching-flows.component.ts b/testgenerator-web/testgenerator-web/src/app/components/matching-flows/matching-flows.component.ts
index a2a99a5..f44ada5 100644
--- a/testgenerator-web/testgenerator-web/src/app/components/matching-flows/matching-flows.component.ts
+++ b/testgenerator-web/testgenerator-web/src/app/components/matching-flows/matching-flows.component.ts
@@ -73,11 +73,6 @@ export class MatchingFlowsComponent implements OnInit {
moveItemInArray(this.flowSetOld, event.previousIndex, event.currentIndex);
}
-
- async onFlowVisibility() {
- this.detailFlowVisible = !this.detailFlowVisible;
- }
-
revertMatchingFlows(){
this.flowSetOld = [...this.flowSetOldCopy];
}
diff --git a/testgenerator-web/testgenerator-web/src/index.html b/testgenerator-web/testgenerator-web/src/index.html
index cd2e420..84e7ee3 100644
--- a/testgenerator-web/testgenerator-web/src/index.html
+++ b/testgenerator-web/testgenerator-web/src/index.html
@@ -8,6 +8,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+ <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
+ <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<style>
.testgen-highlight:not(.djs-connection) .djs-visual> :nth-child(1) {
diff --git a/testgenerator-web/testgenerator-web/src/styles.css b/testgenerator-web/testgenerator-web/src/styles.css
index fff4ef1..1dfa561 100644
--- a/testgenerator-web/testgenerator-web/src/styles.css
+++ b/testgenerator-web/testgenerator-web/src/styles.css
@@ -38,4 +38,6 @@ footer {
.nav-link {
font-weight: bold;
font-size: 16px;
-}
\ No newline at end of file
+}
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
--
GitLab