Documented smartTable component
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 0a4a1b0..6ae25f7 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
@@ -16,9 +16,64 @@
* @name xos.uiComponents.directive:xosSmartTable
* @restrict E
* @description The xos-table directive
- * @param {Object} config The configuration for the component.
+ * @param {Object} config The configuration for the component,
+ * it is composed by the name of an angular [$resource](https://docs.angularjs.org/api/ngResource/service/$resource)
+ * and an array of fields that shouldn't be printed.
+ * ```
+ * {
+ resource: 'Users',
+ hiddenFields: []
+ }
+ * ```
* @scope
* @example
+
+ <example module="sampleSmartTable">
+ <file name="index.html">
+ <div ng-controller="SampleCtrl as vm">
+ <xos-smart-table config="vm.config"></xos-smart-table>
+ </div>
+ </file>
+ <file name="script.js">
+ angular.module('sampleSmartTable', ['xos.uiComponents', 'ngResource', 'ngMockE2E'])
+ // This is only for documentation purpose
+ .run(function($httpBackend, _){
+ let datas = [{id: 1, name: 'Jhon', surname: 'Doe'}];
+ let count = 1;
+
+ let paramsUrl = new RegExp(/\/test\/(.+)/);
+
+ $httpBackend.whenDELETE(paramsUrl, undefined, ['id']).respond((method, url, data, headers, params) => {
+ data = angular.fromJson(data);
+ let id = url.match(paramsUrl)[1];
+ _.remove(datas, (d) => {
+ return d.id === parseInt(id);
+ })
+ return [204];
+ });
+
+ $httpBackend.whenGET('/test').respond(200, datas)
+ $httpBackend.whenPOST('/test').respond((method, url, data) => {
+ data = angular.fromJson(data);
+ data.id = ++count;
+ datas.push(data);
+ return [201, data, {}];
+ });
+ })
+ .factory('_', function($window){
+ return $window._;
+ })
+ .service('SampleResource', function($resource){
+ return $resource('/test/:id', {id: '@id'});
+ })
+ // End of documentation purpose, example start
+ .controller('SampleCtrl', function(){
+ this.config = {
+ resource: 'SampleResource'
+ };
+ });
+ </file>
+ </example>
*/
.directive('xosSmartTable', function(){
@@ -82,6 +137,7 @@
cb: (item) => {
this.Resource.delete({id: item.id}).$promise
.then(() => {
+ _.remove(this.data, (d) => d.id === item.id);
this.responseMsg = `${this.config.resource} with id ${item.id} successfully deleted`;
})
.catch(err => {
@@ -108,7 +164,7 @@
this.formConfig = {
exclude: this.config.hiddenFields,
- fields: [],
+ fields: {},
formName: `${this.config.resource}Form`,
actions: [
{
@@ -116,7 +172,9 @@
icon: 'ok',
cb: (item) => {
item.$save()
- .then(() => {
+ .then((res) => {
+ this.data.push(angular.copy(res));
+ delete this.detailedItem;
this.responseMsg = `${this.config.resource} with id ${item.id} successfully saved`;
})
.catch((err) => {
@@ -138,44 +196,48 @@
this.Resource = $injector.get(this.config.resource);
- this.Resource.query().$promise
- .then((res) => {
+ const getData = () => {
+ this.Resource.query().$promise
+ .then((res) => {
- if(!res[0]){
- return;
- }
+ if(!res[0]){
+ return;
+ }
- let item = res[0];
- let props = Object.keys(item);
+ let item = res[0];
+ let props = Object.keys(item);
- _.remove(props, p => {
- return p == 'id' || p == 'password' || p == 'validators'
- });
-
- // TODO move out cb
- if(angular.isArray(this.config.hiddenFields)){
- props = _.difference(props, this.config.hiddenFields)
- }
-
- let labels = props.map(p => LabelFormatter.format(p));
-
- props.forEach((p, i) => {
- this.tableConfig.columns.push({
- label: labels[i],
- prop: p
+ _.remove(props, p => {
+ return p == 'id' || p == 'password' || p == 'validators'
});
- });
- // build form structure
- props.forEach((p, i) => {
- this.formConfig.fields.push({
- label: LabelFormatter.format(labels[i]).replace(':', ''),
- type: XosFormHelpers._getFieldFormat(item[p])
+ // TODO move out cb
+ if(angular.isArray(this.config.hiddenFields)){
+ props = _.difference(props, this.config.hiddenFields)
+ }
+
+ let labels = props.map(p => LabelFormatter.format(p));
+
+ props.forEach((p, i) => {
+ this.tableConfig.columns.push({
+ label: labels[i],
+ prop: p
+ });
});
- });
- this.data = res;
- });
+ // build form structure
+ props.forEach((p, i) => {
+ this.formConfig.fields[p] = {
+ label: LabelFormatter.format(labels[i]).replace(':', ''),
+ type: XosFormHelpers._getFieldFormat(item[p])
+ };
+ });
+
+ this.data = res;
+ });
+ }
+
+ getData();
}
};
});