176 lines
11 KiB
HTML
176 lines
11 KiB
HTML
<div class="field-item" data-field-id="{{field.name}}">
|
|
<div class="field-item__header">
|
|
<span class="field-item__expand-button pull-left"
|
|
ng-click="onExpandFieldClick(field)"
|
|
ng-enter="onExpandFieldClick(field)" tabindex="0">
|
|
<i class="fields-widget__icon icon-dots"></i>
|
|
<i class="fields-widget__icon" ng-class="{'icon-angle_right' : !field.expanded, 'icon-angle_down': field.expanded}"></i>
|
|
</span>
|
|
<span class="field-item__label" tooltip="{{::getFieldTooltip(field)}}" tooltip-placemen="top">
|
|
<div class="field-item__field-icon">
|
|
<i ng-class="{
|
|
'icon-field_ootb': !field.isCustomField(),
|
|
'icon-field_custom': field.isCustomField(),
|
|
'icon-widget': field.isWidget()
|
|
}"
|
|
></i>
|
|
</div>
|
|
<div>
|
|
<span class="inline-block">
|
|
<span class="field-item__label_field-type">
|
|
{{::getFieldTypeLabel(field)}}
|
|
<span ng-if="field.isSystemRequired()" class="field-item__system-required-label">({{'customAreaEditor.field.systemRequired.label' | i18n}})</span>
|
|
</span>
|
|
<br>
|
|
<span>{{field.label}}</span>
|
|
</span>
|
|
<span ng-if="field.sealed" class="field-item__sealed">
|
|
<i class="icon-lock"></i>
|
|
</span>
|
|
</div>
|
|
</span>
|
|
|
|
<span class="field-item__action-button"
|
|
ng-class="{'highlight': showDeleteConfirmationTooltip}"
|
|
ng-click="handleRemoveFieldClick(field)"
|
|
ng-enter="handleRemoveFieldClick(field)"
|
|
uib-popover-template="'systemRequiredFieldConfirmTooltip.html'"
|
|
popover-placement="'auto' top-right"
|
|
popover-append-to-body="true"
|
|
popover-enable="enableRemoveConfirmationTooltip"
|
|
popover-is-open="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>
|
|
|
|
<div ng-if="field.expanded" class="field-item__properties">
|
|
<label class="field-item__property-label" ng-class="{'disabled' : field.sealed}">
|
|
<input type="checkbox" ng-model="field.hide" ng-disabled="field.sealed"
|
|
ng-change="onHidePropertyChange(field)">
|
|
{{"customAreaEditor.field.hide" | i18n}}
|
|
</label>
|
|
<div ng-if="field.hide && !field.sealed" class="row field-item__properties-options">
|
|
<div class="col-md-4">
|
|
<selection selection-items="fieldPropertyOptions" selected-item="getSelectedFieldPropertyOption(field.hideConditionFlag)" label="name" value="value" selection-callback="updateProperty(item, 'hideConditionFlag')"></selection>
|
|
</div>
|
|
<div class="col-md-8" ng-if="field.hideConditionFlag">
|
|
<expression-builder on-expression-change="onFieldPropertyChange()" field-name="field.name" expression="field.hideCondition" property-name="'hide'" field-accelerators-list="acceleratorsList" is-required="true"></expression-builder>
|
|
</div>
|
|
</div>
|
|
<label class="field-item__property-label" ng-class="{'disabled' : field.sealed}">
|
|
<input type="checkbox" ng-model="field.required" ng-disabled="field.sealed"
|
|
ng-change="onRequiredPropertyChange(field)">
|
|
{{"customAreaEditor.field.required" | i18n}}
|
|
</label>
|
|
<div ng-if="field.required && !field.sealed" class="row field-item__properties-options">
|
|
<div class="col-md-4">
|
|
<selection selection-items="fieldPropertyOptions" selected-item="getSelectedFieldPropertyOption(field.requiredConditionFlag)" label="name" value="value" selection-callback="updateProperty(item, 'requiredConditionFlag')"></selection>
|
|
</div>
|
|
<div class="col-md-8" ng-if="field.requiredConditionFlag">
|
|
<expression-builder on-expression-change="onFieldPropertyChange()" field-name="field.name" expression="field.requiredCondition" property-name="'required'" field-accelerators-list="acceleratorsList" is-required="true"></expression-builder>
|
|
</div>
|
|
</div>
|
|
<label class="field-item__property-label" ng-class="{'disabled' : field.sealed}">
|
|
<input type="checkbox" ng-model="field.readOnly" ng-disabled="field.sealed"
|
|
ng-change="onEditablePropertyChange(field, true)">
|
|
{{"customAreaEditor.field.readOnly" | i18n}}
|
|
</label>
|
|
<div ng-if="field.readOnly && !field.sealed" class="row field-item__properties-options">
|
|
<div class="col-md-4">
|
|
<selection selection-items="fieldPropertyOptions" selected-item="getSelectedFieldPropertyOption(field.readOnlyConditionFlag)" label="name" value="value" selection-callback="updateProperty(item, 'readOnlyConditionFlag')"></selection>
|
|
</div>
|
|
<div class="col-md-8" ng-if="field.readOnlyConditionFlag">
|
|
<expression-builder on-expression-change="onFieldPropertyChange()" field-name="field.name" expression="field.readOnlyCondition" property-name="'readOnly'" field-accelerators-list="acceleratorsList" is-required="true"></expression-builder>
|
|
</div>
|
|
</div>
|
|
<label class="field-item__property-label" ng-class="{'disabled' : field.sealed}" ng-if="isSetValueEnabled()">
|
|
<input type="checkbox" ng-model="field.setValueConditionFlag" ng-disabled="field.sealed"
|
|
ng-change="onSetValuePropertyChange(field)">
|
|
{{"customAreaEditor.field.setValue" | i18n}}
|
|
</label>
|
|
<div ng-if="isSetValueEnabled() && field.setValueConditionFlag && !field.sealed" class="row field-item__properties-options">
|
|
<div class="col-md-12">
|
|
<expression-builder on-expression-change="onFieldPropertyChange()" field-name="field.name" expression="field.setValueCondition" property-name="'value'" field-accelerators-list="acceleratorsList" is-required="true"></expression-builder>
|
|
</div>
|
|
</div>
|
|
<label class="field-item__property-label" ng-if="!isCreateScreens && showHideLabel">
|
|
<input type="checkbox"
|
|
ng-disabled="disableHideLabelSetting"
|
|
ng-model="field.hideLabel"
|
|
ng-change="onFieldPropertyChange()">
|
|
{{"customAreaEditor.field.hideLabel" | i18n}}
|
|
</label>
|
|
<label class="field-item__property-label" ng-if="field.isDynamicSelectionField();">
|
|
<input type="checkbox" ng-model="field.diffCheck" ng-change="checkDiffValue(field)"
|
|
ng-checked="field.linkedFieldExist()">
|
|
{{"customAreaEditor.field.diffValue" | i18n}}
|
|
</label>
|
|
|
|
<div class="field-item__diff-field" ng-if="field.isDynamicSelectionField();"
|
|
ng-show="field.diffCheck || field.linkedFieldExist()">
|
|
<input type="text"
|
|
class="text-input full-width"
|
|
placeholder="{{'common.labels.startTyping' | i18n}}"
|
|
ng-model="field.valueFieldName"
|
|
ng-blur="setDiffValueFieldonBlur(field)"
|
|
typeahead="item as item.name for item in diffFields | filter:{name: $viewValue}"
|
|
typeahead-on-select="updateDiffValueField(field, $item)"
|
|
/>
|
|
</div>
|
|
<label class="field-item__property-label" ng-if="::showAssociateAction(screenName)">
|
|
<input type="checkbox" ng-model="field.isMapped" ng-change="onAssociatedActionPropertyChange(field)">
|
|
{{"customAreaEditor.field.associateAction" | i18n}}
|
|
</label>
|
|
|
|
<div class="row field-item__properties-options"
|
|
ng-if="field.isMapped">
|
|
<div class="col-md-6">
|
|
<selection selection-items="associatedActionLists"
|
|
selected-item="field.mappedAction"
|
|
label="name"
|
|
value="labels.default"
|
|
required="true"
|
|
update-selected-item="true"
|
|
placeholder-text="{{'common.labels.associate-action' | i18n}}"
|
|
selection-filter-placeholder-text="{{'common.labels.associate-action' | i18n}}">
|
|
</selection>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="dropdown-input" dropdown>
|
|
<button type="button" class="dropdown-toggle dropdown-input__button selected_Icon_size" ng-if="field.selectedIcon">Icon: <i class="{{field.selectedIcon}}"></i></button>
|
|
<button type="button" class="dropdown-toggle dropdown-input__button" ng-class="{'ng-invalid-required' :field.mappedAction}" ng-if="!field.selectedIcon">{{'common.labels.associateAction.select-icon' | i18n}} </button>
|
|
<ul class="dropdown-menu full-width icon-holder__parent select-icon icon-list-body" vertical-fit="true">
|
|
<li class="icon-holder select-icon-li" ng-repeat="icon in icons" ng-click="onSelectIcon(icon, field)"><i tooltip-placement="top" tooltip="{{icon}}" tooltip-append-to-body="true" class="{{icon}}"></i></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field-item__dependency-block" ng-show="field.dependency.length">
|
|
<span class="field-item__label">{{"customAreaEditor.field.dependency" | i18n}}</span>
|
|
<ul class="field-item__dependency-list">
|
|
<li ng-repeat="dField in field.dependency">
|
|
<span tooltip-placement="{{tooltipPosition}}" tooltip="{{getDependencyFieldWarn(dField)}}"
|
|
ng-class=" !dField.availability ? 'icon-check field-item__dependency-list_ok': 'icon-exclamation_triangle field-item__dependency-list_warn'"></span>
|
|
{{dField.label}}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="field-item__widget-members" ng-if="field.isWidget() && field.members && field.members.length">
|
|
<span class="field-item__label">{{"customAreaEditor.field.widgetMembers" | i18n}}</span>
|
|
<ul class="field-item__widget-members_list">
|
|
<li class="field-item__widget-members_item" ng-repeat="member in field.members">
|
|
<i ng-class="{
|
|
'icon-field_ootb': !field.isCustomField(),
|
|
'icon-field_custom': field.isCustomField()
|
|
}"></i> {{::getMemberFieldLabel(member)}}
|
|
<span ng-if="member.isSystemRequired()" class="field-item__system-required-label">({{'customAreaEditor.field.systemRequired.label' | i18n}})</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
</div> |