bm-process-diagram.component.html 10.4 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
199
200
<div class="container">
  <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
201
202
203
    <button class="btn btn-primary" (click)="saveDiagram()">
      Save Diagram
    </button>
204
  </div>
205
206
207

  <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
208
209
210
    <div *ngIf="isGeneratingWarnings" class="alert alert-info mb-0">
      Loading warnings
    </div>
211
212
213
214
215
216
217
    <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">
218
            <li *ngFor="let warning of lowWarnings">
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
219
220
221
222
              {{ warning.elementName }}
              <a [routerLink]="[]" (click)="selectElement(warning.elementId)">{{
                warning.name
              }}</a>
223
224
              has a too low value for the following factors
              <ul>
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
225
226
227
                <li *ngFor="let factor of warning.situationalFactors">
                  {{ factor }}
                </li>
228
229
              </ul>
            </li>
230
231
232
233
234
          </ul>
        </ng-template>
      </ngb-panel>
      <ngb-panel title="Incorrect value Warnings">
        <ng-template ngbPanelContent>
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
235
236
237
238
239
240
          <div
            *ngIf="incorrectWarnings.length === 0"
            class="alert alert-success mb-0"
          >
            There are no warnings about situational factors with an incorrect
            value
241
242
          </div>
          <ul *ngIf="incorrectWarnings.length > 0">
243
            <li *ngFor="let warning of incorrectWarnings">
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
244
245
246
247
              {{ warning.elementName }}
              <a [routerLink]="[]" (click)="selectElement(warning.elementId)">{{
                warning.name
              }}</a>
248
249
              has an incorrect value for the following factors
              <ul>
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
250
251
252
                <li *ngFor="let factor of warning.situationalFactors">
                  {{ factor }}
                </li>
253
254
              </ul>
            </li>
255
256
257
          </ul>
        </ng-template>
      </ngb-panel>
258
259
      <ngb-panel title="Missing Artifacts">
        <ng-template ngbPanelContent>
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
260
261
262
263
          <div
            *ngIf="missingArtifacts.length === 0"
            class="alert alert-success mb-0"
          >
264
265
266
267
            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
268
269
270
271
              {{ warning.elementName }}
              <a [routerLink]="[]" (click)="selectElement(warning.elementId)">{{
                warning.name
              }}</a>
272
273
              is missing the following Artifacts
              <ul>
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
274
275
276
                <li *ngFor="let artifact of warning.artifacts">
                  {{ artifact.name }}
                </li>
277
278
279
280
281
282
283
              </ul>
            </li>
          </ul>
        </ng-template>
      </ngb-panel>
      <ngb-panel title="Unreachable">
        <ng-template ngbPanelContent>
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
284
285
286
287
          <div
            *ngIf="unreachableActivities.length === 0"
            class="alert alert-success mb-0"
          >
288
289
290
291
            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
292
293
294
295
              {{ warning.elementName }}
              <a [routerLink]="[]" (click)="selectElement(warning.elementId)">{{
                warning.name
              }}</a>
296
297
298
299
300
              can not be reached.
            </li>
          </ul>
        </ng-template>
      </ngb-panel>
301
    </ngb-accordion>
302
  </div>
303
</div>