summaryrefslogtreecommitdiffstats
path: root/public/src/app/rule-engine/rule-list/rule-list.component.html
blob: 4ce6efbbe7de3634710e50fefe976e1cc004746c (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
<div class="container">
  <div class="header">
    <span style="font-size: 18px; margin-left:20px;">Rule Engine</span>
    <div style="display:flex">
      <button mat-raised-button (click)="translateRules()" color="primary" [disabled]="store.ruleList.length === 0" style="margin-right: 10px; width: 113px;height: 36px;"
        data-tests-id="btnTranslate">
        Translate
      </button>
      <app-bar-icons [tabName]="this.store.tabParmasForRule[0].name"></app-bar-icons>
    </div>
  </div>

  <div style="margin: 0rem 1rem; flex-grow: 1; overflow-y: auto;">

    <!-- error container -->
    <div *ngIf="error" style="color: white; background: red; padding: 1rem; border-radius: 5px; font-weight: bold;">
      {{ error }}
    </div>

    <app-version-type-select #versionEventType [versions]="versions" [metaData]="metaData" (nodesUpdated)="handleUpdateNode($event)"
      (refrashRuleList)="handlePropertyChange()"></app-version-type-select>

    <!-- <div class="container-phase-notify">
      <div>
        <span class="field-label required" style="margin-right: 10px;">
          phase
        </span>
        <select name="phase" [(ngModel)]="phase" data-tests-id="phase" style="height: 27px; padding: 0.3rem; margin-right: 18px;"
          class="field-select">
          <option [ngValue]="null" disabled>Select phase</option>
        </select>
      </div>

      <div class="default" style="display: flex; align-items: center">
        <div class="pretty p-svg">
          <input type="checkbox" name="notifyCheckbox" data-tests-id="notifyCheckbox" />
          <div class="state">
            <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>notify OID</label>
          </div>
        </div>
        <div class="input-wrapper">
          <input type="text" ngModel required name="notify-oid" data-tests-id="notify-oid" class="input">
        </div>
      </div>

    </div> -->

    <div *ngIf="targetSource && store.ruleList.length === 0" style="margin: 30px 0; display: flex; align-items: center; justify-content: center; flex-direction: column;">

      <div style="margin: 3em 0 2em 0;">
        <div style="font-size: 1.5em;">
          Rules were not yet created
        </div>
        <div style="padding: 0.5em; padding-top: 1em;">
          Please create a new normalization rule
        </div>
      </div>

      <button mat-fab (click)="openAction()" style="background-color:#009FDB" data-tests-id="btnAddFirstRule">
        <span [innerHTML]="'plus' | feather:24"></span>
      </button>
      <span style="margin-top: 1rem; font-size: 14px; color: #009FDB;">
        Add First Rule
      </span>
    </div>

    <div *ngIf="store.ruleList.length > 0">
      <div style="display: flex; align-items: center;">
        <button mat-mini-fab color="primary" id="addMoreRule" data-tests-id="addMoreRule" style="height: 24px; width: 24px; display:flex"
          (click)="openAction()">
          <mat-icon class="material-icons md-18">add</mat-icon>
        </button>
        <span style="color: #009FDB; display: flex; justify-content: center; padding-left: 10px">Add Rule</span>
      </div>
    </div>

    <div style="margin: 30px 0 10px 0;">

      <div *ngFor="let item of store.ruleList; let index = index" data-tests-id="ruleElement" (mouseleave)="hoveredIndex=-1" (mouseover)="hoveredIndex=index"
        class="item" style="display: flex;" [ngStyle]="hoveredIndex === index ? {'background-color': '#E6F6FB', 'color': '#009FDB'} : {'background-color': '#FFFFFF', 'color':'gray'}">
        <span style="width:100%; display: flex; align-items: center;">
          {{item.description}} - [{{item.uid}}]
        </span>
        <div style="display: flex; justify-content: flex-end;" *ngIf="index==hoveredIndex">
          <button (click)="openAction(item)" data-tests-id="editRule" class="btn-list" mat-icon-button>
            <mat-icon class="md-24">mode_edit</mat-icon>
          </button>
          <button (click)="removeItem(item.uid)" data-tests-id="deleteRule" class="btn-list" mat-icon-button>
            <mat-icon class="md-24">delete</mat-icon>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>