SmartIT_Extensions/BMC/smart-it-full/views/common/foundation-selector.html

71 lines
4.9 KiB
HTML

<div class="fd-selector" ng-class="{'row': inline}">
<div ng-repeat="fdField in fdSelector.fdFields | filter: {'visible': true}" class="fd-selector__fd-field dropdown {{fieldLengthForSm6 ? 'col-sm-12 ticket__change-location__field' : (fieldLengthForSm4 ? 'col-sm-12 ticket__change-location__field' : 'col-sm-4 ticket__change-location__field')}}" ng-class="{'col-xs-3': inline}">
<label ng-if="fieldLengthForSm6" class="label_control-wrap">
<span class="label__text" ng-class="{'required__label': isRequired}" data-required="{{'common.label.required.bracketed' | i18n}}">
{{'foundation.label.' + fdField.label | i18n}}
</span>
</label>
<button type="button" id="{{$first ? 'foundation-selector__' + fdSelector.label : ''}}"
class="dropdown-input__button dropdown-toggle clearfix" ng-class="{'dropdown-input__button_placeholder': !fdField.value, 'ng-invalid ng-invalid-required': $first && isRequired && !fdField.value}"
title="{{('foundation.label.' + fdField.label | i18n) + ' ' + (fdField.value!=null ? fdField.value : '')}}"
aria-label="{{('foundation.label.' + fdField.label | i18n) + ' ' + fdField.value}}" ng-disabled="!isEditable"
ng-click="loadDataForField(fdSelector.fdFields, fdField)" ng-enter="loadDataForField(fdControl.fdFields, fdField)">
<div loading-spinner if="fdField.populatingAvailableValues" overlay="true" centered="true" inline="true"></div>
<span class="fd-field__value">{{fdField.value || ('foundation.label.' + fdField.label | i18n)}}</span>
<span ng-if="fdField.connected.name" class="dropdown-item__connected-value">{{fdField.connected.value}}</span>
</button>
<i class="icon-cross" ng-class="{'ticket__change-location__cross' : fieldLengthForSm6}" title="{{'common.button.clear' | i18n}} {{'foundation.label.' + fdField.label | i18n}}" role="link"
ng-if="fdField.value && isEditable" ng-click="resetFieldValue(fdSelector.fdFields, fdField, $event)" ng-enter="resetFieldValue(fdSelector.fdFields, fdField, $event)" tabindex="0"></i>
<ul class="dropdown-menu" ng-if="!fdField.populatingAvailableValues">
<li ng-if="(!typeaheadMode && !fdField.availableValues.length) || (typeaheadMode && !fdField.availableValues.length && !state.tooManyData)">
<div class="dropdown-item" role="menuitem" tabindex="0">
{{'categorization.noTiers' | i18n}}
</div>
</li>
<li class="dropdown-item__header" ng-if="fdField.availableValues.length && !state.tooManyData">{{'common.placeholder.search' | i18n}}</li>
<li class="dropdown-item_search-bar" ng-if="fdField.availableValues.length && !state.tooManyData">
<i class="icon-search dropdown-item_search-icon"></i>
<input title="{{'foundation.label.' + fdField.label | i18n}}"
prevent-click-event
class="dropdown-item_search"
type="text"
ng-model="searchFilterText"
ng-keyup="handleKeyup($event, fdField)"
placeholder="{{'foundation.label.' + fdField.label | i18n}}"/>
</li>
<li class="dropdown-item_typeahead-bar" ng-if="typeaheadMode && state.tooManyData">
<div class="dropdown-item_typeahead-label" ng-if="search.typeaheadText && state.showTooltip">{{'search.category.exceedsChunkSize' | i18n}}</div>
<div class="dropdown-item_typeahead-label" ng-if="!search.typeaheadText">{{'common.labels.tooManyToDisplay' | i18n}}</div>
<input prevent-click-event
class="dropdown-item_search-bar-input"
type="text"
ng-model="search.typeaheadText"
typeahead-min-length="3"
typeahead="region as region.name for region in loadDataByText(fdSelector.fdFields, fdField, $viewValue)"
typeahead-on-select="selectFieldValue(fdSelector.fdFields, fdField, $item);"
typeahead-loading="isTypeaheadLoading"
ng-keyup="handleKeyup($event, fdField)"
ng-blur="clearSearchText()"
/>
<div class="dropdown-item_typeahead-bar-bottom-spinner">
<loading-spinner if="isTypeaheadLoading" inline="true"></loading-spinner>
</div>
</li>
<li title="{{fdFieldValue.name}}" aria-label="{{fdFieldValue.name}}" ng-if="!search.typeaheadText" ng-repeat="fdFieldValue in fdField.availableValues | filter : filterDropDown(searchFilterText)">
<div class="dropdown-item clearfix" ng-click="selectFieldValue(fdSelector.fdFields, fdField, fdFieldValue, $event)" role="menuitem" tabindex="0">
<span class="fd-selector__first-field">{{fdFieldValue.name}}</span>
<span ng-if="fdField.connected.name" class="dropdown-item__connected-value">{{fdFieldValue.attributeMap[fdField.connected.searchOptionName]}}</span>
</div>
</li>
</ul>
</div>
<div ng-class="{'col-xs-3': inline}">
<button type="button" class="small-btn_secondary" ng-if="multiple" ng-click="add($event)" ng-enter="add($event)" ng-disabled="isAddButtonDisabled()"
aria-label="{{'common.button.add' | i18n}} {{'foundation.label.' + fdSelector.label | i18n}}">
{{'common.button.add' | i18n}}
</button>
</div>
</div>