@sumaris-net/ngx-components 1.22.11-rc1 → 1.22.11-rc10

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

@@ -1151,7 +1151,7 @@
      * @param element
      * @param threshold default to '15%'
      */
-    function fromScrollEndEvent(element, threshold) {
+    function fromScrollEndEvent(element, threshold, dueTime) {
         threshold = threshold || '15%';
         var isEnd;
         // Listen using percentage
@@ -1173,6 +1173,11 @@
         else {
             throw new Error('Invalid argument \'threshold\'. Expected value unit: \'px\' or \'%\' ');
         }
+        // Check bottom reach, even if NO scroll event (e.g. when already reach the bottom)
+        if (dueTime > 0) {
+            return rxjs.merge(rxjs.fromEvent(element, 'scroll'), rxjs.timer(dueTime))
+                .pipe(operators.filter(function () { return isEnd(); }));
+        }
         return rxjs.fromEvent(element, 'scroll')
             .pipe(operators.filter(function () { return isEnd(); }));
     }
@@ -30289,7 +30294,7 @@
         AbstractUserEventService.prototype.watchAll = function (offset, size, sortBy, sortDirection, filter, options) {
             return this.watchPage({ offset: offset, size: size, sortBy: sortBy, sortDirection: sortDirection }, filter, options);
         };
-        AbstractUserEventService.prototype.watchPage = function (page, filter, options) {
+        AbstractUserEventService.prototype.watchPage = function (page, filter, opts) {
             var _this = this;
             var _a;
             var now = this._debug && Date.now();
@@ -30306,7 +30311,7 @@
                     filter.recipients = [recipient];
                 }
             }
-            var withContent = (options === null || options === void 0 ? void 0 : options.withContent) === true;
+            var withContent = (opts === null || opts === void 0 ? void 0 : opts.withContent) === true;
             return this.mutableWatchQuery({
                 queryName: withContent ? 'LoadAllWithContent' : 'LoadAll',
                 query: withContent ? this.queries.loadAllWithContent : this.queries.loadAll,
@@ -30319,7 +30324,8 @@
                 },
                 arrayFieldName: 'data',
                 error: { code: SocialErrorCodes.LOAD_USER_EVENTS_ERROR, message: 'SOCIAL.ERROR.LOAD_USER_EVENTS_ERROR' },
-                fetchPolicy: (options === null || options === void 0 ? void 0 : options.fetchPolicy) || 'cache-first'
+                fetchPolicy: (opts === null || opts === void 0 ? void 0 : opts.fetchPolicy) || 'cache-first',
+                insertFilterFn: filter && filter.asFilterFn()
             })
                 .pipe(operators.map(function (res) {
                 var data = ((res === null || res === void 0 ? void 0 : res.data) || []).map(function (value) { return _this.processUserEvent(value, _this); });
@@ -30327,14 +30333,79 @@
                     console.debug("" + _this._logPrefix + data.length + " user events loaded in " + (Date.now() - now) + "ms");
                     now = null;
                 }
-                // Must re-order because of listenChanges result will add new event at the end
+                // Must re-order because of listenAllChanges result will add new event at the end
                 data = EntityUtils.sort(data, page.sortBy, page.sortDirection);
-                return {
+                var result = {
                     data: data,
                     total: toNumber(res === null || res === void 0 ? void 0 : res.total, data.length)
                 };
+                // Add fetch more capability, if total was fetched
+                if (isNotNil(res.total)) {
+                    var nextOffset_1 = (page.offset || 0) + data.length;
+                    if (nextOffset_1 < result.total) {
+                        result.fetchMore = function (_) { return _this.loadPage(Object.assign(Object.assign({}, page), { offset: nextOffset_1 }), filter, Object.assign(Object.assign({}, opts), { fetchPolicy: 'no-cache' })); };
+                    }
+                }
+                return result;
             }));
         };
