[CORD-2810] Prevent the user from inserting values in read_only fields
Change-Id: I00460544dd7d36f8482b04ea89912005a108f6b8
diff --git a/src/app/core/field/field.html b/src/app/core/field/field.html
index a91665d..5189ea5 100644
--- a/src/app/core/field/field.html
+++ b/src/app/core/field/field.html
@@ -18,99 +18,107 @@
<label ng-if="vm.field.type !== 'object' && vm.field.type !== 'array'">
{{vm.field.label}}
<span class="required" ng-if="vm.field.validators.required">*</span>
+ <span class="read-only" ng-if="vm.field.read_only">read only</span>
</label>
-<input
- xos-custom-validator custom-validator="vm.field.validators.custom || null"
- ng-if="vm.field.type !== 'boolean' && vm.field.type !== 'object' && vm.field.type !== 'select' && vm.field.type !== 'array'"
- type="{{vm.field.type}}"
- name="{{vm.name}}"
- class="form-control"
- ng-model="vm.ngModel"
- ng-minlength="vm.field.validators.minlength || 0"
- ng-maxlength="vm.field.validators.maxlength || 2000"
- ng-required="vm.field.validators.required || false" />
-<select class="form-control" ng-if="vm.field.type === 'select'"
- name = "{{vm.name}}"
- ng-options="item.id as item.label for item in vm.field.options"
- ng-model="vm.ngModel"
- ng-required="vm.field.validators.required || false">
-</select>
-<span class="boolean-field" ng-if="vm.field.type === 'boolean'">
- <a
- class="btn btn-success"
- ng-show="vm.ngModel"
- ng-click="vm.ngModel = false">
- <i class="fa fa-check"></i>
- </a>
- <a
- class="btn btn-danger"
- ng-show="!vm.ngModel"
- ng-click="vm.ngModel = true">
- <i class="fa fa-remove"></i>
- </a>
- </span>
-<div
- class="panel panel-default object-field"
- ng-if="vm.field.type == 'object' && (!vm.isEmptyObject(vm.ngModel) || !vm.isEmptyObject(vm.field.properties))"
->
- <div class="panel-heading">{{vm.field.label}}</div>
- <div class="panel-body">
- <div ng-if="!vm.field.properties" ng-repeat="(k, v) in vm.ngModel">
- <xos-field
- name="k"
- field="{label: vm.formatLabel(k), type: vm.getType(v)}"
- ng-model="v">
- </xos-field>
- </div>
- <div ng-if="vm.field.properties" ng-repeat="(k, v) in vm.field.properties">
- <xos-field
- name="k"
- field="{
- label: v.label || vm.formatLabel(k),
- type: v.type,
- validators: v.validators
- }"
- ng-model="vm.ngModel[k]">
- </xos-field>
- </div>
- </div>
+
+<div ng-if="vm.field.read_only">
+ <pre class="form-control" readonly>{{vm.ngModel || ""}}</pre>
</div>
-<div
- class="panel panel-default array-field"
- ng-if="vm.field.type == 'array'">
- <div class="panel-heading">{{vm.field.label}}</div>
- <div class="panel-body selected">
- <ul class="draggable" dnd-list="vm.ngModel">
- <li
- class="array-element"
- ng-repeat="item in vm.ngModel"
- dnd-draggable="item"
- dnd-moved="vm.ngModel.splice($index, 1)"
- dnd-effect-allowed="move"
- dnd-selected="models.selected = item"
- >
- <div class="well well-sm text-center">
- {{item}}
- </div>
- </li>
- <div class="clearfix"></div>
- </ul>
+
+<div ng-if="!vm.field.read_only">
+ <input
+ xos-custom-validator custom-validator="vm.field.validators.custom || null"
+ ng-if="vm.field.type !== 'boolean' && vm.field.type !== 'object' && vm.field.type !== 'select' && vm.field.type !== 'array'"
+ type="{{vm.field.type}}"
+ name="{{vm.name}}"
+ class="form-control"
+ ng-model="vm.ngModel"
+ ng-minlength="vm.field.validators.minlength || 0"
+ ng-maxlength="vm.field.validators.maxlength || 2000"
+ ng-required="vm.field.validators.required || false" />
+ <select class="form-control" ng-if="vm.field.type === 'select'"
+ name = "{{vm.name}}"
+ ng-options="item.id as item.label for item in vm.field.options"
+ ng-model="vm.ngModel"
+ ng-required="vm.field.validators.required || false">
+ </select>
+ <span class="boolean-field" ng-if="vm.field.type === 'boolean'">
+ <a
+ class="btn btn-success"
+ ng-show="vm.ngModel"
+ ng-click="vm.ngModel = false">
+ <i class="fa fa-check"></i>
+ </a>
+ <a
+ class="btn btn-danger"
+ ng-show="!vm.ngModel"
+ ng-click="vm.ngModel = true">
+ <i class="fa fa-remove"></i>
+ </a>
+ </span>
+ <div
+ class="panel panel-default object-field"
+ ng-if="vm.field.type == 'object' && (!vm.isEmptyObject(vm.ngModel) || !vm.isEmptyObject(vm.field.properties))"
+ >
+ <div class="panel-heading">{{vm.field.label}}</div>
+ <div class="panel-body">
+ <div ng-if="!vm.field.properties" ng-repeat="(k, v) in vm.ngModel">
+ <xos-field
+ name="k"
+ field="{label: vm.formatLabel(k), type: vm.getType(v)}"
+ ng-model="v">
+ </xos-field>
+ </div>
+ <div ng-if="vm.field.properties" ng-repeat="(k, v) in vm.field.properties">
+ <xos-field
+ name="k"
+ field="{
+ label: v.label || vm.formatLabel(k),
+ type: v.type,
+ validators: v.validators
+ }"
+ ng-model="vm.ngModel[k]">
+ </xos-field>
+ </div>
+ </div>
</div>
- <div class="panel-body unselected">
- <ul class="draggable" dnd-list="vm.field.availableOptions">
- <li
- class="array-element"
- ng-repeat="item in vm.field.availableOptions"
- dnd-draggable="item"
- dnd-moved="vm.field.availableOptions.splice($index, 1)"
- dnd-effect-allowed="move"
- dnd-selected="models.selected = item"
- >
- <div class="well well-sm text-center">
- {{item}}
- </div>
- </li>
- <div class="clearfix"></div>
- </ul>
+ <div
+ class="panel panel-default array-field"
+ ng-if="vm.field.type == 'array'">
+ <div class="panel-heading">{{vm.field.label}}</div>
+ <div class="panel-body selected">
+ <ul class="draggable" dnd-list="vm.ngModel">
+ <li
+ class="array-element"
+ ng-repeat="item in vm.ngModel"
+ dnd-draggable="item"
+ dnd-moved="vm.ngModel.splice($index, 1)"
+ dnd-effect-allowed="move"
+ dnd-selected="models.selected = item"
+ >
+ <div class="well well-sm text-center">
+ {{item}}
+ </div>
+ </li>
+ <div class="clearfix"></div>
+ </ul>
+ </div>
+ <div class="panel-body unselected">
+ <ul class="draggable" dnd-list="vm.field.availableOptions">
+ <li
+ class="array-element"
+ ng-repeat="item in vm.field.availableOptions"
+ dnd-draggable="item"
+ dnd-moved="vm.field.availableOptions.splice($index, 1)"
+ dnd-effect-allowed="move"
+ dnd-selected="models.selected = item"
+ >
+ <div class="well well-sm text-center">
+ {{item}}
+ </div>
+ </li>
+ <div class="clearfix"></div>
+ </ul>
+ </div>
</div>
</div>
\ No newline at end of file