SmartIT_Extensions/BMC/smart-it-full/views/admin/screen-configuration/custom-action-editor.html

407 lines
23 KiB
HTML

<div role="dialog" aria-labelledby="modalLabel">
<span class="modal-content__508-hidden-span">{{'common.labels.508BeginContent' | i18n}}</span>
<div class="action-blade__header">
<h2 id="modalLabel" class="action-blade__title" ng-if="resouceType === 'global'">
{{'customization.globalMenu.action' | i18n}}
</h2>
<h2 id="modalLabel" class="action-blade__title" ng-if="resouceType !== 'global'">
{{'customization.screen.' + screenObj.name | i18n}} > {{'customization.panelMenu.action' | i18n}}
</h2>
</div>
<div loading-spinner if="dataLoading" centered="true" overlay="true"></div>
<div class="action-editor action-blade__body_no-scroll" ng-hide="dataLoading">
<div class="action-editor-header">
<div ng-if="resouceType === 'global'">
<span class="label__text">{{'customization.globalMenu.action.moreMenuMsg' | i18n}}</span>
</div>
<div ng-if="resouceType !== 'global'">
<span class="label__text">{{'customization.globalMenu.action.moreMenu' | i18n}}</span>
</div>
<div class="action-panel__action-type btn-group clearfix">
<div class="clearfix">
<button type="button" class="small-btn_secondary" ng-model="actionOrder" btn-radio="'alphabetical'" ng-click="reOrderActionList('alpha');">{{'customization.globalMenu.action.alphaOrder' | i18n}}</button>
<button type="button" class="small-btn_secondary" ng-model="actionOrder" btn-radio="'custom'" ng-click="reOrderActionList('custom');">{{'customization.globalMenu.action.customOrder' | i18n}}</button>
</div>
</div>
</div>
<div class="action-editor__action-list" ui-sortable="sortableOptions" ng-model="actionList">
<div class="action-editor__action-panel" ng-repeat="actionObj in actionList" ng-hide="actionObj.delete">
<div class="action-editor__action-panel-head" ng-click="openAction(actionObj)" ng-enter="openAction(actionObj)" tabindex="0">
<div class="action-editor__action-panel-head-sortable" prevent-click-event
ng-class="{invisible: actionOrder!=='custom'}">
<div class="icon-dots"></div>
</div>
<div class="action-editor__action-panel-head-accordion">
<div ng-class="actionObj.isOpen ? 'icon-angle_down': 'icon-angle_up'"></div>
</div>
<div class="title-bar">
<div class="title-type">{{'customization.globalMenu.action.'+actionObj.actionType | i18n}}</div>
<div class="title">{{actionObj.labels['default'] || 'customization.globalMenu.action.label.default' | i18n}}</div>
</div>
<button class="action-editor__delete-btn btn_no-fill" ng-click="deleteAction($event, actionObj)" ng-enter="deleteAction($event, actionObj)">
<i class="icon-cross"></i>{{'customization.globalMenu.action.delete' | i18n}}
</button>
</div>
<div class="action-editor__action-panel-body" ng-class="{active: actionObj.isOpen}"
ng-show="actionObj.isOpen">
<div class="action-editor__form-header">{{ 'customization.globalMenu.action.basicInfo' | i18n }}</div>
<div class="action-editor__action-panel-section">
<div class="action-editor__action-panel-label" ng-hide="resouceType === 'global'">{{
'customization.globalMenu.action.actionType' | i18n }}
</div>
<div class="btn-group clearfix" ng-hide="resouceType === 'global'">
<div class="clearfix">
<button type="button" class="small-btn_secondary" ng-model="actionObj.actionType" btn-radio="'client'">{{'customization.globalMenu.action.label.client' | i18n}}</button>
<button type="button" class="small-btn_secondary" ng-model="actionObj.actionType" btn-radio="'provider'">{{'customization.globalMenu.action.label.provider' | i18n}}</button>
<button type="button" class="small-btn_secondary" ng-model="actionObj.actionType" btn-radio="'launch'" ng-if="resouceType==='asset'">{{'customization.globalMenu.action.label.launch' | i18n}}</button>
</div>
</div>
</div>
<div class="action-editor__action-panel-section">
<div class="action-editor__action-panel-label">{{ 'customization.globalMenu.action.supportedPlatforms' | i18n }}</div>
<label class="field-item__property-label">
<input type="checkbox" ng-click="toggleSupportedType(actionObj, 'web');" ng-checked="actionObj.isSupported('web');" />
{{'customization.globalMenu.action.uc' | i18n }}
</label>
<label class="field-item__property-label">
<input type="checkbox" ng-click="toggleSupportedType(actionObj, 'mobile');" ng-checked="actionObj.isSupported('mobile');" />
{{'customization.globalMenu.action.mobile' | i18n }}
</label>
</div>
<div ng-if="actionObj.actionType==='client'" class="action-editor__action-panel-section">
<label class="label_control-wrap">
<span class="label__text required__label" data-required="{{'common.label.required.bracketed' | i18n}}">{{ 'customization.globalMenu.action.url' | i18n }}</span>
<input id="{{actionObj.resource+'_input_'+$index}}"
class="text-input full-width"
ng-model="actionObj.url"
type="text"
placeholder="{{'customization.globalMenu.action.url.placeholder' | i18n }}"
value="{{actionObj.url}}"
ng-keydown="handleBodyKeyDown($event)"
ng-keyup="handleBodyChange($event)"
ng-click="handleBodyClick($event)" required/>
</label>
<div class="required-field-msg-box" ng-show="!actionObj.url && postValidate">{{'common.labels.nonEmpty' | i18n }}</div>
<action-accelerators input_id="{{actionObj.resource+'_input_'+$index}}"
ng-if="accelerators.showAcceleratorsList"
class="email-accelerators__popup"></action-accelerators>
<div class="action-editor__url-hint">
<i class="icon-question_circle"></i> {{'customization.globalMenu.action.url.hint' | i18n}}
</div>
</div>
<div ng-if="actionObj.actionType ==='provider'" class="action-editor__action-panel-section">
<label ng-if="!actionObj.isV3ProviderAction()" class="label_control-wrap">
<span class="label__text required__label" data-required="{{'common.label.required.bracketed' | i18n}}">{{ 'customization.globalMenu.action.actionName' | i18n }}</span>
<i class="icon-question_circle" tooltip-placement="right"
tooltip="{{ 'customization.globalMenu.action.actionName.tip' | i18n}}"
tabindex="0" aria-label="{{ 'customization.globalMenu.action.actionName.tip' | i18n}}"></i>
<input class="text-input full-width action-url"
type="text"
ng-model="actionObj.actionName"
required />
</label>
<label ng-if="actionObj.isV3ProviderAction()" class="label_control-wrap">
<span class="label__text required__label" data-required="{{'common.label.required.bracketed' | i18n}}">{{ 'customization.globalMenu.action.templateName' | i18n }}</span>
<i class="icon-question_circle" tooltip-placement="right"
tooltip="{{ 'customization.globalMenu.action.templateName.tip' | i18n}}"
tabindex="0" aria-label="{{ 'customization.globalMenu.action.templateName.tip' | i18n}}"></i>
<input class="text-input action-field-input"
type="text"
ng-model="actionObj.actionName"
placeholder="{{'common.labels.startTyping' | i18n}}"
typeahead="item.name as item.name for item in templateList | filter:{name: $viewValue}"
typeahead-on-select="onTemplateSelect($item)"
ng-change="clearTemplateFields()"
required />
<i class="icon-cross action-field-input__delete-btn" tabindex=0 role="link"
title="{{'common.button.clear' | i18n}} {{ 'customization.globalMenu.action.templateName' | i18n }}"
ng-if="actionObj.actionName"
focus-input-on-clear ng-click="clear()" ng-enter="clear()">
</i>
</label>
<div class="required-field-msg-box" ng-show="!actionObj.actionName && postValidate">{{'common.labels.nonEmpty' | i18n }}</div>
<div class="required-field-msg-box" ng-show="!actionObj.isTemplateFromList && actionObj.isTemplateFromList !== undefined">{{'customization.globalMenu.action.template.error' | i18n }}</div>
</div>
<div loading-spinner if="isTemplateLoading" centered="true" overlay="true"></div>
<div class="action-editor__action-panel-section" ng-if="(isTemplateLoaded && actionObj.actionType==='provider') && actionObj.isV3ProviderAction()">
<div class="row action-field" ng-if="hasOutputFields || hasInputFields">
<div class="col-sm-10"><div>{{ 'customization.globalMenu.action.iomapping' | i18n }}</div></div>
</div>
<div class="row action-field">
<div class="col-sm-4">
<div class="action-editor__action-panel-label">{{ 'customization.globalMenu.action.availability' | i18n }}
<i class="icon-question_circle"
tooltip-placement="right"
tooltip-append-to-body="true"
tooltip="{{ 'customization.globalMenu.action.availabilityMode.tip' | i18n}}"
tabindex="0" aria-label="{{ 'customization.globalMenu.action.availabilityMode.tip' | i18n}}">
</i>
</div>
</div>
<div class="col-sm-4">
<selection selection-items="providerMode"
selected-item="actionObj.mode"
first-item-empty="false"
field-name="actionObj.mode"
update-selected-item="true"
label="label"
value="value"
required = "true"></selection>
</div>
</div>
<div class="row action-field" ng-if="hasInputFields">
<div class="col-sm-12"><div>{{ 'customization.globalMenu.action.inputmapping' | i18n }}</div></div>
</div>
<div class="row action-field" ng-repeat="field in actionObj.mappings | orderBy : 'mappedFieldName'" ng-if="field.type.indexOf('input') == 0">
<div class="col-sm-4"><div class="action-editor__action-panel-label">{{field.mappedFieldName}}</div></div>
<div class="col-sm-4">
<selection selection-items="field.mappingOptions"
selected-item="field.mappedSource"
first-item-empty="false"
field-name="field.mappedSource"
update-selected-item="true"
label="label"
value="value"
required = "true"></selection>
</div>
<div class="col-sm-4">
<input ng-if="field.mappedSource.value === 'ticket'"
class="text-input"
type="text"
ng-model="field.mappedFieldValue"
placeholder="{{'common.labels.startTyping' | i18n}}"
typeahead="item.key for item in acceleratorList | filter:{key: $viewValue}"
typeahead-on-select="onFieldSelect($item)"
/>
<input ng-if="field.mappedSource.value === 'default'"
class="text-input"
type="text"
ng-model="field.mappedFieldValue"
/>
</div>
<div class="required-field-msg-box col-sm-offset-4 col-sm-8" ng-if="field.error && field.mappedSource.value === 'ticket'">{{'customization.globalMenu.action.accelerator.error' | i18n }}</div>
<div class="required-field-msg-box col-sm-offset-4 col-sm-8" ng-if="field.error && field.mappedSource.value === 'default'">{{'customization.globalMenu.action.defaultValue.error' | i18n }}</div>
</div>
<div class="row action-field" ng-if="hasOutputFields">
<div class="col-sm-4"><div>{{ 'customization.globalMenu.action.outputmapping' | i18n }}</div></div>
</div>
<div class="row action-field" ng-repeat="field in actionObj.mappings | orderBy : 'mappedFieldName'" ng-if="field.type == 'output'">
<div class="col-sm-4"><div class="action-editor__action-panel-label">{{field.mappedFieldName}}</div></div>
<div class="col-sm-8">
<input class="text-input"
type="text"
ng-model="field.mappedFieldValue"
placeholder="{{'common.labels.startTyping' | i18n}}"
typeahead="item.key for item in acceleratorList | filter:{key: $viewValue}"
typeahead-on-select="onFieldSelect($item)" />
</div>
<div class="required-field-msg-box col-sm-offset-4 col-sm-8" ng-if="field.error">{{'customization.globalMenu.action.accelerator.error' | i18n }}</div>
</div>
<div class="row action-field">
<div class="col-sm-4"><span><input type="checkbox" ng-model="actionObj.isSynchronous"> {{ 'customization.globalMenu.action.synchronous' | i18n }} </span></div>
<div class="col-sm-8"> <input type="text" class="text-input action-url ng-pristine ng-invalid ng-invalid-required ng-touched" ng-model="actionObj.condition" ng-if="actionObj.isExpression" required /></div>
</div>
<div ng-if="isExpressionDrivenAction" class="row action-field-expression">
<label class="action-item__property-label col-sm-12">
<input type="checkbox" ng-model="actionObj.showExecuteOn" ng-change="toggleExecuteOn(actionObj)">
{{"screenConfiguration.providerAction.executeOn" | i18n}}
</label>
<div ng-if="actionObj.showExecuteOn" class="action-item__properties-options">
<div class="col-md-4">
<selection selection-items="providerActionExecuteOnPropOptions"
selected-item="actionObj.selectedExecuteOnProperty"
label="name"
value="value"
selection-callback="updateproviderActionExecuteOnProperty(item, actionObj)"
disabled-selection="true"></selection>
</div>
<div class="col-sm-8">
<expression-builder on-expression-change="onFieldPropertyChange()" field-name="actionObj.labels['default']"
expression="actionObj.expressionCondition" property-name="'hide'" field-accelerators-list="acceleratorsListForExpressions" is-required="false"></expression-builder>
</div>
</div>
</div>
</div>
<div class="action-editor__action-panel-section" ng-if="actionObj.actionType === 'client'">
<div class="action-editor__action-panel-label">
{{ 'customization.globalMenu.action.label.openBehavior' | i18n}}
</div>
<div class="action-panel__action-url-window btn-group clearfix">
<div class="clearfix">
<button type="button" class="small-btn_secondary" ng-model="actionObj.target" btn-radio="'new'">{{'customization.globalMenu.action.label.newWindow' | i18n}}</button>
<button type="button" class="small-btn_secondary" ng-model="actionObj.target" btn-radio="'current'">{{'customization.globalMenu.action.label.sameWindow' | i18n}}</button>
</div>
</div>
</div>
<div ng-if="resouceType==='asset'" class="action-editor__action-panel-section">
<label class="label_control-wrap">
<div class="action-editor__action-panel-label">{{ 'customization.panelMenu.action.assetTypeSelection' | i18n }}</div>
<div class="dropdown-input full-width" dropdown>
<button type="button" class="dropdown-toggle dropdown-input__button">{{'common.placeholder.selectAssetTypes' | i18n}}</button>
<ul class="dropdown-menu full-width" vertical-fit="true">
<li>
<div ng-class="actionObj.isAssetClassChecked('ALL') ? 'dropdown-item_selected' : 'dropdown-item'" role="menuitemcheckbox" aria-checked="{{actionObj.isAssetClassChecked('ALL')}}" ng-click="checkAll(actionObj)" ng-enter="checkAll(actionObj)" role="link" tabindex="0">
{{'filter.control.selectAll' | i18n}}
</div>
</li>
<li ng-repeat="type in $parent.assetTypes">
<div ng-class="type.expanded ? 'dropdown-item__header_expanded' : 'dropdown-item__header_collapsed'" aria-expanded="{{type.expanded}}" role="link" tabindex="0" ng-click="expandType(type, $event)" ng-enter="expandType(type, $event)">
<span ng-disabled="actionObj.isAssetClassChecked('ALL')" ng-class="actionObj.isAssetClassChecked('ALL') || actionObj.isAssetClassChecked(type.label) ? 'dropdown-item-inline_selected' : 'dropdown-item-inline'" role="menuitemcheckbox" aria-checked="{{type.checked}}" title="{{type.name}}" ng-click="checkItem(actionObj, type)" ng-enter="checkItem(actionObj, type)" ></span>
<span>{{type.label}}</span>
</div>
<div collapse="!type.expanded">
<div ng-repeat="subType in type.subType" ng-disabled="actionObj.isAssetClassChecked('ALL') || actionObj.isAssetClassChecked(type.label)" ng-class="actionObj.isAssetClassChecked('ALL') || actionObj.isAssetClassChecked(type.label) || actionObj.isAssetClassChecked(type.label, subType.name) ? 'dropdown-item_selected' : 'dropdown-item'" role="menuitemcheckbox" aria-checked="{{subType.checked}}" title="{{subType.label}}" ng-click="checkItem(actionObj, type, subType)" ng-enter="checkItem(actionObj, type, subType)">
{{subType.label}}
</div>
</div>
</li>
</ul>
</div>
</label>
</div>
<div ng-if="resouceType==='asset' && actionObj.actionType==='launch'" class="action-editor__action-panel-section">
<div class="action-editor__action-panel-label">{{ 'customization.globalMenu.action.userInput' | i18n }} <span class="label__text required__label" data-required="{{'common.label.required.bracketed' | i18n}}"></span></div>
<label class="field-item__property-label">
<input type="checkbox" ng-click="toggleUserInput(actionObj, 'assetRelation');" ng-checked="actionObj.isUserInputChecked('assetRelation');" />
{{'customization.panelMenu.action.assetRelation' | i18n }}
</label>
<label class="field-item__property-label">
<input type="checkbox" ng-click="toggleUserInput(actionObj, 'peopleRelation');" ng-checked="actionObj.isUserInputChecked('peopleRelation');" />
{{'customization.panelMenu.action.peopleRelation' | i18n }}
</label>
<label class="field-item__property-label">
<input type="checkbox" ng-click="toggleUserInput(actionObj, 'assetUpdate');" ng-checked="actionObj.isUserInputChecked('assetUpdate');" />
{{'customization.panelMenu.action.assetUpdate' | i18n }}
</label>
<div class="field-item__field-list row" ng-if="actionObj.isUserInputChecked('assetUpdate');">
<div class="col-md-12">{{'customization.panelMenu.action.assetUpdate.text' | i18n}} <span class="label__text required__label" data-required="{{'common.label.required.bracketed' | i18n}}"></span></div>
<div class="col-md-4" ng-repeat="assetField in assetUpdateFields">
<label class="field-item__property-label">
<input type="checkbox" ng-click="addAssetFieldToUpdate(actionObj, assetField);" ng-checked="actionObj.isAssetFieldChecked(assetField);" />
{{'asset.attributes.'+assetField | i18n }}
</label>
</div>
</div>
</div>
<div class="action-editor__action-panel-section">
<div class="row action-field" ng-if="actionObj.mappedFields && actionObj.mappedFields.length > 0">
<div class="col-sm-4"><div class="action-editor__action-panel-label">{{'customization.globalMenu.action.mappedFields' | i18n}}</div></div>
</div>
<div class="row action-field" ng-repeat="field in actionObj.mappedFields">
<div class="col-sm-6" ><i class="field-icon-color" ng-class="field.iconName"></i> {{getFieldLabel(field.fieldName)}}</div>
</div>
</div>
<div class="action-editor-action-panel-body__label-block">
<h4>{{ 'customization.globalMenu.action.localizationLabels' | i18n }}</h4>
<div class="action-editor-action-panel-body__localization">
<div class="action-editor-action-panel-body__label-row-header">
<div class="action-editor-action-panel-body__locale label__text">{{ 'customization.globalMenu.action.locale' | i18n }}</div>
<div class="action-editor-action-panel-body__label">
<span class="label__text required__label" data-required="{{'common.label.required.bracketed' | i18n}}">{{ 'customization.globalMenu.action.label' | i18n }}</span>
</div>
</div>
<div class="action-editor-action-panel-body__label-row"
ng-init="locale = 'default';">
<div class="action-editor-action-panel-body__label-dropdown">
<div class="dropdown-input full-width">
<button type="button" class="dropdown-input__button dropdown-toggle" disabled>
<span>{{"&#x202A;"+supportedLocales[locale]+"&#x202C;"}}</span>
</button>
</div>
</div>
<div class="action-editor-action-panel-body__label-text">
<input type="text"
class="text-input full-width"
placeholder="{{'customization.globalMenu.action.label.default' | i18n }}"
ng-model="actionObj.labels[locale]"
required />
</div>
<div class="required-field-msg-box" ng-show="!actionObj.labels[locale] && postValidate">{{'common.labels.nonEmpty' | i18n }}</div>
</div>
<div class="action-editor-action-panel-body__label-row"
ng-repeat="(locale, label) in actionObj.labels" ng-if="locale != 'default'">
<div class="action-editor-action-panel-body__label-dropdown">
<div class="dropdown-input full-width" dropdown>
<button type="button" class="dropdown-input__button dropdown-toggle">
<span>{{"&#x202A;"+supportedLocales[locale]+"&#x202C;"}}</span>
</button>
<ul class="dropdown-menu full-width">
<li ng-repeat="(key, value) in supportedLocales"
ng-click="updateLabel(actionObj, locale, key)">
<div class="{{(locale == key) ? 'dropdown-item_selected' : 'dropdown-item'}}"
tabindex="0" role="menuitem">
{{"&#x202A;"+value+"&#x202C;"}}
</div>
</li>
</ul>
</div>
</div>
<div class="action-editor-action-panel-body__label-text">
<input type="text"
class="text-input full-width"
placeholder="{{'customization.globalMenu.action.label' | i18n }}"
value="{{label}}"
ng-model="actionObj.labels[locale]"
required />
</div>
<div class="action-editor-action-panel-body__label-close"
ng-click="removeLabel(actionObj, locale);" ng-enter="removeLabel(actionObj, locale);" tabindex="0"><i
class="fields-widget__icon icon-cross"></i></div>
<div class="required-field-msg-box" ng-show="!actionObj.labels[locale] && postValidate">{{'common.labels.nonEmpty' | i18n }}</div>
</div>
</div>
<div>
<button class="btn_link" ng-click="addLabel(actionObj)">
<i class="icon-plus_circle" aria-hidden="true"></i> {{'customization.globalMenu.action.addLabel' | i18n}}
</button>
</div>
</div>
</div>
</div>
</div>
<div class="action-editor__footer">
<div ng-if="resouceType === 'global'">
<button class="btn_link" ng-click="createAction();">
<i class="icon-plus_circle" aria-hidden="true"></i> {{'customization.globalMenu.action.addMenuItem' | i18n}}
</button>
</div>
<div ng-if="resouceType !== 'global'">
<button class="btn_link" ng-click="createAction();">
<i class="icon-plus_circle" aria-hidden="true"></i> {{'customization.globalMenu.action.addAction' | i18n}}
</button>
</div>
</div>
</div>
<div class="action-blade__footer clearfix">
<div class="action-blade__button-container">
<button type="submit" class="btn_primary" ng-click="onSaveClick()" ng-disabled="dataLoading">{{'common.button.save' | i18n}}</button>
<button type="button" class="btn_secondary" ng-click="onCancelClick()" ng-disabled="dataLoading">{{'common.button.cancel' | i18n}}</button>
</div>
</div>
<span class="modal-content__508-hidden-span">{{'common.labels.508EndContent' | i18n}}</span>
</div>