bm-process-diagram.component.html 7.93 KB
Newer Older
1
2
<ng-template #addProcessPatternModal let-d="dismiss">
  <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
9
    <button type="button" class="close" aria-label="Close" (click)="d()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <div class="text-muted pt-3">
10
11
12
13
14
15
16
17
      <app-select-process-pattern-form [processPatterns]="modalProcessPatterns"
                                       (submitProcessPatternForm)="addProcessPattern($event)"></app-select-process-pattern-form>
    </div>
  </div>
</ng-template>

<ng-template #selectProcessPatternModal let-d="dismiss">
  <div class="modal-header">
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
18
    <h4 class="modal-title">Select Method Pattern</h4>
19
20
21
22
23
24
25
26
    <button type="button" class="close" aria-label="Close" (click)="d()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <div class="text-muted pt-3">
      <app-select-process-pattern-form [processPatterns]="modalProcessPatterns"
                                       (submitProcessPatternForm)="selectProcessPattern(modalElement, $event); d()"></app-select-process-pattern-form>
27
28
29
30
    </div>
  </div>
</ng-template>

31
<ng-template #showTypesModal let-d="dismiss">
32
  <div class="modal-header">
33
    <h4 class="modal-title">Show types of {{modalElement.businessObject.name}}</h4>
34
35
36
37
38
    <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
39
    <div class="alert alert-info">
40
      Types that are defined for this activity. Angle brackets ("<<", ">>") indicate lists.
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
41
    </div>
42
    <h5>Needed</h5>
43
    <ul class="list-group" *ngIf="modalElement.businessObject.get('neededType').length > 0">
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
44
45
46
47
      <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>
48
    </ul>
49
    <div class="alert alert-info" *ngIf="modalElement.businessObject.get('neededType').length === 0">
50
      No needed types defined for this activity.
51
52
    </div>
    <h5 class="mt-3">Forbidden</h5>
53
    <ul class="list-group" *ngIf="modalElement.businessObject.get('forbiddenType').length > 0">
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
54
55
56
57
      <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>
58
    </ul>
59
    <div class="alert alert-info" *ngIf="modalElement.businessObject.get('forbiddenType').length === 0">
60
      No forbidden types defined for this activity.
61
62
63
64
    </div>
  </div>
</ng-template>

65
66
<ng-template #deleteProcessPatternModal let-d="dismiss">
  <div class="modal-header">
Alexander Philipp Nowosad's avatar
Alexander Philipp Nowosad committed
67
    <h4 class="modal-title">Delete Method Pattern {{modalElement.businessObject.name}}</h4>
68
69
70
71
72
    <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
73
    <div class="alert alert-warning">Deleting the Method Pattern {{modalElement.businessObject.name}}.</div>
74
75
76
  </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
77
      Delete Method Pattern
78
79
80
81
    </button>
  </div>
</ng-template>

82
83
<ng-template #selectDevelopmentMethodModal let-d="dismiss">
  <div class="modal-header">
84
    <h4 class="modal-title">Select Method Building Block for {{modalElement.businessObject.name}}</h4>
85
86
87
88
89
90
91
92
93
    <button type="button" class="close" aria-label="Close" (click)="d()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <div class="text-muted pt-3">
      <form [formGroup]="selectDevelopmentMethodForm"
            (ngSubmit)="selectDevelopmentMethod(modalElement, selectDevelopmentMethodForm); resetSelectDevelopmentMethodModal()">
        <div class="form-group row">
94
          <label for="developmentMethodSelector" class="col-sm-4 col-form-label">Method Building Block</label>
95
96
97
98
          <div class="col-sm-8">
            <select id="developmentMethodSelector" formControlName="developmentMethodId" class="form-control">
              <option *ngIf="!validDevelopmentMethods">Loading...</option>
              <option *ngIf="validDevelopmentMethods && validDevelopmentMethods.length === 0">
99
                No fitting Method Building Blocks
100
101
102
103
104
105
106
107
              </option>
              <option *ngFor="let dm of validDevelopmentMethods" [value]="dm._id">{{ dm.name }}</option>
            </select>
          </div>
        </div>
        <div class="form-group row">
          <div class="col-sm-12">
            <button type="submit" class="btn btn-sm btn-dark btn-block" [disabled]="!selectDevelopmentMethodForm.valid">
108
              Select Method Building Block
109
110
111
112
113
114
115
116
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
</ng-template>

117
118
<ng-template #methodInfoModal let-d="dismiss">
  <div class="modal-header">
119
    <h4 class="modal-title">Overview of Activity {{modalElement.businessObject.name}}</h4>
120
121
122
123
124
    <button type="button" class="close" aria-label="Close" (click)="d()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
125
126
    <app-method-info [developmentMethod]="modalDevelopmentMethod" [decision]="bmProcess.decisions[modalElement.id]"
                     (updateDecisions)="updateDecisions($event)"></app-method-info>
127
128
129
  </div>
</ng-template>

130
131
132
<ng-template #patternInfoModal let-d="dismiss">
  <div class="modal-header">
    <h4 *ngIf="modalElement.businessObject.taskName" class="modal-title">
133
      Overview of Activity {{modalElement.businessObject.taskName}}
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
    </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">
    <table class="table mb-0">
      <tbody>
      <tr>
        <th scope="row">Pattern Name</th>
        <td>{{modalProcessPattern.name}}</td>
      </tr>
149
150
151
152
      <tr>
        <th scope="row">Pattern Description</th>
        <td class="show-new-lines">{{modalProcessPattern.description}}</td>
      </tr>
153
154
155
156
157
      </tbody>
    </table>
  </div>
</ng-template>

158
<div #canvas class="border" style="height: 500px"></div>
159
160
161
<div class="container">
  <div class="my-3 p-3 bg-white rounded shadow-sm">
    <h6 class="border-bottom border-gray pb-2">Controls</h6>
162
    <button class="btn btn-primary" (click)="saveDiagram()">Save Diagram</button>
163
  </div>
164
165
166

  <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
167
    <div *ngIf="isGeneratingWarnings" class="alert alert-info mb-0">Loading warnings</div>
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
    <ng-container *ngIf="!isGeneratingWarnings">
      <h6>Missing Warnings</h6>
      <div *ngIf="missingWarnings.length === 0" class="alert alert-success">
        There are no warnings about missing situational factors
      </div>
      <ul *ngIf="missingWarnings.length > 0">
        <li *ngFor="let warning of missingWarnings">{{warning}}</li>
      </ul>
      <h6>Low value Warnings</h6>
      <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">
        <li *ngFor="let warning of lowWarnings">{{warning}}</li>
      </ul>
      <h6>Incorrect value Warnings</h6>
      <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">
        <li *ngFor="let warning of incorrectWarnings">{{warning}}</li>
      </ul>
    </ng-container>
191
  </div>
192
</div>
193