bm-process-diagram.component.html 4.89 KB
Newer Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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">
      <app-select-process-pattern-form
        (submitProcessPatternForm)="addProcessPattern($event)"></app-select-process-pattern-form>
    </div>
  </div>
</ng-template>

16
<ng-template #showTypesModal let-d="dismiss">
17
  <div class="modal-header">
18
    <h4 class="modal-title">Show types of {{modalElement.businessObject.name}}</h4>
19
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">
    <h5>Needed</h5>
25
    <ul class="list-group" *ngIf="modalElement.businessObject.get('neededType').length > 0">
26
      <li class="list-group-item"
27
          *ngFor="let type of modalElement.businessObject.get('neededType')">{{type.name}}</li>
28
    </ul>
29
30
    <div class="alert alert-info" *ngIf="modalElement.businessObject.get('neededType').length === 0">
      No needed types defined for this task.
31
32
    </div>
    <h5 class="mt-3">Forbidden</h5>
33
    <ul class="list-group" *ngIf="modalElement.businessObject.get('forbiddenType').length > 0">
34
      <li class="list-group-item"
35
          *ngFor="let type of modalElement.businessObject.get('forbiddenType')">{{type.name}}</li>
36
    </ul>
37
38
    <div class="alert alert-info" *ngIf="modalElement.businessObject.get('forbiddenType').length === 0">
      No forbidden types defined for this task.
39
40
41
42
    </div>
  </div>
</ng-template>

43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<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>

60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<ng-template #selectDevelopmentMethodModal let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title">Select Development Method for {{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="text-muted pt-3">
      <form [formGroup]="selectDevelopmentMethodForm"
            (ngSubmit)="selectDevelopmentMethod(modalElement, selectDevelopmentMethodForm); resetSelectDevelopmentMethodModal()">
        <div class="form-group row">
          <label for="developmentMethodSelector" class="col-sm-4 col-form-label">Development Method</label>
          <div class="col-sm-8">
            <select id="developmentMethodSelector" formControlName="developmentMethodId" class="form-control">
              <option *ngIf="!validDevelopmentMethods">Loading...</option>
              <option *ngIf="validDevelopmentMethods && validDevelopmentMethods.length === 0">
                No fitting development methods
              </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">
              Select Development Method
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
</ng-template>

95
96
97
98
99
100
101
102
<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">
103
    <table class="table mb-0">
104
105
106
107
108
109
110
      <tbody>
      <tr>
        <th scope="row">Method Name</th>
        <td>{{modalElement.businessObject.get('method').get('name')}}</td>
      </tr>
      <tr>
        <th scope="row">Method Description</th>
111
        <td class="show-new-lines">{{modalElement.businessObject.get('method').get('description')}}</td>
112
113
114
115
116
117
      </tr>
      </tbody>
    </table>
  </div>
</ng-template>

118
<div #canvas class="border" style="height: 500px"></div>
119
120
121
122
123
124
<div class="container">
  <div class="my-3 p-3 bg-white rounded shadow-sm">
    <h6 class="border-bottom border-gray pb-2">Controls</h6>
    <button class="btn btn-primary" (click)="save()">Save Diagram</button>
  </div>
</div>
125