bm-process-diagram.component.html 11.6 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">
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
9
10
11
12
13
    <app-process-patterns-selection-form
      [processPatterns]="modalProcessPatterns"
      [contextSituationalFactors]="bmProcess.situationalFactors"
      (selectProcessPattern)="addProcessPattern($event); c()"
    ></app-process-patterns-selection-form>
14
15
16
  </div>
</ng-template>

17
<ng-template #selectProcessPatternModal let-d="dismiss" let-c="close">
18
  <div class="modal-header">
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
19
    <h4 class="modal-title">Select Method Pattern</h4>
20
21
22
23
24
    <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
25
26
27
28
29
    <app-process-patterns-selection-form
      [processPatterns]="modalProcessPatterns"
      [contextSituationalFactors]="bmProcess.situationalFactors"
      (selectProcessPattern)="selectProcessPattern(modalElement, $event); c()"
    ></app-process-patterns-selection-form>
30
31
32
  </div>
</ng-template>

33
<ng-template #showTypesModal let-d="dismiss">
34
  <div class="modal-header">
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
35
36
37
    <h4 class="modal-title">
      Show types of {{ modalElement.businessObject.name }}
    </h4>
38
39
40
41
42
    <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
43
    <div class="alert alert-info">
44
      Types that are defined for this activity.
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
45
    </div>
46
47
    <div class="alert alert-info" *ngIf="modalElement.businessObject.inherit">
      Types are inherited from parent element.
48
    </div>
49
50
    <ng-container *ngIf="!modalElement.businessObject.inherit">
      <h5>Needed</h5>
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
51
52
53
54
55
56
57
58
59
      <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"
60
            >{{ element.element.name }} ({{ $any(element.list) | list }})</span
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
61
          >
62
          <span *ngIf="!element.element">{{ $any(element.list) | list }}</span>
63
64
        </li>
      </ul>
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
65
66
67
68
      <div
        class="alert alert-info"
        *ngIf="modalElement.businessObject.get('neededType').length === 0"
      >
69
70
71
        No needed types defined for this activity.
      </div>
      <h5 class="mt-3">Forbidden</h5>
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
72
73
74
75
76
77
78
79
80
81
82
      <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"
83
            >{{ $any(element.list) | list }} {{ element.element.name }}</span
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
84
          >
85
          <span *ngIf="!element.element">{{ $any(element.list) | list }}</span>
86
87
        </li>
      </ul>
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
88
89
90
91
      <div
        class="alert alert-info"
        *ngIf="modalElement.businessObject.get('forbiddenType').length === 0"
      >
92
93
94
        No forbidden types defined for this activity.
      </div>
    </ng-container>
95
96
97
  </div>
</ng-template>

98
99
<ng-template #deleteProcessPatternModal let-d="dismiss">
  <div class="modal-header">
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
100
101
102
    <h4 class="modal-title">
      Delete Method Pattern {{ modalElement.businessObject.name }}
    </h4>
103
104
105
106
107
    <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
108
109
110
    <div class="alert alert-warning">
      Deleting the Method Pattern {{ modalElement.businessObject.name }}.
    </div>
111
112
  </div>
  <div class="modal-footer">
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
113
114
115
116
    <button
      class="btn btn-danger btn-block"
      (click)="deleteProcessPattern(modalElement); d()"
    >
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
117
      Delete Method Pattern
118
119
120
121
    </button>
  </div>
</ng-template>

122
123
<ng-template #selectDevelopmentMethodModal let-d="dismiss">
  <div class="modal-header">
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
124
125
126
    <h4 class="modal-title">
      Select Method Building Block for {{ modalElement.businessObject.name }}
    </h4>
127
128
129
130
131
    <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
132
133
134
    <app-development-methods-selection-form
      [contextSituationalFactors]="bmProcess.situationalFactors"
      [developmentMethods]="validDevelopmentMethods"
135
      (selectDevelopmentMethod)="selectDevelopmentMethod(modalElement, $event)"
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
136
    ></app-development-methods-selection-form>
137
138
139
  </div>
</ng-template>

140
141
<ng-template #methodInfoModal let-d="dismiss">
  <div class="modal-header">
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
142
143
144
    <h4 class="modal-title">
      Overview of Activity {{ modalElement.businessObject.name }}
    </h4>
145
146
147
148
149
    <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
150
151
152
153
154
155
156
157
    <app-method-info
      [bmProcess]="bmProcess"
      [contextDomains]="bmProcess.domains"
      [contextSituationalFactors]="bmProcess.situationalFactors"
      [developmentMethod]="modalDevelopmentMethod"
      [decision]="bmProcess.decisions[modalElement.id]"
      (updateDecisions)="updateDecisions($event)"
    ></app-method-info>
158
159
160
  </div>
</ng-template>

161
162
<ng-template #developmentMethodSummaryModal let-d="dismiss">
  <div class="modal-header">
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
163
164
165
    <h4 class="modal-title">
      Summary of Activity {{ modalElement.businessObject.name }}
    </h4>
166
167
168
169
170
    <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
171
172
173
    <app-development-method-summary
      [decision]="bmProcess.decisions[modalElement.id]"
    ></app-development-method-summary>
174
175
176
  </div>
</ng-template>

177
178
179
<ng-template #patternInfoModal let-d="dismiss">
  <div class="modal-header">
    <h4 *ngIf="modalElement.businessObject.taskName" class="modal-title">
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
180
      Overview of Activity {{ modalElement.businessObject.taskName }}
