280 lines
16 KiB
HTML
280 lines
16 KiB
HTML
<div ux-id="custom-area-editor" 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">
|
|
{{'customization.screen.' + customArea.parentScreenName | i18n}} > {{'customization.panel.' + (customArea.sectionName || customArea.shortId) | i18n}}
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="action-blade__body_no-scroll">
|
|
|
|
<div loading-spinner if="dataLoading" centered="true" overlay="true"></div>
|
|
|
|
<div class="custom-area-editor">
|
|
|
|
<div ng-if="customArea.shortId === 'typeSpecific'" class="assettype-selection">
|
|
<div class="widget__header clearfix">
|
|
<h5 class="widget__title">{{'customAreaEditor.selectAssetType' | i18n}}: </h5>
|
|
<div class="dropdown-input assettype-dropdown" dropdown>
|
|
<button ux-id="assettype-dropdown" type="button" class="dropdown-toggle dropdown-input__button">{{ selectedClass.label || ('common.placeholder.selectOne' | i18n)}}</button>
|
|
<ul class="dropdown-menu full-width">
|
|
<li ux-id="asset-type_{{$index}}" ng-repeat="type in assetTypes | orderBy:'label'">
|
|
<div class="assettype-header">
|
|
{{type.label}}
|
|
</div>
|
|
<div ux-id="sub-type_{{$index}}" ng-repeat="subType in type.subType | orderBy:'label'" class="dropdown-item" title="{{subType.label}}" ng-click="selectClass(subType)" ng-enter="selectClass(subType)">
|
|
{{subType.label}}
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div ng-if="!fieldsLoading" class="area-container col-sm-4" ng-class="customArea.shortId === 'typeSpecific'?'custom-height':'full-height'">
|
|
<div class="fields-widget" ng-class="{'extra-panel': allPanels}">
|
|
<div class="widget__header clearfix">
|
|
<div ng-if="allPanels" class="col-sm-12 clearfix custom-area-editor__header">
|
|
<div class="custom-area__selector" dropdown>
|
|
<button ux-id="panel-dropdown" type="button" class="btn_link dropdown-toggle" aria-label="{{'customization.panel.' + customArea.name | i18n}}">
|
|
<h5 class="custom-area__selector_title">{{'customization.panel.' + customArea.name | i18n}} <i class="icon-angle_down"></i></h5>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li ng-repeat="panel in allPanels">
|
|
<a ux-id="change-custom-area_{{$index}}" ng-click="changeCustomArea(panel)"
|
|
ng-class="{
|
|
'dropdown-item_selected': panel.selectedPanel,
|
|
'dropdown-item': !panel.selectedPanel
|
|
}"
|
|
href="javascript:void(0)"
|
|
role="menuitem">
|
|
{{'customization.panel.' + panel.name | i18n}}
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<h5 class="widget__title">{{'customAreaEditor.availableFields' | i18n}}
|
|
<a href="{{$root.docsLink.CUSTOM_FIELDS}}" target="_blank" class="icon-question_circle" tooltip-placement="bottom" tooltip="{{'customAreaEditor.info' | i18n}}" tabindex="0" aria-label="{{'customAreaEditor.info' | i18n}}"></a>
|
|
<input ux-id="search-field" title="{{'customAreaEditor.searchFields' | i18n}}" type="text" class="form-control search-input widget__header-available" maxlength="40" ng-model="searchAvailable.searchLabel"
|
|
placeholder="{{'customAreaEditor.searchFields' | i18n}}">
|
|
</h5>
|
|
|
|
</div>
|
|
<div class="widget__body">
|
|
<div class="field-item-container">
|
|
<!--<div class="field-item_static" ng-repeat="field in availableFields | filter:doFieldFiltering(searchAvailable)">-->
|
|
<div class="field-item_static"
|
|
ng-repeat="field in availableFields | filter:searchAvailable:strict" data-field-id="{{field.name}}">
|
|
<span ux-id="available-field_{{$index}}" class="field-item__action-button pull-left" ng-click="onAddFieldClick(field)"
|
|
ng-enter="onAddFieldClick(field)" tabindex="0"
|
|
ng-class="{'disabled': !customArea.addFieldAllowed || !field.isAvailable() || field.isSelectionDisabled()}">
|
|
<i class="fields-widget__icon" ng-class="{'icon-plus': field.isAvailable() && !field.isSelectionDisabled()}"></i>
|
|
</span>
|
|
<span class="field-item__label"
|
|
ng-class="{
|
|
'disabled': !customArea.addFieldAllowed || !field.isAvailable() || field.isSelectionDisabled(),
|
|
'field-item__label_divided': field.isSystemRequired() && !field.isSelectionDisabled()
|
|
}"
|
|
tooltip-placement="{{$index < 3 ? 'bottom': 'top'}}"
|
|
tooltip="{{getFieldWarn(field)}}"
|
|
aria-label="{{getFieldWarn(field)}}">
|
|
<span ng-if="!field.isWidget()" class="field-item__label_text">{{field.label}}</span>
|
|
<span ng-if="field.isWidget()" class="field-item__label_text">{{::getWidgetFieldLabel(field)}}</span>
|
|
<span ng-if="field.isSystemRequired() && !field.isSelectionDisabled()" class="field-item__system-required-label">({{'customAreaEditor.field.systemRequired.label' | i18n}})</span>
|
|
</span>
|
|
<span class="field-item__type-icon pull-right" ng-class="{'disabled': !customArea.addFieldAllowed || !field.isAvailable() || field.isSelectionDisabled()}">
|
|
<i ng-class="{
|
|
'icon-field_ootb': !field.isCustomField(),
|
|
'icon-field_custom': field.isCustomField(),
|
|
'icon-widget': field.isWidget()
|
|
}"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div ng-if="!fieldsLoading" class="area-container col-sm-8" ng-class="customArea.shortId === 'typeSpecific'?'custom-height':'full-height'">
|
|
<div class="fields-widget" ng-class="{'extra-panel': allPanels}">
|
|
<div class="widget__header clearfix">
|
|
<div ng-if="allPanels" class="col-sm-12 clearfix custom-area-editor__header"></div>
|
|
<h5 class="widget__title">{{'customAreaEditor.selectedFields' | i18n}} <input ux-id="search-selected-fields" title="{{'customAreaEditor.searchFields' | i18n}}" type="text" class="form-control search-input widget__header-selected" maxlength="40" ng-model="searchSelected.label"
|
|
placeholder="{{'customAreaEditor.searchFields' | i18n}}"></h5>
|
|
</div>
|
|
<div class="widget__body">
|
|
<div class="field-item-header clearfix">
|
|
<button ux-id="create-group-btn" type="button" class="btn_secondary pull-right" ng-click="onCreateGroup()" ng-disabled="dataLoading">{{'common.button.createGroup' | i18n}}</button>
|
|
</div>
|
|
<div class="field-item-container" ui-sortable="sortableOptions" ng-model="customArea.fields">
|
|
<div ux-id="custom-area-field_{{$index}}" ng-repeat="field in customArea.fields | filter:searchSelected:strict">
|
|
<div class="group-field-item" ng-if="field.isGroupField()">
|
|
<span class="group-field-item__drag-button pull-left">
|
|
<i class="fields-widget__icon icon-dots"></i>
|
|
</span>
|
|
<span class="group-field-item__label">{{'customAreaEditor.groupField' | i18n}}</span>
|
|
<span ux-id="remove-group-field" class="field-item__action-button pull-right"
|
|
ng-click="handleRemoveGroupClick(field)"
|
|
ng-enter="onRemoveGroupFieldClick(field)"
|
|
uib-popover-template="'systemRequiredGroupFieldConfirmTooltip.html'"
|
|
popover-placement="'auto' top-right"
|
|
popover-append-to-body="true"
|
|
popover-is-open="field.showDeleteConfirmationTooltip"
|
|
popover-trigger="'none'"
|
|
popover-class="field-item__system-required_confirm-delete-popover"
|
|
tabindex="0">
|
|
<i class="fields-widget__icon icon-cross"></i>
|
|
</span>
|
|
|
|
<div class="group-field-item-container" ui-sortable="groupSortableOptions" ng-model="field.members">
|
|
<div class="group-field-item__dropbox" ng-if="!field.members.length">{{'customAreaEditor.groupField.dropbox' | i18n}}</div>
|
|
<div ng-repeat="gfield in field.members">
|
|
<field-item ux-id="group-field-item-{{$index}}" ng-if="!enableExpression"
|
|
field="gfield"
|
|
pfield="field"
|
|
is-group-field=true
|
|
on-expand-field-click="onExpandFieldClick"
|
|
on-remove-field-click-from-group="onRemoveFieldClickFromGroup"
|
|
on-required-property-change="onRequiredPropertyChange"
|
|
on-editable-property-change="onEditablePropertyChange"
|
|
check-diff-value="checkDiffValue"
|
|
set-diff-value-fieldon-blur="setDiffValueFieldonBlur"
|
|
get-dependency-field-warn="getDependencyFieldWarn"
|
|
tooltip-position="tooltipPosition"
|
|
update-diff-value-field='updateDiffValueField'
|
|
diff-fields='diffFields'
|
|
associated-action-lists="AssociateActionLists"
|
|
on-associated-action-property-change="onAssociatedActionPropertyChange"
|
|
icons="icons"
|
|
on-select-icon="onSelectIcon"
|
|
screen-name="screenName"></field-item>
|
|
|
|
<new-field-item ux-id="group-new-field-item-{{$index}}" ng-if="enableExpression"
|
|
field="gfield"
|
|
pfield="field"
|
|
is-group-field=true
|
|
on-expand-field-click="onExpandFieldClick"
|
|
on-remove-field-click-from-group="onRemoveFieldClickFromGroup"
|
|
on-hide-property-change="onHidePropertyChange"
|
|
on-required-property-change="onRequiredPropertyChange"
|
|
on-editable-property-change="onEditablePropertyChange"
|
|
check-diff-value="checkDiffValue"
|
|
set-diff-value-fieldon-blur="setDiffValueFieldonBlur"
|
|
get-dependency-field-warn="getDependencyFieldWarn"
|
|
tooltip-position="tooltipPosition"
|
|
update-diff-value-field='updateDiffValueField'
|
|
diff-fields='diffFields'
|
|
on-set-value-property-change="onSetValuePropertyChange"
|
|
accelerators-list="acceleratorsList"
|
|
associated-action-lists="AssociateActionLists"
|
|
on-associated-action-property-change="onAssociatedActionPropertyChange"
|
|
get-warning-text-on-field-remove="generateSystemFieldRemoveWarningText(field)"
|
|
icons="icons"
|
|
on-select-icon="onSelectIcon"
|
|
screen-name="screenName"
|
|
disable-hide-label-setting="::customArea.isHeaderSection()"
|
|
></new-field-item>
|
|
</div>
|
|
<span>{{'customAreaEditor.groupField.dropbox.message' | i18n}}</span>
|
|
</div>
|
|
</div>
|
|
<field-item ng-if="!enableExpression && !field.isGroupField()"
|
|
field="field"
|
|
is-group-field=false
|
|
on-expand-field-click="onExpandFieldClick"
|
|
on-remove-field-click="onRemoveFieldClick"
|
|
on-required-property-change="onRequiredPropertyChange"
|
|
on-editable-property-change="onEditablePropertyChange"
|
|
check-diff-value="checkDiffValue"
|
|
set-diff-value-fieldon-blur="setDiffValueFieldonBlur"
|
|
get-dependency-field-warn="getDependencyFieldWarn"
|
|
tooltip-position="tooltipPosition"
|
|
update-diff-value-field='updateDiffValueField'
|
|
diff-fields='diffFields'
|
|
associated-action-lists="AssociateActionLists"
|
|
on-associated-action-property-change="onAssociatedActionPropertyChange"
|
|
icons="icons"
|
|
on-select-icon="onSelectIcon"
|
|
screen-name="screenName"></field-item>
|
|
|
|
|
|
<new-field-item ng-if="enableExpression && !field.isGroupField()"
|
|
field="field"
|
|
is-group-field=false
|
|
on-any-field-property-change="markFieldUpdated(field)"
|
|
on-expand-field-click="onExpandFieldClick"
|
|
on-remove-field-click="onRemoveFieldClick"
|
|
on-hide-property-change="onHidePropertyChange"
|
|
on-required-property-change="onRequiredPropertyChange"
|
|
on-editable-property-change="onEditablePropertyChange"
|
|
check-diff-value="checkDiffValue"
|
|
set-diff-value-fieldon-blur="setDiffValueFieldonBlur"
|
|
get-dependency-field-warn="getDependencyFieldWarn"
|
|
tooltip-position="tooltipPosition"
|
|
update-diff-value-field='updateDiffValueField'
|
|
diff-fields='diffFields'
|
|
on-set-value-property-change="onSetValuePropertyChange"
|
|
accelerators-list="acceleratorsList"
|
|
associated-action-lists="AssociateActionLists"
|
|
on-associated-action-property-change="onAssociatedActionPropertyChange"
|
|
get-warning-text-on-field-remove="generateSystemFieldRemoveWarningText(field)"
|
|
icons="icons"
|
|
on-select-icon="onSelectIcon"
|
|
screen-name="screenName"
|
|
disable-hide-label-setting="::customArea.isHeaderSection()"
|
|
></new-field-item>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="action-blade__footer clearfix">
|
|
<div class="action-blade__message-container col-sm-6" ng-if="showAvailabilityWarning">
|
|
<div class="custom-area-editor__field-availability-warning">
|
|
<i class="fields-widget__icon icon-alert_circle"></i>
|
|
<span>{{getFieldAvailabilityWarning()}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="action-blade__button-container">
|
|
<button ux-id="save-btn" type="submit" class="btn_primary" ng-click="onSaveClick()" ng-disabled="dataLoading || fieldsLoading">{{'common.button.save' | i18n}}</button>
|
|
<button ux-id="cancel-btn" type="button" class="btn_secondary" ng-click="onCancelClick()" ng-disabled="dataLoading">{{'common.button.cancel' | i18n}}</button>
|
|
</div>
|
|
</div>
|
|
<script type="text/ng-template" id="systemRequiredGroupFieldConfirmTooltip.html">
|
|
<div class="field-item__system-required_confirm-delete">
|
|
<p>{{::generateSystemFieldRemoveWarningText(field)}}</p>
|
|
<p>{{'customAreaEditor.groupField.systemRequired.remove.confirm' | i18n}}</p>
|
|
<div class="field-item__system-required_confirm-buttons pull-right">
|
|
<button ux-id="remove-group-field-btn" type="button" class="small-btn_secondary" ng-click="removeGroupField(field)">
|
|
{{ 'common.button.yes' | i18n }}
|
|
</button>
|
|
<button ux-id="cancel-group-field-btn" type="button" class="small-btn_secondary" ng-click="cancelGroupFieldRemove(field)">
|
|
{{ 'common.button.no' | i18n }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</script>
|
|
<script type="text/ng-template" id="systemRequiredFieldConfirmTooltip.html">
|
|
<div class="field-item__system-required_confirm-delete">
|
|
<p>{{::generateSystemFieldRemoveWarningText()}}</p>
|
|
<p ng-if="!field.isWidget()">{{'customAreaEditor.field.systemRequired.remove.confirm' | i18n}}</p>
|
|
<p ng-if="field.isWidget()">{{'customAreaEditor.widget.systemRequired.remove.confirm' | i18n}}</p>
|
|
<div class="field-item__system-required_confirm-buttons pull-right">
|
|
<button ux-id="confirm-delete-btn" type="button" class="small-btn_secondary" ng-click="confirmDelete()">
|
|
{{ 'common.button.yes' | i18n }}
|
|
</button>
|
|
<button ux-id="cancel-delete-btn" type="button" class="small-btn_secondary" ng-click="cancelDelete()">
|
|
{{ 'common.button.no' | i18n }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</script>
|
|
<span class="modal-content__508-hidden-span">{{'common.labels.508EndContent' | i18n}}</span>
|
|
</div> |