vnAutoPaging renamed to vnPagination plus bugs fixed

This commit is contained in:
Juan 2018-07-03 13:45:25 +02:00
parent cfce618844
commit 98001b364e
19 changed files with 7 additions and 211 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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
});

View File

@ -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();
});
});
});

View File

@ -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';

View File

@ -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);
} }

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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="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>

View File

@ -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>

View File

@ -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"
} }