@sumaris-net/ngx-components 1.22.11-rc13 → 1.22.11-rc14

package/bundles/sumaris-net.ngx-components.umd.js

@@ -30948,17 +30948,28 @@
             this.popoverController = popoverController;
             this.settings = settings;
             this.userEventService = userEventService;
-            this.subscriptions = new rxjs.Subscription();
-            this._fetchingMore = false;
+            this._subscriptions = new rxjs.Subscription();
+            this._$pageSize = new rxjs.BehaviorSubject(20);
+            this.fetchingMore = false;
+            this.$items = new rxjs.BehaviorSubject(undefined);
+            this.$itemCount = new rxjs.BehaviorSubject(undefined);
             this.debug = false;
-            this.pageSize = 10;
             this.sortBy = 'creationDate';
             this.sortDirection = 'desc';
             this.enableInfiniteScroll = true;
-            this.$items = new rxjs.BehaviorSubject(undefined);
-            this.$itemCount = new rxjs.BehaviorSubject(undefined);
             this.mobile = ((_a = this.settings) === null || _a === void 0 ? void 0 : _a.mobile) || false;
         }
+        Object.defineProperty(UserEventNotificationList.prototype, "pageSize", {
+            get: function () {
+                return this._$pageSize.value;
+            },
+            set: function (value) {
+                if (value > 0 && value !== this._$pageSize.value)
+                    this._$pageSize.next(value);
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(UserEventNotificationList.prototype, "canFetchMore", {
             get: function () {
                 return this.enableInfiniteScroll && !!this._fetchMoreFn;
@@ -30970,29 +30981,31 @@
             var _this = this;
             // Watch all user events
             if (this.userEventService) {
-                this.subscriptions.add(this.userEventService
-                    .watchAll(0, this.pageSize, this.sortBy, this.sortDirection, this.filter)
+                this._subscriptions.add(this._$pageSize.pipe(operators.distinctUntilChanged(), operators.switchMap(function (pageSize) { return _this.userEventService.watchAll(0, pageSize, _this.sortBy, _this.sortDirection, _this.filter); }))
                     .subscribe(function (result) {
-                    var _a, _b;
+                    var _a;
                     if (_this.debug)
-                        console.debug("[user-event-notification-list] receiving " + result.total + " user events", result.data);
+                        console.debug("[user-event-notification-list] Receiving " + result.total + " user events", result.data);
                     _this.$items.next(result.data);
                     _this.$itemCount.next(result.total || ((_a = result.data) === null || _a === void 0 ? void 0 : _a.length) || 0);
                     _this._fetchMoreFn = result.fetchMore;
-                    _this._fetchingMore = false; // Reset this marker
-                    (_b = _this._fetchMoreSubscription) === null || _b === void 0 ? void 0 : _b.unsubscribe();
+                    _this.fetchingMore = false; // Allow to refetch more
                     _this.markForCheck();
                 }));
                 // Listen changes
-                this.subscriptions.add(this.userEventService.listenAllChanges(undefined)
+                this._subscriptions.add(this.userEventService.listenAllChanges(this.filter)
                     .subscribe(function (data) {
                     if (_this.debug)
-                        console.debug("[user-event-notification-list] receiving " + data.length + " new user events", data);
+                        console.debug("[user-event-notification-list] Receiving " + data.length + " new user events (by WS)", data);
                 }));
+                if (this.enableInfiniteScroll)
+                    this.initInfiniteScroll();
             }
         };
         UserEventNotificationList.prototype.ngOnDestroy = function () {
-            this.subscriptions.unsubscribe();
+            this._subscriptions.unsubscribe();
+            this.$items.complete();
+            this.$itemCount.complete();
         };
         UserEventNotificationList.prototype.click = function (event, userEvent) {
             if (!userEvent)
@@ -31024,27 +31037,27 @@
         UserEventNotificationList.prototype.executeAction = function (event, action, userEvent) {
             return __awaiter(this, void 0, void 0, function () {
                 var res, err_1;
-                return __generator(this, function (_c) {
-                    switch (_c.label) {
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
                         case 0:
                             if (event === null || event === void 0 ? void 0 : event.defaultPrevented)
                                 return [2 /*return*/]; // Skip if prevented
                             // Disable default action (.e.g avoid to call click() function)
                             if (event)
                                 event.preventDefault();
-                            _c.label = 1;
+                            _b.label = 1;
                         case 1:
-                            _c.trys.push([1, 4, , 5]);
+                            _b.trys.push([1, 4, , 5]);
                             res = action.executeAction(userEvent);
                             this.dismiss();
                             if (!(res instanceof Promise)) return [3 /*break*/, 3];
                             return [4 /*yield*/, res];
                         case 2:
-                            _c.sent();
-                            _c.label = 3;
+                            _b.sent();
+                            _b.label = 3;
                         case 3: return [3 /*break*/, 5];
                         case 4:
-                            err_1 = _c.sent();
+                            err_1 = _b.sent();
                             console.error(err_1);
                             return [3 /*break*/, 5];
                         case 5: return [2 /*return*/];
@@ -31054,65 +31067,77 @@
         };
         UserEventNotificationList.prototype.dismiss = function () {
             this.popoverController.dismiss();
+            // Reset counter (need if event has been received while popover if open)
+            this.userEventService.resetCount();
         };
         UserEventNotificationList.prototype.fetchMore = function (event) {
             var _a;
             return __awaiter(this, void 0, void 0, function () {
-                var result, data, err_2;
-                return __generator(this, function (_c) {
-                    switch (_c.label) {
+                var fetchMoreFn, result, data, err_2;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
                         case 0:
-                            if (!this._fetchMoreFn || this._fetchingMore)
+                            if (!this._fetchMoreFn || this.fetchingMore)
                                 return [2 /*return*/];
                             console.debug('[user-event-notification-list] Fetching more notifications...', event);
-                            this._fetchingMore = true;
-                            _c.label = 1;
+                            this.fetchingMore = true;
+                            fetchMoreFn = this._fetchMoreFn;
+                            _b.label = 1;
                         case 1:
-                            _c.trys.push([1, 3, 4, 5]);
-                            return [4 /*yield*/, this._fetchMoreFn()];
+                            _b.trys.push([1, 3, 4, 5]);
+                            return [4 /*yield*/, fetchMoreFn()];
                         case 2:
-                            result = _c.sent();
+                            result = _b.sent();
                             data = __spread((this.$items.value || []), result.data);
                             // Remove duplication (e.g. when new user event was added by subscription)
                             data = removeDuplicatesFromArray(data, 'id');
+                            // fetch more changes (e.g. if watchAll observable as been refreshed)
+                            if (fetchMoreFn !== this._fetchMoreFn)
+                                return [2 /*return*/]; // Skip
                             this.$items.next(data);
                             this.$itemCount.next(result.total || ((_a = result.data) === null || _a === void 0 ? void 0 : _a.length) || 0);
                             this._fetchMoreFn = result.fetchMore;
+                            // Update the page size, to keep same scroll height, after the next refresh
+                            this.pageSize = Math.max(this.pageSize, data.length);
                             return [3 /*break*/, 5];
                         case 3:
-                            err_2 = _c.sent();
+                            err_2 = _b.sent();
                             console.error(err_2);
-                            this._fetchMoreFn = undefined;
+                            this._fetchMoreFn = undefined; // Forget the function
                             return [3 /*break*/, 5];
                         case 4:
                             this.markForCheck();
-                            this._fetchingMore = false;
+                            this.fetchingMore = false;
                             return [7 /*endfinally*/];
                         case 5: return [2 /*return*/];
                     }
                 });
             });
         };
-        UserEventNotificationList.prototype._initInfiniteScroll = function (threshold) {
+        UserEventNotificationList.prototype.trackByFn = function (index, item) {
+            return item.id;
+        };
+        UserEventNotificationList.prototype.initInfiniteScroll = function (threshold) {
             return __awaiter(this, void 0, void 0, function () {
                 var panel;
                 var _this = this;
-                return __generator(this, function (_c) {
-                    switch (_c.label) {
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
                         case 0:
+                            console.debug('[user-event-notification-list] Init infinite loop');
                             if (this._fetchMoreSubscription)
                                 this._fetchMoreSubscription.unsubscribe();
                             threshold = threshold || (this.mobile ? '15%' : '2%');
-                            return [4 /*yield*/, waitFor(function () { return !!_this.ionContent; })];
+                            return [4 /*yield*/, waitFor(function () { return !!_this.ionContent; }, { dueTime: 250, timeout: 1000 })];
                         case 1:
-                            _c.sent();
+                            _b.sent();
                             return [4 /*yield*/, this.ionContent.getScrollElement()];
                         case 2:
-                            panel = _c.sent();
+                            panel = _b.sent();
                             // Trigger fetch more, end end scroll reached
-                            this._fetchMoreSubscription = fromScrollEndEvent(panel, threshold, 250 /*force to check when no scrollbar - e.g. in large screen*/)
+                            this._fetchMoreSubscription = this.$items.pipe(operators.debounceTime(250), operators.filter(function () { return _this.canFetchMore; }), operators.switchMap(function () { return fromScrollEndEvent(panel, threshold, 250 /*force to check when no scrollbar - e.g. in large screen*/); }))
                                 .subscribe(function () { return _this.fetchMore(); });
-                            this.subscriptions.add(this._fetchMoreSubscription);
+                            this._subscriptions.add(this._fetchMoreSubscription);
                             return [2 /*return*/];
                     }
                 });
@@ -31126,7 +31151,7 @@
     UserEventNotificationList.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-user-event-notification-list',
-                    template: "<ion-content>\n  <ion-list class=\"ion-list-popover\">\n\n    <ion-row class=\"ion-list-header column\">\n      <ion-col>\n        <ion-label>{{titleI18n | translate}}</ion-label>\n      </ion-col>\n      <ion-col class=\"top-action\" *ngIf=\"$items|async|isNotEmptyArray\">\n        <ion-text color=\"primary\">\n          <a (click)=\"markAllAsRead($event)\">{{'SOCIAL.USER_EVENT.NOTIFICATION.READ_ALL' | translate}}</a>\n        </ion-text>\n      </ion-col>\n    </ion-row>\n\n    <ion-item\n      *ngFor=\"let item of $items | async; last as last\"\n      [lines]=\"last ? 'none' : undefined\"\n      [class.unread]=\"!item.readDate\"\n      [class.tappable]=\"item.actions|arrayFilter:isDefaultAction|isNotEmptyArray\"\n      (click)=\"click($event, item)\">\n\n      <ion-avatar slot=\"start\">\n\n        <img *ngIf=\"item.avatar; else avatarIcon\" src=\"{{ item.avatar }}\">\n\n        <ng-template #avatarIcon>\n          <app-icon\n            *ngIf=\"item.avatarIcon; else generateIcon\"\n            [ref]=\"item.avatarIcon\"\n            height=\"40\"\n            width=\"40\"\n          ></app-icon>\n        </ng-template>\n\n        <ng-template #generateIcon>\n          <div class=\"avatar\" *ngIf=\"item.avatarJdenticon\">\n            <svg width=\"40\" width=\"40\" [data-jdenticon-value]=\"item.avatarJdenticon\"></svg>\n          </div>\n        </ng-template>\n\n      </ion-avatar>\n\n      <ion-grid class=\"ion-no-margin ion-no-padding message\">\n        <ion-row>\n          <ion-col size=\"12\">\n            <p [class.unread]=\"!item.readDate\" [innerHTML]=\"item.message\"></p>\n          </ion-col>\n        </ion-row>\n\n        <!-- date -->\n        <ion-row>\n          <ion-col size=\"12\">\n            <app-icon\n              *ngIf=\"item.icon\"\n              [ref]=\"item.icon\"\n              height=\"16\"\n              width=\"16\"\n              style=\"vertical-align: sub; margin-right: 3px\"\n            ></app-icon>\n            <small>\n              <span>{{item.creationDate|dateFromNow}}</span>\n              <span style=\"color: gray\">{{ ' | ' + (item.creationDate|dateFormat:{time:true}) }}</span>\n            </small>\n          </ion-col>\n        </ion-row>\n\n        <!-- actions -->\n        <ion-row *ngIf=\"item.actions|isNotEmptyArray\">\n          <ion-col></ion-col>\n          <ion-col size=\"auto\">\n            <ng-container *ngFor=\"let action of item.actions\">\n              <a *ngIf=\"!action.default\" class=\"action\" (click)=\"executeAction($event, action, item)\" [title]=\"(action.title || action.name) |translate\">\n                <app-icon *ngIf=\"action.iconRef\" slot=\"start\" height=\"20\" width=\"20\" [ref]=\"action.iconRef\"></app-icon>\n                <span>{{ action.name | translate }}</span>\n              </a>\n            </ng-container>\n          </ion-col>\n        </ion-row>\n\n      </ion-grid>\n\n      <mat-icon slot=\"end\" *ngIf=\"item.actions|arrayFilter: isDefaultAction|isNotEmptyArray\">chevron_right</mat-icon>\n    </ion-item>\n\n    <!-- loading -->\n    <ion-item *ngIf=\"!($items|async); else noResult\" lines=\"none\" disabled>\n      <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n    </ion-item>\n\n    <!-- no result -->\n    <ng-template #noResult>\n      <ion-item *ngIf=\"$items|async|isEmptyArray\" lines=\"none\">\n        <ion-text color=\"dark\" class=\"text-italic\">{{'SOCIAL.USER_EVENT.NOTIFICATION.EMPTY' | translate}}</ion-text>\n      </ion-item>\n    </ng-template>\n\n    <!-- Loading more spinner -->\n    <ion-item *ngIf=\"canFetchMore\" (ngInit)=\"_initInfiniteScroll()\" lines=\"none\" disabled>\n      <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n    </ion-item>\n\n    <!-- footer -->\n    <ion-row *ngIf=\"$itemCount|async; let count\"\n              class=\"ion-list-footer column\">\n      <ion-col>\n        <ion-text class=\"ion-float-end ion-padding-end\"><i>{{'COMMON.RESULT_COUNT'|translate: {count: count} }}</i></ion-text>\n      </ion-col>\n    </ion-row>\n\n  </ion-list>\n</ion-content>\n",
+                    template: "<ion-content>\n  <ion-list class=\"ion-list-popover\">\n\n    <ion-row class=\"ion-list-header column\">\n      <ion-col>\n        <ion-label>{{titleI18n | translate}}</ion-label>\n      </ion-col>\n      <ion-col class=\"top-action\" *ngIf=\"$items|async|isNotEmptyArray\">\n        <ion-text color=\"primary\">\n          <a (click)=\"markAllAsRead($event)\">{{'SOCIAL.USER_EVENT.NOTIFICATION.READ_ALL' | translate}}</a>\n        </ion-text>\n      </ion-col>\n    </ion-row>\n\n    <ion-item\n      *ngFor=\"let item of $items | async; trackBy: trackByFn; last as last\"\n      [lines]=\"last ? 'none' : undefined\"\n      [class.unread]=\"!item.readDate\"\n      [class.tappable]=\"item.actions|arrayFilter:isDefaultAction|isNotEmptyArray\"\n      (click)=\"click($event, item)\">\n\n      <ion-avatar slot=\"start\">\n\n        <img *ngIf=\"item.avatar; else avatarIcon\" src=\"{{ item.avatar }}\">\n\n        <ng-template #avatarIcon>\n          <app-icon\n            *ngIf=\"item.avatarIcon; else generateIcon\"\n            [ref]=\"item.avatarIcon\"\n            height=\"40\"\n            width=\"40\"\n          ></app-icon>\n        </ng-template>\n\n        <ng-template #generateIcon>\n          <div class=\"avatar\" *ngIf=\"item.avatarJdenticon\">\n            <svg width=\"40\" width=\"40\" [data-jdenticon-value]=\"item.avatarJdenticon\"></svg>\n          </div>\n        </ng-template>\n\n      </ion-avatar>\n\n      <ion-grid class=\"ion-no-margin ion-no-padding message\">\n        <ion-row>\n          <ion-col size=\"12\">\n            <p [class.unread]=\"!item.readDate\" [innerHTML]=\"item.message\"></p>\n          </ion-col>\n        </ion-row>\n\n        <!-- date -->\n        <ion-row>\n          <ion-col size=\"12\">\n            <app-icon\n              *ngIf=\"item.icon\"\n              [ref]=\"item.icon\"\n              height=\"16\"\n              width=\"16\"\n              style=\"vertical-align: sub; margin-right: 3px\"\n            ></app-icon>\n            <small>\n              <span>{{item.creationDate|dateFromNow}}</span>\n              <span style=\"color: gray\">{{ ' | ' + (item.creationDate|dateFormat:{time:true}) }}</span>\n            </small>\n          </ion-col>\n        </ion-row>\n\n        <!-- actions -->\n        <ion-row *ngIf=\"item.actions|isNotEmptyArray\">\n          <ion-col></ion-col>\n          <ion-col size=\"auto\">\n            <ng-container *ngFor=\"let action of item.actions\">\n              <a *ngIf=\"!action.default\" class=\"action\" (click)=\"executeAction($event, action, item)\" [title]=\"(action.title || action.name) |translate\">\n                <app-icon *ngIf=\"action.iconRef\" slot=\"start\" height=\"20\" width=\"20\" [ref]=\"action.iconRef\"></app-icon>\n                <span>{{ action.name | translate }}</span>\n              </a>\n            </ng-container>\n          </ion-col>\n        </ion-row>\n\n      </ion-grid>\n\n      <mat-icon slot=\"end\" *ngIf=\"item.actions|arrayFilter: isDefaultAction|isNotEmptyArray\">chevron_right</mat-icon>\n    </ion-item>\n\n    <!-- loading -->\n    <ng-container *ngIf=\"!($items|async); else notLoading\">\n      <ng-container *ngTemplateOutlet=\"loadingItem\"></ng-container>\n    </ng-container>\n\n    <ng-template #notLoading>\n      <!-- no result -->\n      <ion-item *ngIf=\"$items|async|isEmptyArray\" lines=\"none\">\n        <ion-text color=\"dark\" class=\"text-italic\">{{'SOCIAL.USER_EVENT.NOTIFICATION.EMPTY' | translate}}</ion-text>\n      </ion-item>\n\n      <!-- Fetching more -->\n      <ng-container *ngIf=\"fetchingMore; else infiniteLoop\" lines=\"none\" disabled>\n        <ng-container *ngTemplateOutlet=\"loadingItem\"></ng-container>\n      </ng-container>\n\n      <!-- Infinite loop -->\n      <ng-template #infiniteLoop>\n        <ng-container *ngIf=\"canFetchMore\" lines=\"none\" disabled\n                      [ngTemplateOutlet]=\"loadingItem\">\n        </ng-container>\n      </ng-template>\n    </ng-template>\n\n    <!-- footer -->\n    <ion-row class=\"ion-list-footer column\">\n      <ion-col>\n        <ion-text *ngIf=\"$itemCount|async; let count\"\n                  class=\"ion-float-end ion-padding-end\"><i>{{'COMMON.RESULT_COUNT'|translate: {count: count} }}</i></ion-text>\n      </ion-col>\n    </ion-row>\n\n  </ion-list>\n</ion-content>\n\n<!-- loading -->\n<ng-template #loadingItem>\n  <ion-item lines=\"none\" disabled>\n    <ion-skeleton-text [animated]=\"true\" style=\"width: 100%\"></ion-skeleton-text>\n  </ion-item>\n</ng-template>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     styles: [":host(.popover-viewport){overflow-y:auto;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;max-height:calc(90vh - 20px)}ion-list ion-item.tappable{cursor:pointer}ion-list ion-item.tappable:hover{--ion-item-background:var(--ion-item-background-color-hover)}.message{font-size:.9em}.message p{margin-top:5px;margin-bottom:5px}.message p.unread{font-weight:700}.top-action{text-align:end;margin-right:8px}.top-action a{cursor:pointer;color:var(--ion-color-contrast)}.top-action a:hover{text-decoration:underline}a.action{font-size:.9em;margin-right:10px;cursor:pointer}a.action:hover span{text-decoration:underline}a.action app-icon{vertical-align:middle}ion-avatar .avatar svg,ion-avatar img{border:1px solid rgba(var(--ion-color-secondary-rgb,.5));border-radius:50%}"]
                 },] }
@@ -31141,11 +31166,11 @@
         debug: [{ type: i0.Input }],
         mobile: [{ type: i0.Input }],
         titleI18n: [{ type: i0.Input }],
-        pageSize: [{ type: i0.Input }],
         sortBy: [{ type: i0.Input }],
         sortDirection: [{ type: i0.Input }],
         filter: [{ type: i0.Input }],
         enableInfiniteScroll: [{ type: i0.Input }],
+        pageSize: [{ type: i0.Input }],
         readEvent: [{ type: i0.Output }],
         readEvents: [{ type: i0.Output }],
         ionContent: [{ type: i0.ViewChild, args: [i1$5.IonContent,] }],
@@ -31219,7 +31244,8 @@
                                         debug: this.debug,
                                         titleI18n: this.titleI18n,
                                         readEvent: this._readEvent,
-                                        readEvents: this._readEvents
+                                        readEvents: this._readEvents,
+                                        filter: this.filter
                                     },
                                     backdropDismiss: true,
                                     keyboardClose: true,
@@ -34235,24 +34261,27 @@
             _this.network = network;
             _this.translate = translate;
             _this.environment = environment;
-            _this.userEvents = [];
+            _this.$userEvents = new rxjs.BehaviorSubject([]);
+            _this.$newUserEvents = new rxjs.Subject();
             return _this;
         }
         UserEventTestService.prototype.fromObject = function (source) {
             return exports.UserEvent.fromObject(source);
         };
         UserEventTestService.prototype.add = function (entity) {
+            var _a;
             return __awaiter(this, void 0, void 0, function () {
                 return __generator(this, function (_b) {
                     switch (_b.label) {
                         case 0: return [4 /*yield*/, this.processUserEvent(entity)];
                         case 1:
                             entity = _b.sent();
-                            entity.id = this.userEvents.length + 1;
-                            this.userEvents = __spread([
+                            entity.id = (((_a = this.$userEvents.value) === null || _a === void 0 ? void 0 : _a.length) || 0) + 1;
+                            this.$userEvents.next(__spread([
                                 entity
-                            ], this.userEvents);
+                            ], this.$userEvents.value));
                             this._countSubject.next((this._countSubject.value || 0) + 1);
+                            this.$newUserEvents.next([entity]);
                             return [2 /*return*/];
                     }
                 });
@@ -34262,7 +34291,8 @@
             return filter;
         };
         UserEventTestService.prototype.count = function (filter, options) {
-            return Promise.resolve(this.userEvents.length);
+            var _a;
+            return Promise.resolve(((_a = this.$userEvents.value) === null || _a === void 0 ? void 0 : _a.length) || 0);
         };
         UserEventTestService.prototype.delete = function (entity) {
             return Promise.resolve(undefined);
@@ -34271,11 +34301,11 @@
             return Promise.resolve(undefined);
         };
         UserEventTestService.prototype.listenAllChanges = function (filter, options) {
-            return rxjs.of();
+            return this.$newUserEvents.asObservable();
         };
         UserEventTestService.prototype.save = function (entity, options) {
             var _a;
-            var toSave = (_a = this.userEvents) === null || _a === void 0 ? void 0 : _a.find(function (value) { return value.id == (entity === null || entity === void 0 ? void 0 : entity.id); });
+            var toSave = (_a = this.$userEvents.value) === null || _a === void 0 ? void 0 : _a.find(function (value) { return value.id == (entity === null || entity === void 0 ? void 0 : entity.id); });
             Object.assign(toSave, entity);
             return entity;
         };
@@ -34310,31 +34340,33 @@
                             }
                             finally { if (e_1) throw e_1.error; }
                             return [7 /*endfinally*/];
-                        case 7: return [2 /*return*/, Promise.resolve(this.userEvents)];
+                        case 7: return [2 /*return*/, this.$userEvents.toPromise()];
                     }
                 });
             });
         };
         UserEventTestService.prototype.watchAll = function (offset, size, sortBy, sortDirection, filter, opts) {
             var _this = this;
-            var _a;
-            var data = (this.userEvents || []).slice(offset || 0, offset + size);
-            var total = ((_a = this.userEvents) === null || _a === void 0 ? void 0 : _a.length) || 0;
-            var res = { data: data, total: total };
-            // Must re-order because of listenChanges result will add new event at the end
-            data = EntityUtils.sort(data, sortBy, sortDirection);
-            // Add fetch more
-            var nextOffset = offset + data.length;
-            if (nextOffset < res.total) {
-                res.fetchMore = function (_) { return _this.loadAll(nextOffset, size, sortBy, sortDirection, filter, Object.assign(Object.assign({}, opts), { fetchPolicy: 'no-cache' })); };
-            }
-            return rxjs.of(res);
+            return this.$userEvents.pipe(operators.map(function (userEvents) {
+                var _a;
+                var data = (userEvents || []).slice(offset || 0, offset + size);
+                var total = ((_a = _this.$userEvents.value) === null || _a === void 0 ? void 0 : _a.length) || 0;
+                var res = { data: data, total: total };
+                // Must re-order because of listenChanges result will add new event at the end
+                data = EntityUtils.sort(data, sortBy, sortDirection);
+                // Add fetch more
+                var nextOffset = offset + data.length;
+                if (nextOffset < res.total) {
+                    res.fetchMore = function (_) { return _this.loadAll(nextOffset, size, sortBy, sortDirection, filter, Object.assign(Object.assign({}, opts), { fetchPolicy: 'no-cache' })); };
+                }
+                return res;
+            }));
         };
         UserEventTestService.prototype.loadAll = function (offset, size, sortBy, sortDirection, filter, opts) {
             var _this = this;
             var _a;
-            var data = (this.userEvents || []).slice(offset || 0, offset + size);
-            var total = ((_a = this.userEvents) === null || _a === void 0 ? void 0 : _a.length) || 0;
+            var data = (this.$userEvents.value || []).slice(offset || 0, offset + size);
+            var total = ((_a = this.$userEvents.value) === null || _a === void 0 ? void 0 : _a.length) || 0;
             var res = { data: data, total: total };
             // Must re-order because of listenChanges result will add new event at the end
             data = EntityUtils.sort(data, sortBy, sortDirection);
@@ -34378,6 +34410,16 @@
                 onRead: function (userEvent) { _this.showMessage("debug message read "); }
             });
         }
+        Object.defineProperty(UserEventTestingPage.prototype, "timerStarted", {
+            get: function () {
+                return !!this._timerSubscription;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        UserEventTestingPage.prototype.ngOnDestroy = function () {
+            this.stopTimer();
+        };
         UserEventTestingPage.prototype.customize = function (userEvent) {
             // Choose avatarIcon
             switch (userEvent.level) {
@@ -34494,6 +34536,51 @@
                 ]
             }));
         };
+        UserEventTestingPage.prototype.addMany = function (count) {
+            count = count || 20;
+            for (var i = 0; i < count; i++) {
+                this.addRandom(i);
+            }
+        };
+        UserEventTestingPage.prototype.startTimer = function (period) {
+            var _this = this;
+            var _a;
+            (_a = this._timerSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+            period = period || 1000;
+            var counter = 0;
+            this._timerSubscription = rxjs.timer(period, period)
+                .subscribe(function () {
+                _this.addRandom(counter);
+                counter++;
+            });
+        };
+        UserEventTestingPage.prototype.stopTimer = function () {
+            var _a;
+            (_a = this._timerSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+            this._timerSubscription = null;
+        };
+        UserEventTestingPage.prototype.addRandom = function (value) {
+            switch (value % 6) {
+                case 0:
+                    this.addNotification();
+                    break;
+                case 1:
+                    this.addError();
+                    break;
+                case 2:
+                    this.addDebug();
+                    break;
+                case 3:
+                    this.addNotificationWithLink();
+                    break;
+                case 4:
+                    this.addNotificationWithAction();
+                    break;
+                case 5:
+                    this.addNotificationWithDefaultAction();
+                    break;
+            }
+        };
         UserEventTestingPage.prototype.addNotificationWithDefaultAction = function () {
             var _this = this;
             this.userEventService.add(exports.UserEvent.fromObject({
@@ -34520,7 +34607,7 @@
     UserEventTestingPage.decorators = [
         { type: i0.Component, args: [{
                     selector: 'job-progression-testing',
-                    template: "<ion-toolbar color=\"primary\">\n  <ion-title>User events</ion-title>\n</ion-toolbar>\n\n<ion-content class=\"ion-padding\">\n\n  <app-user-event-notification-icon #notification [debug]=\"true\"></app-user-event-notification-icon>\n\n  <p>\n    <ion-button (click)=\"addNotification()\">Add notification</ion-button>\n    <ion-button (click)=\"addError()\">Add error</ion-button>\n    <ion-button (click)=\"addWarning()\">Add warning</ion-button>\n    <ion-button (click)=\"addDebug()\">Add debug</ion-button>\n  </p>\n  <p>\n    <ion-button (click)=\"addNotificationWithLink()\">Add notification with link</ion-button>\n    <ion-button (click)=\"addNotificationWithAction()\">Add notification with action</ion-button>\n    <ion-button (click)=\"addNotificationWithDefaultAction()\">Add notification with default action</ion-button>\n  </p>\n</ion-content>\n"
+                    template: "<ion-toolbar color=\"primary\">\n  <ion-title>User events</ion-title>\n</ion-toolbar>\n\n<ion-content class=\"ion-padding\">\n\n  <app-user-event-notification-icon #notification [debug]=\"true\"></app-user-event-notification-icon>\n\n  <p>\n    <ion-button (click)=\"addNotification()\">Add notification</ion-button>\n    <ion-button (click)=\"addError()\">Add error</ion-button>\n    <ion-button (click)=\"addWarning()\">Add warning</ion-button>\n    <ion-button (click)=\"addDebug()\">Add debug</ion-button>\n  </p>\n  <p>\n    <ion-button (click)=\"addNotificationWithLink()\">Add notification with link</ion-button>\n    <ion-button (click)=\"addNotificationWithAction()\">Add notification with action</ion-button>\n    <ion-button (click)=\"addNotificationWithDefaultAction()\">Add notification with default action</ion-button>\n  </p>\n  <p>\n    <ion-button (click)=\"addMany()\">Add notifications (x20)</ion-button>\n  </p>\n  <p>\n    <ion-button (click)=\"startTimer()\" *ngIf=\"!timerStarted\">Start timer</ion-button>\n    <ion-button (click)=\"stopTimer()\" *ngIf=\"timerStarted\">Stop timer</ion-button>\n  </p>\n</ion-content>\n"
                 },] }
     ];
     UserEventTestingPage.ctorParameters = function () { return [