bm-process-diagram.component.html 9.99 KB
Newer Older
1
<ng-template #addProcessPatternModal let-d="dismiss" let-c="close">
2
  <div class="modal-header">
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
3
    <h4 class="modal-title">Add Method Pattern</h4>
4
5
6
7
8
    <button type="button" class="close" aria-label="Close" (click)="d()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
9
10
11
    <app-process-patterns-selection-form [processPatterns]="modalProcessPatterns"
                                         [contextSituationalFactors]="bmProcess.situationalFactors"
                                         (selectProcessPattern)="addProcessPattern($event); c()"></app-process-patterns-selection-form>
12
13
14
  </div>
</ng-template>

15
<ng-template #selectProcessPatternModal let-d="dismiss" let-c="close">
16
  <div class="modal-header">
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
17
    <h4 class="modal-title">Select Method Pattern</h4>
18
19
20
21
22
    <button type="button" class="close" aria-label="Close" (click)="d()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
23
24
25
    <app-process-patterns-selection-form [processPatterns]="modalProcessPatterns"
                                         [contextSituationalFactors]="bmProcess.situationalFactors"
                                         (selectProcessPattern)="selectProcessPattern(modalElement, $event); c()"></app-process-patterns-selection-form>
26
27
28
  </div>
</ng-template>

29
<ng-template #showTypesModal let-d="dismiss">
30
  <div class="modal-header">
31
    <h4 class="modal-title">Show types of {{modalElement.businessObject.name}}</h4>
32
33
34
35
36
    <button type="button" class="close" aria-label="Close" (click)="d()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
37
    <div class="alert alert-info">
38
      Types that are defined for this activity. Angle brackets ("<<", ">>") indicate lists.
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
39
    </div>
40
41
    <div class="alert alert-info" *ngIf="modalElement.businessObject.inherit">
      Types are inherited from parent element.
42
    </div>
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
    <ng-container *ngIf="!modalElement.businessObject.inherit">
      <h5>Needed</h5>
      <ul class="list-group" *ngIf="modalElement.businessObject.get('neededType').length > 0">
        <li class="list-group-item" *ngFor="let element of modalElement.businessObject.get('neededType')">
          <span *ngIf="element.element">{{element.element.name}} (<<{{element.list}}>>)</span>
          <span *ngIf="!element.element"><<{{element.list}}>></span>
        </li>
      </ul>
      <div class="alert alert-info" *ngIf="modalElement.businessObject.get('neededType').length === 0">
        No needed types defined for this activity.
      </div>
      <h5 class="mt-3">Forbidden</h5>
      <ul class="list-group" *ngIf="modalElement.businessObject.get('forbiddenType').length > 0">
        <li class="list-group-item" *ngFor="let element of modalElement.businessObject.get('forbiddenType')">
          <span *ngIf="element.element"><<{{element.list}}>> {{element.element.name}}</span>
          <span *ngIf="!element.element"><<{{element.list}}>></span>
        </li>
      </ul>
      <div class="alert alert-info" *ngIf="modalElement.businessObject.get('forbiddenType').length === 0">
        No forbidden types defined for this activity.
      </div>
    </ng-container>
65
66
67
  </div>
</ng-template>

68
69
<ng-template #deleteProcessPatternModal let-d="dismiss">
  <div class="modal-header">
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
70
    <h4 class="modal-title">Delete Method Pattern {{modalElement.businessObject.name}}</h4>
71
72
73
74
75
    <button type="button" class="close" aria-label="Close" (click)="d()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
76
    <div class="alert alert-warning">Deleting the Method Pattern {{modalElement.businessObject.name}}.</div>
77
78
79
  </div>
  <div class="modal-footer">
    <button class="btn btn-danger btn-block" (click)="deleteProcessPattern(modalElement); d()">
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
80
      Delete Method Pattern
81
82
83
84
    </button>
  </div>
</ng-template>

85
86
<ng-template #selectDevelopmentMethodModal let-d="dismiss">
  <div class="modal-header">
87
    <h4 class="modal-title">Select Method Building Block for {{modalElement.businessObject.name}}</h4>
88
89
90
91
92
    <button type="button" class="close" aria-label="Close" (click)="d()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
93
94
95
    <app-development-methods-selection-form [contextSituationalFactors]="bmProcess.situationalFactors"
                                            [developmentMethods]="validDevelopmentMethods"
                                            (selectDevelopmentMethod)="selectDevelopmentMethod(modalElement, $event); resetSelectDevelopmentMethodModal()"></app-development-methods-selection-form>
96
97
98
  </div>
</ng-template>

99
100
<ng-template #methodInfoModal let-d="dismiss">
  <div class="modal-header">
101
    <h4 class="modal-title">Overview of Activity {{modalElement.businessObject.name}}</h4>
102
103
104
105
106
    <button type="button" class="close" aria-label="Close" (click)="d()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
107
108
    <app-method-info [bmProcess]="bmProcess" [contextDomains]="bmProcess.domains"
                     [contextSituationalFactors]="bmProcess.situationalFactors"
