185 lines
12 KiB
HTML
185 lines
12 KiB
HTML
<div class="category-widget">
|
|
<!--View Mode-->
|
|
<div ng-if="!$parent.editMode">
|
|
<div class="category-widget__category-label">
|
|
<div class="ticket__label-small" ng-if="!data.hideLabel">{{category.label}}</div>
|
|
<span ng-if="category.cognitiveFlag && category.serializedValue.length !== 0" class="category-editor__cognitive-category-icon"></span>
|
|
<span class="ticket__field-value">{{(category | serializeCategory) || (category.cognitiveFlag && category.serializedValue.length === 0 ? ('categorization.cognitive.noRecommendationFound' | i18n) : ('categorization.noneSet' | i18n))}}</span>
|
|
</div>
|
|
<div class="ticket__required-field" ng-if="!$parent.editMode && !category.serializedValue && (data.isRequired || data.hasRequiredMember)">
|
|
<i class="icon-exclamation_triangle"></i> {{'ticket.notification.draft.missingField' | i18n:(data.label)}}
|
|
</div>
|
|
<input type="hidden" ng-model="category.serializedValue" ng-required="data.isRequired || data.hasRequiredMember">
|
|
</div>
|
|
|
|
<!--Edit Mode-->
|
|
<div ng-if="$parent.editMode">
|
|
<!--Search Categories Mode-->
|
|
<div ng-if="!category.edit" class="category-widget__item dropdown">
|
|
<label class="label_control-wrap" for="category-typeahead-{{category.name}}">
|
|
<span class="label__text" ng-class="{'required__label': data.isRequired || data.hasRequiredMember}" data-required="{{'common.label.required.bracketed' | i18n}}"
|
|
field-name="{{'categorizations.tiers.' + category.listOfTiers[0].name}}">
|
|
{{category.label}}
|
|
</span>
|
|
<span class="label__text required__label"><i class="icon-question_circle" tooltip-placement="{{tooltipPosition}}"
|
|
tabindex="0" aria-label="{{'categorization.recommendations.tooltip' | i18n}}"
|
|
tooltip="{{ 'categorization.recommendations.tooltip' | i18n}}"></i></span>
|
|
</label>
|
|
<div class="relative-position">
|
|
<span ng-if="category.cognitiveFlag && category.serializedValue.length !== 0" class="category-editor__cognitive-category-icon"></span>
|
|
<input id="category-typeahead-{{category.name}}"
|
|
field-name="{{'categorizations.tiers.' + category.listOfTiers[0].name}}"
|
|
type="text"
|
|
title="{{(category.serializedValue) ? category.serializedValue : (entity.ticketTpe != 'asset' ? (hideLabel ? category.label : category.recommendations.length === 0 && !isCategoryInputChange && isCognitiveRecommendation ? ('categorization.cognitive.noResult' | i18n) : ('categorization.placeholder' | i18n)) : '')}}"
|
|
ng-model="category.serializedValue"
|
|
class="category-widget__category-editor dropdown-toggle"
|
|
ng-class="{'category-editor__cognitive-true': category.cognitiveFlag && category.serializedValue.length !== 0}"
|
|
aria-label="{{category.label}}"
|
|
ng-change="onCategoryInputChange()"
|
|
role="combobox"
|
|
ng-focus="onFocus($event)"
|
|
autocomplete="Off"
|
|
aria-required="data.isRequired || data.hasRequiredMember"
|
|
ng-required="data.isRequired || data.hasRequiredMember"
|
|
ng-disabled="data.isReadOnly || !isEditable"
|
|
typeahead-min-length="3"
|
|
typeahead-wait-ms="500"
|
|
typeahead-on-select="updateCategory($item, category)"
|
|
typeahead-loading="category.isDataLoading"
|
|
typeahead-template-url="views/common/categories-editor-selector-template.html"
|
|
typeahead="suggestion for suggestion in getCategories($viewValue, category)"
|
|
placeholder="{{hideLabel ? category.label : category.recommendations.length === 0 && !isCategoryInputChange && isCognitiveRecommendation ? ('categorization.cognitive.noResult' | i18n) : ('categorization.placeholder' | i18n)}}"
|
|
ng-blur="onInputFocusBlur(category)"
|
|
uib-tooltip="{{'search.category.exceedsChunkSize' | i18n}}"
|
|
tooltip-is-open="category.isTooltipOpen"
|
|
tooltip-enable="category.exceedsChunkSize"
|
|
tooltip-trigger="'none'"
|
|
tooltip-placement="auto"/>
|
|
<div class="select-custom-dropdown__spinner-container">
|
|
<loading-spinner if="category.isDataLoading" inline="true"></loading-spinner>
|
|
</div>
|
|
<i class="icon-cross item-input__delete-btn" tabindex=0 role="link"
|
|
title="{{'common.button.clear' | i18n}} {{ category.label }}" ng-if="category.serializedValue && !category.isDataLoading"
|
|
focus-input-on-clear ng-click="clear(category, true)" ng-enter="clear(category, true)">
|
|
</i>
|
|
</div>
|
|
|
|
<!--Search results displayed in dropdown-->
|
|
<ul class="dropdown-menu">
|
|
<li title="{{item.serializedValue}}" aria-label="{{item.serializedValue}}" ng-if="category.recommendations.length > 0" ng-repeat="item in category.recommendations">
|
|
<div ng-click="updateCategory(item, category)" class="dropdown-item">
|
|
{{ item.serializedValue }}
|
|
<span ng-if="item.company" class="dropdown-item__connected-value">{{item.company.name}}</span>
|
|
</div>
|
|
</li>
|
|
<li ng-if="category.recommendations.length === 0 && !isCategoryInputChange && !isCognitiveRecommendation && recommendationMethod!=='COGNITIVE'">
|
|
<div class="dropdown-item">
|
|
{{ 'console.ticket.noResult.placeholder' | i18n}}
|
|
</div>
|
|
</li>
|
|
<li ng-if="category.recommendations.length === 0 && !isCategoryInputChange && !isCognitiveRecommendation && recommendationMethod==='COGNITIVE'">
|
|
<div class="dropdown-item__message">
|
|
{{ 'categorization.cognitive.noResult' | i18n}}
|
|
</div>
|
|
</li>
|
|
<li ng-if="category.recommendations.length === 0 && !isCategoryInputChange && isCognitiveRecommendation">
|
|
<div class="dropdown-item">
|
|
{{ 'categorization.cognitive.noRecommendationFound' | i18n}}
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<div class="category-widget__editor-links clearfix" ng-if="isEditable && !data.isReadOnly">
|
|
<button type="button" class="btn_link" aria-label="{{'categorization.browse' | i18n}} {{category.label}}" role="link" ng-click="onBrowseCategoriesClick(category, $event)">{{'categorization.browse' | i18n}}</button>
|
|
<span class="btn_link"> | </span>
|
|
<button type="button" ng-class="{'btn_link': true, 'category-editor__cognitive-icon': useCognitive}" aria-label="{{'categorization.recommendations' | i18n}} {{category.label}}" role="link" ng-click="showDefaultList(category, $event)" ng-disabled="!isEditable">{{'categorization.recommendations' | i18n}}</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!--Browse Categories Mode-->
|
|
<div ng-if="category.edit" ng-repeat="tier in category.listOfTiers" class="category-widget__item dropdown">
|
|
<label class="label_control-wrap" for="category-dropdown-{{category.name}}">
|
|
<span ng-if="$first" class="label__text"
|
|
field-name="{{'categorizations.tiers.' + tier.name}}"
|
|
ng-class="{'required__label': data.isRequired || data.hasRequiredMember}"
|
|
data-required="{{'common.label.required.bracketed' | i18n}}">
|
|
{{category.label}}
|
|
</span>
|
|
<span class="label__text required__label" ng-if="$first"><i class="icon-question_circle" tooltip-placement="{{tooltipPosition}}"
|
|
tabindex="0" aria-label="{{'categorization.recommendations.tooltip' | i18n}}"
|
|
tooltip="{{ 'categorization.recommendations.tooltip' | i18n}}"></i></span>
|
|
</label>
|
|
<input type="text" class="category-widget__tier-input"
|
|
field-name="{{'categorizations.tiers.' + tier.name}}"
|
|
ng-model="tier.selectedValue"
|
|
aria-required="(data.isRequired && $first) || membersMapByName[tier.name].isRequired || membersMapByName[tier.name].itsmRequired"
|
|
ng-required="(data.isRequired && $first) || membersMapByName[tier.name].isRequired || membersMapByName[tier.name].itsmRequired " ng-disabled="data.isReadOnly || !isEditable"
|
|
/>
|
|
<div id="{{$first ? 'category-dropdown-' + category.name : ''}}"
|
|
class="dropdown-input__button dropdown-toggle"
|
|
title="{{tier.label ? tier.label : ('categorization.' + tier.name | i18n)}} {{tier.selectedValue}}"
|
|
ng-class="{'ng-invalid-required': (!tier.selectedValue && ((data.isRequired && $first) || membersMapByName[tier.name].isRequired || membersMapByName[tier.name].itsmRequired))}"
|
|
ng-disabled="tier.disabled || !isEditable || data.isReadOnly" ng-click="loadDataForTier(category, tier)" ng-enter="loadDataForTier(category, tier)">
|
|
<div loading-spinner if="tier.populatingAvailableValues" overlay="true" centered="true" inline="true"></div>
|
|
{{tier.selectedValue}}
|
|
<span ng-if="$first && category.company && tier.selectedValue" class="dropdown-item__connected-value">{{category.company.name}}</span>
|
|
<i class="icon-cross dropdown-clear" title="{{'common.button.clear' | i18n}} {{tier.selectedValue}}" tabindex="0" role="link"
|
|
ng-if="isEditable && tier.selectedValue && !tier.populatingAvailableValues"
|
|
ng-click="clearTier(category, tier)" ng-enter="clearTier(category, tier)" >
|
|
</i>
|
|
</div>
|
|
|
|
<ul class="dropdown-menu" ng-if="!tier.populatingAvailableValues">
|
|
<li ng-if="!tier.availableValues.length">
|
|
<div class="dropdown-item" role="menuitem" tabindex="0">
|
|
{{'categorization.noTiers' | i18n}}
|
|
</div>
|
|
</li>
|
|
<li class="dropdown-item__header" ng-if="!tier.exceedsChunkSize">{{'common.placeholder.search' | i18n}}</li>
|
|
<li class="dropdown-item_search-bar" ng-if="!tier.exceedsChunkSize">
|
|
<i class="icon-search dropdown-item_search-icon"></i>
|
|
<input
|
|
prevent-click-event
|
|
class="dropdown-item_search"
|
|
type="text"
|
|
ng-model="tier.localSearchText"/>
|
|
</li>
|
|
<!-- Typeahead directive used in below input box only for triggering time and min-length. Actual display done by loadDataForTier method.-->
|
|
<li class="dropdown-item_typeahead-bar" ng-if="tier.exceedsChunkSize">
|
|
<div class="dropdown-item_typeahead-label" ng-if="!tier.searchText || (tier.searchText.length > 2 && tier.tooManyItems)">{{'common.labels.tooManyToDisplay' | i18n}}</div>
|
|
<input
|
|
prevent-click-event
|
|
class="dropdown-item_search-bar-input"
|
|
type="text"
|
|
ng-model="tier.searchText"
|
|
ng-enter="loadDataForTier(category, tier, tier.searchText)"
|
|
ng-blur="tier.searchText='';"
|
|
typeahead="option for option in loadDataForTier(category, tier, tier.searchText, true)"
|
|
typeahead-min-length="3"
|
|
typeahead-loading="tier.isTypeaheadLoading"
|
|
typeahead-wait-ms="500"
|
|
typeahead-on-select="selectTierValue(category, tier, $item);tier.searchText=''"/>
|
|
<div class="dropdown-item_typeahead-bar-bottom-spinner">
|
|
<loading-spinner if="tier.isTypeaheadLoading" inline="true"></loading-spinner>
|
|
</div>
|
|
</li>
|
|
<li title="{{item.tier || item}}" aria-label="{{item.tier || item}}" ng-repeat="item in tier.availableValues | orderBy:(tier.availableValues[0] && tier.availableValues[0].tier ?'tier': '') | filter: (tier.localSearchText) track by $index "
|
|
ng-if="!tier.searchText">
|
|
<div ng-class="{'dropdown-item_dual-line' : item.company || item.manufacturer}"
|
|
class="{{((tier.selectedValue == item) && !multiple) ? 'dropdown-item_selected' : 'dropdown-item'}}"
|
|
ng-click="selectTierValue(category, tier, item, $event)" role="menuitem" tabindex="0">
|
|
{{ item.tier || item }}
|
|
<div ng-if="item.company" class="dropdown-item__connected-value">{{item.company.name}}</div>
|
|
<div ng-if="item.manufacturer" class="dropdown-item__connected-value">{{item.manufacturer}}</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
|
|
<div ng-if="$last" class="category-widget__editor-links">
|
|
<button type="button" class="btn_link" aria-label="{{'categorization.search' | i18n}} {{category.label}}" role="link" ng-click="onSearchCategoriesClick(category, $event)">{{'categorization.search' | i18n}}</button>
|
|
<span>|</span>
|
|
<button type="button" class="btn_link" aria-label="{{'common.labels.clearAll' | i18n}} {{category.label}}" role="link" ng-click="clear(category);focusFirstTierElement($event)">{{'common.labels.clearAll' | i18n}}</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div> |