You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
223 lines
13 KiB
223 lines
13 KiB
<div class="modal">
|
|
<div class="modal-dialog modal-wide">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2 ng-if="formElement.type != 'expression'">{{'FORM-BUILDER.POPUP.EDIT-TITLE' | translate: formElement}}</h2>
|
|
<h2 ng-if="formElement.type == 'expression'">{{'FORM-BUILDER.POPUP.EXPRESSION-TITLE' | translate}}</h2>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="center-pane">
|
|
<div class="content">
|
|
<div class="clearfix">
|
|
<ul class="tabs clearfix">
|
|
<li ng-repeat="tab in formTabs" ng-class="{'active': tab.id == activeTab.id}"
|
|
ng-if="!tab.show || tab.show.indexOf(formElement.type) >= 0">
|
|
<a ng-click="tabClicked(tab)">{{tab.title && (tab.title | translate) || tab.name}}</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group" ng-if="activeTab.id == 'general' && formElement.type != 'expression'">
|
|
<label translate="FORM-BUILDER.COMPONENT.LABEL"></label>
|
|
<input type="text" class="form-control" ng-model="formElement.name"
|
|
ng-change="formElementNameChanged(formElement)" auto-focus>
|
|
</div>
|
|
|
|
<div class="clearfix" ng-if="activeTab.id == 'general' && formElement.type != 'expression'">
|
|
<div class="form-group">
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox" ng-model="formElement.overrideId">
|
|
{{'FORM-BUILDER.COMPONENT.OVERRIDEID' | translate}}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label translate="FORM-BUILDER.COMPONENT.ID"></label>
|
|
<input type="text" class="form-control" ng-model="formElement.id" ng-disabled="!formElement.overrideId" editor-input-check>
|
|
</div>
|
|
|
|
<div ng-show="formElement.type !== 'expression' && formElement.type !== 'hyperlink' && formElement.type !== 'spacer' && formElement.type !== 'horizontal-line' && formElement.type !== 'headline' && formElement.type !== 'headline-with-line'">
|
|
<div class="row">
|
|
<div class="form-group col-md-2">
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox" ng-model="formElement.required">
|
|
{{'FORM-BUILDER.COMPONENT.REQUIRED' | translate}}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="form-group col-md-10">
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox" ng-model="formElement.readOnly">
|
|
{{'FORM-BUILDER.COMPONENT.READONLY' | translate}}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div ng-show="formElement.type === 'functional-group' || formElement.type === 'people' || formElement.type === 'dropdown' || formElement.type === 'date' || formElement.type === 'text' || formElement.type === 'password' || formElement.type === 'multi-line-text' || formElement.type === 'integer' || formElement.type === 'decimal'">
|
|
<label translate="FORM-BUILDER.COMPONENT.PLACEHOLDER"></label>
|
|
<input type="text" class="form-control" ng-model="formElement.placeholder">
|
|
</div>
|
|
</div>
|
|
|
|
<div ng-if="(activeTab.id == 'options') && (formElement.type === 'radio-buttons' || formElement.type === 'dropdown')">
|
|
|
|
<div class="form-group">
|
|
<label translate="FORM-BUILDER.COMPONENT.OPTIONS"></label>
|
|
|
|
<div>
|
|
<div ng-repeat="option in formElement.options" style="margin-bottom: 5px" class="input-group">
|
|
<div class="input-group-addon">
|
|
<input type="radio" ng-disabled="optionsExpressionEnabled" ng-model="formElement.value" ng-value="option.name">
|
|
</div>
|
|
|
|
<input id="firstDropdownOption" type="text" class="form-control" ng-disabled="optionsExpressionEnabled" ng-if="$index == 0" ng-model="option.name" style="background-color: #E6E6E6;">
|
|
<input type="text" class="form-control" ng-disabled="optionsExpressionEnabled" ng-if="$index > 0" ng-model="option.name">
|
|
|
|
<a class="input-group-addon" ng-if="$index == 0"
|
|
data-placement="left" data-type="info" data-animation="am-fade-and-scale" bs-tooltip="'FORM-BUILDER.COMPONENT.DROPDOWN-EMPTY-VALUE-HELP'|translate">
|
|
<i class="glyphicon glyphicon-question-sign"></i>
|
|
</a>
|
|
|
|
<a class="input-group-addon" ng-disabled="optionsExpressionEnabled" ng-click="removeOption($index)" ng-if="$index > 1"><i class="icon icon-remove"></i></a>
|
|
</div>
|
|
|
|
<div>
|
|
<input type="text" class="form-control" placeholder="{{'FORM-BUILDER.COMPONENT.ADD-OPTION' | translate}}" ng-model="newOption.name"
|
|
ng-disabled="optionsExpressionEnabled" ng-blur="confirmNewOption($event)" ng-keydown="optionKeyDown($event)">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox" ng-init="optionsExpressionEnabled = formElement.optionsExpression != null && formElement.optionsExpression != ''" ng-model="optionsExpressionEnabled" ng-change="optionsExpressionChanged($event)">
|
|
{{'FORM-BUILDER.COMPONENT.OPTIONS-EXPRESSION-ENABLED' | translate}}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label translate="FORM-BUILDER.COMPONENT.OPTIONS-EXPRESSION"></label>
|
|
<textarea rows="3" ng-disabled="!optionsExpressionEnabled" ng-model="formElement.optionsExpression" class="form-control" id="readonly-text-value"></textarea>
|
|
<div class="subtle" translate="FORM-BUILDER.MESSAGE.OPTIONS-EXPRESSION-HELP" style="padding: 5px 0 5px 1px;"></div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div ng-if="activeTab.id == 'upload' && formElement.type === 'upload'">
|
|
<div class="form-group">
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox" ng-model="formElement.params.multiple">
|
|
{{'FORM-BUILDER.COMPONENT.UPLOAD-ALLOW-MULTIPLE' | translate}}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div ng-if="activeTab.id == 'advanced' && (formElement.type === 'password')">
|
|
<div class="form-group">
|
|
<label translate="FORM-BUILDER.COMPONENT.MIN-LENGTH"></label> <input
|
|
type="text" number-input-check maxlength="5" class="form-control"
|
|
ng-model="formElement.params.minLength">
|
|
</div>
|
|
<div class="form-group">
|
|
<label translate="FORM-BUILDER.COMPONENT.MAX-LENGTH"></label> <input
|
|
type="text" number-input-check maxlength="5" class="form-control"
|
|
ng-model="formElement.params.maxLength">
|
|
</div>
|
|
<div class="row">
|
|
<div class="form-group col-md-12">
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox" ng-model="formElement.params.passwordunmask">
|
|
{{'FORM-BUILDER.COMPONENT.PASSWORD-UNMASK-OPTION' | translate}}?
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div ng-if="activeTab.id == 'advanced' && (formElement.type === 'text' || formElement.type === 'multi-line-text' || formElement.type === 'decimal' || formElement.type === 'integer')">
|
|
<div class="form-group">
|
|
<label translate="FORM-BUILDER.COMPONENT.MIN-LENGTH"></label> <input
|
|
type="text" number-input-check maxlength="5" class="form-control"
|
|
ng-model="formElement.params.minLength">
|
|
</div>
|
|
<div class="form-group">
|
|
<label translate="FORM-BUILDER.COMPONENT.MAX-LENGTH"></label> <input
|
|
type="text" number-input-check maxlength="5" class="form-control"
|
|
ng-model="formElement.params.maxLength">
|
|
</div>
|
|
<div class="form-group">
|
|
<label translate="FORM-BUILDER.COMPONENT.REGEX-PATTERN"></label>
|
|
<div class="input-group">
|
|
<span class="input-group-addon">/^</span> <input type="text" class="form-control" ng-model="formElement.params.regexPattern">
|
|
<span class="input-group-addon">$/</span>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<div class="form-group">
|
|
<label translate="FORM-BUILDER.COMPONENT.MASK.TITLE"></label>
|
|
<input type="text" class="form-control" ng-model="formElement.params.mask">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="form-group">
|
|
<label translate>FORM-BUILDER.COMPONENT.MASK.EXAMPLES.TITLE</label>
|
|
<ul>
|
|
<li><span translate>FORM-BUILDER.COMPONENT.MASK.EXAMPLES.NUMBER</span>: <b>9</b></li>
|
|
<li><span translate>FORM-BUILDER.COMPONENT.MASK.EXAMPLES.LETTER</span>: <b>A</b></li>
|
|
<li><span translate>FORM-BUILDER.COMPONENT.MASK.EXAMPLES.NUMBERORLETTER</span>: <b>*</b></li>
|
|
<li><span translate>FORM-BUILDER.COMPONENT.MASK.EXAMPLES.OPTIONAL</span>: <b>?</b></li>
|
|
<li><span translate>FORM-BUILDER.COMPONENT.MASK.EXAMPLES.PHONE</span>: <b>(99) 9999-9999</b></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div ng-if="activeTab.id == 'advanced' && formElement.type === 'hyperlink'">
|
|
<div class="form-group">
|
|
<label translate="FORM-BUILDER.COMPONENT.HYPERLINK-URL"></label> <input
|
|
type="text" class="form-control" ng-model="formElement.params.hyperlinkUrl">
|
|
</div>
|
|
</div>
|
|
|
|
<div ng-if="activeTab.id == 'general' && formElement.type === 'expression'">
|
|
<div class="form-group">
|
|
<label translate="FORM-BUILDER.COMPONENT.EXPRESSION"></label>
|
|
<textarea rows="3" ng-model="formElement.expression" class="form-control" id="readonly-text-value"></textarea>
|
|
<div class="subtle" translate="FORM-BUILDER.MESSAGE.EXPRESSION-HELP" style="padding: 5px 0 5px 1px;"></div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label translate="FORM-BUILDER.COMPONENT.SIZE"></label>
|
|
<select class="form-control" ng-model="formElement.params.size">
|
|
<option>1</option>
|
|
<option>2</option>
|
|
<option>3</option>
|
|
<option>4</option>
|
|
<option>5</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<div class="pull-right">
|
|
<button type="button" class="btn btn-sm btn-default" ng-click="doneEditing()">
|
|
{{'GENERAL.ACTION.CLOSE' | translate}}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|