bm-process-diagram.component.html 6.99 KB
Newer Older
1
2
3
4
5
6
7
8
9
<ng-template #addProcessPatternModal let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title">Add Process Pattern</h4>
    <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
18
19
20
21
22
23
24
25
26
      <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">
    <h4 class="modal-title">Select Process Pattern</h4>
    <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
40
41
    <div class="alert alert-info">
      Types that are defined for this task. Angle brackets ("<<", ">>") indicate lists.
    </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
50
    <div class="alert alert-info" *ngIf="modalElement.businessObject.get('neededType').length === 0">
      No needed types defined for this task.
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
60
    <div class="alert alert-info" *ngIf="modalElement.businessObject.get('forbiddenType').length === 0">
      No forbidden types defined for this task.
61
62
63
64
    </div>
  </div>
</ng-template>

65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<ng-template #deleteProcessPatternModal let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title">Delete Process Pattern {{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">
    <div class="alert alert-warning">Deleting the process pattern {{modalElement.businessObject.name}}.</div>
  </div>
  <div class="modal-footer">
    <button class="btn btn-danger btn-block" (click)="deleteProcessPattern(modalElement); d()">
      Delete Process Pattern
    </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
119
120
121
122
123
124
<ng-template #methodInfoModal let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title">Overview of Task {{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">
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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<ng-template #patternInfoModal let-d="dismiss">
  <div class="modal-header">
    <h4 *ngIf="modalElement.businessObject.taskName" class="modal-title">
      Overview of Task {{modalElement.businessObject.taskName}}
    </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>
      </tbody>
    </table>
  </div>
</ng-template>

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

  <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
163
164
165
166
167
    <div *ngIf="warnings.length === 0 && !isGeneratingWarnings" class="alert alert-success mb-0">
      There are no warnings
    </div>
    <div *ngIf="isGeneratingWarnings" class="alert alert-info mb-0">Loading warnings</div>
    <ul *ngIf="warnings.length > 0">
168
169
170
      <li *ngFor="let warning of warnings">{{warning}}</li>
    </ul>
  </div>
171
</div>
172