Setting empty form in xos-smart-table component
diff --git a/views/ngXosLib/xosHelpers/src/services/label_formatter.service.js b/views/ngXosLib/xosHelpers/src/services/label_formatter.service.js
index b2c7a94..3b63ecd 100644
--- a/views/ngXosLib/xosHelpers/src/services/label_formatter.service.js
+++ b/views/ngXosLib/xosHelpers/src/services/label_formatter.service.js
@@ -23,7 +23,8 @@
string = _formatByUnderscore(string);
string = _formatByUppercase(string);
- return _capitalize(string).replace(/\s\s+/g, ' ') + ':';
+ string = _capitalize(string).replace(/\s\s+/g, ' ') + ':';
+ return string.replace('::', ':');
};
return {
diff --git a/views/ngXosLib/xosHelpers/src/styles/main.scss b/views/ngXosLib/xosHelpers/src/styles/main.scss
index a427ea6..800466e 100644
--- a/views/ngXosLib/xosHelpers/src/styles/main.scss
+++ b/views/ngXosLib/xosHelpers/src/styles/main.scss
@@ -1,4 +1,5 @@
@import './animations.scss';
+@import '../../../../../../style/sass/bootstrap/bootstrap/_variables.scss';
@import '../ui_components/dumbComponents/table/table.scss';
@import '../ui_components/dumbComponents/alert/alert.scss';
@@ -8,4 +9,9 @@
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
+}
+
+.row + .row {
+ /* TODO move in xos.scss*/
+ margin-top: $form-group-margin-bottom;
}
\ No newline at end of file
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 5aaf663..537cfbf 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
@@ -143,11 +143,18 @@
this.formField = [];
$scope.$watch(() => this.ngModel, (model) => {
+
+ // empty from old stuff
+ this.formField = {};
+
if(!model){
return;
}
- this.formField = XosFormHelpers.buildFormStructure(XosFormHelpers.parseModelField(_.difference(Object.keys(model), this.excludedField)), this.config.fields, model);
- }, true);
+
+ let diff = _.difference(Object.keys(model), this.excludedField);
+ let modelField = XosFormHelpers.parseModelField(diff);
+ this.formField = XosFormHelpers.buildFormStructure(modelField, this.config.fields, model);
+ });
}
}
@@ -192,6 +199,9 @@
this.buildFormStructure = (modelField, customField, model) => {
+ // console.log(modelField, model);
+
+ modelField = Object.keys(modelField).length > 0 ? modelField : customField; //if no model field are provided, check custom
customField = customField || {};
return _.reduce(Object.keys(modelField), (form, f) => {
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/smartComponents/smartTable/smartTable.component.js b/views/ngXosLib/xosHelpers/src/ui_components/smartComponents/smartTable/smartTable.component.js
index b339f89..1d6d5ee 100644
--- a/views/ngXosLib/xosHelpers/src/ui_components/smartComponents/smartTable/smartTable.component.js
+++ b/views/ngXosLib/xosHelpers/src/ui_components/smartComponents/smartTable/smartTable.component.js
@@ -35,12 +35,17 @@
</a>
</div>
</div>
- <xos-table config="vm.tableConfig" data="vm.data"></xos-table>
+ <div class="row">
+ <div class="col-xs-12 table-responsive">
+ <xos-table config="vm.tableConfig" data="vm.data"></xos-table>
+ </div>
+ </div>
<div class="panel panel-default" ng-show="vm.detailedItem">
<div class="panel-heading">
<div class="row">
<div class="col-xs-11">
- <h3 class="panel-title">Update {{vm.config.resource}} {{vm.detailedItem.id}}</h3>
+ <h3 class="panel-title" ng-show="vm.detailedItem.id">Update {{vm.config.resource}} {{vm.detailedItem.id}}</h3>
+ <h3 class="panel-title" ng-show="!vm.detailedItem.id">Create {{vm.config.resource}} item</h3>
</div>
<div class="col-xs-1">
<a href="" ng-click="vm.cleanForm()">
@@ -58,7 +63,7 @@
`,
bindToController: true,
controllerAs: 'vm',
- controller: function($injector, LabelFormatter, _){
+ controller: function($injector, LabelFormatter, _, XosFormHelpers){
// NOTE
// Corner case
@@ -103,6 +108,7 @@
this.formConfig = {
exclude: this.config.hiddenFields,
+ fields: [],
formName: `${this.config.resource}Form`,
actions: [
{
@@ -128,7 +134,6 @@
this.createItem = () => {
this.detailedItem = new this.Resource();
- console.log(this.detailedItem);
};
this.Resource = $injector.get(this.config.resource);
@@ -140,7 +145,8 @@
return;
}
- let props = Object.keys(res[0]);
+ let item = res[0];
+ let props = Object.keys(item);
_.remove(props, p => {
return p == 'id' || p == 'password' || p == 'validators'
@@ -160,6 +166,14 @@
});
});
+ // build form structure
+ props.forEach((p, i) => {
+ this.formConfig.fields.push({
+ label: LabelFormatter.format(labels[i]).replace(':', ''),
+ type: XosFormHelpers._getFieldFormat(item[p])
+ });
+ });
+ console.log(this.formConfig.fields);
this.data = res;
});
}
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/smartComponents/smartTable/smartTable.scss b/views/ngXosLib/xosHelpers/src/ui_components/smartComponents/smartTable/smartTable.scss
index 03342f1..fc63fdf 100644
--- a/views/ngXosLib/xosHelpers/src/ui_components/smartComponents/smartTable/smartTable.scss
+++ b/views/ngXosLib/xosHelpers/src/ui_components/smartComponents/smartTable/smartTable.scss
@@ -1,5 +1,3 @@
xos-smart-table{
- .row + xos-table {
- margin-top: 15px;
- }
+
}
\ No newline at end of file