+        AbstractUserEventService.prototype.loadPage = function (page, filter, opts) {
+            var _a;
+            return __awaiter(this, void 0, void 0, function () {
+                var now, recipient, withContent, res, data, result, nextOffset_2;
+                var _this = this;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            now = this._debug && Date.now();
+                            if (!filter)
+                                filter = this.defaultFilter();
+                            console.debug(this._logPrefix + "Loading user events...", filter);
+                            filter = this.asFilter(filter);
+                            // Force recipient to current issuer, if not admin and not specified
+                            if (isEmptyArray(filter === null || filter === void 0 ? void 0 : filter.recipients) || !this.accountService.isAdmin()) {
+                                recipient = this.defaultRecipient();
+                                if (!((_a = filter === null || filter === void 0 ? void 0 : filter.recipients) === null || _a === void 0 ? void 0 : _a.includes(recipient))) {
+                                    console.warn('[user-events-service] Force user event filter.recipient=' + recipient);
+                                    filter.recipients = [recipient];
+                                }
+                            }
+                            withContent = (opts === null || opts === void 0 ? void 0 : opts.withContent) === true;
+                            return [4 /*yield*/, this.graphql.query({
+                                    query: withContent ? this.queries.loadAllWithContent : this.queries.loadAll,
+                                    variables: {
+                                        page: Object.assign(Object.assign({ sortBy: 'creationDate' }, page), {
+                                            // @ts-ignore
+                                            sortDirection: (page.sortDirection || 'desc').toUpperCase()
+                                        }),
+                                        filter: filter && filter.asPodObject()
+                                    },
+                                    error: { code: SocialErrorCodes.LOAD_USER_EVENTS_ERROR, message: 'SOCIAL.ERROR.LOAD_USER_EVENTS_ERROR' },
+                                    fetchPolicy: opts === null || opts === void 0 ? void 0 : opts.fetchPolicy
+                                })];
+                        case 1:
+                            res = _b.sent();
+                            data = ((res === null || res === void 0 ? void 0 : res.data) || []).map(function (value) { return _this.processUserEvent(value, _this); });
+                            if (now)
+                                console.debug("" + this._logPrefix + data.length + " user events loaded in " + (Date.now() - now) + "ms");
+                            // Must re-order because of listenAllChanges result will add new event at the end
+                            data = EntityUtils.sort(data, page.sortBy, page.sortDirection);
+                            result = {
+                                data: data,
+                                total: toNumber(res === null || res === void 0 ? void 0 : res.total, data.length)
+                            };
+                            // Add fetch more capability, if total was fetched
+                            if (isNotNil(res.total)) {
+                                nextOffset_2 = (page.offset || 0) + data.length;
+                                if (nextOffset_2 < result.total) {
+                                    result.fetchMore = function (_) { return _this.loadPage(Object.assign(Object.assign({}, page), { offset: nextOffset_2 }), filter, opts); };
+                                }
+                            }
+                            return [2 /*return*/, result];
+                    }
+                });
+            });
+        };
         AbstractUserEventService.prototype.add = function (entity) {
             // TODO set an id !!!!!!!!!!!!!!!!!!!!!!!!!
             entity = this.processUserEvent(entity);
@@ -30391,6 +30462,7 @@
                 filter = this.defaultFilter();
             // Apply last reset date as start date
             filter.startDate = this.resetCountDate;
+            filter.excludeRead = true;
             filter = this.asFilter(filter);
             if (this._debug)
                 console.debug(this._logPrefix + "[WS] Listening count changes for user events with filter:", filter);
@@ -30411,11 +30483,11 @@
                 return total;
             }));
         };
