74 lines
5.9 KiB
HTML
74 lines
5.9 KiB
HTML
<div ux-id="foundation-selector" class="fd-selector" ng-class="{'row': inline}">
|
|
<div ux-id="field_{{fdField.name}}" 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" for="{{$first ? 'foundation-selector__' + fdSelector.label : fdField.name + '_' + $index}}">
|
|
<span class="label__text" ng-class="{'required__label': isRequired && !fdField.specificFieldNotRequired}" data-required="{{'common.label.required.bracketed' | i18n}}">
|
|
{{'foundation.label.' + fdField.label | i18n}}
|
|
</span>
|
|
</label>
|
|
<button ux-id="dropdown-btn" type="button" id="{{$first ? 'foundation-selector__' + fdSelector.label : fdField.name + '_' + $index}}"
|
|
class="dropdown-input__button dropdown-toggle clearfix" ng-class="{'dropdown-input__button_placeholder': !fdField.value, 'ng-invalid ng-invalid-required': (fdField.specificFieldRequired || ($first && !fdField.specificFieldNotRequired)) && 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" ng-class="{ 'fd-selector__full-width': !fdField.connected.name }">{{fdField.value || ('foundation.label.' + fdField.label | i18n)}}</span>
|
|
<span ng-if="fdField.connected.name" class="dropdown-item__connected-value fd-field__company-value">{{fdField.connected.value}}</span>
|
|
</button>
|
|
<i ux-id="clear-value" 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>
|
|
<input type="hidden" ng-model="fdField.value" ng-required="isRequired && !fdField.specificFieldNotRequired" />
|
|
<ul ux-id="dropdown-menu" 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" ng-click="$event.stopPropagation();">
|
|
<label for="{{::fdField.name}}-search-filter">{{'common.placeholder.search' | i18n}}</label>
|
|
</li>
|
|
<li class="dropdown-item_search-bar" ng-if="fdField.availableValues.length && !state.tooManyData">
|
|
<i class="icon-search dropdown-item_search-icon"></i>
|
|
<input id="{{::fdField.name}}-search-filter" ux-id="search-bar" 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 ux-id="search-typeahead" prevent-click-event
|
|
class="dropdown-item_search-bar-input"
|
|
type="text"
|
|
ng-model="search.typeaheadText"
|
|
typeahead-min-length="3"
|
|
autocomplete="off"
|
|
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 ux-id="select-field_{{$index}}" class="dropdown-item clearfix" ng-click="selectFieldValue(fdSelector.fdFields, fdField, fdFieldValue, $event)" role="menuitem" tabindex="0">
|
|
<span class="fd-selector__first-field" title="{{fdFieldValue.name}}" ng-class="{ 'fd-selector__full-width': !fdField.connected.name }">{{fdFieldValue.name}}</span>
|
|
<span ng-if="fdField.connected.name" class="dropdown-item__connected-value fd-selector__second-field" title="{{fdFieldValue.attributeMap[fdField.connected.searchOptionName]}}">{{fdFieldValue.attributeMap[fdField.connected.searchOptionName]}}</span>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div ng-class="{'col-xs-3': inline}">
|
|
<button ux-id="add-btn" 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> |