109
                     [developmentMethod]="modalDevelopmentMethod" [decision]="bmProcess.decisions[modalElement.id]"
110
                     (updateDecisions)="updateDecisions($event)"></app-method-info>
111
112
113
  </div>
</ng-template>

114
115
116
117
118
119
120
121
122
123
124
125
<ng-template #developmentMethodSummaryModal let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title">Summary of Activity {{modalElement.businessObject.name}}</h4>
    <button type="button" class="close" aria-label="Close" (click)="d()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <app-development-method-summary [decision]="bmProcess.decisions[modalElement.id]"></app-development-method-summary>
  </div>
</ng-template>

126
127
128
<ng-template #patternInfoModal let-d="dismiss">
  <div class="modal-header">
    <h4 *ngIf="modalElement.businessObject.taskName" class="modal-title">
129
      Overview of Activity {{modalElement.businessObject.taskName}}
130
131
132
133
134
135
136
137
138
    </h4>
    <h4 *ngIf="!modalElement.businessObject.taskName" class="modal-title">
      Overview of Pattern {{modalProcessPattern.name}}
    </h4>
    <button type="button" class="close" aria-label="Close" (click)="d()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
139
140
    <app-pattern-info [contextSituationalFactors]="bmProcess.situationalFactors"
                      [processPattern]="modalProcessPattern"></app-pattern-info>
141
142
143
  </div>
</ng-template>

144
<div #canvas class="border" style="height: 500px"></div>
145
146
147
<div class="container">
  <div class="my-3 p-3 bg-white rounded shadow-sm">
    <h6 class="border-bottom border-gray pb-2">Controls</h6>
148
    <button class="btn btn-primary" (click)="saveDiagram()">Save Diagram</button>
149
  </div>
150
151
152

  <div class="my-3 p-3 bg-white rounded shadow-sm">
    <h6 class="border-bottom border-gray pb-2">Warnings</h6>
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
153
    <div *ngIf="isGeneratingWarnings" class="alert alert-info mb-0">Loading warnings</div>
154
155
156
157
158
159
160
    <ngb-accordion *ngIf="!isGeneratingWarnings">
      <ngb-panel title="Low value Warnings">
        <ng-template ngbPanelContent>
          <div *ngIf="lowWarnings.length === 0" class="alert alert-success">
            There are no warnings about situational factors with a too low value
          </div>
          <ul *ngIf="lowWarnings.length > 0">
161
162
163
164
165
166
167
168
            <li *ngFor="let warning of lowWarnings">
              {{warning.elementName}} <a [routerLink]="[]"
                                         (click)="selectElement(warning.elementId)">{{warning.name}}</a>
              has a too low value for the following factors
              <ul>
                <li *ngFor="let factor of warning.situationalFactors">{{factor}}</li>
              </ul>
            </li>
169
170
171
172
173
174
175
176
177
          </ul>
        </ng-template>
      </ngb-panel>
      <ngb-panel title="Incorrect value Warnings">
        <ng-template ngbPanelContent>
          <div *ngIf="incorrectWarnings.length === 0" class="alert alert-success mb-0">
            There are no warnings about situational factors with an incorrect value
          </div>
          <ul *ngIf="incorrectWarnings.length > 0">
178
179
180
181
182
183
184
185
            <li *ngFor="let warning of incorrectWarnings">
              {{warning.elementName}} <a [routerLink]="[]"
                                         (click)="selectElement(warning.elementId)">{{warning.name}}</a>
              has an incorrect value for the following factors
              <ul>
                <li *ngFor="let factor of warning.situationalFactors">{{factor}}</li>
              </ul>
            </li>
186
187
188
          </ul>
        </ng-template>
      </ngb-panel>
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
      <ngb-panel title="Missing Artifacts">
        <ng-template ngbPanelContent>
          <div *ngIf="missingArtifacts.length === 0" class="alert alert-success mb-0">
            There are no warnings about missing artifacts
          </div>
          <ul *ngIf="missingArtifacts.length > 0">
            <li *ngFor="let warning of missingArtifacts">
              {{warning.elementName}} <a [routerLink]="[]"
                                         (click)="selectElement(warning.elementId)">{{warning.name}}</a>
              is missing the following Artifacts
              <ul>
                <li *ngFor="let artifact of warning.artifacts">{{artifact.name}}</li>
              </ul>
            </li>
          </ul>
        </ng-template>
      </ngb-panel>
      <ngb-panel title="Unreachable">
        <ng-template ngbPanelContent>
          <div *ngIf="unreachableActivities.length === 0" class="alert alert-success mb-0">
            There are no warnings about unreachable methods or activities
          </div>
          <ul *ngIf="unreachableActivities.length > 0">
            <li *ngFor="let warning of unreachableActivities">
              {{warning.elementName}} <a [routerLink]="[]"
                                         (click)="selectElement(warning.elementId)">{{warning.name}}</a>
              can not be reached.
            </li>
          </ul>
        </ng-template>
      </ngb-panel>
220
    </ngb-accordion>
221
  </div>
222
</div>
223