diff options
Diffstat (limited to 'public/src/app/rule-engine/rule-list/rule-list.component.html')
| -rw-r--r-- | public/src/app/rule-engine/rule-list/rule-list.component.html | 259 |
1 files changed, 205 insertions, 54 deletions
diff --git a/public/src/app/rule-engine/rule-list/rule-list.component.html b/public/src/app/rule-engine/rule-list/rule-list.component.html index 4ce6efb..9a9997e 100644 --- a/public/src/app/rule-engine/rule-list/rule-list.component.html +++ b/public/src/app/rule-engine/rule-list/rule-list.component.html @@ -2,8 +2,8 @@ <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"> + <button mat-raised-button (click)="translateRules()" color="primary" [disabled]="store.ruleList.length === 0 || entryPhase === '' || publishPhase === '' " + 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> @@ -13,87 +13,238 @@ <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;"> + <div *ngIf="error" style="color: white; background: red; padding: 1rem; border-radius: 5px; font-weight: bold; margin-bottom: 15px;"> {{ error }} </div> - <app-version-type-select #versionEventType [versions]="versions" [metaData]="metaData" (nodesUpdated)="handleUpdateNode($event)" - (refrashRuleList)="handlePropertyChange()"></app-version-type-select> + <div style="display: flex"> + <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 style="display:flex;"> + <div class="field" style="display: flex; align-items: baseline;flex-direction: column; margin:0; margin-right: 10px;"> + <div class="field-label required" style="padding-right: 10px;"> + Entry Phase + </div> + <input type="text" name="entryPhase" required [(ngModel)]="entryPhase" class="field-text" style="width:250px;" + data-tests-id="entryPhase" /> + </div> + + <div class="field" style="display: flex; align-items: baseline;flex-direction: column; margin:0; margin-right: 10px;"> + <div class="field-label required" style="padding-right: 10px;"> + Publish Phase + </div> + <input type="text" name="publishPhase" [(ngModel)]="publishPhase" class="field-text" style="width:250px;" + data-tests-id="publishPhase" /> + </div> </div> + </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 style="margin-bottom: 24px;"> + <div style="display: flex; justify-content: space-between; align-items: baseline;"> + <div class="pretty p-svg" style="margin-top: 24px; margin-bottom: 10px;"> + <input type="checkbox" name="isCondition" data-tests-id="isFilter" [checked]="ifStatement" (change)="filterCheckbox()" /> <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> + <label>Filtering</label> </div> </div> - <div class="input-wrapper"> - <input type="text" ngModel required name="notify-oid" data-tests-id="notify-oid" class="input"> + <div *ngIf="ifStatement"> + <button mat-raised-button (click)="applyFilter()" color="primary" style="width: 113px;height: 36px;" + data-tests-id="applyFilter"> + Apply Filter + </button> </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 *ngIf="ifStatement"> + <app-condition #conditions [isFilter]="true" [condition]="condition" (removeConditionCheck)="removeConditionCheck($event)" + (onConditionChange)="updateCondition($event)"></app-condition> + </div> + </div> - <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 *ngIf="targetSource && (tabName.toLowerCase().includes('highlandpark') || tabName.toLowerCase().includes('hp'))"> + <div style="display: flex; align-items: baseline; width: 170px; position:relative;" (mouseenter)="showBtnList = true" + (mouseleave)="showBtnList = false" data-tests-id="addGroup"> + <div style="display: flex; align-items: center;"> + <button mat-mini-fab color="primary" id="addGroup" style="height: 16px; width: 16px; display:flex; justify-content: center; background-color: white; border: 1.5px solid #009fdb; color: #009fdb; cursor: default;"> + <span style="width: 100%; + color:#009fdb; + height: 100%; + display: flex; + justify-content: center; + align-items: center;" + [innerHTML]="'plus' | feather:12"></span> + </button> + <span style="color: #009FDB; display: flex; justify-content: center; padding-left: 10px">Add Phase</span> </div> + + <ul *ngIf="showBtnList" class="button-list"> + <li> + <button class="button-options" [disabled]="disabledMapBtn('map')" (click)="addGroup('map')" data-tests-id="btnMap"> + map + </button> + </li> + <li> + <button class="button-options" [disabled]="disabledMapBtn('enrich')" (click)="addGroup('enrich')" + data-tests-id="btnEnrich"> + enrich + </button> + </li> + </ul> </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.groupList.length > 0"> + <div *ngFor="let item of store.groupList; let index = index" style="border: solid 1px #dedede; margin: 15px 0;"> + <div class="field" style="display: flex; align-items: flex-end; margin:0px;margin-left:1em;"> + <div style="margin-right:10px;"> + <img class="icon-img" *ngIf="item.groupId.substring(0, 1).toLowerCase() !== 'm'" src="{{imgBase}}/group_enrich.svg" + alt="group_enrich"> + <img class="icon-img" *ngIf="item.groupId.substring(0, 1).toLowerCase() === 'm'" src="{{imgBase}}/group_map.svg" + alt="group_map"> + </div> + <div class="field-label" style="padding-right: 10px; color: #959595;"> + PHASE NAME + </div> + <input type="text" name="phase" [(ngModel)]="item.phase" class="field-text" data-tests-id="phase" /> - <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 class="btn-wrapper" *ngIf="item.groupId.substring(0, 1).toLowerCase() === 'm'"> + <button mat-icon-button class="gray button-options" data-tests-id="importCDAP"> + <span style="width: 100%; + color:#5a5a5a; + height: 100%; + display: flex; + justify-content: center; + align-items: center;" [innerHTML]="'upload' | feather:20"></span> + </button> + <input type="file" id="file" accept=".json" (change)="handleImportCDAP($event.target.files, item.groupId, item.phase)"> + </div> --> + + <button mat-icon-button (click)="deleteGroup(item.groupId)" [disabled]="disableDeleteGroup(item.groupId)" + class="gray" data-tests-id="deleteGroup"> + <span style="width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center;" + [innerHTML]="'trash-2' | feather:20"></span> + </button> + </div> + + <div style="margin: 1rem;"> + <div *ngFor="let rule of item.list; let index = index" data-tests-id="ruleElement" (mouseleave)="hoveredIndex=-1" + (mouseover)="hoveredIndex=index" class="item listOfRule"> + <span style="width:100%; display: flex; align-items: center;"> + {{rule.description}} - [{{rule.uid}}] + </span> + <div style="display: flex; justify-content: flex-end;" class="ruleList-btn"> + <button (click)="openAction(rule, {groupId: item.groupId, phase: item.phase})" data-tests-id="editRule" + class="btn-list" mat-icon-button> + <mat-icon class="md-24">mode_edit</mat-icon> + </button> + <button mat-icon-button class='btn-list' (click)="copyRule(rule, index, {groupId: item.groupId, phase: item.phase})" + data-tests-id="copyRule"> + <span style="width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center;" + [innerHTML]="'copy' | feather:20"></span> + </button> + <button (click)="removeItem(rule.uid, item.groupId)" data-tests-id="deleteRule" class="btn-list" + mat-icon-button [disabled]="disableDeleteGroup(item.groupId) && item.list.length === 1"> + <mat-icon class="md-24">delete</mat-icon> + </button> + </div> + </div> + </div> + + <div style="display: flex; align-items: center; margin:1em;"> + <button mat-mini-fab color="primary" id="addMoreRule" data-tests-id="addMoreRule" style="height: 16px; width: 16px; display:flex; justify-content: center;" + (click)="openAction(null,item)"> + <span style="width: 100%; + color:white; + height: 100%; + display: flex; + justify-content: center; + align-items: center;" + [innerHTML]="'plus' | feather:12"></span> + </button> + <span style="color: #009FDB; display: flex; justify-content: center; padding-left: 10px">Add Rule</span> + </div> + + </div> </div> </div> - <div style="margin: 30px 0 10px 0;"> + <div *ngIf="targetSource && !(tabName.toLowerCase().includes('highlandpark') || tabName.toLowerCase().includes('hp'))"> + + <div *ngIf="targetSource && store.ruleList.length === 0 && !(tabName.toLowerCase().includes('highlandpark') || tabName.toLowerCase().includes('hp'))" + style="margin: 30px 0; display: flex; align-items: center; justify-content: center; flex-direction: column;"> - <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}}] + <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 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> + </div> + + <div *ngIf="store.ruleList.length > 0 && !(tabName.toLowerCase().includes('highlandpark') || tabName.toLowerCase().includes('hp'))"> + <div style="display: flex; align-items: center;"> + <button mat-mini-fab color="primary" id="addMoreRule" data-tests-id="addMoreRule" style="height: 16px; width: 16px; display:flex; justify-content: center;" + (click)="openAction()"> + <span style="width: 100%; + color:white; + height: 100%; + display: flex; + justify-content: center; + align-items: center;" + [innerHTML]="'plus' | feather:15"></span> </button> + <span style="color: #009FDB; display: flex; justify-content: center; padding-left: 10px">Add Rule</span> + </div> + </div> + + <div style="margin: 15px 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 mat-icon-button class='btn-list' (click)="copyRule(item, index)" data-tests-id="copyRule"> + <span style="width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center;" + [innerHTML]="'copy' | feather:20"></span> + </button> + <button (click)="removeItem(item.uid, null)" data-tests-id="deleteRule" class="btn-list" mat-icon-button> + <mat-icon class="md-24">delete</mat-icon> + </button> + </div> </div> </div> + </div> + </div> </div> |