-        AbstractUserEventService.prototype.listenChanges = function (filter, options) {
+        AbstractUserEventService.prototype.listenAllChanges = function (filter, options) {
             var _this = this;
             var _a;
-            if (!((_a = this.subscriptions) === null || _a === void 0 ? void 0 : _a.listenChanges)) {
-                console.warn(this._logPrefix + "Subscription query 'listenChanges' not provided, skip.");
+            if (!((_a = this.subscriptions) === null || _a === void 0 ? void 0 : _a.listenAllChanges)) {
+                console.warn(this._logPrefix + "Subscription query 'listenAllChanges' not provided, skip.");
                 return rxjs.of();
             }
             if (!filter)
@@ -30425,7 +30497,7 @@
             if (this._debug)
                 console.debug(this._logPrefix + "[WS] Listening changes for user events with filter:", filter);
             return this.graphql.subscribe({
-                query: this.subscriptions.listenChanges,
+                query: this.subscriptions.listenAllChanges,
                 fetchPolicy: options === null || options === void 0 ? void 0 : options.fetchPolicy,
                 variables: { filter: filter.asPodObject(), interval: toNumber(options === null || options === void 0 ? void 0 : options.interval, 10) },
                 error: {
@@ -30805,28 +30877,47 @@
     ]; };
 
     var UserEventNotificationList = /** @class */ (function () {
-        function UserEventNotificationList(cd, popoverController, userEventService) {
+        function UserEventNotificationList(cd, popoverController, settings, userEventService) {
+            var _a;
             this.cd = cd;
             this.popoverController = popoverController;
+            this.settings = settings;
             this.userEventService = userEventService;
-            this.debug = false;
-            this.userEvents = new rxjs.BehaviorSubject(undefined);
             this.subscriptions = new rxjs.Subscription();
+            this._fetchingMore = false;
+            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, "canFetchMore", {
+            get: function () {
+                return this.enableInfiniteScroll && !!this._fetchMoreFn;
+            },
+            enumerable: false,
+            configurable: true
+        });
         UserEventNotificationList.prototype.ngOnInit = function () {
             var _this = this;
             // Watch all user events
             if (this.userEventService) {
                 this.subscriptions.add(this.userEventService
-                    .watchAll(0, 10, 'creationDate', 'desc', undefined)
+                    .watchAll(0, this.pageSize, this.sortBy, this.sortDirection, this.filter)
                     .subscribe(function (result) {
+                    var _a;
                     if (_this.debug)
                         console.debug("[user-event-notification-list] receiving " + result.total + " user events", result.data);
-                    _this.userEvents.next(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.markForCheck();
                 }));
                 // Listen changes
-                this.subscriptions.add(this.userEventService.listenChanges(undefined)
+                this.subscriptions.add(this.userEventService.listenAllChanges(undefined)
                     .subscribe(function (data) {
                     if (_this.debug)
                         console.debug("[user-event-notification-list] receiving " + data.length + " new user events", data);
@@ -30836,27 +30927,130 @@
         UserEventNotificationList.prototype.ngOnDestroy = function () {
             this.subscriptions.unsubscribe();
         };
-        UserEventNotificationList.prototype.read = function (event, userEvent) {
+        UserEventNotificationList.prototype.click = function (event, userEvent) {
+            if (!userEvent)
+                return; // Skip
+            // MarkAsRead
+            this.markAsRead(event, userEvent);
+            // Get the default action (if any)
+            var defaultAction = ((userEvent === null || userEvent === void 0 ? void 0 : userEvent.actions) || []).find(function (a) { return a.default; });
+            if (defaultAction) {
+                this.executeAction(event, defaultAction, userEvent);
+            }
+        };
+        UserEventNotificationList.prototype.isDefaultAction = function (action) {
+            return action && action.default || false;
+        };
+        UserEventNotificationList.prototype.markAsRead = function (event, userEvent) {
             var _a;
             if (userEvent === null || userEvent === void 0 ? void 0 : userEvent.readDate)
                 return;
             (_a = this.readEvent) === null || _a === void 0 ? void 0 : _a.emit(userEvent);
         };
-        UserEventNotificationList.prototype.readAll = function (event) {
+        UserEventNotificationList.prototype.markAllAsRead = function (event) {
             var _a;
-            var unreadUserEvents = (this.userEvents.value || []).filter(function (value) { return !value.readDate; });
+            var unreadUserEvents = (this.$items.value || []).filter(function (value) { return !value.readDate; });
             if (!unreadUserEvents.length)
                 return;
             (_a = this.readEvents) === null || _a === void 0 ? void 0 : _a.emit(unreadUserEvents);
         };
-        UserEventNotificationList.prototype.executeAction = function (action, userEvent) {
-            // Execute then close popover
-            action.executeAction(userEvent);
-            this.dismiss();
+        UserEventNotificationList.prototype.executeAction = function (event, action, userEvent) {
+            return __awaiter(this, void 0, void 0, function () {
+                var res, err_1;
+                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();
+                            _b.label = 1;
+                        case 1:
+                            _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:
+                            _b.sent();
+                            _b.label = 3;
+                        case 3: return [3 /*break*/, 5];
+                        case 4:
+                            err_1 = _b.sent();
+                            console.error(err_1);
+                            return [3 /*break*/, 5];
+                        case 5: return [2 /*return*/];
+                    }
+                });
+            });
         };
         UserEventNotificationList.prototype.dismiss = function () {
             this.popoverController.dismiss();
         };
+        UserEventNotificationList.prototype.fetchMore = function (event) {
+            var _a;
+            return __awaiter(this, void 0, void 0, function () {
+                var result, data, err_2;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            if (!this._fetchMoreFn || this._fetchingMore)
+                                return [2 /*return*/];
+                            console.debug('[user-event-notification-list] Fetching more notifications...', event);
+                            this._fetchingMore = true;
+                            _b.label = 1;
+                        case 1:
+                            _b.trys.push([1, 3, 4, 5]);
+                            return [4 /*yield*/, this._fetchMoreFn()];
+                        case 2:
+                            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');
+                            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;
+                            return [3 /*break*/, 5];
+                        case 3:
+                            err_2 = _b.sent();
+                            console.error(err_2);
+                            this._fetchMoreFn = undefined;
+                            return [3 /*break*/, 5];
+                        case 4:
+                            this.markForCheck();
+                            this._fetchingMore = false;
+                            return [7 /*endfinally*/];
+                        case 5: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        UserEventNotificationList.prototype._initInfiniteScroll = function (threshold) {
+            return __awaiter(this, void 0, void 0, function () {
+                var panel;
+                var _this = this;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            if (this._fetchMoreSubscription)
+                                this._fetchMoreSubscription.unsubscribe();
+                            threshold = threshold || (this.mobile ? '15%' : '2%');
+                            return [4 /*yield*/, waitFor(function () { return !!_this.ionContent; })];
+                        case 1:
+                            _b.sent();
+                            return [4 /*yield*/, this.ionContent.getScrollElement()];
+                        case 2:
+                            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*/)
+                                .subscribe(function () { return _this.fetchMore(); });
+                            this.subscriptions.add(this._fetchMoreSubscription);
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
         UserEventNotificationList.prototype.markForCheck = function () {
             this.cd.markForCheck();
         };
@@ -30865,21 +31059,30 @@
     UserEventNotificationList.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-user-event-notification-list',
-                    template: "\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=\"userEvents|async|isNotEmptyArray\">\n      <ion-text color=\"primary\">\n        <a (click)=\"readAll($event)\">{{'SOCIAL.USER_EVENT.NOTIFICATION.READ_ALL' | translate}}</a>\n      </ion-text>\n    </ion-col>\n  </ion-row>\n\n  <ion-item *ngIf=\"userEvents|async|isEmptyArray\" lines=\"none\">\n    <ion-text color=\"dark\" class=\"text-italic\">{{'SOCIAL.USER_EVENT.NOTIFICATION.EMPTY' | translate}}</ion-text>\n  </ion-item>\n  <ion-item\n    *ngFor=\"let userEvent of userEvents | async\"\n    (click)=\"read($event, userEvent)\"\n  >\n\n    <ion-avatar slot=\"start\">\n\n      <img *ngIf=\"userEvent.avatar; else avatarIcon\" src=\"{{ userEvent.avatar }}\">\n\n      <ng-template #avatarIcon>\n        <app-icon\n          *ngIf=\"userEvent.avatarIcon\"\n          [ref]=\"userEvent.avatarIcon\"\n          height=\"40\"\n          width=\"40\"\n        ></app-icon>\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>\n          <p [class.unread]=\"!userEvent.readDate\" [innerHTML]=\"userEvent.message\"></p>\n        </ion-col>\n      </ion-row>\n      <ion-row *ngIf=\"userEvent.actions?.length\">\n        <ion-col>\n          <span *ngFor=\"let action of userEvent.actions\" class=\"action\">\n            <a (click)=\"executeAction(action, userEvent)\">\n              <app-icon *ngIf=\"action.iconRef\" slot=\"start\" height=\"20\" width=\"20\" [ref]=\"action.iconRef\"></app-icon>\n              {{ action.name }}\n            </a>\n          </span>\n        </ion-col>\n      </ion-row>\n      <ion-row>\n        <ion-col>\n          <app-icon\n            *ngIf=\"userEvent.icon\"\n            [ref]=\"userEvent.icon\"\n            height=\"16\"\n            width=\"16\"\n            style=\"vertical-align: sub; margin-right: 3px\"\n          ></app-icon>\n          <small>\n            <span>{{userEvent.creationDate|dateFromNow}}</span>\n            <span style=\"color: gray\">{{ ' | ' + (userEvent.creationDate|dateFormat:{time:true}) }}</span>\n          </small>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </ion-item>\n\n  <ion-row class=\"ion-list-footer column\">\n  </ion-row>\n\n</ion-list>\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; 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\"\n            [ref]=\"item.avatarIcon\"\n            height=\"40\"\n            width=\"40\"\n          ></app-icon>\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",
                     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}.unread{font-weight:700}.message{font-size:.9em}.message p{margin-top:5px;margin-bottom:5px}.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}.action a{margin-right:10px;cursor:pointer}.action app-icon{vertical-align:middle}"]
+                    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}"]
                 },] }
     ];
     UserEventNotificationList.ctorParameters = function () { return [
         { type: i0.ChangeDetectorRef },
         { type: i1$5.PopoverController },
+        { type: LocalSettingsService, decorators: [{ type: i0.Optional }] },
         { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [USER_EVENT_SERVICE,] }] }
     ]; };
     UserEventNotificationList.propDecorators = {
         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 }],
         readEvent: [{ type: i0.Output }],
-        readEvents: [{ type: i0.Output }]
+        readEvents: [{ type: i0.Output }],
+        ionContent: [{ type: i0.ViewChild, args: [i1$5.IonContent,] }],
+        ionItems: [{ type: i0.ViewChildren, args: [i1$5.IonItem,] }]
     };
 
     var AppUserEventNotificationIcon = /** @class */ (function () {
@@ -30955,7 +31158,7 @@
                                     keyboardClose: true,
                                     event: event,
                                     translucent: true,
-                                    cssClass: 'popover-large'
+                                    cssClass: 'popover-large popover-notifications'
                                 })];
                         case 1:
                             popover = _a.sent();
@@ -33853,6 +34056,463 @@
                 },] }
     ];
 
+    var JobProgressionTestService = /** @class */ (function () {
+        function JobProgressionTestService() {
+        }
+        JobProgressionTestService.prototype.listenChanges = function (id, options) {
+            return rxjs.interval(100).pipe(operators.take(111), operators.map(function (value) {
+                if (value <= 10) {
+                    return {
+                        id: id,
+                        name: "Job #" + id,
+                        current: 0,
+                        total: 0,
+                        message: "Progression pending"
+                    };
+                }
+                value = value - 10;
+                return {
+                    id: id,
+                    name: "Job #" + id,
+                    current: value,
+                    total: 100,
+                    message: "Progression " + value + "/100"
+                };
+            }));
+        };
+        return JobProgressionTestService;
+    }());
+    JobProgressionTestService.decorators = [
+        { type: i0.Injectable }
+    ];
+
+    var JobProgressionTestingPage = /** @class */ (function () {
+        function JobProgressionTestingPage() {
+            this.nJob = 0;
+            this.options = {
+                autoHide: true
+            };
+            this.job = new exports.JobProgression();
+            this.job.id = 0;
+            this.job.name = 'test';
+            this.job.current = 0;
+            this.job.total = 100;
+        }
+        JobProgressionTestingPage.prototype.incrementJob = function (value) {
+            this.job.current = Math.max(0, this.job.current + value);
+            this.job.message = "Fake progression (very long message very long message very long message very long message) " + this.job.current + "/100";
+            if (this.job.current > this.job.total) {
+                this.jobProgression.removeJob(0);
+                this.job.current = 0;
+            }
+            else if (!this.jobProgression.getProgression(0)) {
+                this.jobProgression.jobProgressions.push(this.job);
+            }
+            this.jobProgression.updateValue();
+        };
+        JobProgressionTestingPage.prototype.addJob = function () {
+            // Add fake job
+            this.nJob++;
+            this.jobProgression.addJob(this.nJob);
+        };
+        return JobProgressionTestingPage;
+    }());
+    JobProgressionTestingPage.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'job-progression-testing',
+                    template: "<ion-toolbar color=\"primary\">\n  <ion-title>Job progression</ion-title>\n</ion-toolbar>\n\n<ion-content class=\"ion-padding\">\n\n  <app-job-progression #jobProgression [debug]=\"true\" [options]=\"options\" ></app-job-progression>\n\n  <p>\n    <ion-button (click)=\"incrementJob(10)\">\n      +10\n    </ion-button>\n    <ion-button (click)=\"incrementJob(-10)\">\n      -10\n    </ion-button>\n  </p>\n  <p>\n    <ion-button (click)=\"addJob()\">Add Job</ion-button>\n  </p>\n</ion-content>\n",
+                    providers: [
+                        { provide: JobProgressionServiceToken, useClass: JobProgressionTestService }
+                    ]
+                },] }
+    ];
+    JobProgressionTestingPage.ctorParameters = function () { return []; };
+    JobProgressionTestingPage.propDecorators = {
+        jobProgression: [{ type: i0.ViewChild, args: ['jobProgression',] }]
+    };
+
+    var JobTestingModule = /** @class */ (function () {
+        function JobTestingModule() {
+        }
+        return JobTestingModule;
+    }());
+    JobTestingModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        i1$4.CommonModule,
+                        i1$2.TranslateModule.forChild(),
+                        SharedModule,
+                        JobModule
+                    ],
+                    declarations: [
+                        JobProgressionTestingPage
+                    ],
+                    exports: [
+                        JobProgressionTestingPage
+                    ]
+                },] }
+    ];
+
+    var UserEventTestService = /** @class */ (function (_super) {
+        __extends(UserEventTestService, _super);
+        function UserEventTestService(graphql, accountService, network, translate, environment) {
+            var _this = _super.call(this, graphql, accountService, network, translate, {
+                queries: {
+                    loadAll: null,
+                    loadAllWithContent: null
+                },
+                production: environment === null || environment === void 0 ? void 0 : environment.production
+            }) || this;
+            _this.graphql = graphql;
+            _this.accountService = accountService;
+            _this.network = network;
+            _this.translate = translate;
+            _this.environment = environment;
+            _this.userEvents = [];
+            return _this;
+        }
+        UserEventTestService.prototype.fromObject = function (source) {
+            return exports.UserEvent.fromObject(source);
+        };
+        UserEventTestService.prototype.add = function (entity) {
+            entity = this.processUserEvent(entity);
+            entity.id = this.userEvents.length + 1;
+            this.userEvents = __spread([
+                entity
+            ], this.userEvents);
+            this._countSubject.next((this._countSubject.value || 0) + 1);
+        };
+        UserEventTestService.prototype.asFilter = function (filter) {
+            return filter;
+        };
+        UserEventTestService.prototype.count = function (filter, options) {
+            return Promise.resolve(this.userEvents.length);
+        };
+        UserEventTestService.prototype.delete = function (entity) {
+            return Promise.resolve(undefined);
+        };
+        UserEventTestService.prototype.deleteAll = function (data, opts) {
+            return Promise.resolve(undefined);
+        };
+        UserEventTestService.prototype.listenAllChanges = function (filter, options) {
+            return rxjs.of();
+        };
+        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); });
+            Object.assign(toSave, entity);
+            return entity;
+        };
+        UserEventTestService.prototype.saveAll = function (data, opts) {
+            return __awaiter(this, void 0, void 0, function () {
+                var _b, _c, entity, e_1_1;
+                var e_1, _d;
+                return __generator(this, function (_e) {
+                    switch (_e.label) {
+                        case 0:
+                            _e.trys.push([0, 5, 6, 7]);
+                            _b = __values((data || [])), _c = _b.next();
+                            _e.label = 1;
+                        case 1:
+                            if (!!_c.done) return [3 /*break*/, 4];
+                            entity = _c.value;
+                            return [4 /*yield*/, this.save(entity)];
+                        case 2:
+                            _e.sent();
+                            _e.label = 3;
+                        case 3:
+                            _c = _b.next();
+                            return [3 /*break*/, 1];
+                        case 4: return [3 /*break*/, 7];
+                        case 5:
+                            e_1_1 = _e.sent();
+                            e_1 = { error: e_1_1 };
+                            return [3 /*break*/, 7];
+                        case 6:
+                            try {
+                                if (_c && !_c.done && (_d = _b.return)) _d.call(_b);
+                            }
+                            finally { if (e_1) throw e_1.error; }
+                            return [7 /*endfinally*/];
+                        case 7: return [2 /*return*/, Promise.resolve(this.userEvents)];
+                    }
+                });
+            });
+        };
+        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);
+        };
+        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 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 Promise.resolve(res);
+        };
+        return UserEventTestService;
+    }(AbstractUserEventService));
+    UserEventTestService.decorators = [
+        { type: i0.Injectable }
+    ];
+    UserEventTestService.ctorParameters = function () { return [
+        { type: GraphqlService },
+        { type: AccountService },
+        { type: NetworkService },
+        { type: i1$2.TranslateService },
+        { type: Environment, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [ENVIRONMENT,] }] }
+    ]; };
+
+    var moment$a = momentImported__namespace;
+    var UserEventTestingPage = /** @class */ (function () {
+        function UserEventTestingPage(userEventService, router, alertController, translateService) {
+            var _this = this;
+            this.userEventService = userEventService;
+            this.router = router;
+            this.alertController = alertController;
+            this.translateService = translateService;
+            userEventService.registerListener({
+                accept: function (userEvent) { return true; },
+                onReceived: function (userEvent) {
+                    _this.customize(userEvent);
+                    return userEvent;
+                }
+            });
+            userEventService.registerListener({
+                accept: function (userEvent) { return userEvent.level == "DEBUG"; },
+                onRead: function (userEvent) { _this.showMessage("debug message read "); }
+            });
+        }
+        UserEventTestingPage.prototype.customize = function (userEvent) {
+            // Choose avatarIcon
+            switch (userEvent.level) {
+                case 'ERROR':
+                    userEvent.avatarIcon = { icon: 'close-outline', color: 'danger' };
+                    break;
+                case 'WARNING':
+                    userEvent.avatarIcon = { icon: 'warning-outline', color: 'warning' };
+                    break;
+                case 'INFO':
+                    userEvent.avatarIcon = { icon: 'information-circle-outline' };
+                    break;
+                case 'DEBUG':
+                    userEvent.avatarIcon = { icon: 'cog', color: "medium" };
+                    break;
+            }
+            // Choose icon
+            switch (userEvent.type) {
+                case 'message':
+                    userEvent.icon = { matIcon: 'inbox', color: 'accent' };
+                    break;
+                case 'upload':
+                    userEvent.icon = { matIcon: 'file_upload' };
+                    break;
+                case 'download':
+                    userEvent.icon = { matIcon: 'file_download' };
+                    break;
+            }
+        };
+        UserEventTestingPage.prototype.addNotification = function () {
+            this.userEventService.add(exports.UserEvent.fromObject({
+                issuer: 'system',
+                recipient: 'me',
+                type: 'message',
+                level: 'INFO',
+                message: 'message test message test message test message test message test message test message test message test',
+                creationDate: moment$a(),
+            }));
+        };
+        UserEventTestingPage.prototype.addError = function () {
+            this.userEventService.add(exports.UserEvent.fromObject({
+                issuer: 'system',
+                recipient: 'me',
+                type: 'upload',
+                level: 'ERROR',
+                message: 'message error',
+                creationDate: moment$a(),
+            }));
+        };
+        UserEventTestingPage.prototype.addWarning = function () {
+            this.userEventService.add(exports.UserEvent.fromObject({
+                issuer: 'system',
+                recipient: 'me',
+                type: 'download',
+                level: 'WARNING',
+                message: 'message warning',
+                creationDate: moment$a(),
+            }));
+        };
+        UserEventTestingPage.prototype.addDebug = function () {
+            this.userEventService.add(exports.UserEvent.fromObject({
+                issuer: 'system',
+                recipient: 'me',
+                type: 'debug',
+                level: 'DEBUG',
+                message: 'message DEBUG',
+                creationDate: moment$a(),
+            }));
+        };
+        UserEventTestingPage.prototype.addNotificationWithLink = function () {
+            var _this = this;
+            this.userEventService.add(exports.UserEvent.fromObject({
+                issuer: 'system',
+                recipient: 'me',
+                type: 'message',
+                level: 'INFO',
+                message: 'message with link',
+                creationDate: moment$a(),
+                actions: [{
+                        name: 'click here',
+                        iconRef: {
+                            icon: 'arrow-forward-outline'
+                        },
+                        executeAction: function (event) { _this.router.navigateByUrl('/'); }
+                    }]
+            }));
+        };
+        UserEventTestingPage.prototype.addNotificationWithAction = function () {
+            var _this = this;
+            this.userEventService.add(exports.UserEvent.fromObject({
+                issuer: 'system',
+                recipient: 'me',
+                type: 'message',
+                level: 'INFO',
+                message: 'message with action',
+                creationDate: moment$a(),
+                actions: [
+                    {
+                        name: 'click here',
+                        iconRef: {
+                            icon: 'arrow-forward-outline',
+                            color: 'warning'
+                        },
+                        executeAction: function (event) { _this.showMessage('action 1'); }
+                    },
+                    {
+                        name: 'click here 2',
+                        iconRef: {
+                            matIcon: 'settings_applications',
+                            color: 'secondary'
+                        },
+                        executeAction: function (event) { _this.showMessage('action 2'); }
+                    }
+                ]
+            }));
+        };
+        UserEventTestingPage.prototype.addNotificationWithDefaultAction = function () {
+            var _this = this;
+            this.userEventService.add(exports.UserEvent.fromObject({
+                issuer: 'system',
+                recipient: 'me',
+                type: 'message',
+                level: 'INFO',
+                message: 'message with action',
+                creationDate: moment$a(),
+                actions: [
+                    {
+                        default: true,
+                        name: 'default',
+                        executeAction: function (event) { _this.showMessage('default action'); }
+                    }
+                ]
+            }));
+        };
+        UserEventTestingPage.prototype.showMessage = function (text) {
+            return Alerts.showError(text, this.alertController, this.translateService);
+        };
+        return UserEventTestingPage;
+    }());
+    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"
+                },] }
+    ];
+    UserEventTestingPage.ctorParameters = function () { return [
+        { type: UserEventTestService, decorators: [{ type: i0.Inject, args: [USER_EVENT_SERVICE,] }] },
+        { type: i3.Router },
+        { type: i1$5.AlertController },
+        { type: i1$2.TranslateService }
+    ]; };
+    UserEventTestingPage.propDecorators = {
+        notification: [{ type: i0.ViewChild, args: ['notification',] }]
+    };
+
+    var UserEventTestingModule = /** @class */ (function () {
+        function UserEventTestingModule() {
+        }
+        return UserEventTestingModule;
+    }());
+    UserEventTestingModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        i1$4.CommonModule,
+                        i1$2.TranslateModule.forChild(),
+                        SharedModule,
+                        UserEventModule
+                    ],
+                    declarations: [
+                        UserEventTestingPage
+                    ],
+                    exports: [
+                        UserEventTestingPage
+                    ]
+                },] }
+    ];
+
+    var SOCIAL_TESTING_PAGES = [
+        { label: 'Social components', divider: true },
+        { label: 'User event', page: '/testing/social/user-event' },
+        { label: 'Job progression', page: '/testing/social/job-progression' }
+    ];
+    var routes$6 = [
+        {
+            path: 'job-progression',
+            pathMatch: 'full',
+            component: JobProgressionTestingPage
+        },
+        {
+            path: 'user-event',
+            pathMatch: 'full',
+            component: UserEventTestingPage
+        },
+    ];
+    var SocialTestingModule = /** @class */ (function () {
+        function SocialTestingModule() {
+        }
+        return SocialTestingModule;
+    }());
+    SocialTestingModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        i1$4.CommonModule,
+                        i1$2.TranslateModule.forChild(),
+                        i3.RouterModule.forChild(routes$6),
+                        JobTestingModule,
+                        UserEventTestingModule
+                    ],
+                },] }
+    ];
+
     // Environment
 
     /**
@@ -34008,6 +34668,9 @@
     exports.JobProgressionComponent = JobProgressionComponent;
     exports.JobProgressionService = JobProgressionService;
     exports.JobProgressionServiceToken = JobProgressionServiceToken;
+    exports.JobProgressionTestService = JobProgressionTestService;
+    exports.JobProgressionTestingPage = JobProgressionTestingPage;
+    exports.JobTestingModule = JobTestingModule;
     exports.JobUtils = JobUtils;
     exports.KEYBOARD_HIDE_DELAY_MS = KEYBOARD_HIDE_DELAY_MS;
     exports.LAT_LONG_DEFAULT_MAX_DECIMALS = LAT_LONG_DEFAULT_MAX_DECIMALS;
@@ -34087,6 +34750,7 @@
     exports.SETTINGS_TRANSIENT_PROPERTIES = SETTINGS_TRANSIENT_PROPERTIES;
     exports.SHARED_MATERIAL_TESTING_PAGES = SHARED_MATERIAL_TESTING_PAGES;
     exports.SHARED_TESTING_PAGES = SHARED_TESTING_PAGES;
+    exports.SOCIAL_TESTING_PAGES = SOCIAL_TESTING_PAGES;
     exports.SPACE_PLACEHOLDER_CHAR = SPACE_PLACEHOLDER_CHAR;
     exports.SelectPeerModal = SelectPeerModal;
     exports.ServerErrorCodes = ServerErrorCodes;
@@ -34115,6 +34779,7 @@
     exports.SocialErrorCodes = SocialErrorCodes;
     exports.SocialModule = SocialModule;
     exports.SocialModuleOptionsToken = SocialModuleOptionsToken;
+    exports.SocialTestingModule = SocialTestingModule;
     exports.StartableService = StartableService;
     exports.StatusById = StatusById;
     exports.StatusIds = StatusIds;
@@ -34145,6 +34810,9 @@
     exports.UriUtils = UriUtils;
     exports.UserEventFragments = UserEventFragments;
     exports.UserEventModule = UserEventModule;
+    exports.UserEventTestService = UserEventTestService;
+    exports.UserEventTestingModule = UserEventTestingModule;
+    exports.UserEventTestingPage = UserEventTestingPage;
     exports.UserEventTypes = UserEventTypes;
     exports.UsersPage = UsersPage;
     exports.accountToString = accountToString;