vnAutoPaging renamed to vnPagination plus bugs fixed
This commit is contained in:
parent
cfce618844
commit
98001b364e
|
@ -23,7 +23,6 @@
|
|||
</vn-vertical>
|
||||
</vn-card>
|
||||
<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>
|
||||
<a ui-sref="client.card.credit.create" vn-bind="+" fixed-bottom-right>
|
||||
<vn-float-button icon="add"></vn-float-button>
|
||||
|
|
|
@ -31,7 +31,6 @@
|
|||
</vn-vertical>
|
||||
</vn-card>
|
||||
<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>
|
||||
<a ui-sref="client.card.greuge.create" vn-bind="+" fixed-bottom-right>
|
||||
<vn-float-button icon="add"></vn-float-button>
|
||||
|
|
|
@ -31,5 +31,4 @@
|
|||
</vn-vertical>
|
||||
</vn-card>
|
||||
<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>
|
|
@ -27,5 +27,4 @@
|
|||
</vn-vertical>
|
||||
</vn-card>
|
||||
<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>
|
|
@ -31,7 +31,6 @@
|
|||
</vn-vertical>
|
||||
</vn-card>
|
||||
<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>
|
||||
<a ui-sref="client.card.recovery.create" vn-bind="+" fixed-bottom-right>
|
||||
<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 './label-value/label-value';
|
||||
import './paging/paging';
|
||||
import './auto-paging/auto-paging';
|
||||
import './pagination/pagination';
|
||||
import './searchbar/searchbar';
|
||||
import './table';
|
||||
|
|
|
@ -14,7 +14,7 @@ import './style.scss';
|
|||
class Pagination extends Component {
|
||||
constructor($element, $scope) {
|
||||
super($element, $scope);
|
||||
this.scrollOffset = 20;
|
||||
this.scrollOffset = 150;
|
||||
this.scrollHandler = e => this.onScroll(e);
|
||||
}
|
||||
|
||||
|
|
|
@ -45,5 +45,4 @@
|
|||
</vn-vertical>
|
||||
</vn-card>
|
||||
<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>
|
||||
|
|
|
@ -25,5 +25,4 @@
|
|||
</vn-vertical>
|
||||
</vn-card>
|
||||
<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>
|
||||
|
|
|
@ -64,5 +64,4 @@
|
|||
</vn-vertical>
|
||||
</vn-card>
|
||||
<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>
|
||||
|
|
|
@ -67,7 +67,6 @@
|
|||
</table>
|
||||
</vn-vertical>
|
||||
<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-vertical>
|
||||
<vn-item-descriptor-popover vn-id="descriptor"></vn-item-descriptor-popover>
|
||||
|
|
|
@ -40,6 +40,5 @@
|
|||
</vn-vertical>
|
||||
</vn-card>
|
||||
<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>
|
||||
|
|
|
@ -33,6 +33,5 @@
|
|||
</vn-vertical>
|
||||
</vn-card>
|
||||
<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>
|
||||
|
|
|
@ -23,8 +23,7 @@
|
|||
</vn-vertical>
|
||||
</vn-card>
|
||||
<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>
|
||||
<vn-float-button icon="add"></vn-float-button>
|
||||
</a>
|
|
@ -37,7 +37,6 @@
|
|||
</vn-vertical>
|
||||
</vn-card>
|
||||
<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>
|
||||
|
||||
|
|
|
@ -22,5 +22,6 @@
|
|||
"Name cannot be blank": "Name 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).",
|
||||
"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