Skip to content

Commit

Permalink
Merged in bugfix/SHIBUI-777 (pull request #168)
Browse files Browse the repository at this point in the history 
SHIBUI-777 Added info icons and required labels

Approved-by: Shibui Jenkins <shibui.jenkins@gmail.com>
Approved-by: Ryan Mathis <rmathis@unicon.net>
  • Loading branch information
@rmathis
rmathis committed Aug 20, 2018
2 parents b8cc2ab + 390f3bf commit 62b6183
Showing 1 changed file with 75 additions and 43 deletions.
118 changes: 75 additions & 43 deletions ui/src/app/schema-form/widget/filter-target/filter-target.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,17 @@
<fieldset>
<div class="row">
<div class="col-lg-6">
<div class="d-flex justify-content-start">
<div>
<label [attr.for]="id" class="d-flex justify-content-start control-label">
<span>Search By <i class="fa fa-asterisk text-danger" aria-hidden="true"></i></span>
<span>
<ng-template #tooltipBy i18n="@@tooltip--description">Search By</ng-template>
<i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
[ngbPopover]="tooltipBy"
i18n-aria-label="@@tooltip--instruction"
aria-label="Information icon - press spacebar to read additional information for this form field"></i>
</span>
</label>
<div ngbDropdown>
<button ngbDropdownToggle
class="btn btn-outline-secondary dropdown-toggle"
Expand All @@ -12,57 +22,79 @@
{{ this.displayType }}
</button>
<div class="dropdown-menu" ngbDropdownMenu>
<a *ngFor="let option of typeOptions" class="dropdown-item" href="#" (click)="$event.preventDefault(); select(option.value);">
<a *ngFor="let option of typeOptions"
class="dropdown-item"
href="#"
(click)="$event.preventDefault(); select(option.value);">
{{ option.description }}
</a>
</div>
</div>
&nbsp;
<i class="fa fa-asterisk text-danger"></i>
</div>
<br />
<div class="d-flex justify-content-between">
<div class="w-100" [ngSwitch]="this.entityAttributesFilterTargetType">
<ng-container *ngSwitchDefault>
<auto-complete
id="entityId"
class="component-control"
limit="10"
[formControl]="search"
[matches]="ids$ | async"
(keydown.enter)="onSelectValue(search.value)">
</auto-complete>
<small [class.text-danger]="search.invalid && search.touched">
You must add at least one entity id target and they must each be unique.
</small>
</ng-container>
<ng-container *ngSwitchCase="'CONDITION_SCRIPT'">
<p class="codearea form-control" rows="8" contenteditable [formControl]="script" name="script"></p>
<small id="script-help" class="text-danger">
<ng-container *ngIf="script.invalid && script.touched">Required for Scripts</ng-container>
&nbsp;
</small>
</ng-container>
<ng-container *ngSwitchCase="'REGEX'">
<input class="form-control" type="text" [formControl]="script" name="script" />
<small id="regex-help" class="text-danger">
<ng-container *ngIf="script.invalid && script.touched">Required for Regex</ng-container>
&nbsp;
</small>
</ng-container>
</div>
<div class="ml-2" *ngIf="entityAttributesFilterTargetType === 'ENTITY'">
<button
class="btn btn-success"
[disabled]="search.invalid"
(click)="onSelectValue(search.value)">
Add Entity ID
</button>
<div>
<label [attr.for]="id" class="d-flex justify-content-start control-label">
<span>
Search Criteria by {{ this.displayType }}
<i class="fa fa-asterisk text-danger"
aria-hidden="true"
*ngIf="entityAttributesFilterTargetType !== 'ENTITY'"></i>
</span>
<span>
<ng-template #tooltipCriteria i18n="@@tooltip--description">
Search Criteria by {{ this.displayType }}
</ng-template>
<i class="info-icon fa fa-fw fa-info-circle text-primary fa-lg"
[ngbPopover]="tooltipCriteria"
i18n-aria-label="@@tooltip--instruction"
aria-label="Information icon - press spacebar to read additional information for this form field"></i>
</span>
</label>
<div class="d-flex justify-content-between">
<div class="w-100" [ngSwitch]="this.entityAttributesFilterTargetType">
<ng-container *ngSwitchDefault>
<auto-complete
id="entityId"
class="component-control"
limit="10"
[formControl]="search"
[matches]="ids$ | async"
(keydown.enter)="onSelectValue(search.value)">
</auto-complete>
<small [class.text-danger]="search.invalid && search.touched">
You must add at least one entity id target and they must each be unique.
</small>
</ng-container>
<ng-container *ngSwitchCase="'CONDITION_SCRIPT'">
<p class="codearea form-control" rows="8" contenteditable [formControl]="script" name="script"></p>
<small id="script-help" class="text-danger">
<ng-container *ngIf="script.invalid && script.touched">Required for Scripts</ng-container>
&nbsp;
</small>
</ng-container>
<ng-container *ngSwitchCase="'REGEX'">
<input class="form-control" type="text" [formControl]="script" name="script" />
<small id="regex-help" class="text-danger">
<ng-container *ngIf="script.invalid && script.touched">Required for Regex</ng-container>
&nbsp;
</small>
</ng-container>
</div>
<div class="ml-2" *ngIf="entityAttributesFilterTargetType === 'ENTITY'">
<button
class="btn btn-success"
[disabled]="search.invalid"
(click)="onSelectValue(search.value)">
Add Entity ID
</button>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<ul class="list-group list-group-sm list-group-scroll" *ngIf="entityAttributesFilterTargetType === 'ENTITY'">
<div class="col-lg-6" *ngIf="entityAttributesFilterTargetType === 'ENTITY'">
<label class="control-label">Entity Ids Added</label>
<hr />
<ul class="list-group list-group-sm list-group-scroll">
<li class="list-group-item d-flex justify-content-between align-items-center" *ngFor="let id of targets">
{{ id }}
<button class="btn btn-link text-right" (click)="removeId(id)">
Expand Down

0 comments on commit 62b6183

Please sign in to comment.