vnAutoPaging renamed to vnPagination plus bugs fixed
This commit is contained in:
parent
cfce618844
commit
98001b364e
|
@ -23,7 +23,6 @@
|
||||||
</vn-vertical>
|
</vn-vertical>
|
||||||
</vn-card>
|
</vn-card>
|
||||||
<vn-paging vn-one margin-large-top index="index" total="index.model.count"></vn-paging>
|
<vn-paging vn-one margin-large-top index="index" total="index.model.count"></vn-paging>
|
||||||
<!-- <vn-auto-paging vn-one margin-large-top index="index" total="index.model.count" items="$ctrl.instances"></vn-auto-paging> -->
|
|
||||||
</vn-vertical>
|
</vn-vertical>
|
||||||
<a ui-sref="client.card.credit.create" vn-bind="+" fixed-bottom-right>
|
<a ui-sref="client.card.credit.create" vn-bind="+" fixed-bottom-right>
|
||||||
<vn-float-button icon="add"></vn-float-button>
|
<vn-float-button icon="add"></vn-float-button>
|
||||||
|
|
|
@ -31,7 +31,6 @@
|
||||||
</vn-vertical>
|
</vn-vertical>
|
||||||
</vn-card>
|
</vn-card>
|
||||||
<vn-paging margin-large-top vn-one index="index" total="index.model.count"></vn-paging>
|
<vn-paging margin-large-top vn-one index="index" total="index.model.count"></vn-paging>
|
||||||
<!-- <vn-auto-paging margin-large-top vn-one index="index" total="index.model.count" items="$ctrl.instances"></vn-auto-paging> -->
|
|
||||||
</vn-vertical>
|
</vn-vertical>
|
||||||
<a ui-sref="client.card.greuge.create" vn-bind="+" fixed-bottom-right>
|
<a ui-sref="client.card.greuge.create" vn-bind="+" fixed-bottom-right>
|
||||||
<vn-float-button icon="add"></vn-float-button>
|
<vn-float-button icon="add"></vn-float-button>
|
||||||
|
|
|
@ -31,5 +31,4 @@
|
||||||
</vn-vertical>
|
</vn-vertical>
|
||||||
</vn-card>
|
</vn-card>
|
||||||
<vn-paging margin-large-top vn-one index="index" total="index.model.count"></vn-paging>
|
<vn-paging margin-large-top vn-one index="index" total="index.model.count"></vn-paging>
|
||||||
<!-- <vn-auto-paging margin-large-top vn-one index="index" total="index.model.count" items="$ctrl.instances"></vn-auto-paging> -->
|
|
||||||
</vn-vertical>
|
</vn-vertical>
|
|
@ -27,5 +27,4 @@
|
||||||
</vn-vertical>
|
</vn-vertical>
|
||||||
</vn-card>
|
</vn-card>
|
||||||
<vn-paging vn-one margin-large-top index="index" total="index.model.count"></vn-paging>
|
<vn-paging vn-one margin-large-top index="index" total="index.model.count"></vn-paging>
|
||||||
<!-- <vn-auto-paging vn-one margin-large-top index="index" total="index.model.count" items="$ctrl.instances"></vn-auto-paging> -->
|
|
||||||
</vn-vertical>
|
</vn-vertical>
|
|
@ -31,7 +31,6 @@
|
||||||
</vn-vertical>
|
</vn-vertical>
|
||||||
</vn-card>
|
</vn-card>
|
||||||
<vn-paging vn-one margin-large-top index="index" total="index.model.count"></vn-paging>
|
<vn-paging vn-one margin-large-top index="index" total="index.model.count"></vn-paging>
|
||||||
<!-- <vn-auto-paging vn-one margin-large-top index="index" total="index.model.count" items="$ctrl.instances"></vn-auto-paging> -->
|
|
||||||
</vn-vertical>
|
</vn-vertical>
|
||||||
<a ui-sref="client.card.recovery.create" vn-bind="+" fixed-bottom-right>
|
<a ui-sref="client.card.recovery.create" vn-bind="+" fixed-bottom-right>
|
||||||
<vn-float-button icon="add"></vn-float-button>
|
<vn-float-button icon="add"></vn-float-button>
|
||||||
|
|
|
@ -1,7 +0,0 @@
|
||||||
<vn-horizontal margin-medium-top>
|
|
||||||
<vn-one></vn-one>
|
|
||||||
<vn-auto>
|
|
||||||
<vn-spinner enable="$ctrl.watchScroll"></vn-spinner>
|
|
||||||
</vn-auto>
|
|
||||||
<vn-one></vn-one>
|
|
||||||
</vn-horizontal>
|
|
|
@ -1,123 +0,0 @@
|
||||||
import ngModule from '../../module';
|
|
||||||
import getWatchers from '../../lib/get-watchers';
|
|
||||||
|
|
||||||
class AutoPaging {
|
|
||||||
constructor($http, $window, $element, $timeout, vnApp, $translate, $scope) {
|
|
||||||
this.$http = $http;
|
|
||||||
this.$window = $window;
|
|
||||||
this.$element = $element;
|
|
||||||
this.$timeout = $timeout;
|
|
||||||
this.vnApp = vnApp;
|
|
||||||
this.$translate = $translate;
|
|
||||||
this.$scope = $scope;
|
|
||||||
|
|
||||||
this.numPerPage = null;
|
|
||||||
this.maxItems = 0;
|
|
||||||
this.watchScroll = false;
|
|
||||||
this.waitingNewPage = false;
|
|
||||||
|
|
||||||
this.handlerScroll = this.onScroll.bind(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
get numPages() {
|
|
||||||
return this.numPerPage ? Math.ceil(this.maxItems / this.numPerPage) : 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
loadNewPage() {
|
|
||||||
this.index.filter.page++;
|
|
||||||
this.waitingNewPage = true;
|
|
||||||
|
|
||||||
this.index.accept().then(res => {
|
|
||||||
this.$timeout(() => {
|
|
||||||
res.instances.forEach(item => {
|
|
||||||
this.items.push(item);
|
|
||||||
});
|
|
||||||
this.$scope.$apply();
|
|
||||||
this.checkWatchers();
|
|
||||||
});
|
|
||||||
if (this.index.filter.page == this.numPages) {
|
|
||||||
this.cancelScroll();
|
|
||||||
}
|
|
||||||
this.waitingNewPage = false;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
checkPosition() {
|
|
||||||
let element = this.$element[0].querySelector('vn-spinner');
|
|
||||||
let position = element.getBoundingClientRect();
|
|
||||||
let isVisible = position.y < document.body.offsetHeight + 150;
|
|
||||||
if (this.currentPage < this.numPages && isVisible && !this.waitingNewPage) {
|
|
||||||
this.loadNewPage();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onScroll() {
|
|
||||||
this.checkPosition();
|
|
||||||
}
|
|
||||||
|
|
||||||
startScroll() {
|
|
||||||
this.watchScroll = true;
|
|
||||||
this.checkPosition();
|
|
||||||
let mainView = this.$window.document.querySelector('.main-view > ui-view.ng-scope');
|
|
||||||
angular.element(mainView).bind("scroll", this.handlerScroll);
|
|
||||||
}
|
|
||||||
|
|
||||||
cancelScroll() {
|
|
||||||
this.watchScroll = false;
|
|
||||||
let mainView = this.$window.document.querySelector('.main-view > ui-view.ng-scope');
|
|
||||||
angular.element(mainView).unbind("scroll", this.handlerScroll);
|
|
||||||
}
|
|
||||||
|
|
||||||
checkScroll() {
|
|
||||||
if (this.numPages > this.currentPage && !this.watchScroll) {
|
|
||||||
this.startScroll();
|
|
||||||
} else if (this.numPages <= this.currentPage && this.watchScroll) {
|
|
||||||
this.cancelScroll();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
checkWatchers() {
|
|
||||||
let watchers = getWatchers();
|
|
||||||
if (watchers > 3000 && this.watchScroll) {
|
|
||||||
this.cancelScroll();
|
|
||||||
this.vnApp.showMessage(
|
|
||||||
this.$translate.instant('Auto-scroll interrupted, please adjust the search')
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
$onChanges(changes) {
|
|
||||||
if (!this.index) return;
|
|
||||||
|
|
||||||
this.numPerPage = this.index.filter.size;
|
|
||||||
this.currentPage = this.index.filter.page;
|
|
||||||
this.currentInstances = this.items;
|
|
||||||
if (changes.total)
|
|
||||||
this.maxItems = changes.total.currentValue;
|
|
||||||
|
|
||||||
this.checkScroll();
|
|
||||||
}
|
|
||||||
|
|
||||||
$postLink() {
|
|
||||||
this.checkScroll();
|
|
||||||
}
|
|
||||||
|
|
||||||
$doCheck() {
|
|
||||||
if (this.index && this.index.filter && this.index.filter.page && this.index.filter.page != this.currentPage) {
|
|
||||||
this.currentPage = this.index.filter.page;
|
|
||||||
this.checkScroll();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
AutoPaging.$inject = ['$http', '$window', '$element', '$timeout', 'vnApp', '$translate', '$scope'];
|
|
||||||
|
|
||||||
ngModule.component('vnAutoPaging', {
|
|
||||||
template: require('./auto-paging.html'),
|
|
||||||
bindings: {
|
|
||||||
index: '<',
|
|
||||||
total: '<',
|
|
||||||
items: '<'
|
|
||||||
},
|
|
||||||
controller: AutoPaging
|
|
||||||
});
|
|
|
@ -1,61 +0,0 @@
|
||||||
import './auto-paging.js';
|
|
||||||
import template from './auto-paging.html';
|
|
||||||
|
|
||||||
describe('Component vnAutoPaging', () => {
|
|
||||||
let $http;
|
|
||||||
let $window;
|
|
||||||
let $element;
|
|
||||||
let $timeout;
|
|
||||||
let controller;
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
angular.mock.module('client');
|
|
||||||
});
|
|
||||||
|
|
||||||
beforeEach(angular.mock.inject((_$componentController_, _$httpBackend_, _$window_, _$timeout_) => {
|
|
||||||
$http = _$httpBackend_;
|
|
||||||
$window = _$window_;
|
|
||||||
$timeout = _$timeout_;
|
|
||||||
$element = angular.element(`<div>${template}</div>`);
|
|
||||||
|
|
||||||
controller = _$componentController_('vnAutoPaging', {$http, $window, $element, $timeout});
|
|
||||||
}));
|
|
||||||
|
|
||||||
describe('onChanges: actions when index object changes', () => {
|
|
||||||
beforeEach(() => {
|
|
||||||
controller.index = {
|
|
||||||
filter: {
|
|
||||||
size: 5,
|
|
||||||
page: 1
|
|
||||||
}
|
|
||||||
};
|
|
||||||
controller.items = [1, 2, 3, 4, 5];
|
|
||||||
});
|
|
||||||
|
|
||||||
it('call startScroll() if there are pages to load', () => {
|
|
||||||
let changes = {
|
|
||||||
total: {
|
|
||||||
currentValue: 20
|
|
||||||
}
|
|
||||||
};
|
|
||||||
spyOn(controller, 'startScroll');
|
|
||||||
|
|
||||||
controller.$onChanges(changes);
|
|
||||||
|
|
||||||
expect(controller.startScroll).toHaveBeenCalled();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('call stopScroll() if there are not pages to load', () => {
|
|
||||||
let changes = {
|
|
||||||
total: {
|
|
||||||
currentValue: 5
|
|
||||||
}
|
|
||||||
};
|
|
||||||
controller.watchScroll = true;
|
|
||||||
spyOn(controller, 'cancelScroll');
|
|
||||||
controller.$onChanges(changes);
|
|
||||||
|
|
||||||
expect(controller.cancelScroll).toHaveBeenCalled();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
|
@ -34,7 +34,6 @@ import './float-button/float-button';
|
||||||
import './step-control/step-control';
|
import './step-control/step-control';
|
||||||
import './label-value/label-value';
|
import './label-value/label-value';
|
||||||
import './paging/paging';
|
import './paging/paging';
|
||||||
import './auto-paging/auto-paging';
|
|
||||||
import './pagination/pagination';
|
import './pagination/pagination';
|
||||||
import './searchbar/searchbar';
|
import './searchbar/searchbar';
|
||||||
import './table';
|
import './table';
|
||||||
|
|
|
@ -14,7 +14,7 @@ import './style.scss';
|
||||||
class Pagination extends Component {
|
class Pagination extends Component {
|
||||||
constructor($element, $scope) {
|
constructor($element, $scope) {
|
||||||
super($element, $scope);
|
super($element, $scope);
|
||||||
this.scrollOffset = 20;
|
this.scrollOffset = 150;
|
||||||
this.scrollHandler = e => this.onScroll(e);
|
this.scrollHandler = e => this.onScroll(e);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -45,5 +45,4 @@
|
||||||
</vn-vertical>
|
</vn-vertical>
|
||||||
</vn-card>
|
</vn-card>
|
||||||
<vn-paging margin-large-top vn-one index="$ctrl.diary" total="$ctrl.diary.count"></vn-paging>
|
<vn-paging margin-large-top vn-one index="$ctrl.diary" total="$ctrl.diary.count"></vn-paging>
|
||||||
<!-- <vn-auto-paging margin-large-top vn-one index="index" total="index.model.count" items="$ctrl.instances"></vn-auto-paging> -->
|
|
||||||
</vn-vertical>
|
</vn-vertical>
|
||||||
|
|
|
@ -25,5 +25,4 @@
|
||||||
</vn-vertical>
|
</vn-vertical>
|
||||||
</vn-card>
|
</vn-card>
|
||||||
<vn-paging vn-one margin-large-top index="index" total="index.model.count"></vn-paging>
|
<vn-paging vn-one margin-large-top index="index" total="index.model.count"></vn-paging>
|
||||||
<!-- <vn-auto-paging vn-one margin-large-top index="index" total="index.model.count" items="$ctrl.instances"></vn-auto-paging> -->
|
|
||||||
</vn-vertical>
|
</vn-vertical>
|
||||||
|
|
|
@ -64,5 +64,4 @@
|
||||||
</vn-vertical>
|
</vn-vertical>
|
||||||
</vn-card>
|
</vn-card>
|
||||||
<vn-paging margin-large-top vn-one index="$ctrl.entries" total="$ctrl.entries.count"></vn-paging>
|
<vn-paging margin-large-top vn-one index="$ctrl.entries" total="$ctrl.entries.count"></vn-paging>
|
||||||
<!-- <vn-auto-paging margin-large-top vn-one index="index" total="index.model.count" items="$ctrl.instances"></vn-auto-paging> -->
|
|
||||||
</vn-vertical>
|
</vn-vertical>
|
||||||
|
|
|
@ -67,7 +67,6 @@
|
||||||
</table>
|
</table>
|
||||||
</vn-vertical>
|
</vn-vertical>
|
||||||
<vn-paging vn-one margin-large-top index="index" total="index.model.count"></vn-paging>
|
<vn-paging vn-one margin-large-top index="index" total="index.model.count"></vn-paging>
|
||||||
<!-- <vn-auto-paging vn-one margin-large-top index="index" total="index.model.count" items="$ctrl.instances"></vn-auto-paging> -->
|
|
||||||
</vn-card>
|
</vn-card>
|
||||||
</vn-vertical>
|
</vn-vertical>
|
||||||
<vn-item-descriptor-popover vn-id="descriptor"></vn-item-descriptor-popover>
|
<vn-item-descriptor-popover vn-id="descriptor"></vn-item-descriptor-popover>
|
||||||
|
|
|
@ -40,6 +40,5 @@
|
||||||
</vn-vertical>
|
</vn-vertical>
|
||||||
</vn-card>
|
</vn-card>
|
||||||
<vn-paging vn-one margin-large-top index="index" total="index.model.count"></vn-paging>
|
<vn-paging vn-one margin-large-top index="index" total="index.model.count"></vn-paging>
|
||||||
<!-- <vn-auto-paging vn-one margin-large-top index="index" total="index.model.count" items="$ctrl.instances"></vn-auto-paging> -->
|
</vn-vertical>
|
||||||
</vn-vertical>
|
|
||||||
<vn-item-descriptor-popover vn-id="descriptor"></vn-item-descriptor-popover>
|
<vn-item-descriptor-popover vn-id="descriptor"></vn-item-descriptor-popover>
|
||||||
|
|
|
@ -33,6 +33,5 @@
|
||||||
</vn-vertical>
|
</vn-vertical>
|
||||||
</vn-card>
|
</vn-card>
|
||||||
<vn-paging vn-one margin-large-top index="index" total="index.model.count"></vn-paging>
|
<vn-paging vn-one margin-large-top index="index" total="index.model.count"></vn-paging>
|
||||||
<!-- <vn-auto-paging vn-one margin-large-top index="index" total="index.model.count" items="$ctrl.instances"></vn-auto-paging> -->
|
</vn-vertical>
|
||||||
</vn-vertical>
|
|
||||||
<vn-item-descriptor-popover vn-id="descriptor"></vn-item-descriptor-popover>
|
<vn-item-descriptor-popover vn-id="descriptor"></vn-item-descriptor-popover>
|
||||||
|
|
|
@ -23,8 +23,7 @@
|
||||||
</vn-vertical>
|
</vn-vertical>
|
||||||
</vn-card>
|
</vn-card>
|
||||||
<vn-paging vn-one margin-large-top index="index" total="index.model.count"></vn-paging>
|
<vn-paging vn-one margin-large-top index="index" total="index.model.count"></vn-paging>
|
||||||
<!-- <vn-auto-paging vn-one margin-large-top index="index" total="index.model.count" items="$ctrl.instances"></vn-auto-paging> -->
|
</vn-vertical>
|
||||||
</vn-vertical>
|
|
||||||
<a ui-sref="ticket.card.tracking.edit" vn-bind="+" fixed-bottom-right>
|
<a ui-sref="ticket.card.tracking.edit" vn-bind="+" fixed-bottom-right>
|
||||||
<vn-float-button icon="add"></vn-float-button>
|
<vn-float-button icon="add"></vn-float-button>
|
||||||
</a>
|
</a>
|
|
@ -37,7 +37,6 @@
|
||||||
</vn-vertical>
|
</vn-vertical>
|
||||||
</vn-card>
|
</vn-card>
|
||||||
<vn-paging vn-one margin-large-top index="index" total="index.model.count"></vn-paging>
|
<vn-paging vn-one margin-large-top index="index" total="index.model.count"></vn-paging>
|
||||||
<!-- <vn-auto-paging vn-one margin-large-top index="index" total="index.model.count" items="$ctrl.instances"></vn-auto-paging> -->
|
</vn-vertical>
|
||||||
</vn-vertical>
|
|
||||||
<vn-item-descriptor-popover vn-id="descriptor"></vn-item-descriptor-popover>
|
<vn-item-descriptor-popover vn-id="descriptor"></vn-item-descriptor-popover>
|
||||||
|
|
||||||
|
|
|
@ -22,5 +22,6 @@
|
||||||
"Name cannot be blank": "Name cannot be blank",
|
"Name cannot be blank": "Name cannot be blank",
|
||||||
"Phone cannot be blank": "Phone cannot be blank",
|
"Phone cannot be blank": "Phone cannot be blank",
|
||||||
"ValidationError: La instancia `ClientContact` no es válida. Detalles: `name` Name cannot be blank (value: null).": "ValidationError: La instancia `ClientContact` no es válida. Detalles: `name` Name cannot be blank (value: null).",
|
"ValidationError: La instancia `ClientContact` no es válida. Detalles: `name` Name cannot be blank (value: null).": "ValidationError: La instancia `ClientContact` no es válida. Detalles: `name` Name cannot be blank (value: null).",
|
||||||
"La instancia `ClientContact` no es válida. Detalles: `name` Name cannot be blank (value: null).": "La instancia `ClientContact` no es válida. Detalles: `name` Name cannot be blank (value: null)."
|
"La instancia `ClientContact` no es válida. Detalles: `name` Name cannot be blank (value: null).": "La instancia `ClientContact` no es válida. Detalles: `name` Name cannot be blank (value: null).",
|
||||||
|
"Observation type cannot be blank": "Observation type cannot be blank"
|
||||||
}
|
}
|
Loading…
Reference in New Issue