summaryrefslogtreecommitdiffstats
path: root/public/src/app/rule-engine/action/action.component.html
blob: b41ab824a569833eea2a6764a0250e6b738d6be3 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<form #actionFrm="ngForm" class="conatiner" id="{{action.id}}" (mouseover)="changeStyle($event)" (mouseout)="changeStyle($event)">
  <div>
    <div class="center-content">
      <!-- type info -->
      <div class="action-info" [ngClass]="highlight">
        {{action.actionType | uppercase}}
      </div>
      <!-- from component -->
      <app-from #from style="width: 100%" [actionType]="action.actionType" (onFromChange)="updateFrom($event)"></app-from>
      <!-- target component -->
      <app-target #target style="width: 100%" (onTargetChange)="updateTarget($event)" [nodes]="action.nodes">
      </app-target>
    </div>

    <!-- dateFormatter -->
    <div *ngIf="action.actionType === 'date formatter'" style="display: flex; flex-direction: column; margin: 1em; align-items: flex-end;">
      <div style="display: flex; margin: 0.5em 0;">
        <div class="from">
          <div class="from-conatiner">
            <div style="display: flex; align-items: center;" class="label">
              <span class="label" style="padding: 0 5px; width: 100px;">From Format</span>
              <input class="input-text" ngModel required name="fromFormat" [(ngModel)]="action.dateFormatter.fromFormat" type="text">
            </div>
          </div>
        </div>
        <div class="from">
          <div class="from-conatiner">
            <div style="display: flex; align-items: center;" class="label">
              <span class="label" style="padding: 0 5px; width: 100px;">To Format</span>
              <input class="input-text" ngModel required name="toFormat" [(ngModel)]="action.dateFormatter.toFormat" type="text">
            </div>
          </div>
        </div>
      </div>

      <div style="display: flex; margin: 0.5em 0;">
        <div class="from">
          <div class="from-conatiner">
            <div style="display: flex; align-items: center;" class="label">
              <span class="label" style="padding: 0 5px; width: 100px;">From Time-zone</span>
              <input class="input-text" ngModel required name="fromTimezone" [(ngModel)]="action.dateFormatter.fromTimezone" type="text">
            </div>
          </div>
        </div>
        <div class="from">
          <div class="from-conatiner">
            <div style="display: flex; align-items: center;" class="label">
              <span class="label" style="padding: 0 5px; width: 100px;">To Time-zone</span>
              <input class="input-text" ngModel required name="toTimezone" [(ngModel)]="action.dateFormatter.toTimezone" type="text">
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Map -->
    <div *ngIf="action.actionType === 'map'" class="map-container">
      <!-- Default checkbox and input -->
      <div class="default" style="display: flex; align-items: center">
        <div class="pretty p-svg">
          <input type="checkbox" name="defaultCheckbox" data-tests-id="defaultCheckbox" [checked]="action.map.haveDefault" (change)="changeCheckbox()"
          />
          <div class="state">
            <!-- svg path -->
            <svg class="svg svg-icon" viewBox="0 0 20 20">
              <path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"
                style="stroke: #009fdb; fill:#009fdb;"></path>
            </svg>
            <label>Default</label>
          </div>
        </div>
        <div *ngIf="action.map.haveDefault" class="input-wrapper">
          <input type="text" ngModel required name="defaultInput" data-tests-id="defaultInput" [(ngModel)]="action.map.default" class="input">
        </div>
      </div>

      <table style="width: 100%; margin-bottom: 1rem;">
        <thead style="background: #D2D2D2;">
          <tr style="height: 30px;">
            <th style="padding-left: 10px;">Key</th>
            <th style="padding-left: 10px;">value</th>
          </tr>
        </thead>
        <tbody ngModelGroup="mapKeyValue" #mapKeyValue="ngModelGroup">
          <tr *ngFor="let item of action.map.values; let index = index;" (mouseleave)="hoveredIndex=-1" (mouseover)="hoveredIndex=index">
            <th style="height: 30px; border: 1px solid #F3F3F3;">
              <input [(ngModel)]="item.key" ngModel required name="mapValue[{{index}}]" data-tests-id="key" type="text" style="width:97%; height: 100%;border: none; padding:0 5px;">
            </th>
            <th style="height: 30px; border: 1px solid #F3F3F3;">
              <input [(ngModel)]="item.value" ngModel required name="mapValue[{{index}}]" data-tests-id="value" type="text" style="width:97%; height: 100%;border: none; padding:0 5px;">
            </th>
            <th style="height: 30px; display: flex; align-items: baseline;">
              <button mat-icon-button [ngStyle]="hoveredIndex === index ? {'opacity':'1'} : {'opacity':'0'}" class="button-remove" (click)="removeMapRow(index)"
                *ngIf="action.map.values.length > 1" style="height: 24px; width: 24px; display:flex; box-shadow: none;">
                <mat-icon class="md-24">delete</mat-icon>
              </button>
            </th>
          </tr>
        </tbody>
      </table>


      <div style="display:flex; justify-content: space-between;">
        <div style="display: flex; align-items: center;">
          <button mat-mini-fab color="primary" (click)="addMapRow()" style="height: 24px; width: 24px; display:flex; box-shadow: none;">
            <mat-icon>add</mat-icon>
          </button>
          <span style="color: #009FDB; display: flex; justify-content: center; padding-left: 6px">Add Row</span>
        </div>
      </div>
    </div>

  </div>
</form>