181
182
    </h4>
    <h4 *ngIf="!modalElement.businessObject.taskName" class="modal-title">
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
183
      Overview of Pattern {{ modalProcessPattern.name }}
184
185
186
187
188
189
    </h4>
    <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
190
191
192
193
    <app-pattern-info
      [contextSituationalFactors]="bmProcess.situationalFactors"
      [processPattern]="modalProcessPattern"
    ></app-pattern-info>
194
195
196
  </div>
</ng-template>

197
<div #canvas class="border" style="height: 500px"></div>
198
<div class="container">
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
  <div class="p-3 bg-white rounded shadow-sm">
    <div class="row">
      <div class="col-4"><strong>Legend:</strong></div>
    </div>
    <div class="row">
      <div class="col-4">
        <i class="fas fa-list bpmn-legend-icon"></i> Show types
      </div>
      <div class="col-4">
        <i class="fas fa-clipboard-check bpmn-legend-icon"></i> Show Method
        Building Block summary
      </div>
      <div class="col-4">
        <i class="fas fa-info-circle bpmn-legend-icon"></i> Show Method Pattern
        details
      </div>
    </div>
    <div class="row">
      <div class="col-4">
        <i class="fas fa-database bpmn-legend-icon"></i> Select Method Building
        Block
      </div>
      <div class="col-4">
        <i class="fas fa-clipboard-list bpmn-legend-icon"></i> Edit Method
        Building Block details
      </div>
      <div class="col-4">
        <i class="far fa-trash-alt bpmn-legend-icon"></i> Remove Method Building
        Block from task / Delete Method Pattern
      </div>
    </div>
    <div class="row">
      <div class="col-4">
        <i class="fas fa-sign-in-alt bpmn-legend-icon"></i> Insert Method
        Pattern
      </div>
235
236
237
      <div class="col-4">
        <i class="far fa-plus-square bpmn-legend-icon"></i> Add Method Pattern
      </div>
238
239
240
    </div>
  </div>

241
242
  <div class="my-3 p-3 bg-white rounded shadow-sm">
    <h6 class="border-bottom border-gray pb-2">Controls</h6>
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
243
244
245
    <button class="btn btn-primary" (click)="saveDiagram()">
      Save Diagram
    </button>
246
  </div>
247
248
249

  <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
250
251
252
    <div *ngIf="isGeneratingWarnings" class="alert alert-info mb-0">
      Loading warnings
    </div>
253
254
255
256
257
258
259
    <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">
260
            <li *ngFor="let warning of lowWarnings">
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
261
262
263
264
              {{ warning.elementName }}
              <a [routerLink]="[]" (click)="selectElement(warning.elementId)">{{
                warning.name
              }}</a>
265
266
              has a too low value for the following factors
              <ul>
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
267
268
269
                <li *ngFor="let factor of warning.situationalFactors">
                  {{ factor }}
                </li>
270
271
              </ul>
            </li>
272
273
274
275
276
          </ul>
        </ng-template>
      </ngb-panel>
      <ngb-panel title="Incorrect value Warnings">
        <ng-template ngbPanelContent>
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
277
278
279
280
281
282
          <div
            *ngIf="incorrectWarnings.length === 0"
            class="alert alert-success mb-0"
          >
            There are no warnings about situational factors with an incorrect
            value
283
284
          </div>
          <ul *ngIf="incorrectWarnings.length > 0">
285
            <li *ngFor="let warning of incorrectWarnings">
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
286
287
288
289
              {{ warning.elementName }}
              <a [routerLink]="[]" (click)="selectElement(warning.elementId)">{{
                warning.name
              }}</a>
290
291
              has an incorrect value for the following factors
              <ul>
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
292
293
294
                <li *ngFor="let factor of warning.situationalFactors">
                  {{ factor }}
                </li>
295
296
              </ul>
            </li>
297
298
299
          </ul>
        </ng-template>
      </ngb-panel>
300
301
      <ngb-panel title="Missing Artifacts">
        <ng-template ngbPanelContent>
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
302
303
304
305
          <div
            *ngIf="missingArtifacts.length === 0"
            class="alert alert-success mb-0"
          >
306
307
308
309
            There are no warnings about missing artifacts
          </div>
          <ul *ngIf="missingArtifacts.length > 0">
            <li *ngFor="let warning of missingArtifacts">
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
310
311
312
313
              {{ warning.elementName }}
              <a [routerLink]="[]" (click)="selectElement(warning.elementId)">{{
                warning.name
              }}</a>
314
315
              is missing the following Artifacts
              <ul>
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
316
317
318
                <li *ngFor="let artifact of warning.artifacts">
                  {{ artifact.name }}
                </li>
319
320
321
322
323
324
325
              </ul>
            </li>
          </ul>
        </ng-template>
      </ngb-panel>
      <ngb-panel title="Unreachable">
        <ng-template ngbPanelContent>
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
326
327
328
329
          <div
            *ngIf="unreachableActivities.length === 0"
            class="alert alert-success mb-0"
          >
330
331
332
333
            There are no warnings about unreachable methods or activities
          </div>
          <ul *ngIf="unreachableActivities.length > 0">
            <li *ngFor="let warning of unreachableActivities">
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
334
335
336
337
              {{ warning.elementName }}
              <a [routerLink]="[]" (click)="selectElement(warning.elementId)">{{
                warning.name
              }}</a>
338
339
340
341
342
              can not be reached.
            </li>
          </ul>
        </ng-template>
      </ngb-panel>
343
    </ngb-accordion>
344
  </div>
345
</div>