Working Form
diff --git a/views/ngXosLib/xosHelpers/spec/ui/form.test.js b/views/ngXosLib/xosHelpers/spec/ui/form.test.js
index eac10f5..19fc438 100644
--- a/views/ngXosLib/xosHelpers/spec/ui/form.test.js
+++ b/views/ngXosLib/xosHelpers/spec/ui/form.test.js
@@ -130,7 +130,7 @@
expect($(element).find('[name="email"]')).toHaveAttr('type', 'email');
});
- describe('the boolean field', () => {
+ describe('the boolean field test', () => {
let setFalse, setTrue;
@@ -140,6 +140,7 @@
});
it('should change value to false', () => {
+ console.log(isolatedScope.ngModel.enabled);
expect(isolatedScope.ngModel.enabled).toEqual(true);
setFalse.click()
expect(isolatedScope.ngModel.enabled).toEqual(false);
diff --git a/views/ngXosLib/xosHelpers/src/services/rest/Images.js b/views/ngXosLib/xosHelpers/src/services/rest/Images.js
new file mode 100644
index 0000000..4fe9cb3
--- /dev/null
+++ b/views/ngXosLib/xosHelpers/src/services/rest/Images.js
@@ -0,0 +1,15 @@
+(function() {
+ 'use strict';
+
+ angular.module('xos.helpers')
+ /**
+ * @ngdoc service
+ * @name xos.helpers.Images
+ * @description Angular resource to fetch /api/core/images/
+ **/
+ .service('Images', function($resource){
+ return $resource('/api/core/images/:id/', { id: '@id' }, {
+ update: { method: 'PUT' }
+ });
+ })
+})();
\ No newline at end of file
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/field/field.component.js b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/field/field.component.js
index ac4ba4d..fa673c4 100644
--- a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/field/field.component.js
+++ b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/field/field.component.js
@@ -194,8 +194,8 @@
if(!$attrs.ngModel){
throw new Error('[xosField] Please provide an ng-model');
}
- if(this.field.type === 'select' && !this.ngModel){
- this.ngModel = this.field.options[0].id;
+ if(this.field.type === 'select' && !this.ngModel ){
+ //this.ngModel = this.field.options[0].id;
}
this.getType = XosFormHelpers._getFieldFormat;
this.formatLabel = LabelFormatter.format;
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/form/form.component.js b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/form/form.component.js
index 986e589..83a206a 100644
--- a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/form/form.component.js
+++ b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/form/form.component.js
@@ -171,15 +171,18 @@
<div class="alert alert-info" ng-show="(field.hint).length >0" role="alert">{{field.hint}}</div>
</div>
<div class="form-group" ng-if="vm.config.actions">
+ <!--<pre>{{vm.config.feedback}} | json</pre>-->
+
+ <xos-alert config="vm.config.feedback" show="vm.config.feedback.show">{{vm.config.feedback.message}}</xos-alert>
+
<button role="button" href=""
ng-repeat="action in vm.config.actions"
- ng-click="action.cb(vm.ngModel)"
+ ng-click="action.cb(vm.ngModel, vm[vm.config.formName || 'form'])"
class="btn btn-{{action.class}}"
title="{{action.label}}">
<i class="glyphicon glyphicon-{{action.icon}}"></i>
{{action.label}}
</button>
-
</div>
</form>
`,
@@ -202,15 +205,27 @@
this.formField = [];
- $scope.$watch(() => this.ngModel, (model) => {
+ $scope.$watch(() => this.config, ()=> {
+
+
+ if(!this.ngModel){
+ return;
+ }
+ let diff = _.difference(Object.keys(this.ngModel), this.excludedField);
+ let modelField = XosFormHelpers.parseModelField(diff);
+ this.formField = XosFormHelpers.buildFormStructure(modelField, this.config.fields, this.ngModel);
+
+
+ } ,true);
+
+
+ $scope.$watch(() => this.ngModel, (model) => {
// empty from old stuff
this.formField = {};
-
if(!model){
return;
}
-
let diff = _.difference(Object.keys(model), this.excludedField);
let modelField = XosFormHelpers.parseModelField(diff);
this.formField = XosFormHelpers.buildFormStructure(modelField, this.config.fields, model);
diff --git a/views/ngXosViews/tenant/gulp/server.js b/views/ngXosViews/tenant/gulp/server.js
index c0678d9..c1f7608 100644
--- a/views/ngXosViews/tenant/gulp/server.js
+++ b/views/ngXosViews/tenant/gulp/server.js
@@ -53,7 +53,7 @@
if(
// to be removed, deprecated API
// req.url.indexOf('/xos/') !== -1 ||
- // req.url.indexOf('/xoslib/') !== -1 ||
+ req.url.indexOf('/xoslib/tenant') !== -1 ||
// req.url.indexOf('/hpcapi/') !== -1 ||
req.url.indexOf('/api/') !== -1
){
diff --git a/views/ngXosViews/tenant/src/js/main.js b/views/ngXosViews/tenant/src/js/main.js
index 20cf2f0..a08764e 100644
--- a/views/ngXosViews/tenant/src/js/main.js
+++ b/views/ngXosViews/tenant/src/js/main.js
@@ -149,58 +149,131 @@
bindToController: true,
controllerAs: 'cs',
templateUrl: 'templates/createslice.html',
- controller: function(Slices, SlicesPlus, $stateParams){
+ controller: function(Slices, SlicesPlus, Sites, Images, $stateParams, $http, $state){
//var sites;
//console.log(this.users.name);
//console.log(this.config);
this.config = {
- exclude: ['password', 'last_login'],
+ exclude: ['site', 'password', 'last_login', 'mount_data_sets', 'default_flavor', 'creator', 'exposed_ports', 'networks', 'omf_friendly', 'omf_friendly', 'no_sync', 'no_policy', 'lazy_blocked', 'write_protect', 'deleted', 'backend_status', 'backend_register', 'policed', 'enacted', 'updated', 'created', 'validators', 'humanReadableName'],
formName: 'SliceDetails',
+ feedback: {
+ show: false,
+ message: 'Form submitted successfully !!!',
+ type: 'success'
+ },
actions: [
{
label: 'Save',
icon: 'ok', // refers to bootstraps glyphicon
- cb: (user) => { // receive the model
- console.log(user);
+ cb: (model, form) => { // receive the model
+ if (form.$valid )
+ {
+ if(model.id){
+ var pr = Slices.update(model).$promise;
+ }
+ else{
+ var pr = Slices.save(model).$promise;
+ }
+ pr.then((users) => {
+ this.users = users;
+ data = users;
+ this.model = data;
+ this.config.feedback.show = true;
+ $state.go('site',{id : this.model.site});
+ })
+ .catch((e) => {
+ this.config.feedback.show = true;
+ this.config.feedback.type='danger';
+ if(e.data)
+ {
+ console.log(e.data.detail);
+ this.config.feedback.message = e.data.detail;
+ }
+ else {
+ this.config.feedback.message=e.statusText;}
+ });
+ }
},
class: 'success'
}, {
label: 'Save and continue editing',
icon: 'ok', // refers to bootstraps glyphicon
- cb: (user) => { // receive the model
- console.log(user);
+ cb: (model, form) => { // receive the model
+ if (form.$valid )
+ {
+ if(model.id){
+ var pr = Slices.update(model).$promise;
+ }
+ else{
+ var pr = Slices.save(model).$promise;
+ }
+ pr.then((users) => {
+ this.users = users;
+ data = users;
+ this.model = data;
+ this.config.feedback.show = true;
+ })
+ .catch((e) => {
+ this.config.feedback.show = true;
+ this.config.feedback.type='danger';
+ if(e.data)
+ {
+ console.log(e.data.detail);
+ this.config.feedback.message = e.data.detail;
+ }
+ else {
+ this.config.feedback.message=e.statusText;}
+ });
+ }
},
class: 'primary'
},
{
label: 'Save and add another',
icon: 'ok', // refers to bootstraps glyphicon
- cb: (user) => { // receive the model
- console.log(user);
+ cb: (model, form) => { // receive the model
+ if (form.$valid )
+ {
+ if(model.id){
+ var pr = Slices.update(model).$promise;
+ }
+ else{
+ var pr = Slices.save(model).$promise;
+ }
+ pr.then((users) => {
+ this.users = users;
+ data = users;
+ this.model = data;
+ this.config.feedback.show = true;
+ })
+ .catch((e) => {
+ this.config.feedback.show = true;
+ this.config.feedback.type='danger';
+ if(e.data)
+ {
+ console.log(e.data.detail);
+ this.config.feedback.message = e.data.detail;
+ }
+ else {
+ this.config.feedback.message=e.statusText;}
+ });
+ }
},
class: 'primary'
}
],
fields:
{
- site_select: {
+ site: {
label: 'Site',
type: 'select',
validators: { required: true},
hint: 'The Site this Slice belongs to',
- options: [
- {
- id: 0,
- label: '---Site---'
- },
- {
- id: 1,
- label: '---Site1---'
- }]
+ options: []
},
- first_name: {
+ name: {
label: 'Name',
type: 'string',
hint: 'The Name of the Slice',
@@ -208,7 +281,7 @@
required: true
}
},
- service_class: {
+ serviceClass: {
label: 'ServiceClass',
type: 'select',
validators: {required: true},
@@ -283,12 +356,7 @@
label: 'Default image',
type: 'select',
validators: { required: false},
- options: [
- {
- id: 0,
- label: 'trusty-server-multi-nic'
- }
- ]
+ options: []
},
network: {
label: 'Network',
@@ -316,27 +384,48 @@
}
};
-
+ //console.log(this.config.exclude);
var data;
+ Images.query().$promise
+ .then((users) => {
+ this.users = users;
+ data = this.users;
+ this.optionValImg = this.setData(data, {field1: 'id', field2: 'name'});
+ this.config.fields['default_image'].options = this.optionValImg;
+ })
+ .catch((e) => {
+ throw new Error(e);
+ });
+
+ // Use this method for select by seting object in fields variable of format { field1 : "val1", field2 : "val2"}
+ this.setData = (data, fields) => {
+ var i;
+ var retObj=[];
+ for(i = 0; i<data.length; i++){
+ var optVal = {id: data[i][fields.field1], label: data[i][fields.field2]};
+ retObj.push(optVal);
+
+ }
+ //console.log(retObj);
+ return retObj;
+ };
+
// retrieving user list
+
if ($stateParams.id)
{
+ delete this.config.fields['site'];
+ this.config.exclude.push('site');
+
+ //console.log(this.config.exclude);
+
Slices.get({id: $stateParams.id}).$promise
.then((users) => {
this.users = users;
data = users;
- this.model = {
- first_name: data.name,
- service_class: data.serviceClass,
- enabled: data.enabled,
- description: data.description,
- service: data.service,
- slice_url: data.slice_url,
- max_instances: data.max_instances,
- default_isolation: data.default_isolation,
- default_image: data.default_image,
- network: data.network
- };
+ delete data.networks;
+
+ this.model = data;
})
.catch((e) => {
throw new Error(e);
@@ -344,7 +433,36 @@
}
else
{
+
+
this.model = {};
+ $http.get('/xoslib/tenantview/').
+ success((data) => {
+ this.userList = data;
+ console.log(this.userList);
+ //this.model={}
+ this.model['creator'] = this.userList.current_user_id;
+
+ });
+
+
+
+
+
+
+ Sites.query().$promise
+ .then((users) => {
+ this.users_site = users;
+ //console.log(users);
+ this.optionVal = this.setData(this.users_site, {field1: 'id', field2: 'name'});
+ this.config.fields['site'].options = this.optionVal;
+ //= this.optionVal;
+
+ })
+ .catch((e) => {
+ throw new Error(e);
+ });
+
}
}
};
diff --git a/views/ngXosViews/tenant/src/templates/slicelist.html b/views/ngXosViews/tenant/src/templates/slicelist.html
index 555d3dc..37b8550 100644
--- a/views/ngXosViews/tenant/src/templates/slicelist.html
+++ b/views/ngXosViews/tenant/src/templates/slicelist.html
@@ -1,6 +1,6 @@
<!--<span ng-bind="siteNameSe"></span>-->
<!--<xos-field></xos-field>-->
-
-<a class="addlink btn btn-info" ui-sref="createslice({site: sl.siteId})"><i class="glyphicon glyphicon-plus-sign"></i> Create Slice</a>
+<a class="addlink btn btn-info" ui-sref="createslice({site: sl.users[0].site})"><i class="glyphicon glyphicon-plus-sign"></i> Create Slice</a>
<xos-table config="sl.tableConfig" data="sl.users"></xos-table>
-<!--<div ui-view="sliceDetails"></div>-->
\ No newline at end of file
+<!--<div ui-view="sliceDetails"></div>-->
+<!--<pre>{{sl.users[0].site}}</pre>-->
diff --git a/xos/core/xoslib/static/js/vendor/ngXosHelpers.js b/xos/core/xoslib/static/js/vendor/ngXosHelpers.js
index 9b41ea8..1823da1 100644
--- a/xos/core/xoslib/static/js/vendor/ngXosHelpers.js
+++ b/xos/core/xoslib/static/js/vendor/ngXosHelpers.js
@@ -1291,7 +1291,7 @@
config: '=',
ngModel: '='
},
- template: '\n <form name="vm.{{vm.config.formName || \'form\'}}" novalidate>\n <div class="form-group" ng-repeat="(name, field) in vm.formField">\n <!--{{vm.ngModel[name] | json}}-->\n <xos-field name="name" field="field" ng-model="vm.ngModel[name]"></xos-field>\n <!--<pre>{{vm[vm.config.formName] || \'form\' | json }}</pre>-->\n <!--{{field}}-->\n <xos-validation field="vm[vm.config.formName || \'form\'][name]" form = "vm[vm.config.formName || \'form\']"></xos-validation>\n <div class="alert alert-info" ng-show="(field.hint).length >0" role="alert">{{field.hint}}</div>\n </div>\n <div class="form-group" ng-if="vm.config.actions">\n <button role="button" href=""\n ng-repeat="action in vm.config.actions"\n ng-click="action.cb(vm.ngModel)"\n class="btn btn-{{action.class}}"\n title="{{action.label}}">\n <i class="glyphicon glyphicon-{{action.icon}}"></i>\n {{action.label}}\n </button>\n\n </div>\n </form>\n ',
+ template: '\n <form name="vm.{{vm.config.formName || \'form\'}}" novalidate>\n <div class="form-group" ng-repeat="(name, field) in vm.formField">\n <!--{{vm.ngModel[name] | json}}-->\n <xos-field name="name" field="field" ng-model="vm.ngModel[name]"></xos-field>\n <!--<pre>{{vm[vm.config.formName] || \'form\' | json }}</pre>-->\n <!--{{field}}-->\n <xos-validation field="vm[vm.config.formName || \'form\'][name]" form = "vm[vm.config.formName || \'form\']"></xos-validation>\n <div class="alert alert-info" ng-show="(field.hint).length >0" role="alert">{{field.hint}}</div>\n </div>\n <div class="form-group" ng-if="vm.config.actions">\n <!--<pre>{{vm.config.feedback}} | json</pre>-->\n\n <xos-alert config="vm.config.feedback" show="vm.config.feedback.show">{{vm.config.feedback.message}}</xos-alert>\n\n <button role="button" href=""\n ng-repeat="action in vm.config.actions"\n ng-click="action.cb(vm.ngModel, vm[vm.config.formName || \'form\'])"\n class="btn btn-{{action.class}}"\n title="{{action.label}}">\n <i class="glyphicon glyphicon-{{action.icon}}"></i>\n {{action.label}}\n </button>\n </div>\n </form>\n ',
bindToController: true,
controllerAs: 'vm',
controller: ["$scope", "$log", "_", "XosFormHelpers", function controller($scope, $log, _, XosFormHelpers) {
@@ -1312,16 +1312,25 @@
this.formField = [];
$scope.$watch(function () {
+ return _this.config;
+ }, function () {
+
+ if (!_this.ngModel) {
+ return;
+ }
+ var diff = _.difference(Object.keys(_this.ngModel), _this.excludedField);
+ var modelField = XosFormHelpers.parseModelField(diff);
+ _this.formField = XosFormHelpers.buildFormStructure(modelField, _this.config.fields, _this.ngModel);
+ }, true);
+
+ $scope.$watch(function () {
return _this.ngModel;
}, function (model) {
-
// empty from old stuff
_this.formField = {};
-
if (!model) {
return;
}
-
var diff = _.difference(Object.keys(model), _this.excludedField);
var modelField = XosFormHelpers.parseModelField(diff);
_this.formField = XosFormHelpers.buildFormStructure(modelField, _this.config.fields, model);
@@ -1477,7 +1486,7 @@
throw new Error('[xosField] Please provide an ng-model');
}
if (this.field.type === 'select' && !this.ngModel) {
- this.ngModel = this.field.options[0].id;
+ //this.ngModel = this.field.options[0].id;
}
this.getType = XosFormHelpers._getFieldFormat;
this.formatLabel = LabelFormatter.format;
@@ -2344,6 +2353,25 @@
angular.module('xos.helpers')
/**
* @ngdoc service
+ * @name xos.helpers.Images
+ * @description Angular resource to fetch /api/core/images/
+ **/
+ .service('Images', ["$resource", function ($resource) {
+ return $resource('/api/core/images/:id/', { id: '@id' }, {
+ update: { method: 'PUT' }
+ });
+ }]);
+})();
+//# sourceMappingURL=../../maps/services/rest/Images.js.map
+
+'use strict';
+
+(function () {
+ 'use strict';
+
+ angular.module('xos.helpers')
+ /**
+ * @ngdoc service
* @name xos.helpers.Flavors
* @description Angular resource to fetch /api/core/flavors/:id/
**/