Summary Table
Categories |
Total Count |
PII |
0 |
URL |
0 |
DNS |
0 |
EKL |
0 |
IP |
0 |
PORT |
0 |
VsID |
0 |
CF |
0 |
AI |
0 |
VPD |
0 |
PL |
0 |
Other |
0 |
File Content
<div>
<form id="consult-query-form" [ngbCollapse]="formState.isCollapsed" class="query-section">
<div class="row" style="padding-bottom:3px;">
<div class="col-sm-5">
<h2 class="app-sub-header">Filters</h2>
<div *ngIf="getKeys(formState.filter).length==0" style="margin-top:2px;padding-left:10px">
<span style="font-size:.9em">No filters specified.</span>
</div>
<div class="d-flex align-items-center justify-content-between" style="margin-top:2px" *ngFor="let key of getFilterKeys(formState.filter); let i=index">
<div class="filter-item"><div style="width:20px;margin-left:-20px;display:inline-block;font-size:.7em"><span *ngIf="i>0">AND</span></div> {{ getFilterItemText(key) }}</div>
<button class="btn btn-query" (click)="removeFilter(key)">
<i class="sr-only">{{'Remove ' + getDef(key).header + ' Filter'}}</i>
<i class="fas fa-times-circle" style="font-size:1.1em; color: #990000"></i>
</button>
</div>
</div>
<div class="col-sm-3">
<h2 class="app-sub-header">Sort</h2>
<div *ngIf="getKeys(formState.sort).length==0" style="margin-top:2px;padding-left:10px;">
<span style="font-size:.9em">No sort specified.</span>
</div>
<div *ngIf="formState.sort" style="margin-top:2px">
<div class="d-flex justify-content-between" *ngFor="let sortItem of getKeys(formState.sort)">
<div>
<button *ngIf="formState.sort[sortItem]==='asc'" class="btn btn-query" (click)="changeSort(sortItem,'sort')">
<span class="sr-only">Query Ascending to change to descending press enter</span><i class="fas fa-arrow-circle-up"
aria-describedby="Sort Ascending" style="font-size:1.1em;color: green"></i>
</button>
<button *ngIf="formState.sort[sortItem]==='desc'" class="btn btn-query" (click)="changeSort(sortItem,'sort')">
<span class="sr-only">Query Descending to change to ascending press enter</span><i class="fas fa-arrow-circle-down"
aria-describedby="Sort Descending" style="font-size:1.1em;color: green"></i>
</button>
<span style="margin-top:2px">{{ getDef(sortItem).header }}</span>
</div>
<div>
<button class="btn btn-query" (click)="changeSort(sortItem,'delete')">
<span class="sr-only">Remove Query Filter</span><i class="fas fa-times-circle" style="font-size:1.1em;color:#990000;"></i>
</button>
</div>
</div>
</div>
</div>
<div class="col-sm-2">
<h2 class="app-sub-header">Results per Page</h2>
<select *ngIf="formState.size!==0" aria-label="Results per page" class="form-control form-control-sm" style="font-size:1em"
(change)="formState.size = $event.target.value; formState.changed = true;">
<option value="10" [selected]="formState.size==10">10</option>
<option value="25" [selected]="formState.size==25">25</option>
<option value="50" [selected]="formState.size==50">50</option>
<option value="100" [selected]="formState.size==100">100</option>
</select>
<div *ngIf="formState.size===0">All results on one page</div>
</div>
<div class="col-sm-2">
<h2 class="app-sub-header">Execute</h2>
<button [ngClass]="{ 'btn':true, 'btn-sm':true, 'btn-block': true, 'btn-primary':formState.changed, 'btn-outline-primary': !formState.changed }"
style="font-size:1em" (click)="doRefresh()">
<i class="fas fa-sync"></i> Refresh
</button>
<button class="btn btn-sm btn-block btn-outline-dark" style="font-size:1em" (click)="doReset();">
<i class="fas fa-undo"></i> Reset
</button>
</div>
</div>
<div class="row">
<div class="col-sm-5">
<div class="query-add">
<h2 class="query-add-header">Add Filter</h2>
<div class="d-flex justify-content-between">
<div class="form-inline">
<select id="filterField" name="addFilterField" style="font-size:.85em;max-width: 140px;" class="form-control form-control-sm"
[(ngModel)]="formState.addFilter.field" (change)="resetAddFilter()">
<option value="">Select Field...</option>
<option *ngFor="let itm of dataDef" value="{{itm.key}}">{{ itm.header }}</option>
</select>
<span *ngIf="getDef(formState.addFilter.field).format!=='date'">
<span style="font-size:smaller">
<label class="sr-only" for="filterOperator">Operator</label>
<select id="filterOperator" name="addFilterOp" style="margin-left:2px;font-size:.85em;"
class="form-control form-control-sm" [(ngModel)]="formState.addFilter.operator">
<option value="co">contains</option>
<option value="eq">is</option>
<option value="ne">is not</option>
<option value="lt"><</option>
<option value="gt">></option>
</select>
</span>
<label class="sr-only" for="filterText">Text to filter for</label>
<input id="filterText" name="addFilterValue" placeholder="Filter Text" class="form-control form-control-sm filterText"
[(ngModel)]="formState.addFilter.value" ngbTooltip="Enter Text to Search For. Use + sign for OR'ing items (ex: red+blue will search for the text red OR blue) " />
</span>
<span *ngIf="getDef(formState.addFilter.field).format==='date'">
<div class="form-inline">
<span class="addFilterLabel" ngbTooltip="Valid Dates: mm/dd/yyyy, T or NOW (for today), T+1 (for tomorrow), T-1 (for yesterday), T+5, etc." placement="right">from</span>
<div class="input-group input-group-sm datebox">
<input class="form-control" placeholder="mm/dd/yyyy" name="addDateStart" ngbDatepicker #d2="ngbDatepicker"
aria-label="request date minimum" [(ngModel)]="formState.addFilter.value" [ngClass]="{'invalid-input': !formState.addFilter.valueValid} ">
<div class="input-group-append">
<button class="btn btn-outline-secondary" (click)="d2.toggle()" type="button" aria-label="click to toggle popup calendar">
<i class="fas fa-calendar"></i>
</button>
</div>
</div>
</div>
<div [hidden]="formState.addFilter.valueValid" class="invalid-text">*Invalid 'from' Date</div>
<div class="form-inline">
<span class="addFilterLabel" ngbTooltip="Valid Dates: mm/dd/yyyy, T or NOW (for today), T+1 (for tomorrow), T-1 (for yesterday), T+5, etc." placement="right">to</span>
<div class="input-group input-group-sm datebox">
<input class="form-control" placeholder="mm/dd/yyyy" name="addDateEnd" ngbDatepicker #e2="ngbDatepicker"
aria-label="request date maximum" [(ngModel)]="formState.addFilter.value2" [ngClass]="{'invalid-input': !formState.addFilter.value2Valid} ">
<div class="input-group-append">
<button class="btn btn-outline-secondary" (click)="e2.toggle()" type="button" aria-label="click to toggle popup calendar">
<i class="fas fa-calendar"></i>
</button>
</div>
</div>
</div>
<div [hidden]="formState.addFilter.value2Valid" class="invalid-text">*Invalid 'to' Date</div>
</span>
</div>
<button class="btn btn-outline-secondary btn-sm btn-white" (click)="addFilter()" [disabled]="!this.formState.addFilter.field || (!this.formState.addFilter.value && !this.formState.addFilter.value2)">
<i class="sr-only">Add Filter</i>
<i class="fas fa-plus-circle" style="font-size:1.1em; color: #003399"></i> Add
</button>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="query-add">
<h2 class="query-add-header">Add Sort</h2>
<div class="d-flex justify-content-between">
<select class="form-control form-control-sm" style="font-size:.9em;" (change)="formState.addSort=$event.target.value">
<option value="" [selected]="formState.addSort===''">Add sort field...</option>
<option *ngFor="let itm of dataDef" value="{{itm.key}}">{{ itm.header }}</option>
</select>
<div style="margin-left:2px">
<button class="btn btn-sm btn-outline-secondary btn-white" (click)="changeSort('','add')" [disabled]="!this.formState.addSort">
<i class="sr-only">Add Sort</i>
<i class="fas fa-plus-circle" style="font-size:1.1em; color: #003399"></i> Add
</button>
</div>
</div>
</div>
</div>
<div class="col-sm-2"></div>
<div class="col-sm-2 align-self-end text-right">
<button type="button" class="btn btn-sm btn-outline-primary btn-collapse text-left" *ngIf="!formState.isCollapsed"
style="font-size:.95em;padding:3px;" (click)="formState.isCollapsed = !formState.isCollapsed"
[attr.aria-expanded]="!formState.isCollapsed" aria-controls="consult-query-form">
<i class="fas fa-caret-square-up"></i> Hide Query Editor
</button>
</div>
</div>
</form>
<div class="d-flex justify-content-between" *ngIf="formState.isCollapsed">
<div style="font-size:1em;padding-left:3px;" [innerHTML]="'Current Query: Records ' + getQueryText()"></div>
<button type="button" class="btn btn-sm btn-outline-primary btn-collapse text-right" style="font-size:.95em;padding:3px;max-width:90%;"
(click)="formState.isCollapsed = !formState.isCollapsed" [attr.aria-expanded]="!formState.isCollapsed"
aria-controls="consult-query-form">
<i class="fas fa-caret-square-down"></i> Show Query Editor
</button>
</div>
</div>