Merge "[CORD-2810] Prevent the user from inserting values in read_only fields"
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
diff --git a/src/app/core/field/field.scss b/src/app/core/field/field.scss
index 7bdb659..b86c95f 100644
--- a/src/app/core/field/field.scss
+++ b/src/app/core/field/field.scss
@@ -18,6 +18,12 @@
@import "../../style/vars";
-span.required {
+span.required,
+span.read-only {
color: $color-accent;
+}
+
+span.read-only {
+ vertical-align: super;
+ font-size: 70%;
}
\ No newline at end of file
diff --git a/src/app/core/form/form.spec.ts b/src/app/core/form/form.spec.ts
index b010907..1be9a43 100644
--- a/src/app/core/form/form.spec.ts
+++ b/src/app/core/form/form.spec.ts
@@ -102,13 +102,15 @@
name: 'id',
label: 'Id:',
type: 'number',
- validators: {}
+ validators: {},
+ read_only: false
},
{
name: 'first_name',
label: 'Name:',
type: 'text',
- validators: {}
+ validators: {},
+ read_only: false
},
{
name: 'email',
@@ -116,19 +118,22 @@
type: 'email',
validators: {
required: true
- }
+ },
+ read_only: false
},
{
name: 'birthDate',
label: 'DOB:',
type: 'date',
- validators: {}
+ validators: {},
+ read_only: false
},
{
name: 'enabled',
label: 'Status:',
type: 'boolean',
- validators: {}
+ validators: {},
+ read_only: false
},
{
name: 'role',
@@ -138,7 +143,8 @@
{id: 1, label: 'user'},
{id: 2, label: 'admin'}
],
- validators: {}
+ validators: {},
+ read_only: false
}
];
diff --git a/src/app/core/form/form.ts b/src/app/core/form/form.ts
index 8faa2bd..1c10c33 100644
--- a/src/app/core/form/form.ts
+++ b/src/app/core/form/form.ts
@@ -56,6 +56,7 @@
name: string;
label: string;
type: string; // options are: [date, boolean, number, email, string, select],
+ read_only: boolean;
hint?: string;
validators: IXosFormInputValidator;
options?: IXosFormInputOptions[];
diff --git a/src/app/core/services/helpers/config.helpers.spec.ts b/src/app/core/services/helpers/config.helpers.spec.ts
index db1c840..9e7318e 100644
--- a/src/app/core/services/helpers/config.helpers.spec.ts
+++ b/src/app/core/services/helpers/config.helpers.spec.ts
@@ -36,7 +36,8 @@
{
type: 'number',
name: 'id',
- validators: []
+ validators: [],
+ read_only: false
},
{
type: 'string',
@@ -46,7 +47,8 @@
bool_value: true,
name: 'required'
}
- ]
+ ],
+ read_only: false
},
{
type: 'string',
@@ -56,7 +58,8 @@
int_value: 30,
name: 'maxlength'
}
- ]
+ ],
+ read_only: false
},
{
type: 'number',
@@ -70,12 +73,14 @@
int_value: 40,
name: 'max'
}
- ]
+ ],
+ read_only: false
},
{
type: 'date',
name: 'updated',
- validators: []
+ validators: [],
+ read_only: false
},
],
description: '',
@@ -255,13 +260,15 @@
type: 'boolean',
name: 'active',
default: '"True"',
- validators: []
+ validators: [],
+ read_only: false
},
{
type: 'boolean',
name: 'disabled',
default: '"False"',
- validators: []
+ validators: [],
+ read_only: false
},
];
const form_fields = service.modelFieldToInputCfg(fields);
@@ -312,7 +319,8 @@
relation: {
model: 'Test',
type: 'many_to_one'
- }
+ },
+ read_only: false
};
describe('the populateRelated method', () => {
@@ -332,7 +340,8 @@
name: 'test',
label: 'Test',
type: 'select',
- validators: {}
+ validators: {},
+ read_only: false
};
it('should add the available choice to the select', () => {
@@ -358,7 +367,8 @@
{
type: 'number',
name: 'foo',
- validators: []
+ validators: [],
+ read_only: false
},
{
type: 'string',
@@ -368,7 +378,8 @@
bool_value: true,
name: 'required'
}
- ]
+ ],
+ read_only: false
}
],
description: '',
diff --git a/src/app/core/services/helpers/config.helpers.ts b/src/app/core/services/helpers/config.helpers.ts
index 4baf9c5..443b6c2 100644
--- a/src/app/core/services/helpers/config.helpers.ts
+++ b/src/app/core/services/helpers/config.helpers.ts
@@ -34,6 +34,7 @@
export interface IXosModelDefsField {
name: string;
type: string;
+ read_only: boolean;
validators?: IXosModelDefsFieldValidators[];
hint?: string;
relation?: {
@@ -271,7 +272,8 @@
type: f.type,
validators: this.formatValidators(f.validators),
hint: f.hint,
- default: this.formatDefaultValues(f.default)
+ default: this.formatDefaultValues(f.default),
+ read_only: f.read_only
};
// NOTE populate drop-downs based on relation
diff --git a/src/app/datasources/helpers/model-discoverer.service.ts b/src/app/datasources/helpers/model-discoverer.service.ts
index 0addc05..fca593c 100644
--- a/src/app/datasources/helpers/model-discoverer.service.ts
+++ b/src/app/datasources/helpers/model-discoverer.service.ts
@@ -19,11 +19,11 @@
// TODO test me hard!!!
import * as _ from 'lodash';
-import {IXosModeldefsService, IXosModeldef, IXosModelDefsField, IXosModelDefsRelation} from '../rest/modeldefs.rest';
+import {IXosModeldefsService, IXosModeldef, IXosModelDefsRelation} from '../rest/modeldefs.rest';
import {IXosTableCfg} from '../../core/table/table';
import {IXosFormCfg} from '../../core/form/form';
import {IXosNavigationService} from '../../core/services/navigation';
-import {IXosConfigHelpersService} from '../../core/services/helpers/config.helpers';
+import {IXosConfigHelpersService, IXosModelDefsField} from '../../core/services/helpers/config.helpers';
import {IXosRuntimeStatesService, IXosState} from '../../core/services/runtime-states';
import {IXosModelStoreService} from '../stores/model.store';
import {IXosAuthService} from '../rest/auth.rest';
diff --git a/src/app/datasources/helpers/model.discoverer.service.spec.ts b/src/app/datasources/helpers/model.discoverer.service.spec.ts
index 8011442..a6e6340 100644
--- a/src/app/datasources/helpers/model.discoverer.service.spec.ts
+++ b/src/app/datasources/helpers/model.discoverer.service.spec.ts
@@ -26,8 +26,8 @@
const stubModels: IXosModeldef[] = [
{
fields: [
- {name: 'id', type: 'number'},
- {name: 'foo', type: 'string'}
+ {name: 'id', type: 'number', read_only: false},
+ {name: 'foo', type: 'string', read_only: false}
],
relations: [],
name: 'Node',
@@ -37,8 +37,8 @@
},
{
fields: [
- {name: 'id', type: 'number'},
- {name: 'bar', type: 'string'}
+ {name: 'id', type: 'number', read_only: false},
+ {name: 'bar', type: 'string', read_only: false}
],
relations: [],
name: 'VSGTenant',
diff --git a/src/app/datasources/helpers/modeldefs.service.spec.ts b/src/app/datasources/helpers/modeldefs.service.spec.ts
index 9d5660d..e0f37a6 100644
--- a/src/app/datasources/helpers/modeldefs.service.spec.ts
+++ b/src/app/datasources/helpers/modeldefs.service.spec.ts
@@ -43,8 +43,8 @@
const modelDef: IXosModel = {
fields: [
- {name: 'id', type: 'number'},
- {name: 'foo', type: 'string'}
+ {name: 'id', type: 'number', read_only: false},
+ {name: 'foo', type: 'string', read_only: false}
],
relations: [],
name: 'Node',
diff --git a/src/app/datasources/rest/modeldefs.rest.ts b/src/app/datasources/rest/modeldefs.rest.ts
index 300b71b..60fc917 100644
--- a/src/app/datasources/rest/modeldefs.rest.ts
+++ b/src/app/datasources/rest/modeldefs.rest.ts
@@ -19,18 +19,6 @@
import {IXosModelDefsField} from '../../core/services/helpers/config.helpers';
import {IXosAppConfig} from '../../../index';
-// Models interfaces
-export interface IXosModelDefsField {
- name: string;
- type: string;
- validators?: any;
- hint?: string;
- relation?: {
- model: string;
- type: string;
- };
-}
-
export interface IXosModelDefsRelation {
model: string; // model name
type: string; // relation type
diff --git a/src/app/views/crud/crud.html b/src/app/views/crud/crud.html
index 596add8..c586bca 100644
--- a/src/app/views/crud/crud.html
+++ b/src/app/views/crud/crud.html
@@ -49,7 +49,7 @@
<xos-form ng-model="vm.model" config="vm.formCfg"></xos-form>
</div>
</uib-tab>
- <uib-tab ng-if="vm.debugTab" heading="Debug">
+ <uib-tab ng-if="vm.debugTab && vm.model.id" heading="Debug">
<div class="panel-body">
<xos-debug-model ng-model="vm.model"></xos-debug-model>
</div>