verdnatura/salix
verdnatura
/
salix
3
4
Fork 0
Code Issues Pull Requests 58 Releases Wiki Activity

JsDoc improved for model/pagination

This commit is contained in:
Juan 2018-10-23 12:14:47 +02:00
parent 86f6253ed7
commit 48c41aa35f
4 changed files with 148 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
client/core/src/components/array-model/array-model.js
View File

@ -1,6 +1,9 @@
import ngModule from '../../module';
import ModelProxy from '../model-proxy/model-proxy';
/**
* Model that uses an array as datasource.
*/
export default class ArrayModel extends ModelProxy {
constructor($q, $filter, $element, $scope) {
super($element, $scope);
@ -17,9 +20,6 @@ export default class ArrayModel extends ModelProxy {
this.autoRefresh();
}
/**
* Whether the model is loading.
*/
get isLoading() {
return false;
}
@ -30,11 +30,6 @@ export default class ArrayModel extends ModelProxy {
return this.$q.resolve();
}
/**
* Refresh the model data.
*
* @return {Promise} The request promise
*/
refresh() {
this.data = this.proccessData(0);
return this.$q.resolve();
@ -97,15 +92,15 @@ export default class ArrayModel extends ModelProxy {
return data;
}
applyFilter(userFilter, userParams) {
this.userFilter = userFilter;
this.userParams = userParams;
applyFilter(user, params) {
this.userFilter = user;
this.userParams = params;
return this.refresh();
}
addFilter(userFilter, userParams) {
this.userFilter = this.mergeFilters(userFilter, this.userFilter);
Object.assign(this.userParams, userParams);
addFilter(user, params) {
this.userFilter = this.mergeFilters(user, this.userFilter);
Object.assign(this.userParams, params);
return this.refresh();
}
@ -113,11 +108,6 @@ export default class ArrayModel extends ModelProxy {
return applyFilter(null, null);
}
/**
* When limit is enabled, loads the next set of rows.
*
* @return {Promise} The request promise
*/
loadMore() {
if (!this.moreRows)
return this.$q.resolve();
@ -127,9 +117,6 @@ export default class ArrayModel extends ModelProxy {
return this.$q.resolve();
}
/**
* Clears the model, removing all it's data.
*/
clear() {
this.data = null;
this.userFilter = null;

57
client/core/src/components/crud-model/crud-model.js
View File

@ -2,6 +2,11 @@ import ngModule from '../../module';
import ModelProxy from '../model-proxy/model-proxy';
import {mergeWhere, mergeFilters} from 'vn-loopback/common/filter.js';
/**
* Model that uses remote loopback model as datasource.
*
* @property {Array<String>} fields the list of fields to fetch
*/
export default class CrudModel extends ModelProxy {
constructor($q, $http, $element, $scope) {
super($element, $scope);
@ -16,13 +21,17 @@ export default class CrudModel extends ModelProxy {
this.autoRefresh();
}
/**
* Whether the model is loading.
*/
get isLoading() {
return this.canceler != null;
}
/**
* @type {String} The remote model URL
*/
get url() {
return this._url;
}
set url(url) {
if (this._url === url) return;
this._url = url;
@ -32,10 +41,6 @@ export default class CrudModel extends ModelProxy {
this.autoRefresh();
}
get url() {
return this._url;
}
autoRefresh() {
if (this.autoLoad)
return this.refresh();
@ -62,11 +67,6 @@ export default class CrudModel extends ModelProxy {
return filter;
}
/**
* Refresh the model data.
*
* @return {Promise} The request promise
*/
refresh() {
if (!this._url)
return this.$q.resolve();
@ -76,34 +76,29 @@ export default class CrudModel extends ModelProxy {
/**
* Applies a new filter to the model.
*
* @param {Object} userFilter The Loopback filter
* @param {Object} userParams Custom parameters
* @param {Object} filter The Loopback filter
* @param {Object} params Custom parameters
* @return {Promise} The request promise
*/
applyFilter(userFilter, userParams) {
this.userFilter = userFilter;
this.userParams = userParams;
applyFilter(filter, params) {
this.userFilter = filter;
this.userParams = params;
return this.refresh();
}
/**
* Adds a filter to the model.
*
* @param {Object} userFilter The Loopback filter
* @param {Object} userParams Custom parameters
* @param {Object} filter The Loopback filter
* @param {Object} params Custom parameters
* @return {Promise} The request promise
*/
addFilter(userFilter, userParams) {
this.userFilter = mergeFilters(userFilter, this.userFilter);
Object.assign(this.userParams, userParams);
addFilter(filter, params) {
this.userFilter = mergeFilters(filter, this.userFilter);
Object.assign(this.userParams, params);
return this.refresh();
}
/**
* Removes the currently applied user filters.
*
* @return {Promise} The request promise
*/
removeFilter() {
return applyFilter(null, null);
}
@ -118,11 +113,6 @@ export default class CrudModel extends ModelProxy {
}
}
/**
* When limit is enabled, loads the next set of rows.
*
* @return {Promise} The request promise
*/
loadMore() {
if (!this.moreRows)
return this.$q.resolve();
@ -132,9 +122,6 @@ export default class CrudModel extends ModelProxy {
return this.sendRequest(filter, true);
}
/**
* Clears the model, removing all it's data.
*/
clear() {
this.orgData = null;
}

147
client/core/src/components/model-proxy/model-proxy.js
View File

@ -2,42 +2,29 @@ import ngModule from '../../module';
import Component from '../../lib/component';
/**
* A filtrable model.
*
* @property {Function} filter The filter function
*/
export class Filtrable {
applyFilter(userFilter, userParams) {}
addFilter(userFilter, userParams) {}
removeFilter() {}
}
/**
* A sortable model.
*
* @property {String|Array<String>|Function} order The sort specification
*/
export class Sortable {}
/**
* Paginable model.
*
* @property {Number} limit The page size
*/
export class Paginable {
get isLoading() {}
get moreRows() {}
loadMore() {}
}
/**
* A data model.
* A data model. It allows to filter, sort and paginate data.
*
* @property {Boolean} autoLoad Whether to load data automatically when required attributes are setted
* @event dataChange Emitted when data property changes
*/
export class DataModel extends Component {
/**
* @type {Array<Object>} A JavaScript array with the model data.
*/
get data() {}
refresh() {}
/**
* Refresh the model data.
*
* @return {Promise} The request promise
*/
refresh() {
return Promise.resolve();
}
/**
* Clears the model, removing all it's data.
*/
clear() {}
}
@ -53,6 +40,8 @@ ngModule.component('vnDataModel', {
/**
* A data model that monitorizes changes to the data.
* It internally uses the JavaScript Proxy to track changes
* made in model rows.
*
* @event dataChange Emitted when data property changes
*/
@ -81,6 +70,12 @@ export default class ModelProxy extends DataModel {
this.resetChanges();
}
/**
* @type {Array<Object>} A JavaScript array with the model data.
* Rows data can be modified directly but for insertion or removing
* rows use the remove() or insert() model methods, otherwise changes
* are not detected by the model.
*/
get data() {
return this._data;
}
@ -90,6 +85,11 @@ export default class ModelProxy extends DataModel {
this.emit('dataChange');
}
/**
* Removes a row from the model and emits the 'rowRemove' event.
*
* @param {Number} index The row index
*/
remove(index) {
let [item] = this.data.splice(index, 1);
@ -103,6 +103,12 @@ export default class ModelProxy extends DataModel {
this.emit('rowRemove', index);
}
/**
* Inserts a new row into the model and emits the 'rowInsert' event.
*
* @param {Object} data The initial data for the new row
* @return {Number} The inserted row index
*/
insert(data) {
data = Object.assign(data || {}, this.link);
let newRow = this.createRow(data, null);
@ -149,6 +155,9 @@ export default class ModelProxy extends DataModel {
row.$oldData = null;
}
/**
* Applies all changes made to the model into the original data source.
*/
applyChanges() {
let data = this.proxiedData;
let orgData = this.orgData;
@ -180,6 +189,9 @@ export default class ModelProxy extends DataModel {
this.resetChanges();
}
/**
* Undoes all changes made to the model data.
*/
undoChanges() {
let data = this.proxiedData;
if (!data) return;
@ -213,3 +225,76 @@ ngModule.component('vnModelProxy', {
data: '=?'
}
});
/**
* Interface used to filter data coming from different datasources.
*
* @property {Object} filter The base filter
* @property {Object} params The base filter params
*/
export class Filtrable {
/**
* Applies a filter to the model clearing the previous ones.
*
* @param {Object} filter The filter parameters
* @param {*} params Custom user parameters
* @return {Promise} The request promise
*/
applyFilter() {
return Promise.resolve();
}
/**
* Adds a filter to the model mixing it with the currently applied filters.
*
* @param {Object} filter The filter parameters
* @param {*} params Custom user parameters
* @return {Promise} The request promise
*/
addFilter() {
return Promise.resolve();
}
/**
* Removes the currently applied filters.
*
* @return {Promise} The request promise
*/
removeFilter() {
return Promise.resolve();
}
}
/**
* Interface used to sort data coming from different datasources using
* the same specification: columnName [ASC|DESC]
*
* @property {String|Array<String>|Function} order The sort specification.
*/
export class Sortable {}
/**
* Interface used to paginate data coming from different datasources.
*
* @property {Number} limit The page size
*/
export class Paginable {
/**
* @type {Boolean} Whether the model is loading.
*/
get isLoading() {}
/**
* @type {Boolean} Whether the data is paginated and there are more rows to load.
*/
get moreRows() {}
/**
* When limit is enabled, loads the next set of rows.
*
* @return {Promise} The request promise
*/
loadMore() {
return Promise.resolve();
}
}

2
client/core/src/components/pagination/pagination.js
View File

@ -6,7 +6,7 @@ import './style.scss';
* Pagination component that automatically loads more rows when
* the user scrolls down an element.
*
* @property {CrudModel} model The model used for pagination
* @property {Paginable} model The model used for pagination
* @property {String} scrollSelector The the scrollable element selector
* @property {HTMLElement} scrollElement The scrollable element
* @property {Number} scrollOffset The distance, in pixels, until the end that activates the loading of the next rows